Improved Account manage layout, added Permissions display to Profile Page
This commit is contained in:
parent
4a6599d165
commit
c63b60a7de
|
@ -13,34 +13,101 @@
|
||||||
|
|
||||||
<PageTitle>Profile</PageTitle>
|
<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">
|
||||||
<label class="form-control w-full">
|
<div class="label">
|
||||||
<div class="label">
|
<span class="label-text">Username</span>
|
||||||
<span class="label-text">Username</span>
|
</div>
|
||||||
</div>
|
<input class="input input-bordered w-full" type="text" value="@Username"
|
||||||
<input class="input input-bordered w-full" type="text" value="@Username"
|
placeholder="Please choose your username." disabled/>
|
||||||
placeholder="Please choose your username." disabled/>
|
</label>
|
||||||
</label>
|
|
||||||
|
|
||||||
@if (User?.ProfilePicture is not null) {
|
@if (User?.ProfilePicture is not null) {
|
||||||
<div class="avatar w-24 my-3">
|
<div class="avatar w-24 my-3">
|
||||||
<div class="rounded">
|
<div class="rounded">
|
||||||
<img src="/images/@(User.ProfilePicture.ImageId)" alt="" loading="lazy" />
|
<img src="/images/@(User.ProfilePicture.ImageId)" alt="" loading="lazy"/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
<label class="form-control w-full">
|
<label class="form-control w-full">
|
||||||
<div class="label">
|
<div class="label">
|
||||||
<span class="label-text">Profile Picture</span>
|
<span class="label-text">Profile Picture</span>
|
||||||
</div>
|
</div>
|
||||||
<FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
|
<FileUploadComponent FileUploadedCallback="ProfilePictureChanged"/>
|
||||||
</label>
|
</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>
|
</div>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
private ApplicationUser? User { get; set; } = default!;
|
private ApplicationUser? User { get; set; }
|
||||||
private string? Username { get; set; }
|
private string? Username { get; set; }
|
||||||
|
|
||||||
[CascadingParameter]
|
[CascadingParameter]
|
||||||
|
|
|
@ -1,17 +1,15 @@
|
||||||
@inherits LayoutComponentBase
|
@inherits LayoutComponentBase
|
||||||
@layout AccountLayout
|
@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>
|
@Body
|
||||||
<h2>Change your account settings</h2>
|
</div>
|
||||||
<hr />
|
|
||||||
<div class="row">
|
|
||||||
<div class="col-md-3">
|
|
||||||
<ManageNavMenu />
|
|
||||||
</div>
|
|
||||||
<div class="col-md-9">
|
|
||||||
@Body
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -3,35 +3,34 @@
|
||||||
|
|
||||||
@inject SignInManager<ApplicationUser> SignInManager
|
@inject SignInManager<ApplicationUser> SignInManager
|
||||||
|
|
||||||
<ul class="nav nav-pills flex-column">
|
<ul class="menu" role="navigation">
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<NavLink class="nav-link" href="Account/Manage/Email">Email</NavLink>
|
<NavLink href="Account/Manage/Email">Email</NavLink>
|
||||||
</li>
|
</li>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<NavLink class="nav-link" href="Account/Manage/ChangePassword">Password</NavLink>
|
<NavLink href="Account/Manage/ChangePassword">Password</NavLink>
|
||||||
</li>
|
</li>
|
||||||
@if (hasExternalLogins)
|
@if (_hasExternalLogins) {
|
||||||
{
|
|
||||||
<li class="nav-item">
|
<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>
|
||||||
}
|
}
|
||||||
<li class="nav-item">
|
<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>
|
||||||
<li class="nav-item">
|
<li class="nav-item">
|
||||||
<NavLink class="nav-link" href="Account/Manage/PersonalData">Personal data</NavLink>
|
<NavLink href="Account/Manage/PersonalData">Personal data</NavLink>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
|
|
||||||
@code {
|
@code {
|
||||||
private bool hasExternalLogins;
|
private bool _hasExternalLogins;
|
||||||
|
|
||||||
protected override async Task OnInitializedAsync()
|
protected override async Task OnInitializedAsync()
|
||||||
{
|
{
|
||||||
hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
|
_hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
2
Wave/wwwroot/css/main.min.css
vendored
2
Wave/wwwroot/css/main.min.css
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue