Fix Ui Issues in MudBlazor

ubhaya · Jan 17, 2024 · c0193f6 · c0193f6
1 parent 50890c8
commit c0193f6
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 45 deletions.
diff --git a/...ed/src/WebUi/WebUi/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs b/...ed/src/WebUi/WebUi/Components/Account/IdentityComponentsEndpointRouteBuilderExtensions.cs
@@ -40,11 +40,11 @@ public static IEndpointConventionBuilder MapAdditionalIdentityEndpoints(this IEn
             var properties = signInManager.ConfigureExternalAuthenticationProperties(provider, redirectUrl);
             return TypedResults.Challenge(properties, [provider]);
         });
-
-        accountGroup.MapPost("/Logout", async (
+        
+        accountGroup.MapGet("/Logout", async (
             ClaimsPrincipal user,
             SignInManager<ApplicationUser> signInManager,
-            [FromForm] string returnUrl) =>
+            [FromQuery] string returnUrl) =>
         {
             await signInManager.SignOutAsync();
             return TypedResults.LocalRedirect($"~/{returnUrl}");

diff --git a/src/content/CleanArchitecture.MudBlazored/src/WebUi/WebUi/Components/Layout/MainLayout.razor b/src/content/CleanArchitecture.MudBlazored/src/WebUi/WebUi/Components/Layout/MainLayout.razor
@@ -2,39 +2,38 @@
 
 <MyMudThemeProvider />
 
-<MudLayout>
-    <MudAppBar Elevation="0">
-        <MudIconButton Icon="@Icons.Material.Filled.Menu" Color="Color.Inherit" Edge="Edge.Start" OnClick="DrawerToggle" />
-        <MudSpacer />
-
-        <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Color="Color.Inherit" Link="https://mudblazor.com/" Target="_blank" />
-        <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Color="Color.Inherit" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
-    </MudAppBar>
-    <MudDrawer @bind-Open="_drawerOpen" Elevation="1">
-        <MudDrawerHeader>
-            <MudText Typo="Typo.h6">WebUi</MudText>
-        </MudDrawerHeader>
-        <NavMenu />
-    </MudDrawer>
-    <MudMainContent>
+<div class="page mud-layout">
+
+    <div class="sidebar mud-elevation-1">
+        <div class="top-row mud-drawer-head">
+            <div>
+                <a class="navbar-brand" href="https://mudblazor.com/" target="_blank">MudBlazor</a>
+            </div>
+        </div>
+
+        <input type="checkbox" title="Navigation menu" class="navbar-toggler" />
+        <div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+            <NavMenu />
+        </div>
+
+    </div>
+
+     <main>
+        <div class="top-row px-4">
+            <MudIconButton Icon="@Icons.Custom.Brands.MudBlazor" Style="color: white;" Link="https://mudblazor.com/" Target="_blank" />
+            <MudIconButton Icon="@Icons.Custom.Brands.GitHub" Style="color: white;" Link="https://github.com/MudBlazor/MudBlazor/" Target="_blank" />
+        </div>
+
         <MudContainer MaxWidth="MaxWidth.ExtraExtraLarge" Class="my-2 pt-2">
             @Body
         </MudContainer>
-    </MudMainContent>
-</MudLayout>
+    </main>
+</div>
 
 <div id="blazor-error-ui">
     An unhandled error has occurred.
     <a href="" class="reload">Reload</a>
     <a class="dismiss">🗙</a>
 </div>
 
-@code {
-    bool _drawerOpen = true;
-
-    void DrawerToggle()
-    {
-        _drawerOpen = !_drawerOpen;
-    }
-}
 
diff --git a/src/content/CleanArchitecture.MudBlazored/src/WebUi/WebUi/Components/Layout/NavMenu.razor b/src/content/CleanArchitecture.MudBlazored/src/WebUi/WebUi/Components/Layout/NavMenu.razor
@@ -2,7 +2,7 @@
     <MudNavLink Href="" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Home">Home</MudNavLink>
     <MudNavLink Href="counter" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Add">Counter</MudNavLink>
     <MudNavLink Href="weather" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Weather</MudNavLink>
-	<MudNavLink Href="auth" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Auth Required</MudNavLink>
+	<MudNavLink Href="auth" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.VerifiedUser">Auth Required</MudNavLink>
 
 	<AuthorizeView>
 		<MudNavLink Href="claims" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Pages">Claims</MudNavLink>
@@ -26,20 +26,11 @@
 
 	<AuthorizeView>
 		<Authorized>
-			<MudNavLink Href="Account/Manage" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">@context.User.Identity?.Name</MudNavLink>
-			<MudNavLink Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Logout" >
-				<form action="Account/Logout" method="post">
-					<AntiforgeryToken />
-					<input type="hidden" name="ReturnUrl" value="@_currentUrl"/>
-					<MudButton ButtonType="ButtonType.Submit" Variant="Variant.Text">
-						Logout
-					</MudButton>
-				</form>
-			</MudNavLink>
-
+			<MudNavLink Href="Account/Manage" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Person">@context.User.Identity?.Name</MudNavLink>
+			<MudNavLink Href="@($"Account/Logout?returnUrl={_currentUrl}")" Match="NavLinkMatch.All" Icon="@Icons.Material.Filled.Logout" >Logout</MudNavLink>
 		</Authorized>
 		<NotAuthorized>
-			<MudNavLink Href="Account/Register" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.List">Register</MudNavLink>
+			<MudNavLink Href="Account/Register" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.AppRegistration">Register</MudNavLink>
 			<MudNavLink Href="Account/Login" Match="NavLinkMatch.Prefix" Icon="@Icons.Material.Filled.Login">Login</MudNavLink>
 		</NotAuthorized>
 	</AuthorizeView>

diff --git a/src/content/CleanArchitecture.MudBlazored/tests/WebUi.AcceptanceTests/Pages/Selectors.cs b/src/content/CleanArchitecture.MudBlazored/tests/WebUi.AcceptanceTests/Pages/Selectors.cs
@@ -5,17 +5,17 @@ public class Selectors
     public class LoginPage
     {
         public const string EmailFieldSelector
-            = "//html/body/div[1]/div/div/div/div[1]/section/form/div[1]/input";
+            = "//html/body/div[1]/main/div[2]/div/div[1]/section/form/div[1]/input";
 
         public const string PasswordFieldSelector
-            = "//html/body/div[1]/div/div/div/div[1]/section/form/div[2]/input";
+            = "//html/body/div[1]/main/div[2]/div/div[1]/section/form/div[2]/input";
 
         public const string LoginButtonSelector
-            = "//html/body/div[1]/div/div/div/div[1]/section/form/div[4]/button";
+            = "//html/body/div[1]/main/div[2]/div/div[1]/section/form/div[4]/button";
 
         public const string ProfileLinkTextSelector
             = "a[href='Account/Manage']";
         public const string InvalidLoginAttemptMessageSelector 
-            = "//html/body/div[1]/div/div/div/div[1]/section/div";
+            = "//html/body/div[1]/main/div[2]/div/div[1]/section/div";
     }
 }