Site layout and theme (#70)

* basic layout changes * improve layouts * index * using namespace * fix failing tests * fix failing tests * fix login display being visible on mobile view * sticky nav * upgrade to bootstrap 5.3 add theme toggling * test ThemeToggle * apply theme to password reset and reset request * add boostrap js to reset and reset request * remove debug code * add pages for explore, home, and about * custom scrollbar * remove unnecessary TODO
playhvzorg · Feb 27, 2023 · 22819aa · 22819aa
1 parent a4a9a62
commit 22819aa
Show file tree

Hide file tree

Showing 25 changed files with 398 additions and 100 deletions.
diff --git a/HVZ.Tests/HVZ.Web.Components.Tests/ImageUploadTest.razor b/HVZ.Tests/HVZ.Web.Components.Tests/ImageUploadTest.razor
@@ -78,7 +78,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="@srcString" height="@sizeInt" width="@sizeInt">
+            @<img src="@srcString" class="rounded" height="@sizeInt" width="@sizeInt">
         );
 
         var imgName = cut.Find("#img-name");
@@ -109,7 +109,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="@srcString" height="@sizeInt" width="@sizeInt">
+            @<img src="@srcString" class="rounded" height="@sizeInt" width="@sizeInt">
         );
 
         var imgName = cut.Find("#img-name");

diff --git a/HVZ.Tests/HVZ.Web.Components.Tests/LoginDisplayTest.razor b/HVZ.Tests/HVZ.Web.Components.Tests/LoginDisplayTest.razor
@@ -6,10 +6,17 @@
 @code
 {
     TestAuthorizationContext? authContext;
+    Mock<IOrgRepo> mockOrgRepo = new Mock<IOrgRepo>();
+    Mock<IUserRepo> mockUserRepo = new Mock<IUserRepo>();
+    Mock<ImageService> mockImageService = new Mock<ImageService>();
 
     [OneTimeSetUp]
     public void Setup()
     {
+        mockUserRepo.Setup(repo => repo.GetUserById(It.IsAny<string>())).ReturnsAsync(new User("", "", ""));
+        Services.AddSingleton<IOrgRepo>(mockOrgRepo.Object);
+        Services.AddSingleton<IUserRepo>(mockUserRepo.Object);
+        Services.AddSingleton<ImageService>(mockImageService.Object);
         authContext = this.AddTestAuthorization();
     }
 
@@ -30,6 +37,9 @@
     public void Test_LoggedInSeesLogOutButton()
     {
         authContext?.SetAuthorized("TEST USER");
+        authContext?.SetClaims(
+            new System.Security.Claims.Claim("DatabaseId", "1234")
+        );
 
         var cut = Render(
             @<LoginDisplay />

diff --git a/HVZ.Tests/HVZ.Web.Components.Tests/ThemeToggleTest.razor b/HVZ.Tests/HVZ.Web.Components.Tests/ThemeToggleTest.razor
@@ -0,0 +1,70 @@
+@using HVZ.Web.Shared.Ui_Helpers
+
+@inherits Bunit.TestContext
+
+@code {
+
+    [OneTimeSetUp]
+    public void Setup()
+    {
+
+    }
+
+    [Test]
+    public void Test_LightMode()
+    {
+        JSInterop.Setup<string>("getThemePreference", _ => true).SetResult("light");
+
+        var cut = RenderComponent<ThemeToggle>();
+
+        cut.Render();
+
+        var icon = cut.Find("i");
+        var toggle = cut.Find("button");
+        icon.MarkupMatches(@<i class="fa-solid fa-sun"></i>);
+        toggle.MarkupMatches(@<button diff:ignoreChildren class="btn btn-outline-dark"></button>);
+    }
+
+    [Test]
+    public void Test_DarkMode()
+    {
+        JSInterop.Setup<string>("getThemePreference", _ => true).SetResult("dark");
+
+        var cut = RenderComponent<ThemeToggle>();
+
+        cut.Render();
+
+        var icon = cut.Find("i");
+        var toggle = cut.Find("button");
+        icon.MarkupMatches(@<i class="fa-solid fa-moon"></i>);
+        toggle.MarkupMatches(@<button diff:ignoreChildren class="btn btn-outline-light"></button>);
+    }
+
+    [Test]
+    public void Test_ToggleTheme()
+    {
+        JSInterop.Setup<String>("getThemePreference", _ => true).SetResult("light");
+        var savePref = JSInterop.SetupVoid("saveThemePreference", _ => true);
+        var applyTheme = JSInterop.SetupVoid("applyTheme", _ => true);
+
+        var cut = RenderComponent<ThemeToggle>();
+
+        cut.Render();
+
+        var toggle = cut.Find("button");
+        toggle.MarkupMatches(
+            @<button class="btn btn-outline-dark">
+                <i class="fa-solid fa-sun"></i>
+        </button>);
+
+        toggle.Click();
+        savePref.SetVoidResult();
+        applyTheme.SetVoidResult();
+
+        toggle.MarkupMatches(
+            @<button class="btn btn-outline-light">
+                <i class="fa-solid fa-moon"></i>
+            </button>);
+    }
+
+}
diff --git a/HVZ.Tests/HVZ.Web.Components.Tests/ThumbnailTest.razor b/HVZ.Tests/HVZ.Web.Components.Tests/ThumbnailTest.razor
@@ -58,7 +58,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="https://ui-avatars.com/api/?name=Kevin+Smith&size=128">
+            @<img class:ignore src="https://ui-avatars.com/api/?name=Kevin+Smith&size=128">
         );
     }
 
@@ -74,7 +74,7 @@
         var img = cut.Find("img");
         string expectedsrc = $"https://ui-avatars.com/api/?name=Kevin+Smith&size={(int)size}";
         img.MarkupMatches(
-            @<img src="@expectedsrc">
+            @<img class:ignore src="@expectedsrc">
         );
     }
 
@@ -87,7 +87,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="https://ui-avatars.com/api/?name=Test+Org&size=128">
+            @<img class:ignore src="https://ui-avatars.com/api/?name=Test+Org&size=128">
         );
     }
 
@@ -103,7 +103,7 @@
         var img = cut.Find("img");
         string expectedsrc = $"https://ui-avatars.com/api/?name=Test+Org&size={(int)size}";
         img.MarkupMatches(
-            @<img src="@expectedsrc">
+            @<img class:ignore src="@expectedsrc">
         );
     }
 
@@ -116,7 +116,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="images/users/3_thumbnail_128.jpeg">
+            @<img class:ignore src="images/users/3_thumbnail_128.jpeg">
         );
     }
 
@@ -132,7 +132,7 @@
         var img = cut.Find("img");
         string expectedsrc = $"images/users/3_thumbnail_{(int)size}.jpeg";
         img.MarkupMatches(
-            @<img src="@expectedsrc">
+            @<img class:ignore src="@expectedsrc">
         );
     }
 
@@ -145,7 +145,7 @@
 
         var img = cut.Find("img");
         img.MarkupMatches(
-            @<img src="images/orgs/1_thumbnail_128.jpeg">
+            @<img class:ignore src="images/orgs/1_thumbnail_128.jpeg">
         );
     }
 
@@ -161,26 +161,7 @@
         var img = cut.Find("img");
         string expectedsrc = $"images/orgs/1_thumbnail_{(int)size}.jpeg";
         img.MarkupMatches(
-            @<img src="@expectedsrc">
-        );
-    }
-
-    [Test]
-    public void Test_AttributeSplatting()
-    {
-        var cut = Render(
-            @<Thumbnail UserId="@userWithImageId" id="thumbnail" class="img" />
-        );
-
-        var imgById = cut.Find("#thumbnail");
-        var imgByClass = cut.Find(".img");
-
-        imgById.MarkupMatches(
-            @<img src="images/users/3_thumbnail_128.jpeg" id="thumbnail" class="img">
-        );
-
-        imgByClass.MarkupMatches(
-            @<img src="images/users/3_thumbnail_128.jpeg" id="thumbnail" class="img">
+            @<img class:ignore src="@expectedsrc">
         );
     }
 }
diff --git a/HVZ.Web/Pages/About.razor b/HVZ.Web/Pages/About.razor
@@ -0,0 +1,52 @@
+@using Microsoft.AspNetCore.Components.Authorization
+@using HVZ.Web.Services
+@inject NavigationManager Navigation
+@inject AuthenticationStateProvider AuthenticationStateProvider
+@inject EmailService Email
+@page "/about"
+
+<PageTitle>PlayHVZ</PageTitle>
+
+<div class="container">
+    <h1>Welcome to PlayHVZ.org</h1>
+    @*This lives here for now until we create a settings page*@
+    <HVZ.Web.Shared.Ui_Helpers.ThemeToggle />
+    <p class="mb-3">PlayHVZ is a tool for managing games of Humans vs Zombies.</p>
+    <CascadingAuthenticationState>
+
+        <AuthorizeView>
+
+            <Authorized>
+                <p>Welcome back</p>
+            </Authorized>
+            <NotAuthorized>
+                <div class="row d-flex justify-content-center">
+                    <div class="col-auto text-center mb-3">
+                        <h4>New to PlayHVZ?</h4>
+                        <a href="Account/Register" class="btn btn-primary btn-lg">Register</a>
+                    </div>
+                    <div class="col-auto text-center mb-3">
+                        <h4>Returning user?</h4>
+                        <a href="Account/Login" class="btn btn-primary btn-lg">Login</a>
+                    </div>
+                </div>
+            </NotAuthorized>
+
+        </AuthorizeView>
+
+    </CascadingAuthenticationState>
+
+
+    <h1>Features</h1>
+    <ul>
+        <li>
+            Organization management
+        </li>
+        <li>
+            OZs
+        </li>
+        <li>
+            Discord integration
+        </li>
+    </ul>
+</div>
diff --git a/HVZ.Web/Pages/Account/Login.cshtml b/HVZ.Web/Pages/Account/Login.cshtml
@@ -6,14 +6,15 @@
 
 @{
 }
-
+<html lang="en" data-bs-theme="dark">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap-dark.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <link href="css/site.css" rel="stylesheet" />
     <link href="HVZ.Web.styles.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/168d40dd96.js" crossorigin="anonymous"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 
@@ -64,7 +65,8 @@
             </div>
         </div>
     </div>
-
-
+    <script src="js/theme.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 </body>
-<script src="_framework/blazor.server.js"></script>
+<script src="_framework/blazor.server.js"></script>
+</html>
diff --git a/HVZ.Web/Pages/Account/Register.cshtml b/HVZ.Web/Pages/Account/Register.cshtml
@@ -7,13 +7,15 @@
 @{
 }
 
+<html lang="en" data-bs-theme="light">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap-dark.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <link href="css/site.css" rel="stylesheet" />
     <link href="HVZ.Web.styles.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/168d40dd96.js" crossorigin="anonymous"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 
@@ -71,5 +73,8 @@
 
         </div>
     </div>
+    <script src="js/theme.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 </body>
 <script src="_framework/blazor.server.js"></script>
+</html>
diff --git a/HVZ.Web/Pages/Account/Reset.cshtml b/HVZ.Web/Pages/Account/Reset.cshtml
@@ -9,9 +9,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap-dark.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <link href="css/site.css" rel="stylesheet" />
     <link href="HVZ.Web.styles.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/168d40dd96.js" crossorigin="anonymous"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <title>Reset Password</title>
@@ -55,7 +56,9 @@
         </div>
         }
     </div>
+    <script src="js/theme.js"></script>
 
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 
 </body>
 <script src="_framework/blazor.server.js"></script>
diff --git a/HVZ.Web/Pages/Account/ResetRequest.cshtml b/HVZ.Web/Pages/Account/ResetRequest.cshtml
@@ -9,9 +9,10 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap-dark.min.css" />
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-GLhlTQ8iRABdZLl6O3oVMWSktQOp6b7In1Zl3/Jr59b6EGGoI1aFkw7cmDA6j6gD" crossorigin="anonymous">
     <link href="css/site.css" rel="stylesheet" />
     <link href="HVZ.Web.styles.css" rel="stylesheet" />
+    <script src="https://kit.fontawesome.com/168d40dd96.js" crossorigin="anonymous"></script>
     <component type="typeof(HeadOutlet)" render-mode="ServerPrerendered" />
 </head>
 <title>Reset Password</title>
@@ -45,7 +46,7 @@
             <h2 class="text-center">Success! Please check your email.</h2>
         }
     </div>
-
-
+    <script src="js/theme.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-w76AqPfDkMBDXo30jS1Sgez6pr3x5MlQ1ZAGC+nuZB+EYdgRZgiwxhTBTkF7CXvN" crossorigin="anonymous"></script>
 </body>
-<script src="_framework/blazor.server.js"></script>
+<script src="_framework/blazor.server.js"></script>
diff --git a/HVZ.Web/Pages/Explore.razor b/HVZ.Web/Pages/Explore.razor
@@ -0,0 +1,7 @@
+@page "/explore"
+
+<h1>Explore</h1>
+
+@code {
+
+}