Improved Account manage layout, added Permissions display to Profile Page

This commit is contained in:
Mia Rose Winter 2024-01-16 15:27:03 +01:00
parent 4a6599d165
commit c63b60a7de
Signed by: miawinter
GPG key ID: 4B6F6A83178F595E
4 changed files with 111 additions and 47 deletions

View file

@ -13,34 +13,101 @@
<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>
</div>
<input class="input input-bordered w-full" type="text" value="@Username"
placeholder="Please choose your username." disabled/>
</label>
<label class="form-control w-full">
<div class="label">
<span class="label-text">Username</span>
</div>
<input class="input input-bordered w-full" type="text" value="@Username"
placeholder="Please choose your username." disabled/>
</label>
@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" />
</div>
</div>
}
<label class="form-control w-full">
<div class="label">
<span class="label-text">Profile Picture</span>
</div>
<FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
</label>
@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"/>
</div>
</div>
}
<label class="form-control w-full">
<div class="label">
<span class="label-text">Profile Picture</span>
</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]

View file

@ -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 class="bg-base-200 p-4 rounded">
<ManageNavMenu/>
</div>
</div>
<div>
<h1 class="text-3xl lg:text-5xl mb-3">Manage your account</h1>
<div>
<h2>Change your account settings</h2>
<hr />
<div class="row">
<div class="col-md-3">
<ManageNavMenu />
</div>
<div class="col-md-9">
@Body
</div>
</div>
@Body
</div>
</div>

View file

@ -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();
}
}

File diff suppressed because one or more lines are too long