Revize 587b80b5

Bug fixes, creating and updating user, role seed
refs #8763 @0.5h

docs/Leuze.Core.Application.Identity.xml

@@ -57 +57 @@
             
             </summary>
         </member>
-        <member name="M:Leuze.Core.Application.Identity.ApplicationRole.#ctor(System.String)">
+        <member name="M:Leuze.Core.Application.Identity.ApplicationRole.#ctor(System.String,System.Boolean)">
             <summary>
             
             </summary>
             <param name="name"></param>
+            <param name="isDefault"></param>
         </member>
         <member name="P:Leuze.Core.Application.Identity.ApplicationRole.Permissions">
             <summary>
@@ -96 +97 @@
             </summary>
             <param name="name"></param>
         </member>
+        <member name="P:Leuze.Core.Application.Identity.ApplicationRole.IsDefault">
+            <summary>
+            
+            </summary>
+        </member>
         <member name="T:Leuze.Core.Application.Identity.ApplicationRoleClaim">
             <summary>
             
@@ -129 +135 @@
             
             </summary>
         </member>
+        <member name="M:Leuze.Core.Application.Identity.ApplicationUser.ChangeEmail(System.String)">
+            <summary>
+            
+            </summary>
+            <param name="email"></param>
+        </member>
         <member name="T:Leuze.Core.Application.Identity.ApplicationUserClaim">
             <summary>
             

src/Core/Application/Leuze.Core.Application.Identity/ApplicationRole.cs

@@ -19 +19 @@
         /// 
         /// </summary>
         /// <param name="name"></param>
-        public ApplicationRole(string name) => (Name, NormalizedName) = (name, name.ToUpper());
+        /// <param name="isDefault"></param>
+        public ApplicationRole(string name, bool isDefault) => (Name, NormalizedName, IsDefault) = (name, name.ToUpper(), isDefault);
 
         private List<ApplicationPermission> _permissions = new List<ApplicationPermission>();
 
@@ -57 +58 @@
         /// </summary>
         /// <param name="name"></param>
         public void ChangeName(string name) => (Name, NormalizedName) = (name, name.ToUpper());
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public bool IsDefault { get; private set; }
+
     }
 }

src/Core/Application/Leuze.Core.Application.Identity/ApplicationUser.cs

@@ -36 +36 @@
         /// </summary>
         public IReadOnlyCollection<ApplicationRole> Roles => _roles.AsReadOnly();
 
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="email"></param>
+        public void ChangeEmail(string email) => (UserName, Email) = (email, email);
     }
 }

src/Core/Application/Leuze.Core.Application.UI/App.razor

@@ -3 +3 @@
 <CascadingAuthenticationState>
     <Router AppAssembly="@typeof(CoreUIExtension).Assembly" AdditionalAssemblies="LoadAdditionalAssemblies">
         <Found Context="routeData">
-            <AuthorizeRouteView RouteData="@routeData"/>
+            <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(MainLayout)">
+                <NotAuthorized>
+                    <RedirectToLogin />
+                </NotAuthorized>
+                <Authorizing>
+                    <p>Just checking with the boss you can come in.</p>
+                </Authorizing>
+            </AuthorizeRouteView>
         </Found>
         <NotFound>
-            <LayoutView Layout="@typeof(MainLayout)">
+            <LayoutView Layout="@typeof(EmptyLayout)">
                 <p>Sorry, there's nothing at this address.</p>
             </LayoutView>
         </NotFound>

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/IdentityHostingStartup.cs

@@ +1 @@
+using Microsoft.AspNetCore.Hosting;
+using Microsoft.Extensions.DependencyInjection;
+
+[assembly: HostingStartup(typeof(Leuze.Core.Application.UI.Areas.Identity.IdentityHostingStartup))]
+namespace Leuze.Core.Application.UI.Areas.Identity
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    public class IdentityHostingStartup : IHostingStartup
+    {
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="builder"></param>
+        public void Configure(IWebHostBuilder builder)
+        {
+            builder.ConfigureServices((context, services) => services.AddLeuzeCore(context.Configuration, context.HostingEnvironment));
+            builder.Configure((app) => app.UseLeuzeCore());
+        }
+    }
+}

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/Pages/Account/Login.cshtml

@@ +1 @@
+@page
+@model LoginModel
+
+@{
+    ViewData["Title"] = "Log in";
+}
+
+<style>
+    .login_leuze_logo {
+        height: 45px;
+        position: absolute;
+        top: 60px;
+        left: 120px;
+    }
+
+    .login_leuze_robot {
+        height: 450px;
+        position: absolute;
+        bottom: 0;
+        left: 120px;
+    }
+
+    @@media and (max-width: 1900px) {
+        .login_leuze_logo {
+            height: 35px;
+        }
+        .login_leuze_robot {
+            height: 275px;
+        }
+    }
+
+    @@media (max-width: 1400px) {
+        .login_leuze_logo {
+            left: auto;
+            position: relative;
+        }
+        .login_leuze_robot {
+            display: none;
+        }
+    }
+</style>
+<style>
+    .login_form {
+        width: 300px;
+        height: 357px;
+        padding-left: 200px;
+        border-left: 1px solid #EDEDED;
+        position: absolute;
+        top: calc(50% - 178.5px);
+        right: 200px;
+    }
+    .login_row {
+        width: 100%;
+        margin-bottom: 24px;
+    }
+    .login_label {
+        width: 100%;
+        color: #9D9D9D;
+        font-size: 14px;
+        text-transform: uppercase;
+        font-weight: 700;
+        font-family: 'Arial';
+    }
+    .login_input {
+        width: calc(100% - 24px);
+        padding: 10px 12px;
+        color: #111111;
+        font-size: 16px;
+        font-weight: 700;
+        font-family: 'Arial';
+        border-radius: 8px;
+        border: 1px solid #DADADA;
+        outline: none;
+        margin-top: 6px;
+    }
+    .login_button {
+        width: 100%;
+        padding: 12px;
+        color: #E30613;
+        font-size: 14px;
+        font-weight: 700;
+        font-family: 'Arial';
+        border-radius: 8px;
+        border: 2px solid #E30613;
+        text-transform: uppercase;
+        outline: none;
+        background-color: white;
+        margin-top: 12px;
+    }
+    .login_or {
+        width: 100%;
+        color: #DADADA;
+        font-size: 14px;
+        font-weight: 700;
+        font-family: 'Arial';
+        text-transform: uppercase;
+        position: relative;
+        text-align: center;
+        margin: 24px 0;
+    }
+        .login_or::before {
+            content: '';
+            width: 100%;
+            height: 1px;
+            background-color: #EDEDED;
+            left: 0;
+            top: 10px;
+            position: absolute;
+        }
+    .login_orText {
+        background-color: white;
+        width: fit-content;
+        margin: 0 auto;
+        position: relative;
+        padding: 0 12px;
+    }
+    .login_adWrapper {
+        width: 100%;
+        text-align: center;
+    }
+    .login_microsoft {
+        width: 24px;
+        height: 24px;
+    }
+    @@media (max-width: 1400px) {
+        .login_form {
+            width: 400px;
+            right: calc(50% - 200px);
+            border-left: none;
+            padding-left: 0;
+        }
+    }
+
+    @@media (max-width: 450px) {
+        .login_form {
+            width: 90%;
+            position: relative;
+            top: 0;
+            right: 5%;
+            left: 5%;
+            margin-top: 150px;
+            padding-bottom: 24px;
+            height: auto;
+        }
+    }
+</style>
+
+<img class="login_leuze_logo" src="/Resources/Icons/logo.svg" />
+<img class="login_leuze_robot" src="/Resources/Icons/login-robot.svg" />
+
+<form id="account" method="post" class="login_form">
+    <div class="login_row">
+        <label class="login_label" asp-for="Input.Email">Přihlašovací jméno</label>
+        <input class="login_input" type="email" asp-for="Input.Email" />
+    </div>
+    <div class="login_row">
+        <label class="login_label" asp-for="Input.Password">Heslo</label>
+        <input class="login_input" type="password" asp-for="Input.Password" />
+    </div>
+    <p>@Model.ErrorMessage</p>
+    <button type="submit" class="login_button">Přihlásit se</button>
+    <div class="login_or">
+        <div class="login_orText">nebo</div>
+    </div>
+    <div class="login_adWrapper">
+        <a href="/MicrosoftIdentity/Account/SignIn">
+            <img class="login_microsoft" src="/Resources/Icons/microsoft-logo.svg" />
+        </a>
+    </div>
+</form>

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/Pages/Account/Login.cshtml.cs

@@ +1 @@
+using System;
+using System.Collections.Generic;
+using System.ComponentModel.DataAnnotations;
+using System.Linq;
+using System.Threading.Tasks;
+using Leuze.Core.Application.Identity;
+using Microsoft.AspNetCore.Authentication;
+using Microsoft.AspNetCore.Authorization;
+using Microsoft.AspNetCore.Identity;
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+using Microsoft.Extensions.Logging;
+
+namespace Leuze.Core.Application.UI.Areas.Pages.Account
+{
+    /// <summary>
+    /// 
+    /// </summary>
+    [AllowAnonymous]
+    public class LoginModel : PageModel
+    {
+        private readonly UserManager<ApplicationUser> _userManager;
+        private readonly SignInManager<ApplicationUser> _signInManager;
+        private readonly ILogger<LoginModel> _logger;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="signInManager"></param>
+        /// <param name="logger"></param>
+        /// <param name="userManager"></param>
+        public LoginModel(SignInManager<ApplicationUser> signInManager,
+            ILogger<LoginModel> logger,
+            UserManager<ApplicationUser> userManager)
+            => (_userManager, _signInManager, _logger) = (userManager, signInManager, logger);
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [BindProperty]
+        public InputModel Input { get; set; } = new();
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public string ReturnUrl { get; set; } = null!;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        [TempData]
+        public string ErrorMessage { get; set; } = null!;
+
+        /// <summary>
+        /// 
+        /// </summary>
+        public class InputModel
+        {
+            /// <summary>
+            /// 
+            /// </summary>
+            [Required]
+            [EmailAddress]
+            public string Email { get; set; } = string.Empty;
+
+            /// <summary>
+            /// 
+            /// </summary>
+            [Required]
+            [DataType(DataType.Password)]
+            public string Password { get; set; } = string.Empty;
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="returnUrl"></param>
+        /// <returns></returns>
+        public async Task OnGetAsync(string returnUrl = null!)
+        {
+            if (!string.IsNullOrEmpty(ErrorMessage))
+            {
+                ModelState.AddModelError(string.Empty, ErrorMessage);
+            }
+
+            returnUrl ??= Url.Content("~/")!;
+
+            // Clear the existing external cookie to ensure a clean login process
+            await HttpContext.SignOutAsync(IdentityConstants.ExternalScheme);
+
+            ReturnUrl = returnUrl;
+        }
+
+        /// <summary>
+        /// 
+        /// </summary>
+        /// <param name="returnUrl"></param>
+        /// <returns></returns>
+        public async Task<IActionResult> OnPostAsync(string? returnUrl = null!)
+        {
+            returnUrl ??= Url.Content("~/")!;
+
+            if (ModelState.IsValid)
+            {
+                var result = await _signInManager.PasswordSignInAsync(Input.Email, Input.Password, true, false);
+                if (result.Succeeded)
+                {
+                    _logger.LogInformation("User logged in.");
+                    return LocalRedirect(returnUrl);
+                }
+                else
+                {
+                    ModelState.AddModelError(string.Empty, "Invalid login attempt.");
+                    ErrorMessage = "Invalid email or password";
+                    return Page();
+                }
+            }
+
+            // If we got this far, something failed, redisplay form
+            return Page();
+        }
+    }
+}

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/Pages/Shared/_Layout.cshtml

@@ +1 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@ViewData["Title"] - BlazorLogin</title>
+</head>
+<body>
+    <div class="container">
+        <main role="main" class="pb-3">
+            @RenderBody()
+        </main>
+    </div>
+    @RenderSection("Scripts", required: false)
+</body>
+</html>

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/Pages/_ViewImports.cshtml

@@ +1 @@
+@using Microsoft.AspNetCore.Identity
+@using Leuze.Core.Application.UI.Areas.Pages.Account
+@using Leuze.Core.Application.UI.Areas.Pages
+@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers

src/Core/Application/Leuze.Core.Application.UI/Areas/Identity/Pages/_ViewStart.cshtml

@@ +1 @@
+
+@{
+    Layout = "/Areas/Identity/Pages/Shared/_Layout.cshtml";
+}

src/Core/Application/Leuze.Core.Application.UI/Components/Login/Form.razor

@@ -1 @@
-
+@inject IMediator _mediator
+@inject NavigationManager _navManager
+
 <Styled @bind-Classname="@_form">
-    width: 504px;
+    width: 300px;
     height: 357px;
     padding-left: 200px;
     border-left: 1px solid #EDEDED;
@@ -37 +39 @@
     font-family: 'Arial';
 </Styled>
 <Styled @bind-Classname="@_input">
-    width: 100%;
+    width: calc(100% - 24px);
     padding: 10px 12px;
     color: #111111;
     font-size: 16px;
@@ -46 +48 @@
     border-radius: 8px;
     border: 1px solid #DADADA;
     outline: none;
+    margin-top: 6px;
 </Styled>
 <Styled @bind-Classname="@_button">
     width: 100%;
@@ -97 +100 @@
     height: 24px;
 </Styled>
 
-<form class="@_form">
+<form @onsubmit="Login" class="@_form">
     <div class="@_row">
         <label class="@_label">Přihlašovací jméno</label>
-        <input class="@_input" />
+        <input class="@_input" type="email" @bind-value="Email" />
     </div>
     <div class="@_row">
         <label class="@_label">Heslo</label>
-        <input class="@_input" />
+        <input class="@_input" type="password" @bind-value="Password" />
+    </div>
+    <p>@Error</p>
+    <button @onclick="Login" class="@_button" @onkeypress:preventDefault>Přihlásit se</button>
+    <div class="@_or">
+        <div class="@_orText">nebo</div>
+    </div>
+    <div class="@_adWrapper">
+        <a href="MicrosoftIdentity/Account/SignIn">
+            <img class="@_microsoft" src="/Resources/Icons/microsoft-logo.svg" />
+        </a>
     </div>
-    <button class="@_button">Přihlásit se</button>
-   
-    
-        <div class="@_or">
-            <div class="@_orText">nebo</div>
-        </div>
-        <div class="@_adWrapper">
-            <a href="MicrosoftIdentity/Account/SignIn">
-                <img class="@_microsoft" src="/Resources/Icons/microsoft-logo.svg" />
-            </a>
-        </div>
-    
 </form>
 
 @code {
@@ -131 +132 @@
     private string _adWrapper = null!;
     private string _microsoft = null!;
 
-    /// <summary>
-    /// 
-    /// </summary>
-    //public List<AuthenticationScheme> ExternalLogins { get; set; } = new();
+    private string Email { get; set; } = string.Empty;
+    private string Password { get; set; } = string.Empty;
+
+    private string Error { get; set; } = string.Empty;
 
-    /// <summary>
-    /// 
-    /// </summary>
-    /// <returns></returns>
-   /* protected override async Task OnInitializedAsync()
+    private async Task Login()
     {
-        ExternalLogins = (await _signInManager.GetExternalAuthenticationSchemesAsync()).ToList();
-    }*/
+        var result = await _mediator.Send(new VerifyLocalUser.Command(Email, Password));
+
+        if (!result.IsSuccess) Error = result.Errors.First();
+        else _navManager.NavigateTo("/");
+
+    }
+
 }

src/Core/Application/Leuze.Core.Application.UI/Leuze.Core.Application.UI.csproj

@@ -22 +22 @@
   </PropertyGroup>
 
   <ItemGroup>
+    <PackageReference Include="Blazored.Toast" Version="3.1.2" />
     <PackageReference Include="BlazorStyled" Version="3.1.0" />
     <PackageReference Include="Microsoft.AspNetCore.Authentication.Cookies" Version="2.2.0" />
+    <PackageReference Include="Microsoft.VisualStudio.Web.CodeGeneration.Design" Version="5.0.2" />
   </ItemGroup>
 
   <ItemGroup>

src/Core/Application/Leuze.Core.Application.UI/Pages/Login.razor

@@ -1 @@
-@page "/Account/Login"
+@page "/Identity/Account/ResetPassword"
 @attribute [AllowAnonymous]
 @layout EmptyLayout
 <Styled>

src/Core/Application/Leuze.Core.Application.UI/Pages/Testing/User.razor

@@ +1 @@
+@page "/Testing"
+@attribute [AllowAnonymous]
+@layout EmptyLayout
+@inject IMediator _mediator
+<h3>Testovací GUI pro tvorbu lokálních uživatelů</h3>
+
+<button @onclick="CreateUser">Vytvořit uživatele [e-mail]</button>
+<br/>
+Token: @Token
+<br/>
+<button @onclick="SetPassword">Nastavit heslo Test123*</button>
+
+@code {
+
+    protected string Token { get; set; }
+
+    protected async Task CreateUser()
+    {
+        var result = await _mediator.Send(new CreateLocalUser.Command("Testovací Uživatel", "[e-mail]", null!, new List<Guid>()));
+        Token = result.Result!.Token;
+    }
+
+    protected async Task SetPassword()
+    {
+        await _mediator.Send(new ResetLocalUserPassword.Command("[e-mail]", Token, "Test123*"));
+    }
+
+}

src/Core/Application/Leuze.Core.Application.UI/Pages/Users/Components/UserAside.razor

@@ +1 @@
+@inject IMediator _mediator
+@inject IToastService toastService
+
+<aside class="@_aside side_dialog">
+    <div class="dialog_header">
+        <div>Nový uživatel</div>
+        <button @onclick="Close" type="button">X</button>
+    </div>
+    <div class="dialog_body">
+        @if (UserId != default(Guid) && Loading)
+        {
+            <div>Načítám uživatele</div>
+        }
+        else
+        {
+            <div class="input_row">
+                <label class="input_label">Jméno a příjmení<span style="color:#ff0000">*</span></label>
+                <input type="text" placeholder="Jméno a příjmení" disabled="@IsAdUser" @bind-value="Name" />
+            </div>
+            <div class="input_row">
+                <label class="input_label">E-mailová adresa<span style="color:#ff0000">*</span></label>
+                <input type="email" placeholder="E-mail" @bind-value="Email" />
+            </div>
+            <div class="section_title">Role<span style="color:#ff0000">*</span></div>
+            <div class="input_row">
+                @if (Roles is null)
+                {
+                    <div>Načítám role</div>
+                }
+                else
+                {
+                    @foreach (var role in Roles)
+                    {
+                        <label class="container" @onclick="() => SetRole(role.Id)">
+                            @role.Name
+                            <input type="checkbox" checked="@(Role == role.Id)">
+                            <span class="checkmark"></span>
+                        </label>
+                    }
+                    @if (Roles.Count == 0)
+                    {
+                        <div>Nenalezeny žádné role</div>
+                    }
+                }
+            </div>
+            <div class="section_title">Nadřízený</div>
+            <div class="input_row">
+                @if (Users is null)
+                {
+                    <div>Načítám uživatele</div>
+                }
+                else
+                {
+                    <select @onchange="(e) => SetUser((e.Value != null && (string)e.Value != string.Empty) ? Guid.Parse((string)e.Value) : default(Guid))">
+                        <option value="" selected="@(Senior == default(Guid))">Vyberte uživatele</option>
+
+                        @foreach (var user in Users)
+                        {
+                            <option value="@user.Id" selected="@(Senior == user.Id)">@user.Name</option>
+                        }
+                    </select>
+                }
+            </div>
+        }
+    </div>
+    <div class="button_container">
+        <button @onclick="FireAction" disabled="@(IsValidModel() || Sent)">@(UserId == default(Guid) ? "Vytvořit" : "Uložit")</button>
+        <button @onclick="Close">Zrušit</button>
+    </div>
+</aside>
+
+<Styled @bind-Classname="@_aside">
+    right: @(Show ? "0" : "-525")px;
+</Styled>
+<Styled>
+    .side_dialog {
+    width: 500px;
+    height: 100%;
+    position: fixed;
+    background-color: #FFFFFF;
+    z-index: 1;
+    top: 0;
+    right: -525px;
+    transition: .25s right;
+    -webkit-box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
+    -moz-box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
+    box-shadow: 0 0 6px 0 rgba(0,0,0,0.1);
+    }
+    .dialog_body {
+    background-color: #FFFFFF;
+    width: calc(100% - 72px);
+    height: calc(100% - 216px);
+    padding: 36px;
+    }
+    .side_dialog .button_container {
+    width: calc(100% - 72px);
+    padding: 12px 36px;
+    height: 60px;
+    background-color: #F8F8F8;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    column-gap: 24px;
+    align-items: center;
+    }
+    .side_dialog .button_container button {
+    border: 1px solid #111111;
+    border-radius: 4px;
+    color: #111111;
+    padding: 12px 16px;
+    background-color: #F8F8F8;
+    font-size: 14px;
+    font-weight: 400;
+    cursor: pointer;
+    transition: .25s background-color, .25s color, .25s border;
+    }
+    .side_dialog .button_container button:hover {
+    background-color: #EEEEEE;
+    border: 1px solid #EEEEEE;
+    color: #111111;
+    }
+    .side_dialog .button_container button:first-child {
+    border: 1px solid #E30613;
+    color: #E30613;
+    }
+    .side_dialog .button_container button:first-child:hover {
+    background-color: #E30613;
+    color: #FFFFFF;
+    }
+    .side_dialog .dialog_header {
+    height: 36px;
+    padding: 12px 36px;
+    width: calc(100% - 72px);
+    border-bottom: 1px solid #F8F8F8;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+    .side_dialog .dialog_header div {
+    font-size: 20px;
+    }
+    .side_dialog .dialog_header button {
+    border: none;
+    background: none;
+    cursor: pointer;
+    }
+
+    .input_row {
+    margin-bottom: 24px;
+    }
+    .input_row input:not([type="checkbox"]) {
+    width: calc(100% - 34px);
+    padding: 12px 16px;
+    border-radius: 4px;
+    border: 1px solid #C8C8C8;
+    font-size: 14px;
+    }
+    .input_row label.input_label {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111111;
+    padding-bottom: 4px;
+    display: block;
+    }
+    .section_title {
+    font-size: 16px;
+    font-weight: 700;
+    color: #111111;
+    padding-bottom: 4px;
+    display: block;
+    }
+    .container {
+    display: block;
+    position: relative;
+    padding-left: 25px;
+    margin-bottom: 12px;
+    cursor: pointer;
+    font-size: 16px;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    }
+    .container input {
+    position: absolute;
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    }
+    .checkmark {
+    position: absolute;
+    top: 2px;
+    left: 0;
+    height: 15px;
+    width: 15px;
+    background-color: #eee;
+    border-radius: 50%;
+    }
+    .container:hover input ~ .checkmark {
+    background-color: #ccc;
+    }
+    .container input:checked ~ .checkmark {
+    background-color: #E30613;
+    }
+    .checkmark:after {
+    content: "";
+    position: absolute;
+    display: none;
+    }
+    .container input:checked ~ .checkmark:after {
+    display: block;
+    }
+    .container .checkmark:after {
+    top: 5px;
+    left: 5px;
+    width: 5px;
+    height: 5px;
+    border-radius: 50%;
+    background: white;
+    }
+</Styled>
+
+@code {
+    private string _aside;
+
+    private bool Sent { get; set; } = false;
+
+    private bool Loading { get; set; } = true;
+
+    private List<RoleItem> Roles { get; set; } = null!;
+
+    private List<UserShortDto> Users { get; set; } = null!;
+
+    private string Name { get; set; } = string.Empty;
+
+    private string Email { get; set; } = string.Empty;
+
+    private Guid Role { get; set; } = default(Guid);
+
+    private Guid Senior { get; set; } = default(Guid);
+
+    private bool IsAdUser { get; set; } = false;
+
+    [Parameter]
+    public Guid UserId { get; set; } = default(Guid);
+
+    [Parameter]
+    public bool Show { get; set; } = false;
+
+    [Parameter]
+    public EventCallback ToggleUserAside { get; set; }
+
+    [Parameter]
+    public EventCallback RefetchUsers { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        await FetchRoles();
+        await FetchUsers();
+    }
+
+    protected override async Task OnParametersSetAsync()
+    {
+        await base.OnParametersSetAsync();
+        await FetchUser();
+    }
+
+    private async Task Close()
+    {
+        ResetValues();
+        await ToggleUserAside.InvokeAsync();
+    }
+
+    private void ResetValues()
+    {
+        Name = string.Empty;
+        Email = string.Empty;
+        Role = default(Guid);
+    }
+
+    private async Task FetchUser()
+    {
+        var result = await _mediator.Send(new GetUserDetail.Query(UserId));
+        if (result.IsSuccess && result.Result is not null)
+        {
+            Name = result.Result.User.Name;
+            Email = result.Result.User.Email;
+            Role = result.Result.User.Role.Id;
+            Loading = false;
+        }
+    }
+
+    private async Task FetchUsers()
+    {
+        var result = await _mediator.Send(new GetUsersList.Query(false));
+        if (result.IsSuccess && result.Result is not null)
+        {
+            if (UserId == default(Guid)) Users = result.Result.List;
+            else Users = result.Result.List.Where(o => o.Id != UserId).ToList();
+        }
+    }
+
+    private async Task FetchRoles()
+    {
+        var result = await _mediator.Send(new GetRolesList.Query());
+        if (result.IsSuccess && result.Result is not null) Roles = result.Result.List;
+    }
+
+    private void SetRole(Guid id) => Role = id;
+
+    private void SetUser(Guid id) => Senior = id;
+
+    private bool IsValidModel() => Email == string.Empty || Role == default(Guid) || Name == string.Empty;
+
+    private async Task FireAction()
+    {
+        if (UserId == default(Guid))
+        {
+            var result = await _mediator.Send(new CreateLocalUser.Command(Name, Email, Senior == default(Guid) ? null! : Senior, new List<Guid>() { Role }));
+            if (result.IsSuccess)
+            {
+                toastService.ShowSuccess("Uživatel úspěšně vytvořen");
+            }
+            else toastService.ShowError("Uživatele se nepodařilo vytvořit");
+        }
+        else
+        {
+            var result = await _mediator.Send(new UpdateUser.Command(UserId, Name, Email, Senior == default(Guid) ? null! : Senior, new List<Guid>() { Role }));
+            if (result.IsSuccess)
+            {
+                toastService.ShowSuccess("Uživatel úspěšně vytvořen");
+            }
+            else toastService.ShowError("Uživatele se nepodařilo uložit");
+        }
+        ResetValues();
+        await ToggleUserAside.InvokeAsync();
+        await RefetchUsers.InvokeAsync();
+    }
+
+}

src/Core/Application/Leuze.Core.Application.UI/Pages/Users/List.razor

@@ +1 @@
+@page "/Users"
+@attribute [Authorize]
+@layout MainLayout
+@inject IMediator _mediator
+<div class="section_header">
+    <h2>Správa uživatelů</h2>
+    <button type="button" @onclick="() => SetUserAsideId(default(Guid))">
+        <img src="/Resources/Icons/plus.svg" class="plus_icon" />
+        <span>Přidat uživatele</span>
+    </button>
+</div>
+@if (Users is not null)
+{
+    <table class="actions" style="width:100%">
+        <tr>
+            <th>Jméno</th>
+            <th>Email</th>
+            <th>Role</th>
+            <th>Typ</th>
+            <th>Akce</th>
+        </tr>
+        @foreach (var user in Users)
+        {
+    <tr>
+        <td>@user.Name</td>
+        <td>@user.Email</td>
+        <td>@user.Role</td>
+        <td>@(user.IsAdUser ? "AD" : "Lokální")</td>
+        <td>
+            <div @onclick="() => SetUserAsideId(user.Id)">Upravit</div>
+        </td>
+    </tr>
+        }
+    </table>
+    @if (Users.Count > 0)
+    {
+        <div class="pagination">
+            <div class="left">
+                <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-left.svg"/></button>
+                <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-left.svg" /></button>
+                <input type="number" @bind-value="PageNumber" />
+                <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-right.svg" /></button>
+                <button class="pagination_button"><img class="pagination_icon" src="/Resources/Icons/chevron-double-right.svg" /></button>
+            </div>
+            <div class="right">Zobrazeno <b>@Users.Count z @Total</b></div>
+        </div>
+    }
+}
+else
+{
+    <div>Loading...</div>
+}
+<UserAside Show="ShowUserAside" ToggleUserAside="@ToggleUserAside" UserId="UserAsideId" RefetchUsers="FetchUsers"/>
+
+<Styled>
+    .section_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+    .section_header h2 {
+    color: #111111;
+    font-size: 36px;
+    margin: 0;
+    }
+    .section_header button {
+    border-radius: 4px;
+    border: none;
+    background-color: #E30613;
+    padding: 12px 16px;
+    color: #FFFFFF;
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    transition: .25s opacity;
+    outline: none;
+    }
+    .section_header button:hover {
+    opacity: .6;
+    }
+    .section_header button .plus_icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 16px;
+    }
+    .section_header button span {
+    position: relative;
+    top: 1px;
+    }
+</Styled>
+<Styled>
+    table {
+    border-collapse: collapse;
+    margin-top: 60px !important;
+    }
+    table tr th { text-align: left; }
+    table.actions tr th:last-child, table.actions tr td:last-child { text-align: right; }
+    table tr {
+    border-bottom: 1px solid #EDEDED;
+    }
+    table tr:first-child { border-bottom: 1px solid #9D9D9D55; }
+    table tr th, table tr td {
+    padding: 12px 8px;
+    }
+    table tr:not(:first-child):hover {
+    background-color: #EDEDED55;
+    }
+</Styled>
+<Styled>
+    input::-webkit-outer-spin-button,
+    input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+    }
+    input[type=number] {
+    -moz-appearance: textfield;
+    }
+    .pagination {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-top: 36px;
+    }
+    .pagination .left {
+    display: flex;
+    align-items: center;
+    }
+    .pagination button {
+    width: 34px;
+    height: 34px;
+    border: 1px solid #EEEEEE;
+    border-radius: 4px;
+    background-color: #FFFFFF;
+    cursor: pointer;
+    outline: none;
+    margin-right: 6px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    }
+    .pagination input {
+    width: 30px;
+    height: 30px;
+    padding: 1px 12px;
+    outline: none;
+    margin-right: 6px;
+    border: 1px solid #EEEEEE;
+    border-radius: 4px;
+    }
+    .pagination_icon {
+    width: 18px;
+    height: 18px;
+    }
+</Styled>
+
+@code {
+
+    private Guid UserAsideId { get; set; } = default(Guid);
+
+    private List<UserDto> Users { get; set; } = null!;
+
+    private int PageNumber { get; set; } = 1;
+
+    private int PageSize { get; set; } = 12;
+
+    private int Total { get; set; } = 0;
+
+    private bool ShowUserAside { get; set; } = false;
+
+    protected override async Task OnInitializedAsync()
+    {
+        await base.OnInitializedAsync();
+        await FetchUsers();
+    }
+
+    private void ToggleUserAside() => ShowUserAside = !ShowUserAside;
+
+    private void SetUserAsideId(Guid id)
+    {
+        UserAsideId = id;
+        ToggleUserAside();
+        StateHasChanged();
+    }
+
+    private async Task FetchUsers()
+    {
+        var result = await _mediator.Send(new GetFilteredUsers.Query(PageNumber, PageSize));
+
+        if (result.IsSuccess && result.Result is not null)
+        {
+            Users = result.Result.List;
+            Total = result.Result.Total;
+        }
+    }
+
+}

src/Core/Application/Leuze.Core.Application.UI/Pages/_Host.cshtml

@@ -6 +6 @@
 }
 
 <!DOCTYPE html>
-<html lang="en">
+<html lang="cs">
 <head>
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Leuze.App</title>
+    <title>Leuze</title>
     <base href="~/" />
-    <link rel="stylesheet" href="css/bootstrap/bootstrap.min.css" />
     <link href="css/site.css" rel="stylesheet" />
+    <link href="_content/Blazored.Toast/blazored-toast.min.css" rel="stylesheet" />
     <link href="Leuze.App.styles.css" rel="stylesheet" />
 </head>
 <body>
     <component type="typeof(App)" render-mode="ServerPrerendered" />
-
-    <div id="blazor-error-ui">
-        <environment include="Staging,Production">
-            An error has occurred. This application may no longer respond until reloaded.
-        </environment>
-        <environment include="Development">
-            An unhandled exception has occurred. See browser dev tools for details.
-        </environment>
-        <a href="" class="reload">Reload</a>
-        <a class="dismiss">🗙</a>
-    </div>
-
     <script src="_framework/blazor.server.js"></script>
 </body>
 </html>

src/Core/Application/Leuze.Core.Application.UI/Shared/Components/RedirectToLogin.cs

@@ +1 @@
+using Microsoft.AspNetCore.Components;
+
+namespace Leuze.Core.Application.UI.Shared.Components
+{
+    public class RedirectToLogin : ComponentBase
+    {
+        [Inject]
+        protected NavigationManager NavigationManager { get; set; }
+
+        protected override void OnInitialized()
+        {
+            NavigationManager.NavigateTo("/Identity/Account/Login");
+        }
+    }
+}

src/Core/Application/Leuze.Core.Application.UI/Shared/MainLayout.razor

@@ -1 +1 @@
 @inherits LayoutComponentBase
 @inject NavigationManager _navManager
 @inject AuthenticationStateProvider AuthenticationStateProvider
-<div class="top-row px-4">
-    <img src="Resources/Icons/logo.svg" alt="logo" style="width:111px;height:28px;" />
+@using Blazored.Toast.Configuration
+
+<BlazoredToasts Position="ToastPosition.BottomRight"
+                Timeout="10"
+                IconType="IconType.FontAwesome"
+                SuccessIcon="fa fa-thumbs-up"
+                ErrorIcon="fa fa-bug" />
+<header class="@_header">
+    <img class="leuze_logo" src="/Resources/Icons/logo.svg" />
     <div>
-        @Name
+        <span class="username">@Name</span>
+        <img class="user_icon" src="/Resources/Icons/user-circle.svg" />
         <a href="/MicrosoftIdentity/Account/SignOut">
-            <img src="Resources/Icons/sign-out.svg" style="width:18px;height:20px;" />
+            <img class="signout_icon" src="/Resources/Icons/sign-out.svg" />
         </a>
     </div>
-</div>
-
+</header>
+<NavMenu />
+<main class="@_main">@Body</main>
 
-<div class="page">
-    <div class="sidebar">
-        <NavMenu />
-    </div>
-
-    <div class="main">
-        <div class="content px-4">
-            @Body
-        </div>
-    </div>
-</div>
+<Styled @bind-Classname="@_header">
+    width: calc(100% - 84px);
+    height: 71px;
+    background-color: #FFFFFF;
+    border-bottom: 1px solid #EDEDED;
+    padding: 0 48px 0 36px;
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    & > div {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    }
+    & .leuze_logo {
+    height: 28.24px;
+    }
+    & .username {
+    color: #111111;
+    font-size: 18px;
+    }
+    & .user_icon {
+    width: 48px;
+    height: 48px;
+    margin: 0 48px 0 16px;
+    }
+    & .signout_icon {
+    width: 26px;
+    height: 22px;
+    }
+</Styled>
+<Styled @bind-Classname="@_main">
+    width: calc(100% - 420px);
+    min-height: calc(100% - 168px);
+    background-color: transparent;
+    position: absolute;
+    top: 72px;
+    left: 276px;
+    padding: 48px 72px;
+</Styled>
 
-@code {        
+@code {
+    private string _main = null!;
+    private string _header = null!;
 
     private string Name { get; set; } = string.Empty;
 

src/Core/Application/Leuze.Core.Application.UI/Shared/NavMenu.razor

@@ -1 @@
-<div class="@NavMenuCssClass" @onclick="ToggleNavMenu">
-    <ul class="nav flex-column">
-        <li class="nav-item">
-            <NavLink class="nav-link" href="" Match="NavLinkMatch.All"> 
-                <img src="/Resources/Icons/analytics.svg" width="13" height="11"/> Přehled
-            </NavLink>
-        </li>
-        <li class="nav-item">
-            <NavLink class="nav-link" href="goals">
-                <img src="/Resources/Icons/clipboard-list-check.svg" width="13" height="11" /> Správa cílů
-            </NavLink>
-        </li>
-        <li class="nav-item">
-            <NavLink class="nav-link" href="benefits">
-                <img src="/Resources/Icons/award.svg" width="13" height="11" /> Benefity
-            </NavLink>
-        </li>
-        <li class="nav-item">
-            <NavLink class="nav-link" href="users">
-                <img src="/Resources/Icons/user.svg" width="13" height="11" /> Uživatelé
-            </NavLink>
-        </li>
-        <li class="nav-item">
-            <NavLink class="nav-link" href="authorization">
-                <img src="/Resources/Icons/balance-scale.svg" width="13" height="11" /> Role a práva
-            </NavLink>
-        </li>
-    </ul>
-</div>
+<aside class="@_aside">
+    <nav class="@_nav">
+        <NavLink href="/dashboard">
+            <div class="item">
+                <img src="/Resources/Icons/analytics.svg" class="item_icon nav_icon_1" />
+                <span>Přehled</span>
+            </div>
+        </NavLink>
+        <NavLink href="/goals">
+            <div class="item">
+                <img src="/Resources/Icons/clipboard-list-check.svg" class="item_icon nav_icon_2" />
+                <span>Správa cílů</span>
+            </div>
+        </NavLink>
+        <NavLink href="/users">
+            <div class="item">
+                <img src="/Resources/Icons/user.svg" class="item_icon nav_icon_3" />
+                <span>Uživatelé</span>
+            </div>
+        </NavLink>
+</nav>
+</aside>
 
-@code {
-    private bool collapseNavMenu = true;
-
-    private string NavMenuCssClass => collapseNavMenu ? "collapse" : null;
-
-    private void ToggleNavMenu()
-    {
-        collapseNavMenu = !collapseNavMenu;
+<Styled @bind-Classname="@_aside">
+    width: 275px;
+    height: calc(100% - 72px);
+    position: fixed;
+    left: 0;
+    top: 72px;
+    background-color: #FFFFFF;
+    border-right: 1px solid #EDEDED;
+</Styled>
+<Styled @bind-Classname="@_nav">
+    margin-top: 36px;
+    & .item {
+    padding: 20px 36px;
+    width: calc(100% - 76px);
+    border-left: 4px solid #FFFFFF;
+    display: flex;
+    align-items: center;
+    background-color: #FFFFFF;
+    transition: .25s background-color, .25s border-left-color;
+    cursor: pointer;
+    }
+    & .item:hover {
+    background-color: #FFFAFA;
+    border-left: 4px solid #E30613;
+    }
+    & .item_active {
+    background-color: #FFFAFA;
+    border-left: 4px solid #E30613;
+    }
+    & .item > span {
+    color: #111111;
+    font-size: 18px;
+    margin-left: 16px;
+    position: relative;
+    top: 2px;
     }
-}
+</Styled>
+<Styled>
+    .nav_icon_1 {
+    width: 20px;
+    height: 18px;
+    }
+    .nav_icon_2 {
+    width: 20px;
+    height: 26px;
+    }
+    .nav_icon_3 {
+    width: 20px;
+    height: 22px;
+    }
+</Styled>
+
+@code {
+    private string _aside = null!;
+    private string _nav = null!;
+} 

src/Core/Application/Leuze.Core.Application.UI/_Imports.razor

@@ -10 +10 @@
 @using BlazorStyled
 @using Microsoft.AspNetCore.Authentication
 @using Microsoft.AspNetCore.Identity
-@using Leuze.Core.Application.Identity 
-@using Leuze.Core.Application.UI.Components.Login
+@using Leuze.Core.Application.Identity
+@using Leuze.Core.Application.UI.Components.Login
+@using MediatR
+@using Leuze.Core.Application.CQRS.Users.Commands
+@using Leuze.Core.Application.CQRS.Auth.Commands
+@using Leuze.Core.Domain.Domains.Users.DTOs
+@using Leuze.Core.Application.CQRS.Users.Queries
+@using Leuze.Core.Application.UI.Shared.Components
+@using Leuze.Core.Application.UI.Pages.Users.Components