Added client side functionality and created register page

2024-07-14 16:42:32 +02:00
parent 01978d30ce
commit a164a3d282
41 changed files with 1024 additions and 30 deletions
--- a/FrontendTest/.gitignore
+++ b/FrontendTest/.gitignore
@@ -0,0 +1,4 @@
+obj
+bin
+Migrations
+appsettings.Development.json
--- a/FrontendTest/Components/App.razor
+++ b/FrontendTest/Components/App.razor
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="utf-8"/>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+    <base href="/"/>
+    <link rel="stylesheet" href="bootstrap/bootstrap.min.css"/>
+    <link rel="stylesheet" href="app.css"/>
+    <link rel="stylesheet" href="FrontendTest.styles.css"/>
+    <link rel="icon" type="image/png" href="favicon.png"/>
+    <HeadOutlet/>
+</head>
+
+<body>
+<Routes/>
+<script src="_framework/blazor.web.js"></script>
+</body>
+
+</html>
--- a/FrontendTest/Components/Layout/MainLayout.razor
+++ b/FrontendTest/Components/Layout/MainLayout.razor
@@ -0,0 +1,23 @@
+@inherits LayoutComponentBase
+
+<div class="page">
+    <div class="sidebar">
+        <NavMenu/>
+    </div>
+
+    <main>
+        <div class="top-row px-4">
+            <a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
+        </div>
+
+        <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>
--- a/FrontendTest/Components/Layout/MainLayout.razor.css
+++ b/FrontendTest/Components/Layout/MainLayout.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/FrontendTest/Components/Layout/NavMenu.razor
+++ b/FrontendTest/Components/Layout/NavMenu.razor
@@ -0,0 +1,29 @@
+<div class="top-row ps-3 navbar navbar-dark">
+    <div class="container-fluid">
+        <a class="navbar-brand" href="">FrontendTest</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="" Match="NavLinkMatch.All">
+                <span class="bi bi-house-door-fill-nav-menu" aria-hidden="true"></span> Home
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="counter">
+                <span class="bi bi-plus-square-fill-nav-menu" aria-hidden="true"></span> Counter
+            </NavLink>
+        </div>
+
+        <div class="nav-item px-3">
+            <NavLink class="nav-link" href="weather">
+                <span class="bi bi-list-nested-nav-menu" aria-hidden="true"></span> Weather
+            </NavLink>
+        </div>
+    </nav>
+</div>
--- a/FrontendTest/Components/Layout/NavMenu.razor.css
+++ b/FrontendTest/Components/Layout/NavMenu.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/FrontendTest/Components/Pages/Counter.razor
+++ b/FrontendTest/Components/Pages/Counter.razor
@@ -0,0 +1,23 @@
+@page "/counter"
+@using HopFrame.Web.Components
+@rendermode InteractiveServer
+
+<PageTitle>Counter</PageTitle>
+
+<h1>Counter</h1>
+
+<AuthorizedView Permissions="@permissions">
+    <p role="status">Current count: @currentCount</p>
+
+    <button class="btn btn-primary" @onclick="IncrementCount">Click me</button>
+</AuthorizedView>
+
+@code {
+    private int currentCount = 0;
+    private string[] permissions = ["web.counter"];
+
+    private void IncrementCount() {
+        currentCount++;
+    }
+
+}
--- a/FrontendTest/Components/Pages/Error.razor
+++ b/FrontendTest/Components/Pages/Error.razor
@@ -0,0 +1,35 @@
+@page "/Error"
+@using System.Diagnostics
+
+<PageTitle>Error</PageTitle>
+
+<h1 class="text-danger">Error.</h1>
+<h2 class="text-danger">An error occurred while processing your request.</h2>
+
+@if (ShowRequestId) {
+    <p>
+        <strong>Request ID:</strong> <code>@RequestId</code>
+    </p>
+}
+
+<h3>Development Mode</h3>
+<p>
+    Swapping to <strong>Development</strong> environment will display more detailed information about the error that occurred.
+</p>
+<p>
+    <strong>The Development environment shouldn't be enabled for deployed applications.</strong>
+    It can result in displaying sensitive information from exceptions to end users.
+    For local debugging, enable the <strong>Development</strong> environment by setting the <strong>ASPNETCORE_ENVIRONMENT</strong> environment variable to <strong>Development</strong>
+    and restarting the app.
+</p>
+
+@code{
+    [CascadingParameter] private HttpContext? HttpContext { get; set; }
+
+    private string? RequestId { get; set; }
+    private bool ShowRequestId => !string.IsNullOrEmpty(RequestId);
+
+    protected override void OnInitialized() =>
+        RequestId = Activity.Current?.Id ?? HttpContext?.TraceIdentifier;
+
+}
--- a/FrontendTest/Components/Pages/Home.razor
+++ b/FrontendTest/Components/Pages/Home.razor
@@ -0,0 +1,10 @@
+@page "/"
+@using HopFrame.Security.Claims
+
+<PageTitle>Home</PageTitle>
+
+<h1>Hello, world!</h1>
+
+Welcome to your new app. @Context.User?.Username
+
+@inject ITokenContext Context
--- a/FrontendTest/Components/Pages/Weather.razor
+++ b/FrontendTest/Components/Pages/Weather.razor
@@ -0,0 +1,61 @@
+@page "/weather"
+@attribute [StreamRendering]
+
+<PageTitle>Weather</PageTitle>
+
+<h1>Weather</h1>
+
+<p>This component demonstrates showing data.</p>
+
+@if (forecasts == null) {
+    <p>
+        <em>Loading...</em>
+    </p>
+}
+else {
+    <table class="table">
+        <thead>
+        <tr>
+            <th>Date</th>
+            <th>Temp. (C)</th>
+            <th>Temp. (F)</th>
+            <th>Summary</th>
+        </tr>
+        </thead>
+        <tbody>
+        @foreach (var forecast in forecasts) {
+            <tr>
+                <td>@forecast.Date.ToShortDateString()</td>
+                <td>@forecast.TemperatureC</td>
+                <td>@forecast.TemperatureF</td>
+                <td>@forecast.Summary</td>
+            </tr>
+        }
+        </tbody>
+    </table>
+}
+
+@code {
+    private WeatherForecast[]? forecasts;
+
+    protected override async Task OnInitializedAsync() {
+        // Simulate asynchronous loading to demonstrate streaming rendering
+        await Task.Delay(500);
+
+        var startDate = DateOnly.FromDateTime(DateTime.Now);
+        var summaries = new[] { "Freezing", "Bracing", "Chilly", "Cool", "Mild", "Warm", "Balmy", "Hot", "Sweltering", "Scorching" };
+        forecasts = Enumerable.Range(1, 5).Select(index => new WeatherForecast {
+            Date = startDate.AddDays(index),
+            TemperatureC = Random.Shared.Next(-20, 55),
+            Summary = summaries[Random.Shared.Next(summaries.Length)]
+        }).ToArray();
+    }
+
+    private class WeatherForecast {
+        public DateOnly Date { get; set; }
+        public int TemperatureC { get; set; }
+        public string? Summary { get; set; }
+        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
+    }
+
+}
--- a/FrontendTest/Components/Routes.razor
+++ b/FrontendTest/Components/Routes.razor
@@ -0,0 +1,6 @@
+<Router AppAssembly="typeof(Program).Assembly">
+    <Found Context="routeData">
+        <RouteView RouteData="routeData" DefaultLayout="typeof(Layout.MainLayout)"/>
+        <FocusOnNavigate RouteData="routeData" Selector="h1"/>
+    </Found>
+</Router>
--- a/FrontendTest/Components/_Imports.razor
+++ b/FrontendTest/Components/_Imports.razor
@@ -0,0 +1,10 @@
+@using System.Net.Http
+@using System.Net.Http.Json
+@using Microsoft.AspNetCore.Components.Forms
+@using Microsoft.AspNetCore.Components.Routing
+@using Microsoft.AspNetCore.Components.Web
+@using static Microsoft.AspNetCore.Components.Web.RenderMode
+@using Microsoft.AspNetCore.Components.Web.Virtualization
+@using Microsoft.JSInterop
+@using FrontendTest
+@using FrontendTest.Components
--- a/FrontendTest/DatabaseContext.cs
+++ b/FrontendTest/DatabaseContext.cs
@@ -0,0 +1,12 @@
+using HopFrame.Database;
+using Microsoft.EntityFrameworkCore;
+
+namespace FrontendTest;
+
+public class DatabaseContext : HopDbContextBase {
+    protected override void OnConfiguring(DbContextOptionsBuilder optionsBuilder) {
+        base.OnConfiguring(optionsBuilder);
+        
+        optionsBuilder.UseSqlite("Data Source=C:\\Users\\Remote\\Documents\\Projekte\\HopFrame\\DatabaseTest\\bin\\Debug\\net8.0\\test.db;Mode=ReadWrite;");
+    }
+}
--- a/FrontendTest/FrontendTest.csproj
+++ b/FrontendTest/FrontendTest.csproj
@@ -0,0 +1,17 @@
+<Project Sdk="Microsoft.NET.Sdk.Web">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>enable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+    </PropertyGroup>
+
+    <ItemGroup>
+      <ProjectReference Include="..\HopFrame.Web\HopFrame.Web.csproj" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <PackageReference Include="Microsoft.EntityFrameworkCore.Sqlite" Version="8.0.7" />
+    </ItemGroup>
+
+</Project>
--- a/FrontendTest/Program.cs
+++ b/FrontendTest/Program.cs
@@ -0,0 +1,35 @@
+using FrontendTest;
+using FrontendTest.Components;
+using HopFrame.Security.Authentication;
+using HopFrame.Web;
+
+var builder = WebApplication.CreateBuilder(args);
+
+builder.Services.AddDbContext<DatabaseContext>();
+builder.Services.AddHopFrameAuthentication<DatabaseContext>();
+builder.Services.AddHopFrameServices<DatabaseContext>();
+
+// Add services to the container.
+builder.Services.AddRazorComponents()
+    .AddInteractiveServerComponents();
+
+var app = builder.Build();
+
+// Configure the HTTP request pipeline.
+if (!app.Environment.IsDevelopment()) {
+    app.UseExceptionHandler("/Error", createScopeForErrors: true);
+    // The default HSTS value is 30 days. You may want to change this for production scenarios, see https://aka.ms/aspnetcore-hsts.
+    app.UseHsts();
+}
+
+app.UseHttpsRedirection();
+
+app.UseStaticFiles();
+app.UseAntiforgery();
+app.UseAuthorization();
+
+app.MapRazorComponents<App>()
+    .AddHopFramePages()
+    .AddInteractiveServerRenderMode();
+
+app.Run();
--- a/FrontendTest/Properties/launchSettings.json
+++ b/FrontendTest/Properties/launchSettings.json
@@ -0,0 +1,38 @@
+{
+  "$schema": "http://json.schemastore.org/launchsettings.json",
+    "iisSettings": {
+      "windowsAuthentication": false,
+      "anonymousAuthentication": true,
+      "iisExpress": {
+        "applicationUrl": "http://localhost:65174",
+        "sslPort": 44387
+      }
+    },
+    "profiles": {
+      "http": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": true,
+        "applicationUrl": "http://localhost:5007",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "https": {
+        "commandName": "Project",
+        "dotnetRunMessages": true,
+        "launchBrowser": false,
+        "applicationUrl": "https://localhost:7049;http://localhost:5007",
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      },
+      "IIS Express": {
+        "commandName": "IISExpress",
+        "launchBrowser": true,
+        "environmentVariables": {
+          "ASPNETCORE_ENVIRONMENT": "Development"
+        }
+      }
+    }
+  }
--- a/FrontendTest/appsettings.Development.json
+++ b/FrontendTest/appsettings.Development.json
@@ -0,0 +1,8 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning"
+    }
+  }
+}
--- a/FrontendTest/appsettings.json
+++ b/FrontendTest/appsettings.json
@@ -0,0 +1,10 @@
+{
+  "Logging": {
+    "LogLevel": {
+      "Default": "Information",
+      "Microsoft.AspNetCore": "Warning",
+      "HopFrame.Security.Authentication.HopFrameAuthentication": "None"
+    }
+  },
+  "AllowedHosts": "*"
+}
--- a/FrontendTest/wwwroot/app.css
+++ b/FrontendTest/wwwroot/app.css
@@ -0,0 +1,51 @@
+html, body {
+    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
+}
+
+a, .btn-link {
+    color: #006bb7;
+}
+
+.btn-primary {
+    color: #fff;
+    background-color: #1b6ec2;
+    border-color: #1861ac;
+}
+
+.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
+  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
+}
+
+.content {
+    padding-top: 1.1rem;
+}
+
+h1:focus {
+    outline: none;
+}
+
+.valid.modified:not([type=checkbox]) {
+    outline: 1px solid #26b050;
+}
+
+.invalid {
+    outline: 1px solid #e50000;
+}
+
+.validation-message {
+    color: #e50000;
+}
+
+.blazor-error-boundary {
+    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
+    padding: 1rem 1rem 1rem 3.7rem;
+    color: white;
+}
+
+    .blazor-error-boundary::after {
+        content: "An error has occurred."
+    }
+
+.darker-border-checkbox.form-check-input {
+    border-color: #929292;
+}
--- a/FrontendTest/wwwroot/bootstrap/bootstrap.min.css
+++ b/FrontendTest/wwwroot/bootstrap/bootstrap.min.css
--- a/FrontendTest/wwwroot/bootstrap/bootstrap.min.css.map
+++ b/FrontendTest/wwwroot/bootstrap/bootstrap.min.css.map
--- a/FrontendTest/wwwroot/favicon.png
+++ b/FrontendTest/wwwroot/favicon.png
--- a/HopFrame.Api/Controller/SecurityController.cs
+++ b/HopFrame.Api/Controller/SecurityController.cs
@@ -1,10 +1,7 @@
-using System.Globalization;
-using System.Text;
 using HopFrame.Api.Logic;
 using HopFrame.Api.Models;
 using HopFrame.Database;
 using HopFrame.Database.Models.Entries;
-using HopFrame.Security;
 using HopFrame.Security.Authentication;
 using HopFrame.Security.Authorization;
 using HopFrame.Security.Claims;
@@ -20,8 +17,6 @@ namespace HopFrame.Api.Controller;
 [Route("authentication")]
 public class SecurityController<TDbContext>(TDbContext context, IUserService users, ITokenContext tokenContext) : ControllerBase where TDbContext : HopDbContextBase {

-    private const string RefreshTokenType = "HopFrame.Security.RefreshToken";
-
    [HttpPut("login")]
    public async Task<ActionResult<SingleValueResult<string>>> Login([FromBody] UserLogin login) {
        var user = await users.GetUserByEmail(login.Email);
@@ -29,8 +24,7 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
        if (user is null)
            return LogicResult<SingleValueResult<string>>.NotFound("The provided email address was not found");

-        var hashedPassword = EncryptionManager.Hash(login.Password, Encoding.Default.GetBytes(user.CreatedAt.ToString(CultureInfo.InvariantCulture)));
-        if (hashedPassword != await users.GetUserPassword(user))
+        if (await users.CheckUserPassword(user, login.Password))
            return LogicResult<SingleValueResult<string>>.Forbidden("The provided password is not correct");

        var refreshToken = new TokenEntry {
@@ -46,7 +40,7 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
            UserId = user.Id.ToString()
        };
        
-        HttpContext.Response.Cookies.Append(RefreshTokenType, refreshToken.Token, new CookieOptions {
+        HttpContext.Response.Cookies.Append(ITokenContext.RefreshTokenType, refreshToken.Token, new CookieOptions {
            MaxAge = HopFrameAuthentication<TDbContext>.RefreshTokenTime,
            HttpOnly = true,
            Secure = true
@@ -82,21 +76,26 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
            UserId = user.Id.ToString()
        };
        
-        HttpContext.Response.Cookies.Append(RefreshTokenType, refreshToken.Token, new CookieOptions {
+        await context.Tokens.AddRangeAsync(refreshToken, accessToken);
+        await context.SaveChangesAsync();
+        
+        HttpContext.Response.Cookies.Append(ITokenContext.RefreshTokenType, refreshToken.Token, new CookieOptions {
            MaxAge = HopFrameAuthentication<TDbContext>.RefreshTokenTime,
            HttpOnly = true,
            Secure = true
        });
-
-        await context.Tokens.AddRangeAsync(refreshToken, accessToken);
-        await context.SaveChangesAsync();
+        HttpContext.Response.Cookies.Append(ITokenContext.AccessTokenType, accessToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<TDbContext>.AccessTokenTime,
+            HttpOnly = false,
+            Secure = true
+        });

        return LogicResult<SingleValueResult<string>>.Ok(accessToken.Token);
    }

    [HttpGet("authenticate")]
    public async Task<ActionResult<SingleValueResult<string>>> Authenticate() {
-        var refreshToken = HttpContext.Request.Cookies[RefreshTokenType];
+        var refreshToken = HttpContext.Request.Cookies[ITokenContext.RefreshTokenType];
        
        if (string.IsNullOrEmpty(refreshToken))
            return LogicResult<SingleValueResult<string>>.Conflict("Refresh token not provided");
@@ -119,13 +118,19 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
        await context.Tokens.AddAsync(accessToken);
        await context.SaveChangesAsync();
        
+        HttpContext.Response.Cookies.Append(ITokenContext.AccessTokenType, accessToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<TDbContext>.AccessTokenTime,
+            HttpOnly = false,
+            Secure = true
+        });
+        
        return LogicResult<SingleValueResult<string>>.Ok(accessToken.Token);
    }

    [HttpDelete("logout"), Authorized]
    public async Task<ActionResult> Logout() {
        var accessToken = HttpContext.User.GetAccessTokenId();
-        var refreshToken = HttpContext.Request.Cookies[RefreshTokenType];
+        var refreshToken = HttpContext.Request.Cookies[ITokenContext.RefreshTokenType];
        
        if (string.IsNullOrEmpty(accessToken) || string.IsNullOrEmpty(refreshToken))
            return LogicResult.Conflict("access or refresh token not provided");
@@ -142,7 +147,8 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
        context.Tokens.Remove(tokenEntries[1]);
        await context.SaveChangesAsync();
        
-        HttpContext.Response.Cookies.Delete(RefreshTokenType);
+        HttpContext.Response.Cookies.Delete(ITokenContext.RefreshTokenType);
+        HttpContext.Response.Cookies.Delete(ITokenContext.AccessTokenType);
        
        return LogicResult.Ok();
    }
@@ -151,13 +157,12 @@ public class SecurityController<TDbContext>(TDbContext context, IUserService use
    public async Task<ActionResult> Delete([FromBody] UserPasswordValidation validation) {
        var user = tokenContext.User;
        
-        var password = EncryptionManager.Hash(validation.Password, Encoding.Default.GetBytes(user.CreatedAt.ToString(CultureInfo.InvariantCulture)));
-        if (await users.GetUserPassword(user) != password)
+        if (await users.CheckUserPassword(user, validation.Password))
            return LogicResult.Forbidden("The provided password is not correct");

        await users.DeleteUser(user);
        
-        HttpContext.Response.Cookies.Delete(RefreshTokenType);
+        HttpContext.Response.Cookies.Delete(ITokenContext.RefreshTokenType);

        return LogicResult.Ok();
    }
--- a/HopFrame.Security/Authentication/HopFrameAuthentication.cs
+++ b/HopFrame.Security/Authentication/HopFrameAuthentication.cs
@@ -28,7 +28,7 @@ public class HopFrameAuthentication<TDbContext>(
    public static readonly TimeSpan RefreshTokenTime = new(30, 0, 0, 0);

    protected override async Task<AuthenticateResult> HandleAuthenticateAsync() {
-        var accessToken = Request.Headers["Authorization"].ToString();
+        var accessToken = Request.Cookies[ITokenContext.AccessTokenType];
        if (string.IsNullOrEmpty(accessToken)) return AuthenticateResult.Fail("No Access Token provided");
        
        var tokenEntry = await context.Tokens.SingleOrDefaultAsync(token => token.Token == accessToken);
@@ -36,7 +36,7 @@ public class HopFrameAuthentication<TDbContext>(
        if (tokenEntry is null) return AuthenticateResult.Fail("The provided Access Token does not exist");
        if (tokenEntry.CreatedAt + AccessTokenTime < DateTime.Now) return AuthenticateResult.Fail("The provided Access Token is expired");
        
-        if (!(await context.Users.AnyAsync(user => user.Id == tokenEntry.UserId)))
+        if (!await context.Users.AnyAsync(user => user.Id == tokenEntry.UserId))
            return AuthenticateResult.Fail("The provided Access Token does not match any user");

        var claims = new List<Claim> {
--- a/HopFrame.Security/Authentication/HopFrameAuthenticationExtensions.cs
+++ b/HopFrame.Security/Authentication/HopFrameAuthenticationExtensions.cs
@@ -17,13 +17,16 @@ public static class HopFrameAuthenticationExtensions {
    /// <param name="service">The service provider to add the services to</param>
    /// <typeparam name="TDbContext">The database object that saves all entities that are important for the security api</typeparam>
    /// <returns></returns>
-    public static AuthenticationBuilder AddHopFrameAuthentication<TDbContext>(this IServiceCollection service) where TDbContext : HopDbContextBase {
+    public static IServiceCollection AddHopFrameAuthentication<TDbContext>(this IServiceCollection service) where TDbContext : HopDbContextBase {
        service.TryAddSingleton<IHttpContextAccessor, HttpContextAccessor>();
        service.AddScoped<ITokenContext, TokenContextImplementor<TDbContext>>();
        service.AddScoped<IPermissionService, PermissionService<TDbContext>>();
        service.AddScoped<IUserService, UserService<TDbContext>>();
        
-        return service.AddAuthentication(HopFrameAuthentication<TDbContext>.SchemeName).AddScheme<AuthenticationSchemeOptions, HopFrameAuthentication<TDbContext>>(HopFrameAuthentication<TDbContext>.SchemeName, _ => {});
+        service.AddAuthentication(HopFrameAuthentication<TDbContext>.SchemeName).AddScheme<AuthenticationSchemeOptions, HopFrameAuthentication<TDbContext>>(HopFrameAuthentication<TDbContext>.SchemeName, _ => {});
+        service.AddAuthorization();
+
+        return service;
    }
    
 }
--- a/HopFrame.Security/Authorization/AuthorizedFilter.cs
+++ b/HopFrame.Security/Authorization/AuthorizedFilter.cs
@@ -24,7 +24,7 @@ public class AuthorizedFilter : IAuthorizationFilter {

        var permissions = context.HttpContext.User.GetPermissions();

-        if (!_permissions.Any(permission => PermissionValidator.IncludesPermission(permission, permissions))) {
+        if (!_permissions.All(permission => PermissionValidator.IncludesPermission(permission, permissions))) {
            context.Result = new UnauthorizedResult();
            return;
        }
--- a/HopFrame.Security/Authorization/PermissionValidator.cs
+++ b/HopFrame.Security/Authorization/PermissionValidator.cs
@@ -1,6 +1,6 @@
 namespace HopFrame.Security.Authorization;

-internal static class PermissionValidator {
+public static class PermissionValidator {
    
    public static bool IncludesPermission(string permission, string[] permissions) {
        if (permission == "*") return true;
--- a/HopFrame.Security/Claims/ITokenContext.cs
+++ b/HopFrame.Security/Claims/ITokenContext.cs
@@ -4,6 +4,9 @@ namespace HopFrame.Security.Claims;

 public interface ITokenContext {
    
+    public const string RefreshTokenType = "HopFrame.Security.RefreshToken";
+    public const string AccessTokenType = "HopFrame.Security.AccessToken";
+    
    /// <summary>
    /// This field specifies that a valid user is accessing the endpoint
    /// </summary>
--- a/HopFrame.Security/Models/UserLogin.cs
+++ b/HopFrame.Security/Models/UserLogin.cs
@@ -1,4 +1,4 @@
-namespace HopFrame.Api.Models;
+namespace HopFrame.Security.Models;

 public struct UserLogin {
    public string Email { get; set; }
--- a/HopFrame.Security/Models/UserRegister.cs
+++ b/HopFrame.Security/Models/UserRegister.cs
@@ -1,6 +1,6 @@
 namespace HopFrame.Security.Models;

-public struct UserRegister {
+public class UserRegister {
    public string Username { get; set; }
    public string Email { get; set; }
    public string Password { get; set; }
--- a/HopFrame.Security/Services/IUserService.cs
+++ b/HopFrame.Security/Services/IUserService.cs
@@ -23,5 +23,5 @@ public interface IUserService {

    Task DeleteUser(User user);

-    Task<string> GetUserPassword(User user);
+    Task<bool> CheckUserPassword(User user, string password);
 }
--- a/HopFrame.Security/Services/Implementation/UserService.cs
+++ b/HopFrame.Security/Services/Implementation/UserService.cs
@@ -39,6 +39,9 @@ internal sealed class UserService<TDbContext>(TDbContext context) : IUserService
    }

    public async Task<User> AddUser(UserRegister user) {
+        if (await GetUserByEmail(user.Email) is not null) return null;
+        if (await GetUserByUsername(user.Username) is not null) return null;
+        
        var entry = new UserEntry {
            Id = Guid.NewGuid().ToString(),
            Email = user.Email,
@@ -100,11 +103,14 @@ internal sealed class UserService<TDbContext>(TDbContext context) : IUserService
        await context.SaveChangesAsync();
    }

-    public Task<string> GetUserPassword(User user) {
+    public async Task<bool> CheckUserPassword(User user, string password) {
        var id = user.Id.ToString();
-        return context.Users
+        var hash = EncryptionManager.Hash(password, Encoding.Default.GetBytes(user.CreatedAt.ToString(CultureInfo.InvariantCulture)));
+
+        var entry = await context.Users
            .Where(entry => entry.Id == id)
-            .Select(entry => entry.Password)
            .SingleOrDefaultAsync();
+
+        return entry.Password == hash;
    }
 }
--- a/HopFrame.Web/Components/AuthorizedView.razor
+++ b/HopFrame.Web/Components/AuthorizedView.razor
@@ -0,0 +1,34 @@
+@using HopFrame.Security.Authorization
+@using HopFrame.Security.Claims
+@using Microsoft.AspNetCore.Http
+
+@if (IsAuthorized()) {
+    @ChildContent
+}
+
+@inject ITokenContext Auth
+@inject IHttpContextAccessor HttpAccessor
+
+@code {
+    [Parameter]
+    public string[] Permissions { get; set; }
+    
+    [Parameter]
+    public string Permission { get; set; }
+    
+    [Parameter]
+    public RenderFragment ChildContent { get; set; }
+
+    private bool IsAuthorized() {
+        if (!Auth.IsAuthenticated) return false;
+        if (Permissions.Length == 0 && string.IsNullOrEmpty(Permission)) return true;
+        
+        var perms = new List<string>(Permissions);
+        if (!string.IsNullOrEmpty(Permission)) perms.Add(Permission);
+        
+        var permissions = HttpAccessor.HttpContext?.User.GetPermissions();
+        if (!perms.All(perm => PermissionValidator.IncludesPermission(perm, permissions))) return false;
+
+        return true;
+    }
+}
--- a/HopFrame.Web/HopFrame.Web.csproj
+++ b/HopFrame.Web/HopFrame.Web.csproj
@@ -0,0 +1,24 @@
+<Project Sdk="Microsoft.NET.Sdk.Razor">
+
+    <PropertyGroup>
+        <TargetFramework>net8.0</TargetFramework>
+        <Nullable>disable</Nullable>
+        <ImplicitUsings>enable</ImplicitUsings>
+        <AddRazorSupportForMvc>true</AddRazorSupportForMvc>
+    </PropertyGroup>
+
+    <ItemGroup>
+        <FrameworkReference Include="Microsoft.AspNetCore.App"/>
+    </ItemGroup>
+
+    <ItemGroup>
+      <ProjectReference Include="..\HopFrame.Database\HopFrame.Database.csproj" />
+      <ProjectReference Include="..\HopFrame.Security\HopFrame.Security.csproj" />
+    </ItemGroup>
+
+    <ItemGroup>
+      <PackageReference Include="Microsoft.AspNetCore.Components" Version="8.0.7" />
+    </ItemGroup>
+
+
+</Project>
--- a/HopFrame.Web/Model/RegisterData.cs
+++ b/HopFrame.Web/Model/RegisterData.cs
@@ -0,0 +1,7 @@
+using HopFrame.Security.Models;
+
+namespace HopFrame.Web.Model;
+
+public class RegisterData : UserRegister {
+    public string RepeatedPassword { get; set; }
+}
--- a/HopFrame.Web/Pages/Register.razor
+++ b/HopFrame.Web/Pages/Register.razor
@@ -0,0 +1,99 @@
+@page "/register"
+@using HopFrame.Security.Services
+@using HopFrame.Web.Model
+@using HopFrame.Web.Services
+@using Microsoft.AspNetCore.Components.Forms
+
+@implements IDisposable
+
+<div class="register-wrapper">
+    <EditForm EditContext="_context" OnValidSubmit="OnRegister" FormName="register-form">
+        @*<AntiforgeryToken/>*@
+        <div class="field-wrapper">
+            <div class="mb-3">
+                <label for="email" class="form-label">Email address</label>
+                <InputText type="email" class="form-control" id="email" required @bind-Value="RegisterData.Email"/>
+                <ValidationMessage For="() => RegisterData.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="RegisterData.Username"/>
+                <ValidationMessage For="() => RegisterData.Username"/>
+            </div>
+            <div class="mb-3">
+                <label for="password" class="form-label">Password</label>
+                <InputText type="password" class="form-control" id="password" aria-describedby="passwordHelp" required @bind-Value="RegisterData.Password"/>
+                <div id="passwordHelp" class="form-text">The password needs to be at least 8 characters long</div>
+                <ValidationMessage For="() => RegisterData.Password"/>
+            </div>
+            <div class="mb-3">
+                <label for="passwordRepeat" class="form-label">Repeat password</label>
+                <InputText type="password" class="form-control" id="passwordRepeat" aria-describedby="passwordHelp" required @bind-Value="RegisterData.RepeatedPassword"/>
+                <ValidationMessage For="() => RegisterData.RepeatedPassword"/>
+            </div>
+            <button type="submit" class="btn btn-primary">Register</button>
+        </div>
+    </EditForm>
+</div>
+
+@inject NavigationManager Navigation
+@inject IUserService Users
+@inject IAuthService Auth
+
+@code {
+    public static string RedirectAfterRegister { get; set; } = "/";
+    private const string RefreshTokenType = "HopFrame.Security.RefreshToken";
+
+    [SupplyParameterFromForm]
+    private RegisterData RegisterData { get; set; }
+
+    private EditContext _context;
+    private ValidationMessageStore _messages;
+
+    protected override void OnInitialized() {
+        RegisterData ??= new();
+
+        _context = new EditContext(RegisterData);
+        _context.OnValidationRequested += ValidateForm;
+        _messages = new ValidationMessageStore(_context);
+    }
+
+    private async Task OnRegister() {
+        var hasConflict = false;
+        
+        if (await Users.GetUserByEmail(RegisterData.Email) is not null) {
+            _messages.Add(() => RegisterData.Email, "Email is already in use");
+            hasConflict = true;
+        }
+        
+        if (await Users.GetUserByUsername(RegisterData.Username) is not null) {
+            _messages.Add(() => RegisterData.Username, "Username is already in use");
+            hasConflict = true;
+        }
+        
+        if (hasConflict) return;
+
+        await Auth.Register(RegisterData);
+        Navigation.NavigateTo(RedirectAfterRegister, true);
+    }
+
+    private void ValidateForm(object sender, ValidationRequestedEventArgs e) {
+        _messages.Clear();
+
+        if (RegisterData.Password != RegisterData.RepeatedPassword) {
+            _messages.Add(() => RegisterData.RepeatedPassword,  "Passwords doesn't mach");
+        }
+
+        if (RegisterData.Password.Length < 8) {
+            _messages.Add(() => RegisterData.Password, "Password needs to be at least 8 characters long");
+        }
+
+        if (!RegisterData.Email.Contains("@") || !RegisterData.Email.Contains(".") || RegisterData.Email.EndsWith(".")) {
+            _messages.Add(() => RegisterData.Email, "Please enter a valid email address");
+        }
+    }
+
+    public void Dispose() {
+        _context.OnValidationRequested -= ValidateForm;
+    }
+}
--- a/HopFrame.Web/Pages/Register.razor.css
+++ b/HopFrame.Web/Pages/Register.razor.css
@@ -0,0 +1,14 @@
+.register-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.field-wrapper {
+    margin-top: 25vh;
+    min-width: 30vw;
+    
+    padding: 30px;
+    border: 2px solid #ced4da;
+    border-radius: 10px;
+}
--- a/HopFrame.Web/ServiceCollectionExtensions.cs
+++ b/HopFrame.Web/ServiceCollectionExtensions.cs
@@ -0,0 +1,20 @@
+using HopFrame.Database;
+using HopFrame.Web.Services;
+using HopFrame.Web.Services.Implementation;
+using Microsoft.AspNetCore.Builder;
+using Microsoft.Extensions.DependencyInjection;
+
+namespace HopFrame.Web;
+
+public static class ServiceCollectionExtensions {
+    public static IServiceCollection AddHopFrameServices<TDbContext>(this IServiceCollection services) where TDbContext : HopDbContextBase {
+        services.AddHttpClient();
+        services.AddScoped<IAuthService, AuthService<TDbContext>>();
+
+        return services;
+    }
+
+    public static RazorComponentsEndpointConventionBuilder AddHopFramePages(this RazorComponentsEndpointConventionBuilder builder) {
+        return builder.AddAdditionalAssemblies(typeof(ServiceCollectionExtensions).Assembly);
+    }
+}
--- a/HopFrame.Web/Services/IAuthService.cs
+++ b/HopFrame.Web/Services/IAuthService.cs
@@ -0,0 +1,12 @@
+using HopFrame.Security.Models;
+
+namespace HopFrame.Web.Services;
+
+public interface IAuthService {
+    Task Register(UserRegister register);
+    Task<bool> Login(UserLogin login);
+    Task Logout();
+
+    Task<bool> RefreshLogin();
+    Task<bool> IsLoggedIn();
+}
--- a/HopFrame.Web/Services/Implementation/AuthService.cs
+++ b/HopFrame.Web/Services/Implementation/AuthService.cs
@@ -0,0 +1,153 @@
+using HopFrame.Database;
+using HopFrame.Database.Models.Entries;
+using HopFrame.Security.Authentication;
+using HopFrame.Security.Claims;
+using HopFrame.Security.Models;
+using HopFrame.Security.Services;
+using Microsoft.AspNetCore.Http;
+using Microsoft.EntityFrameworkCore;
+
+namespace HopFrame.Web.Services.Implementation;
+
+public class AuthService<TDbContext>(
+    IUserService userService,
+    IHttpContextAccessor httpAccessor,
+    TDbContext context)
+    : IAuthService where TDbContext : HopDbContextBase {
+    
+    public async Task Register(UserRegister register) {
+        var user = await userService.AddUser(register);
+        if (user is null) return;
+        
+        var refreshToken = new TokenEntry {
+            CreatedAt = DateTime.Now,
+            Token = Guid.NewGuid().ToString(),
+            Type = TokenEntry.RefreshTokenType,
+            UserId = user.Id.ToString()
+        };
+        var accessToken = new TokenEntry {
+            CreatedAt = DateTime.Now,
+            Token = Guid.NewGuid().ToString(),
+            Type = TokenEntry.AccessTokenType,
+            UserId = user.Id.ToString()
+        };
+        
+        context.Tokens.AddRange(refreshToken, accessToken);
+        await context.SaveChangesAsync();
+        
+        httpAccessor.HttpContext?.Response.Cookies.Append(ITokenContext.RefreshTokenType, refreshToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<HopDbContextBase>.RefreshTokenTime,
+            HttpOnly = true,
+            Secure = true
+        });
+        httpAccessor.HttpContext?.Response.Cookies.Append(ITokenContext.AccessTokenType, accessToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<TDbContext>.AccessTokenTime,
+            HttpOnly = false,
+            Secure = true
+        });
+    }
+
+    public async Task<bool> Login(UserLogin login) {
+        var user = await userService.GetUserByEmail(login.Email);
+
+        if (user == null) return false;
+        if (await userService.CheckUserPassword(user, login.Password)) return false;
+        
+        var refreshToken = new TokenEntry {
+            CreatedAt = DateTime.Now,
+            Token = Guid.NewGuid().ToString(),
+            Type = TokenEntry.RefreshTokenType,
+            UserId = user.Id.ToString()
+        };
+        var accessToken = new TokenEntry {
+            CreatedAt = DateTime.Now,
+            Token = Guid.NewGuid().ToString(),
+            Type = TokenEntry.AccessTokenType,
+            UserId = user.Id.ToString()
+        };
+        
+        context.Tokens.AddRange(refreshToken, accessToken);
+        await context.SaveChangesAsync();
+        
+        httpAccessor.HttpContext?.Response.Cookies.Append(ITokenContext.RefreshTokenType, refreshToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<HopDbContextBase>.RefreshTokenTime,
+            HttpOnly = true,
+            Secure = true
+        });
+        httpAccessor.HttpContext?.Response.Cookies.Append(ITokenContext.AccessTokenType, accessToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<TDbContext>.AccessTokenTime,
+            HttpOnly = false,
+            Secure = true
+        });
+
+        return true;
+    }
+
+    public async Task Logout() {
+        var accessToken = httpAccessor.HttpContext?.Request.Cookies[ITokenContext.AccessTokenType];
+        var refreshToken = httpAccessor.HttpContext?.Request.Cookies[ITokenContext.RefreshTokenType];
+        
+        var tokenEntries = await context.Tokens.Where(token =>
+                (token.Token == accessToken && token.Type == TokenEntry.AccessTokenType) ||
+                (token.Token == refreshToken && token.Type == TokenEntry.RefreshTokenType))
+            .ToArrayAsync();
+        
+        context.Tokens.Remove(tokenEntries[0]);
+        context.Tokens.Remove(tokenEntries[1]);
+        await context.SaveChangesAsync();
+        
+        httpAccessor.HttpContext?.Response.Cookies.Delete(ITokenContext.RefreshTokenType);
+        httpAccessor.HttpContext?.Response.Cookies.Delete(ITokenContext.AccessTokenType);
+    }
+
+    public async Task<bool> RefreshLogin() {
+        if (await IsLoggedIn()) {
+            var oldToken = httpAccessor.HttpContext?.Request.Cookies[ITokenContext.AccessTokenType];
+            var entry = await context.Tokens.SingleOrDefaultAsync(token => token.Token == oldToken);
+
+            if (entry is not null) {
+                context.Tokens.Remove(entry);
+            }
+        }
+        
+        var refreshToken = httpAccessor.HttpContext?.Request.Cookies[ITokenContext.AccessTokenType];
+
+        if (string.IsNullOrWhiteSpace(refreshToken)) return false;
+        
+        var token = await context.Tokens.SingleOrDefaultAsync(token => token.Token == refreshToken && token.Type == TokenEntry.RefreshTokenType);
+
+        if (token is null) return false;
+        if (token.CreatedAt + HopFrameAuthentication<TDbContext>.RefreshTokenTime < DateTime.Now) return false;
+        
+        var accessToken = new TokenEntry {
+            CreatedAt = DateTime.Now,
+            Token = Guid.NewGuid().ToString(),
+            Type = TokenEntry.AccessTokenType,
+            UserId = token.UserId
+        };
+
+        await context.Tokens.AddAsync(accessToken);
+        await context.SaveChangesAsync();
+        
+        httpAccessor.HttpContext?.Response.Cookies.Append(ITokenContext.AccessTokenType, accessToken.Token, new CookieOptions {
+            MaxAge = HopFrameAuthentication<TDbContext>.AccessTokenTime,
+            HttpOnly = false,
+            Secure = true
+        });
+
+        return true;
+    }
+
+    public async Task<bool> IsLoggedIn() {
+        var accessToken = httpAccessor.HttpContext?.Request.Cookies[ITokenContext.AccessTokenType];
+        if (string.IsNullOrEmpty(accessToken)) return false;
+        
+        var tokenEntry = await context.Tokens.SingleOrDefaultAsync(token => token.Token == accessToken);
+        
+        if (tokenEntry is null) return false;
+        if (tokenEntry.CreatedAt + HopFrameAuthentication<TDbContext>.AccessTokenTime < DateTime.Now) return false;
+        if (!await context.Users.AnyAsync(user => user.Id == tokenEntry.UserId)) return false;
+
+        return true;
+    }
+}
--- a/HopFrame.sln
+++ b/HopFrame.sln
@@ -10,6 +10,10 @@ Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "HopFrame.Security", "HopFra
 EndProject
 Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "HopFrame.Api", "HopFrame.Api\HopFrame.Api.csproj", "{1E821490-AEDC-4F55-B758-52F4FADAB53A}"
 EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "HopFrame.Web", "HopFrame.Web\HopFrame.Web.csproj", "{3BE585BC-13A5-4BE4-A806-E9EC2D825956}"
+EndProject
+Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "FrontendTest", "FrontendTest\FrontendTest.csproj", "{8F983A37-63CF-48D5-988D-58B78EF8AECD}"
+EndProject
 Global
 	GlobalSection(SolutionConfigurationPlatforms) = preSolution
 		Debug|Any CPU = Debug|Any CPU
@@ -32,8 +36,17 @@ Global
 		{1E821490-AEDC-4F55-B758-52F4FADAB53A}.Debug|Any CPU.Build.0 = Debug|Any CPU
 		{1E821490-AEDC-4F55-B758-52F4FADAB53A}.Release|Any CPU.ActiveCfg = Release|Any CPU
 		{1E821490-AEDC-4F55-B758-52F4FADAB53A}.Release|Any CPU.Build.0 = Release|Any CPU
+		{3BE585BC-13A5-4BE4-A806-E9EC2D825956}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{3BE585BC-13A5-4BE4-A806-E9EC2D825956}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{3BE585BC-13A5-4BE4-A806-E9EC2D825956}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{3BE585BC-13A5-4BE4-A806-E9EC2D825956}.Release|Any CPU.Build.0 = Release|Any CPU
+		{8F983A37-63CF-48D5-988D-58B78EF8AECD}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
+		{8F983A37-63CF-48D5-988D-58B78EF8AECD}.Debug|Any CPU.Build.0 = Debug|Any CPU
+		{8F983A37-63CF-48D5-988D-58B78EF8AECD}.Release|Any CPU.ActiveCfg = Release|Any CPU
+		{8F983A37-63CF-48D5-988D-58B78EF8AECD}.Release|Any CPU.Build.0 = Release|Any CPU
 	EndGlobalSection
 	GlobalSection(NestedProjects) = preSolution
 		{921159CE-AF75-44C3-A3F9-6B9B1A4E85CF} = {58703056-8DAD-4221-BBE3-42425D2F4929}
+		{8F983A37-63CF-48D5-988D-58B78EF8AECD} = {58703056-8DAD-4221-BBE3-42425D2F4929}
 	EndGlobalSection
 EndGlobal