Added Admin pages

2024-07-21 15:08:29 +02:00
parent 7cd412b168
commit f8ee78f1fd
18 changed files with 626 additions and 11 deletions
--- a/FrontendTest/Components/Pages/Counter.razor
+++ b/FrontendTest/Components/Pages/Counter.razor
@@ -1,5 +1,4 @@
@page "/counter"
-@using HopFrame.Web.Components
@rendermode InteractiveServer

 <PageTitle>Counter</PageTitle>
--- a/FrontendTest/Program.cs
+++ b/FrontendTest/Program.cs
@@ -23,7 +23,7 @@ if (!app.Environment.IsDevelopment()) {
 app.UseHttpsRedirection();

 app.UseStaticFiles();
-app.UseAntiforgery();
+//app.UseAntiforgery();
 app.UseAuthorization();
 app.UseAuthentication();
 app.UseMiddleware<AuthMiddleware>();
--- a/HopFrame.Security/Authorization/PermissionValidator.cs
+++ b/HopFrame.Security/Authorization/PermissionValidator.cs
@@ -3,14 +3,16 @@ namespace HopFrame.Security.Authorization;
 public static class PermissionValidator {
    
    public static bool IncludesPermission(string permission, string[] permissions) {
-        if (permission == "*") return true;
-        if (permissions.Contains(permission)) return true;
+        var permLow = permission.ToLower();
+        var permsLow = permissions.Select(perm => perm.ToLower()).ToArray();
        
-        foreach (var perm in permissions) {
+        if (permsLow.Any(perm => perm == permLow || perm == "*")) return true;
+        
+        foreach (var perm in permsLow) {
            if (!perm.EndsWith(".*")) continue;

            var permissionGroup = perm.Replace(".*", "");
-            if (permission.StartsWith(permissionGroup)) return true;
+            if (permLow.StartsWith(permissionGroup)) return true;
        }

        return false;
--- a/HopFrame.Security/Services/IPermissionService.cs
+++ b/HopFrame.Security/Services/IPermissionService.cs
@@ -6,8 +6,12 @@ public interface IPermissionService {

    Task<bool> HasPermission(string permission, Guid user);

+    Task<IList<PermissionGroup>> GetPermissionGroups();
+
    Task<PermissionGroup> GetPermissionGroup(string name);

+    Task<IList<PermissionGroup>> GetUserPermissionGroups(User user);
+
    Task CreatePermissionGroup(string name, bool isDefault = false, string description = null);

    Task DeletePermissionGroup(PermissionGroup group);
--- a/HopFrame.Security/Services/Implementation/PermissionService.cs
+++ b/HopFrame.Security/Services/Implementation/PermissionService.cs
@@ -40,6 +40,12 @@ internal sealed class PermissionService<TDbContext>(TDbContext context, ITokenCo
        return PermissionValidator.IncludesPermission(permission, permissions);
    }

+    public async Task<IList<PermissionGroup>> GetPermissionGroups() {
+        return await context.Groups
+            .Select(group => group.ToPermissionGroup(context))
+            .ToListAsync();
+    }
+
    public Task<PermissionGroup> GetPermissionGroup(string name) {
        return context.Groups
            .Where(group => group.Name == name)
@@ -47,6 +53,16 @@ internal sealed class PermissionService<TDbContext>(TDbContext context, ITokenCo
            .SingleOrDefaultAsync();
    }

+    public async Task<IList<PermissionGroup>> GetUserPermissionGroups(User user) {
+        var groups = await context.Groups.ToListAsync();
+        var perms = await GetFullPermissions(user.Id.ToString());
+
+        return groups
+            .Where(group => PermissionValidator.IncludesPermission(group.Name, perms))
+            .Select(group => group.ToPermissionGroup(context))
+            .ToList();
+    }
+
    public async Task CreatePermissionGroup(string name, bool isDefault = false, string description = null) {
        var group = new GroupEntry {
            Name = name,
--- a/HopFrame.Web/Components/AuthorizedView.razor
+++ b/HopFrame.Web/Components/AuthorizedView.razor
@@ -26,8 +26,9 @@
    private bool IsAuthorized() {
        if (!Auth.IsAuthenticated) return false;
        if ((Permissions == null || Permissions.Length == 0) && string.IsNullOrEmpty(Permission)) return true;
-        
-        var perms = new List<string>(Permissions!);
+
+        Permissions ??= [];
+        var perms = new List<string>(Permissions);
        if (!string.IsNullOrEmpty(Permission)) perms.Add(Permission);
        
        var permissions = HttpAccessor.HttpContext?.User.GetPermissions();
--- a/HopFrame.Web/HopFrame.Web.csproj
+++ b/HopFrame.Web/HopFrame.Web.csproj
@@ -17,7 +17,9 @@
    </ItemGroup>

    <ItemGroup>
+      <PackageReference Include="CurrieTechnologies.Razor.SweetAlert2" Version="5.6.0" />
      <PackageReference Include="Microsoft.AspNetCore.Components" Version="8.0.7" />
+      <PackageReference Include="Microsoft.AspNetCore.Components.Web" Version="8.0.7" />
    </ItemGroup>


--- a/HopFrame.Web/Pages/Administration/AdminRoutes.razor
+++ b/HopFrame.Web/Pages/Administration/AdminRoutes.razor
@@ -0,0 +1,28 @@
+@page "/administration"
+@using HopFrame.Web.Pages.Administration.Layout
+@inherits LayoutComponentBase
+@layout AdminLayout
+
+@inject NavigationManager Navigator
+
+@code {
+    protected override void OnInitialized() {
+        Navigator.NavigateTo("administration/users");
+    }
+}
+
+<div class="sub-layout">
+    <div class="content">
+        <Switch>
+            <Route Template="administration/users">
+                <UsersPage/>
+            </Route>
+            <Route Template="administration/user/{UserId}">
+                <UserEditPage/>
+            </Route>
+            <Route>
+                <p>No content found in nested layout</p>
+            </Route>
+        </Switch>
+    </div>
+</div>
--- a/HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor
+++ b/HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor
@@ -0,0 +1,24 @@
+@using HopFrame.Web.Components
+@inherits LayoutComponentBase
+
+<AuthorizedView Permission="HopFrame.Admin" RedirectIfUnauthorized="login" />
+
+<div class="page">
+    <div class="sidebar">
+        <AdminMenu/>
+    </div>
+
+    <main>
+        <article class="content px-4">
+            @Body
+        </article>
+    </main>
+</div>
+
+<div id="blazor-error-ui">
+    An unhandled error has occurred.
+    <a href="" class="reload">Reload</a>
+    <a class="dismiss">🗙</a>
+</div>
+
+<script src="_content/CurrieTechnologies.Razor.SweetAlert2/sweetAlert2.min.js"></script>
--- a/HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor.css
+++ b/HopFrame.Web/Pages/Administration/Layout/AdminLayout.razor.css
@@ -0,0 +1,96 @@
+.page {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+}
+
+main {
+    flex: 1;
+}
+
+.sidebar {
+    background-image: linear-gradient(180deg, rgb(5, 39, 103) 0%, #3a0647 70%);
+}
+
+.top-row {
+    background-color: #f7f7f7;
+    border-bottom: 1px solid #d6d5d5;
+    justify-content: flex-end;
+    height: 3.5rem;
+    display: flex;
+    align-items: center;
+}
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        white-space: nowrap;
+        margin-left: 1.5rem;
+        text-decoration: none;
+    }
+
+    .top-row ::deep a:hover, .top-row ::deep .btn-link:hover {
+        text-decoration: underline;
+    }
+
+    .top-row ::deep a:first-child {
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+@media (max-width: 640.98px) {
+    .top-row {
+        justify-content: space-between;
+    }
+
+    .top-row ::deep a, .top-row ::deep .btn-link {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 641px) {
+    .page {
+        flex-direction: row;
+    }
+
+    .sidebar {
+        width: 250px;
+        height: 100vh;
+        position: sticky;
+        top: 0;
+    }
+
+    .top-row {
+        position: sticky;
+        top: 0;
+        z-index: 1;
+    }
+
+    .top-row.auth ::deep a:first-child {
+        flex: 1;
+        text-align: right;
+        width: 0;
+    }
+
+    .top-row, article {
+        padding-left: 2rem !important;
+        padding-right: 1.5rem !important;
+    }
+}
+
+#blazor-error-ui {
+    background: lightyellow;
+    bottom: 0;
+    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
+    display: none;
+    left: 0;
+    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
+    position: fixed;
+    width: 100%;
+    z-index: 1000;
+}
+
+    #blazor-error-ui .dismiss {
+        cursor: pointer;
+        position: absolute;
+        right: 0.75rem;
+        top: 0.5rem;
+    }
--- a/HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor
+++ b/HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor
@@ -0,0 +1,28 @@
+@using Microsoft.AspNetCore.Components.Routing
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">HopFrame</a>
+    </div>
+</div>
+
+<input type="checkbox" title="Navigation menu" class="navbar-toggler"/>
+
+<div class="nav-scrollable" onclick="document.querySelector('.navbar-toggler').click()">
+    <nav class="flex-column">
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="administration/users">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
+                    <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6"/>
+                </svg> Users
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="administration/groups">
+                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-people-fill" viewBox="0 0 16 16">
+                    <path d="M7 14s-1 0-1-1 1-4 5-4 5 3 5 4-1 1-1 1zm4-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6m-5.784 6A2.24 2.24 0 0 1 5 13c0-1.355.68-2.75 1.936-3.72A6.3 6.3 0 0 0 5 9c-4 0-5 3-5 4s1 1 1 1zM4.5 8a2.5 2.5 0 1 0 0-5 2.5 2.5 0 0 0 0 5"/>
+                </svg> Groups
+            </NavLink>
+        </div>
+    </nav>
+</div>
--- a/HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor.css
+++ b/HopFrame.Web/Pages/Administration/Layout/AdminMenu.razor.css
@@ -0,0 +1,105 @@
+.navbar-toggler {
+    appearance: none;
+    cursor: pointer;
+    width: 3.5rem;
+    height: 2.5rem;
+    color: white;
+    position: absolute;
+    top: 0.5rem;
+    right: 1rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
+}
+
+.navbar-toggler:checked {
+    background-color: rgba(255, 255, 255, 0.5);
+}
+
+.top-row {
+    height: 3.5rem;
+    background-color: rgba(0,0,0,0.4);
+}
+
+.navbar-brand {
+    font-size: 1.1rem;
+}
+
+.bi {
+    display: inline-block;
+    position: relative;
+    width: 1.25rem;
+    height: 1.25rem;
+    margin-right: 0.75rem;
+    top: -1px;
+    background-size: cover;
+}
+
+.bi-house-door-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E");
+}
+
+.bi-plus-square-fill-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E");
+}
+
+.bi-list-nested-nav-menu {
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E");
+}
+
+.nav-item {
+    font-size: 0.9rem;
+    padding-bottom: 0.5rem;
+}
+
+    .nav-item:first-of-type {
+        padding-top: 1rem;
+    }
+
+    .nav-item:last-of-type {
+        padding-bottom: 1rem;
+    }
+
+    .nav-item ::deep .nav-link {
+        color: #d7d7d7;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        height: 3rem;
+        display: flex;
+        align-items: center;
+        line-height: 3rem;
+        width: 100%;
+    }
+
+.nav-item ::deep a.active {
+    background-color: rgba(255,255,255,0.37);
+    color: white;
+}
+
+.nav-item ::deep .nav-link:hover {
+    background-color: rgba(255,255,255,0.1);
+    color: white;
+}
+
+.nav-scrollable {
+    display: none;
+}
+
+.navbar-toggler:checked ~ .nav-scrollable {
+    display: block;
+}
+
+@media (min-width: 641px) {
+    .navbar-toggler {
+        display: none;
+    }
+
+    .nav-scrollable {
+        /* Never collapse the sidebar for wide screens */
+        display: block;
+
+        /* Allow sidebar to scroll for tall menus */
+        height: calc(100vh - 3.5rem);
+        overflow-y: auto;
+    }
+}
--- a/HopFrame.Web/Pages/Administration/UserEditPage.razor
+++ b/HopFrame.Web/Pages/Administration/UserEditPage.razor
@@ -0,0 +1,84 @@
+@page "/administration/user/{UserId}"
+
+@using HopFrame.Database.Models
+@using HopFrame.Security.Services
+@using HopFrame.Web.Pages.Administration.Layout
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Forms
+
+@layout AdminLayout
+@rendermode InteractiveServer
+
+<PageTitle>Edit @User.Username</PageTitle>
+
+<h3>Edit @User.Username (@User.Id)</h3>
+
+<EditForm EditContext="_context" OnValidSubmit="OnEdit" FormName="register-form">
+    @*<AntiforgeryToken />*@
+    <div class="field-wrapper">
+        <div class="mb-3">
+            <label for="id" class="form-label">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>
+            <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>
+            <InputText type="text" class="form-control" id="username" required @bind-Value="User.Username"/>
+            <ValidationMessage For="() => User.Username"/>
+        </div>
+        <button type="submit" class="btn btn-primary">Edit</button>
+        <button type="reset" class="btn btn-secondary">Cancel</button>
+    </div>
+</EditForm>
+
+@inject IUserService Users
+
+@code {
+    [Parameter]
+    public string UserId { get; set; }
+
+    private EditContext _context;
+    private ValidationMessageStore _messages;
+
+    [SupplyParameterFromForm]
+    public User User { get; set; }
+
+    protected override async Task OnInitializedAsync() {
+        User = await Users.GetUser(Guid.Parse(UserId));
+
+        _context = new EditContext(User);
+        _context.OnValidationRequested += ValidateForm;
+        _messages = new ValidationMessageStore(_context);
+    }
+
+    private async Task OnEdit() {
+        var hasConflict = false;
+        
+        if (await Users.GetUserByEmail(User.Email) is not null) {
+            _messages.Add(() => User.Email, "Email is already in use");
+            hasConflict = true;
+        }
+        
+        if (await Users.GetUserByUsername(User.Username) is not null) {
+            _messages.Add(() => User.Username, "Username is already in use");
+            hasConflict = true;
+        }
+        
+        if (hasConflict) return;
+
+        
+    }
+
+    private void ValidateForm(object sender, ValidationRequestedEventArgs e) {
+        _messages.Clear();
+
+        if (!User.Email.Contains("@") || !User.Email.Contains(".") || User.Email.EndsWith(".")) {
+            _messages.Add(() => User.Email, "Please enter a valid email address");
+        }
+    }
+}
--- a/HopFrame.Web/Pages/Administration/UsersPage.razor
+++ b/HopFrame.Web/Pages/Administration/UsersPage.razor
@@ -0,0 +1,215 @@
+@page "/administration/users"
+@rendermode InteractiveServer
+@layout AdminLayout
+
+@using System.Globalization
+@using CurrieTechnologies.Razor.SweetAlert2
+@using HopFrame.Database.Models
+@using HopFrame.Security.Services
+@using HopFrame.Web.Pages.Administration.Layout
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web
+@using HopFrame.Web.Components
+
+<PageTitle>Users</PageTitle>
+<AuthorizedView Permission="HopFrame.Admin.Users.View" RedirectIfUnauthorized="login"/>
+
+<div class="title">
+    <h3 style="user-select: none">
+        Users administration
+        <span style="cursor: pointer" @onclick="Reload">
+            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-clockwise" viewBox="0 0 16 16">
+                <path fill-rule="evenodd" d="M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z"/>
+                <path d="M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466"/>
+            </svg>
+        </span>
+    </h3>
+
+    <form class="d-flex" role="search" @onsubmit="Search">
+        <input class="form-control me-2" type="search" placeholder="Search" aria-label="Search" @bind="_searchText">
+        <button class="btn btn-outline-success" type="submit">Search</button>
+    </form>
+</div>
+
+
+<table class="table table-stripped table-hover">
+    <thead>
+    <tr>
+        <th scope="col" style="user-select: none">#</th>
+        <th scope="col" style="user-select: none">
+            <span style="cursor: pointer;" @onclick="() => OrderBy(OrderType.Email)">E-Mail</span>
+            @if (_currentOrder == OrderType.Email) {
+                @if (_currentOrderDirection == OrderDirection.Asc) {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+                        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+                    </svg>
+                }
+                else {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+                        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+                    </svg>
+                }
+            }
+        </th>
+        <th scope="col" style="user-select: none">
+            <span style="cursor: pointer;" @onclick="() => OrderBy(OrderType.Username)">Username</span>
+            @if (_currentOrder == OrderType.Username) {
+                @if (_currentOrderDirection == OrderDirection.Asc) {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+                        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+                    </svg>
+                }
+                else {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+                        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+                    </svg>
+                }
+            }
+        </th>
+        <th scope="col" style="user-select: none">
+            <span style="cursor: pointer;" @onclick="() => OrderBy(OrderType.Registered)">Registered</span>
+            @if (_currentOrder == OrderType.Registered) {
+                @if (_currentOrderDirection == OrderDirection.Asc) {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-down-fill" viewBox="0 0 16 16">
+                        <path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/>
+                    </svg>
+                }
+                else {
+                    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-caret-up-fill" viewBox="0 0 16 16">
+                        <path d="m7.247 4.86-4.796 5.481c-.566.647-.106 1.659.753 1.659h9.592a1 1 0 0 0 .753-1.659l-4.796-5.48a1 1 0 0 0-1.506 0z"/>
+                    </svg>
+                }
+            }
+        </th>
+        <th scope="col" style="user-select: none">Primary Group</th>
+        <th scope="col" style="user-select: none">Actions</th>
+    </tr>
+    </thead>
+    <tbody>
+    @foreach (var user in _users) {
+        <tr>
+            <th scope="row">@user.Id</th>
+            <td>@user.Email</td>
+            <td>@user.Username</td>
+            <td>@user.CreatedAt</td>
+            <td>@GetFriendlyGroupName(user)</td>
+            <td>
+                <div class="btn-group" role="group" aria-label="Basic example">
+                    <button type="button" class="btn btn-warning" @onclick="() => EditUser(user)">Edit</button>
+                    <button type="button" class="btn btn-danger" @onclick="() => Delete(user)">Delete</button>
+                </div>
+            </td>
+        </tr>
+    }
+    </tbody>
+</table>
+
+@inject IUserService UserService
+@inject IPermissionService PermissionsService
+@inject NavigationManager Navigator
+@inject SweetAlertService Alerts
+
+@code {
+    private IList<User> _users = new List<User>();
+    private IDictionary<Guid, PermissionGroup> _userGroups = new Dictionary<Guid, PermissionGroup>();
+
+    private OrderType _currentOrder = OrderType.None;
+    private OrderDirection _currentOrderDirection = OrderDirection.Asc;
+
+    private string _searchText;
+
+    protected override async Task OnInitializedAsync() {
+        _users = await UserService.GetUsers();
+
+        foreach (var user in _users) {
+            var groups = await PermissionsService.GetUserPermissionGroups(user);
+            _userGroups.Add(user.Id, groups.FirstOrDefault());
+        }
+    }
+
+    private void Reload() {
+        Navigator.Refresh(true);
+    }
+
+    private async Task Search() {
+        var users = await UserService.GetUsers();
+
+        if (!string.IsNullOrWhiteSpace(_searchText)) {
+            users = users
+                .Where(user =>
+                    user.Email.Contains(_searchText) ||
+                    user.Username.Contains(_searchText) ||
+                    user.Id.ToString().Contains(_searchText) ||
+                    user.CreatedAt.ToString(CultureInfo.InvariantCulture).Contains(_searchText) ||
+                    _userGroups[user.Id]?.Name.Contains(_searchText) == true)
+                .ToList();
+        }
+
+        _users = users;
+        OrderBy(_currentOrder, false);
+    }
+
+    private string GetFriendlyGroupName(User user) {
+        var group = _userGroups[user.Id];
+        if (group is null) return null;
+
+        return group.Name.Replace("group.", "");
+    }
+
+    private void OrderBy(OrderType type, bool changeDir = true) {
+        if (_currentOrder == type && changeDir) _currentOrderDirection = (OrderDirection)(((byte)_currentOrderDirection + 1) % 2);
+
+        if (type == OrderType.Email) {
+            _users = _currentOrderDirection == OrderDirection.Asc ? _users.OrderBy(user => user.Email).ToList() : _users.OrderByDescending(user => user.Email).ToList();
+        }
+        else if (type == OrderType.Username) {
+            _users = _currentOrderDirection == OrderDirection.Asc ? _users.OrderBy(user => user.Username).ToList() : _users.OrderByDescending(user => user.Username).ToList();
+        }
+        else if (type == OrderType.Registered) {
+            _users = _currentOrderDirection == OrderDirection.Asc ? _users.OrderBy(user => user.CreatedAt).ToList() : _users.OrderByDescending(user => user.CreatedAt).ToList();
+        }
+
+        _currentOrder = type;
+    }
+
+    private async Task Delete(User user) {
+        var result = await Alerts.FireAsync(new SweetAlertOptions {
+            Title = "Are you sure?",
+            Text = "You won't be able to revert this!",
+            Icon = SweetAlertIcon.Warning,
+            ShowCancelButton = true,
+            ShowConfirmButton = true
+        });
+
+        if (result.IsConfirmed) {
+            await UserService.DeleteUser(user);
+
+            await Alerts.FireAsync(new SweetAlertOptions {
+                Title = "Deleted!",
+                Icon = SweetAlertIcon.Success,
+                Timer = 1500,
+                ShowConfirmButton = false
+            });
+            
+            Reload();
+        }
+    }
+
+    private void EditUser(User user) {
+        Navigator.NavigateTo("/administration/user/" + user.Id);
+    }
+
+    private enum OrderType {
+        None,
+        Email,
+        Username,
+        Registered,
+        Group
+    }
+
+    private enum OrderDirection : byte {
+        Asc = 0,
+        Desc = 1
+    }
+
+}
--- a/HopFrame.Web/Pages/Administration/UsersPage.razor.css
+++ b/HopFrame.Web/Pages/Administration/UsersPage.razor.css
@@ -0,0 +1,5 @@
+.title {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+}
--- a/HopFrame.Web/Pages/Login.razor
+++ b/HopFrame.Web/Pages/Login.razor
@@ -9,6 +9,7 @@

 <div class="login-wrapper">
    <EditForm Model="LoginData" FormName="login-form" OnSubmit="OnLogin">
+        @*<AntiforgeryToken />*@
        <div class="field-wrapper">
            <h2>Login</h2>
            <div class="mb-3">
@@ -25,7 +26,7 @@
                <span>Don't have an account? <NavLink href="register">Register</NavLink></span>
            </div>
            <button type="submit" class="btn btn-primary">Login</button>
-            
+
            @if (_loginError) {
                <div class="alert alert-danger" role="alert" style="margin-top: 16px; margin-bottom: 0px">
                    Email or password does not match any account!
--- a/HopFrame.Web/Pages/Register.razor
+++ b/HopFrame.Web/Pages/Register.razor
@@ -12,7 +12,7 @@

 <div class="register-wrapper">
    <EditForm EditContext="_context" OnValidSubmit="OnRegister" FormName="register-form">
-        @*<AntiforgeryToken/>*@
+        @*<AntiforgeryToken />*@
        <div class="field-wrapper">
            <h2>Register</h2>
            <div class="mb-3">
--- a/HopFrame.Web/ServiceCollectionExtensions.cs
+++ b/HopFrame.Web/ServiceCollectionExtensions.cs
@@ -1,3 +1,4 @@
+using CurrieTechnologies.Razor.SweetAlert2;
 using HopFrame.Database;
 using HopFrame.Security.Authentication;
 using HopFrame.Web.Services;
@@ -12,6 +13,7 @@ public static class ServiceCollectionExtensions {
        services.AddHttpClient();
        services.AddScoped<IAuthService, AuthService<TDbContext>>();
        services.AddTransient<AuthMiddleware>();
+        services.AddSweetAlert2();

        services.AddHopFrameAuthentication<TDbContext>();

@@ -19,6 +21,9 @@ public static class ServiceCollectionExtensions {
    }

    public static RazorComponentsEndpointConventionBuilder AddHopFramePages(this RazorComponentsEndpointConventionBuilder builder) {
-        return builder.AddAdditionalAssemblies(typeof(ServiceCollectionExtensions).Assembly);
+        return builder
+            .AddAdditionalAssemblies(typeof(ServiceCollectionExtensions).Assembly)
+            .AddInteractiveServerRenderMode()
+            .DisableAntiforgery(); //TODO: Make Antiforgery work
    }
 }