PRJ-Game-Ideas/game-ideas
3
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Add authentication and authorization (#21)

Browse Source 
Reviewed-on: #21
This commit was merged in pull request #21.
This commit is contained in:
Egamorf
2025-04-21 01:53:58 +02:00
parent 51dab81121
commit 033747899b
55 changed files with 2186 additions and 317 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.cs
View File

@@ -5,8 +5,10 @@ using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Components.Slider;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
using Microsoft.AspNetCore.Components.Forms;
using Microsoft.JSInterop;
using System.Security.Claims;
namespace GameIdeas.BlazorApp.Pages.Games.Components;
@@ -14,6 +16,7 @@ public partial class GameCreationForm
{
[Inject] private IJSRuntime Js { get; set; } = default!;
[Inject] private IGameGateway GameGateway { get; set; } = default!;
[Inject] private AuthenticationStateProvider AuthenticationState { get; set; } = default!;
[CascadingParameter] private Popup? Popup { get; set; }
[Parameter] public CategoriesDto? Categories { get; set; }
[Parameter] public EventCallback OnSubmit { get; set; }
@@ -33,7 +36,6 @@ public partial class GameCreationForm
protected override async Task OnAfterRenderAsync(bool firstRender)
{
await Js.InvokeVoidAsync("resizeGameForm");
}
private void HandleOnCancel()
@@ -52,7 +54,9 @@ public partial class GameCreationForm
{
IsLoading = true;
GameHelper.WriteTrackingDto(GameDto);
var authState = await AuthenticationState.GetAuthenticationStateAsync();
GameHelper.WriteTrackingDto(GameDto, authState);
var gameId = await GameGateway.CreateGame(GameDto);
if (gameId != 0)
@@ -68,6 +72,7 @@ public partial class GameCreationForm
finally
{
IsLoading = false;
StateHasChanged();
}
}
}

44
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor
View File

@@ -1,9 +1,11 @@
@using GameIdeas.BlazorApp.Pages.Games
@using GameIdeas.BlazorApp.Shared.Components.Account
@using GameIdeas.BlazorApp.Pages.User
@using GameIdeas.BlazorApp.Shared.Components.Select
@using GameIdeas.BlazorApp.Shared.Components.Select.Models
@using GameIdeas.BlazorApp.Shared.Models
@using GameIdeas.Resources
@using GameIdeas.Shared.Constants
@using Microsoft.AspNetCore.Components.Authorization
@inherits ComponentBase
@@ -15,30 +17,26 @@
@ChildContent
<div class="account-add-container">
<div class="add-container">
<div class="add-buttons">
<div class="first-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
<Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object"
ValuesChanged=HandleAddTypeClicked Params=SelectParams Theme="SelectTheme.Navigation">
<div class="second-button button">
<AuthorizeView Roles="@GlobalConstants.ADMIN_MEMBER">
<Authorized>
<div class="add-buttons">
<div class="first-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />
<path d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
</svg>
</div>
</Select>
</div>
</div>
<div class="account-container">
<div class="icon-container" @onclick=HandleAccountClicked>
<svg class="account-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>
</div>
<AccountSettings @ref="AccountSettings" />
</div>
<Select @ref="SelectListAdd" TItem="KeyValuePair<AddType, string>" THeader="object"
ValuesChanged=HandleAddTypeClicked Params=SelectParams Theme="SelectTheme.Navigation">
<div class="second-button button">
<svg class="button-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M1 3H23L12 22" />
</svg>
</div>
</Select>
</div>
</Authorized>
</AuthorizeView>
<UserMenu />
</div>
</div>

9
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.cs
View File

@@ -1,4 +1,3 @@
using GameIdeas.BlazorApp.Shared.Components.Account;
using GameIdeas.BlazorApp.Shared.Components.Select;
using GameIdeas.BlazorApp.Shared.Components.Select.Models;
using GameIdeas.BlazorApp.Shared.Models;
@@ -18,7 +17,6 @@ public partial class GameHeader : ComponentBase
{ AddType.Auto, ResourcesKey.AutoAdd }
};
private AccountSettings? AccountSettings;
private Select<KeyValuePair<AddType, string>, object>? SelectListAdd;
private SelectParams<KeyValuePair<AddType, string>, object> SelectParams = new();
@@ -26,7 +24,7 @@ public partial class GameHeader : ComponentBase
{
SelectParams = new()
{
Items = AddTypes.ToList(),
Items = [.. AddTypes],
GetItemLabel = item => item.Value
};
@@ -43,9 +41,4 @@ public partial class GameHeader : ComponentBase
SelectListAdd?.Close();
await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
}
private void HandleAccountClicked()
{
AccountSettings?.Toggle();
}
}

16
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor.css
View File

@@ -14,6 +14,7 @@
align-items: center;
width: 40px;
height: 100%;
cursor: pointer;
}
.icon-container img {
@@ -21,10 +22,6 @@
max-width: 85%;
}
.icon-container:hover {
cursor: pointer;
}
.account-add-container {
display: flex;
flex-direction: row;
@@ -32,15 +29,12 @@
align-items: flex-end;
}
.add-container {
margin-right: 40px;
}
.add-buttons {
display: flex;
flex-direction: row;
background: var(--violet);
border-radius: var(--small-radius);
margin-right: 40px;
}
.button {
@@ -70,8 +64,4 @@
.button-icon:hover {
background: var(--violet-selected);
cursor: pointer;
}
.account-icon {
fill: var(--line);
}
}

29
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor Normal file
View File

@@ -0,0 +1,29 @@
@using Blazored.FluentValidation
<EditForm EditContext="EditContext" OnSubmit="HandleLoginSubmit">
<FluentValidationValidator />
<div class="login-form">
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterUsername</div>
<InputText class="input-text"
@bind-Value="UserDto.Username" />
</div>
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterPassword</div>
<InputText class="input-text"
@bind-Value="UserDto.Password" />
</div>
<div class="login-field">
<button class="login-button" type="submit" disabled="@IsLoading">
@if (IsLoading)
{
<div class="loading"></div>
}
else
{
@ResourcesKey.Login
}
</button>
</div>
</div>
</EditForm>

44
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.cs Normal file
View File

@@ -0,0 +1,44 @@
using GameIdeas.BlazorApp.Pages.User.Gateways;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Forms;
namespace GameIdeas.BlazorApp.Pages.User.Components;
public partial class Login
{
[Parameter] public IAuthGateway AuthGateway { get; set; } = default!;
private EditContext? EditContext;
private UserDto UserDto = new();
private bool IsLoading = false;
protected override void OnInitialized()
{
EditContext = new EditContext(UserDto);
}
private async Task HandleLoginSubmit()
{
if (EditContext?.Validate() == false)
{
return;
}
try
{
IsLoading = true;
await AuthGateway.Login(UserDto);
}
catch (Exception)
{
UserDto.Password = string.Empty;
EditContext?.Validate();
}
finally
{
IsLoading = false;
StateHasChanged();
}
}
}

55
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/Login.razor.css Normal file
View File

@@ -0,0 +1,55 @@
.login-form {
display: flex;
flex-direction: column;
padding: 20px 8px;
gap: 20px;
max-width: 400px;
}
.login-field {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
}
::deep .input-text {
background: var(--input-selected);
border: 2px solid var(--input-selected);
border-radius: var(--small-radius);
padding: 6px;
color: var(--white);
}
::deep .input-text:focus-visible {
border: 2px solid var(--violet) !important;
}
.login-button {
background: var(--violet);
border: none;
border-radius: 100px;
height: 32px;
color: var(--white);
font-weight: bold;
}
.login-button:hover {
background: var(--violet-selected);
cursor: pointer;
}
.login-button:disabled {
background: var(--violet-selected);
cursor: wait;
}
.loading {
width: 18px;
height: 18px;
border-radius: 50%;
border: 3px solid rgba(0, 0, 0, 0.2);
border-top-color: var(--white);
animation: loading 1s linear infinite;
justify-self: center;
}

18
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Components/LoginValidator.cs Normal file
View File

@@ -0,0 +1,18 @@
using FluentValidation;
using GameIdeas.Shared.Dto;
namespace GameIdeas.BlazorApp.Pages.User.Components;
public class LoginValidator : AbstractValidator<UserDto>
{
public LoginValidator()
{
RuleFor(dto => dto.Username)
.NotNull()
.NotEmpty();
RuleFor(dto => dto.Password)
.NotNull()
.NotEmpty();
}
}

38
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Gateways/AuthGateway.cs Normal file
View File

@@ -0,0 +1,38 @@
using GameIdeas.BlazorApp.Services;
using GameIdeas.BlazorApp.Shared.Constants;
using GameIdeas.BlazorApp.Shared.Exceptions;
using GameIdeas.Resources;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components.Authorization;
namespace GameIdeas.BlazorApp.Pages.User.Gateways;
public class AuthGateway(IHttpClientService httpClient,
AuthenticationStateProvider stateProvider) : IAuthGateway
{
public async Task<bool> Login(UserDto userDto)
{
try
{
var token = await httpClient.PostAsync<TokenDto>(Endpoints.Auth.Login, userDto);
await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserAuthenticationAsync(token!.Token!);
return true;
}
catch (Exception)
{
throw new AuthenticationUserException(ResourcesKey.UserLoginFailed);
}
}
public async Task Logout()
{
try
{
await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserLogoutAsync();
}
catch (Exception)
{
throw new AuthenticationUserException(ResourcesKey.UserLogoutFailed);
}
}
}

9
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/Gateways/IAuthGateway.cs Normal file
View File

@@ -0,0 +1,9 @@
using GameIdeas.Shared.Dto;
namespace GameIdeas.BlazorApp.Pages.User.Gateways;
public interface IAuthGateway
{
Task<bool> Login(UserDto userDto);
Task Logout();
}

51
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor Normal file
View File

@@ -0,0 +1,51 @@
@using GameIdeas.BlazorApp.Pages.User.Components
@using GameIdeas.BlazorApp.Shared.Components.BackdropFilter
@using GameIdeas.BlazorApp.Shared.Constants
@using GameIdeas.Shared.Constants
@using Microsoft.AspNetCore.Components.Authorization
<div class="menu">
<div class="icon" @onclick=HandleAccountClicked>
@Icons.Account
</div>
<div class="container">
@if (ContentVisile)
{
<div class="content">
<AuthorizeView Roles="@GlobalConstants.ADMIN_MEMBER">
<Authorized>
<div class="menu-element">
@ResourcesKey.CategoriesManager
</div>
<span class="line"></span>
</Authorized>
</AuthorizeView>
<AuthorizeView Roles="@GlobalConstants.ADMINISTRATOR">
<Authorized>
<div class="menu-element">
@ResourcesKey.UserManager
</div>
<span class="line"></span>
</Authorized>
</AuthorizeView>
<AuthorizeView>
<Authorized>
<div class="menu-element" @onclick="HandleLogoutClicked">
@ResourcesKey.Logout
</div>
</Authorized>
<NotAuthorized>
<Login AuthGateway="AuthGateway" />
</NotAuthorized>
</AuthorizeView>
</div>
}
</div>
</div>
<BackdropFilter AllowBodyScroll=true CloseOnClick=true Color="BackdropFilterColor.Transparent"
IsVisible="ContentVisile" OnClick="HandleBackdropFilterClicked" />

29
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.cs Normal file
View File

@@ -0,0 +1,29 @@
using GameIdeas.BlazorApp.Pages.User.Gateways;
using GameIdeas.BlazorApp.Services;
using Microsoft.AspNetCore.Components;
using Microsoft.AspNetCore.Components.Authorization;
namespace GameIdeas.BlazorApp.Pages.User;
public partial class UserMenu
{
[Inject] private IAuthGateway AuthGateway { get; set; } = default!;
private bool ContentVisile = false;
private async Task HandleLogoutClicked()
{
await AuthGateway.Logout();
ContentVisile = false;
}
private void HandleAccountClicked()
{
ContentVisile = true;
}
private void HandleBackdropFilterClicked()
{
ContentVisile = false;
}
}

48
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/User/UserMenu.razor.css Normal file
View File

@@ -0,0 +1,48 @@
.menu {
position: relative;
}
.icon {
display: flex;
justify-content: center;
align-items: center;
width: 40px;
cursor: pointer;
}
.icon ::deep svg {
fill: var(--line);
}
.container {
right: 0;
position: absolute;
margin-top: 4px;
z-index: var(--index-dropdown);
}
.content {
overflow: hidden;
border-radius: var(--big-radius);
border: 2px solid var(--input-selected);
background: var(--dropdown-content);
display: flex;
flex-direction: column;
}
.line {
margin: 0 6px;
border-bottom: 2px solid var(--input-selected);
}
.menu-element {
height: 32px;
padding: 0 20px;
align-content: center;
text-wrap: nowrap;
cursor: pointer;
}
.menu-element:hover {
background: var(--input-selected)
}