Improved Account manage layout, added Permissions display to Profile Page

Wave/Components/Account/Pages/Manage/Index.razor

@@ -13,9 +13,10 @@
 
 <PageTitle>Profile</PageTitle>
 
-<h3 class="text-xl mb-3">Profile</h3>
+<div class="flex gap-4 flex-wrap">
+	<section class="max-w-xs" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post">
+		<h2 class="text-2xl lg:text-4xl mb-3">Profile</h2>
 
-<div class="max-w-xs" Model="Input" FormName="profile" OnValidSubmit="OnValidSubmitAsync" method="post">
 		<label class="form-control w-full">
 			<div class="label">
 				<span class="label-text">Username</span>
@@ -27,7 +28,7 @@
 		@if (User?.ProfilePicture is not null) {
 			<div class="avatar w-24 my-3">
 				<div class="rounded">
-                <img src="/images/@(User.ProfilePicture.ImageId)" alt="" loading="lazy" />
+					<img src="/images/@(User.ProfilePicture.ImageId)" alt="" loading="lazy"/>
 				</div>
 			</div>
 		}
@@ -37,10 +38,76 @@
 			</div>
 			<FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
 		</label>
+	</section>
+	<section>
+        <h2 class="text-2xl lg:text-4xl mb-3">Permissions</h2>
+        <ul>
+	        <li class="flex gap-2 content-center">
+                <AuthorizeView Policy="ArticleEditPermissions">
+			        <Authorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-success">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </Authorized>
+			        <NotAuthorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-error">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </NotAuthorized>
+		        </AuthorizeView>
+                Create or Edit Articles
+	        </li>
+			<li class="flex gap-2 content-center">
+				<AuthorizeView Policy="ArticleReviewPermissions">
+			        <Authorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-success">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </Authorized>
+			        <NotAuthorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-error">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </NotAuthorized>
+		        </AuthorizeView>
+		        Review Articles
+	        </li>
+			<li class="flex gap-2 content-center">
+				<AuthorizeView Policy="ArticleDeletePermissions">
+			        <Authorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-success">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </Authorized>
+			        <NotAuthorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-error">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </NotAuthorized>
+		        </AuthorizeView>
+		        Delete Articles
+	        </li>
+			<li class="flex gap-2 content-center">
+				<AuthorizeView Policy="RoleAssignPermissions">
+			        <Authorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-success">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="M9 12.75 11.25 15 15 9.75M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </Authorized>
+			        <NotAuthorized>
+				        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-error">
+					        <path stroke-linecap="round" stroke-linejoin="round" d="m9.75 9.75 4.5 4.5m0-4.5-4.5 4.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
+				        </svg>
+			        </NotAuthorized>
+		        </AuthorizeView>
+		        Assign Roles to User
+	        </li>
+        </ul>
+	</section>
 </div>
 
 @code {
-    private ApplicationUser? User { get; set; } = default!;
+    private ApplicationUser? User { get; set; }
     private string? Username { get; set; }
 
     [CascadingParameter]

Wave/Components/Account/Shared/ManageLayout.razor

@@ -1,17 +1,15 @@
 @inherits LayoutComponentBase
 @layout AccountLayout
 
-<h1>Manage your account</h1>
+<div class="flex gap-x-8 gap-y-4 flex-wrap">
-
+	<div class="max-w-xs">
-<div>
+		<div class="bg-base-200 p-4 rounded">
-    <h2>Change your account settings</h2>
+			<ManageNavMenu/>
-    <hr />
-    <div class="row">
-        <div class="col-md-3">
-            <ManageNavMenu />
 		</div>
-        <div class="col-md-9">
+	</div>
+	<div>
+		<h1 class="text-3xl lg:text-5xl mb-3">Manage your account</h1>
+
 		@Body
 	</div>
-    </div>
 </div>

Wave/Components/Account/Shared/ManageNavMenu.razor

@@ -3,35 +3,34 @@
 
 @inject SignInManager<ApplicationUser> SignInManager
 
-<ul class="nav nav-pills flex-column">
+<ul class="menu" role="navigation">
     <li class="nav-item">
-        <NavLink class="nav-link" href="Account/Manage" Match="NavLinkMatch.All">Profile</NavLink>
+        <NavLink href="Account/Manage" Match="NavLinkMatch.All">Profile</NavLink>
     </li>
     <li class="nav-item">
-        <NavLink class="nav-link" href="Account/Manage/Email">Email</NavLink>
+        <NavLink href="Account/Manage/Email">Email</NavLink>
     </li>
     <li class="nav-item">
-        <NavLink class="nav-link" href="Account/Manage/ChangePassword">Password</NavLink>
+        <NavLink href="Account/Manage/ChangePassword">Password</NavLink>
     </li>
-    @if (hasExternalLogins)
+    @if (_hasExternalLogins) {
-    {
         <li class="nav-item">
-            <NavLink class="nav-link" href="Account/Manage/ExternalLogins">External logins</NavLink>
+            <NavLink href="Account/Manage/ExternalLogins">External logins</NavLink>
         </li>
     }
     <li class="nav-item">
-        <NavLink class="nav-link" href="Account/Manage/TwoFactorAuthentication">Two-factor authentication</NavLink>
+        <NavLink href="Account/Manage/TwoFactorAuthentication">Two-factor authentication</NavLink>
     </li>
     <li class="nav-item">
-        <NavLink class="nav-link" href="Account/Manage/PersonalData">Personal data</NavLink>
+        <NavLink href="Account/Manage/PersonalData">Personal data</NavLink>
     </li>
 </ul>
 
 @code {
-    private bool hasExternalLogins;
+    private bool _hasExternalLogins;
 
     protected override async Task OnInitializedAsync()
     {
-        hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
+        _hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
     }
 }