leon.hoppe/HopFrame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

Added user add modal and converted to dark mode

Browse Source
This commit is contained in:
Leon Hoppe
2024-08-02 20:53:43 +02:00
parent 69c58e61fc
commit b57e1ca8cf
11 changed files with 197 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
HopFrame.Web/Pages/Administration/Components/UserAddModal.razor Normal file
View File

@@ -0,0 +1,69 @@
@rendermode InteractiveServer
@using BlazorStrap
@using static Microsoft.AspNetCore.Components.Web.RenderMode
@using BlazorStrap.Shared.Components.Modal
@using BlazorStrap.V5
@using HopFrame.Database.Models
@using HopFrame.Security.Services
@using HopFrame.Web.Model
<BSModal DataId="add-user-modal" HideOnValidSubmit="true" IsStaticBackdrop="true" OnShow="() => _user = new()" @ref="_modal" ModalColor="BSColor.Dark">
<BSForm Model="_user" OnValidSubmit="Submit">
<BSModalHeader style="color: white">Add user</BSModalHeader>
<BSModalContent>
<div class="mb-3">
<BSLabel style="color: white">E-Mail</BSLabel>
<BSInput InputType="InputType.Email" @bind-Value="_user.Email" />
</div>
<div class="mb-3">
<BSLabel style="color: white">Username</BSLabel>
<BSInput InputType="InputType.Text" @bind-Value="_user.Username" />
</div>
<div class="mb-3">
<BSLabel style="color: white">Password</BSLabel>
<BSInput InputType="InputType.Password" @bind-Value="_user.Password" />
</div>
<div class="mb-3">
<BSLabel style="color: white">Primary group</BSLabel>
<BSInput InputType="InputType.Select" @bind-Value="_user.Group">
<option value="">Select group</option>
@foreach (var group in _allGroups) {
<option value="@group.Name">@group.Name.Replace("group.", "")</option>
}
</BSInput>
</div>
</BSModalContent>
<BSModalFooter>
<BSButton Target="add-user-modal" Color="BSColor.Dark">Cancel</BSButton>
<BSButton IsSubmit="true" Color="BSColor.Primary">Save</BSButton>
</BSModalFooter>
</BSForm>
</BSModal>
@inject IPermissionService Permissions
@code {
[Parameter] public Action<UserAdd> OnSubmit { get; set; }
private IList<PermissionGroup> _allGroups = new List<PermissionGroup>();
private UserAdd _user;
private BSModalBase _modal;
protected override async Task OnInitializedAsync() {
_allGroups = await Permissions.GetPermissionGroups();
}
public Task ShowAsync() {
return _modal.ShowAsync();
}
private void Submit() {
OnSubmit.Invoke(_user);
}
}

4
HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor
View File

@@ -6,12 +6,12 @@
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<div class="page">
<div class="page" style="background-color: #2c3034; position: relative; min-height: 100vh">
<nav>
<AdminMenu/>
</nav>
<main>
<main style="padding-top: 60px">
<article class="content px-4">
@Body
<BSCore/>

26
HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor
View File

@@ -1,11 +1,17 @@
@using BlazorStrap
@rendermode InteractiveServer
@using BlazorStrap
@using BlazorStrap.V5
@using HopFrame.Security.Claims
@using HopFrame.Web.Pages.Administration.Components
@using HopFrame.Web.Services
@using static Microsoft.AspNetCore.Components.Web.RenderMode
<BSNavbar Color="BSColor.Light">
<BSNavbar Color="BSColor.Dark" IsDark="true" IsFixedTop="true">
<BSContainer Container="Container.Fluid">
<BSNavbarBrand>
@*<img src="logo.svg" alt="logo" width="30" class="d-inline-block align-text-top"/>*@
<img src="/favicon.png" alt="logo" width="30" class="d-inline-block align-text-top"/>
HopFrame
</BSNavbarBrand>
<BSCollapse IsInNavbar="true">
@@ -18,6 +24,14 @@
<BSNavItem IsActive="IsNavItemActive(nav.Key)" Url="@nav.Key">@nav.Value</BSNavItem>
}
</BSNav>
<span style="margin-left: auto; line-height: 100%; color: white">
logged in as @Context?.User.Username
</span>
<BSButton DataId="logout" Size="Size.ExtraSmall" OnClick="Logout" Color="BSColor.Dark">
<HopIconDisplay Type="HopIconDisplay.HopIcon.Logout"/>
</BSButton>
<BSTooltip Placement="Placement.Bottom" Target="logout" ContentAlwaysRendered="false">logout</BSTooltip>
</Content>
</BSCollapse>
</BSContainer>
@@ -25,6 +39,8 @@
@inject NavigationManager Navigator
@inject ITokenContext Context
@inject IAuthService Auth
@code {
public static IDictionary<string, string> Subpages = new Dictionary<string, string> {
@@ -35,4 +51,8 @@
public bool IsNavItemActive(string element) {
return Navigator.Uri.Contains(element);
}
private async void Logout() {
Navigator.NavigateTo("login?redirect=/administration", true);
}
}

14
HopFrame.Web/Pages/Administration/UserEditPage.razor
View File

@@ -16,32 +16,32 @@
<PageTitle>Edit @User.Username</PageTitle>
<AuthorizedView Permission="@AdminPermissions.EditUsers" RedirectIfUnauthorized="@ConstructRedirectUrl()"/>
<h3>Edit @User.Username (@User.Id)</h3>
<h3 style="color: white">Edit @User.Username (@User.Id)</h3>
<EditForm EditContext="_context" OnValidSubmit="OnEdit" FormName="register-form" class="edit-form">
@*<AntiforgeryToken />*@
<div class="field-wrapper" style="max-width: 750px">
<div class="mb-3">
<label for="id" class="form-label">Registered At</label>
<label for="id" class="form-label" style="color: white">Registered At</label>
<input type="text" class="form-control" id="id" disabled value="@User.CreatedAt"/>
</div>
<div class="mb-3">
<label for="email" class="form-label">Email address</label>
<label for="email" class="form-label" style="color: white">Email address</label>
<InputText type="email" class="form-control" id="email" required @bind-Value="User.Email"/>
<ValidationMessage For="() => User.Email"/>
</div>
<div class="mb-3">
<label for="username" class="form-label">Username</label>
<label for="username" class="form-label" style="color: white">Username</label>
<InputText type="text" class="form-control" id="username" required @bind-Value="User.Username"/>
<ValidationMessage For="() => User.Username"/>
</div>
<div class="mb-3">
<label for="password" class="form-label">Password</label>
<label for="password" class="form-label" style="color: white">Password</label>
<InputText type="password" class="form-control" id="password" required @bind-Value="_password"/>
</div>
<div class="mb-3">
<label for="groups" class="form-label">Groups</label>
<label for="groups" class="form-label" style="color: white">Groups</label>
<ul class="list-group" id="groups">
<li class="list-group-item">
<ul class="list-group list-group-flush">
@@ -74,7 +74,7 @@
</div>
<div class="mb-3">
<label for="permissions" class="form-label">Permissions</label>
<label for="permissions" class="form-label" style="color: white">Permissions</label>
<ul class="list-group" id="permissions">
<li class="list-group-item">
<ul class="list-group list-group-flush">

76
HopFrame.Web/Pages/Administration/UsersPage.razor
View File

@@ -13,11 +13,14 @@
@using Microsoft.AspNetCore.Components.Web
@using HopFrame.Web.Components
@using BlazorStrap.V5
@using HopFrame.Web.Model
@using HopFrame.Web.Pages.Administration.Components
<PageTitle>Users</PageTitle>
<AuthorizedView Permission="@AdminPermissions.ViewUsers" RedirectIfUnauthorized="login?redirect=/administration/users"/>
<UserAddModal @ref="_userAddModal" OnSubmit="CreateUser"/>
<div class="title">
<h3>
Users administration
@@ -26,13 +29,14 @@
</span>
</h3>
<form class="d-flex" role="search" @onsubmit="Search">
<form class="d-flex" role="search" @onsubmit="Search" id="search">
<input class="form-control me-2 input-dark" type="search" placeholder="Search" aria-label="Search" @bind="_searchText">
<BSButton Color="BSColor.Success" IsOutlined="true" type="submit">Search</BSButton>
</form>
<BSButton IsSubmit="false" Color="BSColor.Success" Target="add-user" OnClick="() => _userAddModal.ShowAsync()">Add User</BSButton>
</div>
<BSTable IsStriped="true" IsHoverable="true">
<BSTable IsStriped="true" IsHoverable="true" IsDark="true" Color="BSColor.Dark">
<BSTHead>
<BSTR>
<BSTD>#</BSTD>
@@ -97,7 +101,7 @@
@code {
private IList<User> _users = new List<User>();
private readonly IDictionary<Guid, PermissionGroup> _userGroups = new Dictionary<Guid, PermissionGroup>();
private IDictionary<Guid, PermissionGroup> _userGroups = new Dictionary<Guid, PermissionGroup>();
private OrderType _currentOrder = OrderType.None;
private OrderDirection _currentOrderDirection = OrderDirection.Asc;
@@ -107,6 +111,8 @@
private bool _hasEditPrivileges = false;
private bool _hasDeletePrivileges = false;
private UserAddModal _userAddModal;
protected override async Task OnInitializedAsync() {
_users = await UserService.GetUsers();
@@ -119,8 +125,16 @@
_hasDeletePrivileges = await PermissionsService.HasPermission(AdminPermissions.DeleteUsers, Auth.User.Id);
}
private void Reload() {
Navigator.Refresh(true);
private async Task Reload() {
_users = new List<User>();
_userGroups = new Dictionary<Guid, PermissionGroup>();
_users = await UserService.GetUsers();
foreach (var user in _users) {
var groups = await PermissionsService.GetUserPermissionGroups(user);
_userGroups.Add(user.Id, groups.FirstOrDefault());
}
}
private async Task Search() {
@@ -176,6 +190,9 @@
if (result.IsConfirmed) {
await UserService.DeleteUser(user);
await Reload();
StateHasChanged();
await Alerts.FireAsync(new SweetAlertOptions {
Title = "Deleted!",
@@ -183,8 +200,6 @@
Timer = 1500,
ShowConfirmButton = false
});
Reload();
}
}
@@ -204,4 +219,51 @@
Desc = 1
}
private async void CreateUser(UserAdd newUser) {
string errorMessage = null;
if (_users.Any(user => user.Username == newUser.Username)) {
errorMessage = "Username is already taken!";
}
else if (_users.Any(user => user.Email == newUser.Email)) {
errorMessage = "E-Mail is already taken!";
}
else if (!newUser.PasswordIsValid) {
errorMessage = "The password needs to be at least 8 characters long!";
}
else if (!newUser.EmailIsValid) {
errorMessage = "Invalid E-Mail address!";
}
if (!string.IsNullOrWhiteSpace(errorMessage)) {
await Alerts.FireAsync(new SweetAlertOptions {
Title = "Something went wrong!",
Text = errorMessage,
Icon = SweetAlertIcon.Error,
ShowConfirmButton = false,
Timer = 1500
});
return;
}
var user = await UserService.AddUser(newUser);
if (!string.IsNullOrWhiteSpace(newUser.Group)) {
await PermissionsService.AddPermission(user, newUser.Group);
}
await Reload();
StateHasChanged();
await Alerts.FireAsync(new SweetAlertOptions {
Title = "New user added!",
Icon = SweetAlertIcon.Success,
ShowConfirmButton = false,
Timer = 1500
});
}
}

11
HopFrame.Web/Pages/Administration/UsersPage.razor.css
View File

@@ -1,13 +1,22 @@
.title {
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 10px;
margin-bottom: 10px;
}
#search {
margin-left: auto;
}
th, h3 {
user-select: none;
}
h3 {
color: white;
}
.reload, .sorter {
cursor: pointer;
}

6
HopFrame.Web/Pages/Register.razor
View File

@@ -87,15 +87,15 @@
private void ValidateForm(object sender, ValidationRequestedEventArgs e) {
_messages.Clear();
if (RegisterData.Password != RegisterData.RepeatedPassword) {
if (!RegisterData.PasswordsMatch) {
_messages.Add(() => RegisterData.RepeatedPassword, "Passwords doesn't mach");
}
if (RegisterData.Password.Length < 8) {
if (!RegisterData.PasswordIsValid) {
_messages.Add(() => RegisterData.Password, "Password needs to be at least 8 characters long");
}
if (!RegisterData.Email.Contains("@") || !RegisterData.Email.Contains(".") || RegisterData.Email.EndsWith(".")) {
if (!RegisterData.EmailIsValid) {
_messages.Add(() => RegisterData.Email, "Please enter a valid email address");
}
}