Correct bunch of issues (#36)

Reviewed-on: #36

.vscode/extensions.json

@@ -1,12 +0,0 @@
-{
-    "recommendations": [
-        "ms-dotnettools.vscode-dotnet-runtime",
-        "ms-dotnettools.csharp",
-        "ms-dotnettools.csdevkit",
-        "kreativ-software.csharpextensions",
-        "jorgeserrano.vscode-csharp-snippets",
-        "mhutchie.git-graph",
-        "lukas-tr.materialdesignicons-intellisense",
-        "ms-dotnettools.vscodeintellicode-csharp"
-    ]
-}

README.md

@@ -19,7 +19,9 @@ Store your favorite games, intelligent game add, store game files and data, mana
 .
 ├── README.md
 ├── .gitignore
-├── .drone.yml (CI/CD)
+├── .gitea
+│   ├── build-pr.yaml (CI for Pull Request)
+│   └── deploy.yaml (CD for deploy on own server)
 └── src/
     ├── Client/
     │   └── GameIdeas.BlazorApp

src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj

@@ -1,10 +1,9 @@
-<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
+<Project Sdk="Microsoft.NET.Sdk.BlazorWebAssembly">
 
   <PropertyGroup>
     <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <UserSecretsId>5637e3c4-2341-4bdb-85ec-c75faeee9847</UserSecretsId>
   </PropertyGroup>
 
   <ItemGroup>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Components/GameCreationForm.razor.css

@@ -69,7 +69,7 @@
 }
 
 .slider {
-    padding: 0 20px;
+    margin-right: 20px;
     align-content: center;
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/AdvancedGameFilter.razor.cs

@@ -1,5 +1,4 @@
 using GameIdeas.BlazorApp.Helpers;
-using GameIdeas.BlazorApp.Pages.Games.Header;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
 using GameIdeas.Resources;
 using GameIdeas.Shared.Dto;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor

@@ -47,8 +47,7 @@
 
     <div class="slider-container">
         <SliderRange Params="SliderRangeParams"
-                     @bind-Max="Value.MaxInterest" @bind-Max:after="HandleValueChanged"
-                     @bind-Min="Value.MinInterest" @bind-Min:after="HandleValueChanged" />
+                     @bind-Value="Value.Interest" @bind-Value:after="HandleValueChanged" />
     </div>
 </div>
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilter.razor.css

@@ -2,7 +2,7 @@
     display: flex;
     flex-direction: row;
     gap: 8px;
-    margin: 0 8px;
+    margin: 0 auto;
     align-items: center;
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Filter/GameFilterParams.cs

@@ -12,8 +12,7 @@ public class GameFilterParams
     public List<TagDto>? Tags { get; set; }
     public List<PublisherDto>? Publishers { get; set; }
     public List<DeveloperDto>? Developers { get; set; }
-    public int MinInterest { get; set; } = 1;
-    public int MaxInterest { get; set; } = 5;
+    public MinMaxDto Interest { get; set; } = new() { Min = 1, Max = 5 };
     public List<int>? ReleaseYears { get; set; }
     public List<int>? StorageSpaceIds { get; set; }
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Games.razor

@@ -1,9 +1,10 @@
-@page "/Games"
+@page "/"
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Pages.Games.Components
 @using GameIdeas.BlazorApp.Pages.Games.Filter
-@using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Shared.Components
+@using GameIdeas.BlazorApp.Shared.Components.ButtonAdd
+@using GameIdeas.BlazorApp.Shared.Components.Header
 @using GameIdeas.BlazorApp.Shared.Components.Popup
 @using GameIdeas.Resources
 
@@ -11,11 +12,12 @@
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<GameHeader AddTypeChanged="HandleAddClicked">
+<HeaderGameIdeas>
     <GameFilter Categories="Categories"
                 @bind-DisplayType=DisplayType
                 Value=GameFilter ValueChanged="HandleFilterChanged" />
-</GameHeader>
+    <ButtonAdd AddTypeChanged="HandleAddClicked" />
+</HeaderGameIdeas>
 
 <div class="container">
     <div class="content">

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Gateways/GameGateway.cs

@@ -43,8 +43,8 @@ public class GameGateway(IHttpClientService httpClientService) : IGameGateway
             {
                 CurrentPage = currentPage,
                 Title = filterParams.Title,
-                MaxInterest = filterParams.MaxInterest,
-                MinInterest = filterParams.MinInterest,
+                MaxInterest = filterParams.Interest.Max,
+                MinInterest = filterParams.Interest.Min,
                 StorageSpaces = filterParams.StorageSpaceIds,
                 DeveloperIds = filterParams.Developers?.Select(d => d.Id ?? 0).ToList(),
                 PublisherIds = filterParams.Publishers?.Select(d => d.Id ?? 0).ToList(),

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/Header/GameHeader.razor

@@ -1,45 +0,0 @@
-@using GameIdeas.BlazorApp.Pages.Games
-@using GameIdeas.BlazorApp.Pages.UserMenu
-@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
-
-<div class="header-tab">
-    <a href="/Games" class="icon-container">
-        <img src="icon.png" alt="Game Ideas">
-    </a>
-
-    @ChildContent
-
-    <div class="account-add-container">
-        @if (DisplayAdd)
-        {
-            <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="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">
-                                <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>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/Gateways/AuthGateway.cs

@@ -14,8 +14,10 @@ public class AuthGateway(IHttpClientService httpClient,
     {
         try
         {
-            var token = await httpClient.PostAsync<TokenDto>(Endpoints.Auth.Login, userDto);
-            await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserAuthenticationAsync(token!.Token!);
+            var token = await httpClient.PostAsync<TokenDto>(Endpoints.Auth.Login, userDto)
+                ?? throw new InvalidOperationException("Could not retrieve token");
+
+            await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserAuthenticationAsync(token);
             return true;
         }
         catch (Exception)

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/UserMenu/UserMenu.razor.cs

@@ -14,7 +14,7 @@ public partial class UserMenu
     {
         ContentVisile = false;
         await AuthGateway.Logout();
-        NavigationManager.NavigateTo("/Games");
+        NavigationManager.NavigateTo("/");
     }
 
     private void HandleAccountClicked()

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor

@@ -23,7 +23,10 @@
             </Select>
         </div>
         <div class="buttons">
-            <button type="button" class="remove" @onclick="HandleRemoveClicked">@Icons.Bin</button>
+            @if (CanDelete)
+            {
+                <button type="button" class="remove" @onclick="HandleRemoveClicked">@Icons.Bin</button>
+            }
             @if (CanEdit)
             {
                 <button type="button" class="edit @(IsEditing ? "selected" : "")" @onclick="HandleEditClicked">@Icons.Pen</button>

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.cs

@@ -12,6 +12,7 @@ public partial class UserRow
     [Parameter] public UserDto User { get; set; } = new();
     [Parameter] public List<RoleDto> Roles { get; set; } = [];
     [Parameter] public bool CanEdit { get; set; } = true;
+    [Parameter] public bool CanDelete { get; set; } = true;
     [Parameter] public bool IsEditing { get; set; } = false;
     [Parameter] public EventCallback<UserDto> OnRemove { get; set; }
     [Parameter] public EventCallback<UserDto> OnSubmit { get; set; }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Components/UserRow.razor.css

@@ -1,7 +1,7 @@
 .row {
     height: 64px;
     display: grid;
-    grid-template-columns: 48px 1fr 1fr 1fr auto;
+    grid-template-columns: 48px 1fr 1fr 1fr 100px;
     grid-gap: 8px;
     padding: 0 8px;
     background: var(--input-secondary);
@@ -9,25 +9,24 @@
     border-radius: var(--big-radius);
 }
 
-.row > * {
-    align-content: center;
-}
+    .row > * {
+        align-content: center;
+        max-width: 160px;
+        width: 100%;
+    }
 
 .icon ::deep svg {
     fill: var(--line);
 }
 
-.role {
-    min-width: 160px;
-    width: fit-content;
-}
-
 ::deep .input-name,
 ::deep .input-name[disabled],
 ::deep .input-password,
 ::deep .input-password[disabled],
 ::deep .input-password::placeholder {
     color: var(--white);
+    max-width: 160px;
+    width: 100%;
 }
 
 ::deep .input-name, 
@@ -61,12 +60,13 @@
     flex-direction: row;
     gap: 8px;
     height:auto;
+    justify-content: end;
 }
 
 .buttons > * {
     border: none;
     outline: none;
-    margin: auto;
+    margin: auto 0;
     height: 28px;
     width: 28px;
     background: none;

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor

@@ -1,7 +1,7 @@
 @page "/Users"
-@using GameIdeas.BlazorApp.Pages.Games.Header
 @using GameIdeas.BlazorApp.Layouts
 @using GameIdeas.BlazorApp.Pages.Users.Components
+@using GameIdeas.BlazorApp.Shared.Components.Header
 @using GameIdeas.BlazorApp.Shared.Components.Popup
 @using GameIdeas.BlazorApp.Shared.Components.Popup.Components
 @using GameIdeas.BlazorApp.Shared.Components.Search
@@ -13,13 +13,13 @@
 
 <PageTitle>@ResourcesKey.GamesIdeas</PageTitle>
 
-<GameHeader DisplayAdd="false">
+<HeaderGameIdeas>
     <div class="header-content">
         <SearchInput Placeholder="@ResourcesKey.EnterUsername" @bind-Text="FilterParams.Name" @bind-Text:after=HandleFilterChanged />
         <SelectSearch TItem="RoleDto" Placeholder="@ResourcesKey.Roles" @bind-Values="FilterParams.Roles" @bind-Values:after=HandleFilterChanged
                       Items="Roles.ToList()" GetLabel="@(role => role.Name)" Theme="SelectTheme.Filter" />
     </div>
-</GameHeader>
+</HeaderGameIdeas>
 
 <div class="container">
     <UserRow User="UserAdd" Roles="Roles.ToList()" CanEdit="false" IsEditing="true" OnRemove="HandleResetUser" OnSubmit="HandleSubmitUser" Validator="@(new UserCreateValidator())" />
@@ -31,7 +31,7 @@
         {
             @foreach (var user in UserList.Users ?? [])
             {
-                <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" />
+                <UserRow User="user" Roles="Roles.ToList()" OnRemove="HandleOpenConfirmationPopup" OnSubmit="HandleUpdateUser" Validator="@(new UserUpdateValidator())" CanDelete=@(user.Id != currentUserId) />
             }
         }
         else

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.cs

@@ -1,14 +1,19 @@
 using GameIdeas.BlazorApp.Pages.Users.Filters;
 using GameIdeas.BlazorApp.Pages.Users.Gateways;
 using GameIdeas.BlazorApp.Shared.Components.Popup;
+using GameIdeas.Shared.Constants;
 using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
+using Microsoft.AspNetCore.Components.Authorization;
+using System.Security.Claims;
 
 namespace GameIdeas.BlazorApp.Pages.Users;
 
 public partial class Users
 {
     [Inject] private IUserGateway UserGateway { get; set; } = default!;
+    [Inject] private AuthenticationStateProvider StateProvider { get; set; } = default!;
+    [Inject] private NavigationManager NavigationManager { get; set; } = default!;
 
     private Popup? Popup;
     private bool IsLoading = false;
@@ -18,9 +23,19 @@ public partial class Users
     private int CurrentPage = 1;
     private UserDto UserAdd = new();
     private UserDto? UserDelete;
-
+    private string? currentUserId;
     protected override async Task OnInitializedAsync()
     {
+        var authState = await StateProvider.GetAuthenticationStateAsync();
+        currentUserId = authState.User.FindFirstValue(ClaimTypes.Sid);
+
+        if (authState.User.FindFirstValue(ClaimTypes.Role) != GlobalConstants.ADMINISTRATOR || string.IsNullOrEmpty(currentUserId))
+        {
+            NavigationManager.NavigateTo("/Unauthorized");
+            return;
+        }
+        
+
         await FetchData();
         await base.OnInitializedAsync();
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Users/Users.razor.css

@@ -1,6 +1,6 @@
 .header-content {
+    margin: 0 auto;
     display: flex;
-    flex-direction: row;
     gap: 8px;
 }
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Properties/launchSettings.json

@@ -7,7 +7,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "http://localhost:5172",
-      "launchUrl": "http://localhost:5172/Games",
+      "launchUrl": "http://localhost:5172/",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }
@@ -18,7 +18,7 @@
       "launchBrowser": true,
       "inspectUri": "{wsProtocol}://{url.hostname}:{url.port}/_framework/debug/ws-proxy?browser={browserInspectUri}",
       "applicationUrl": "https://localhost:7060;http://localhost:5172",
-      "launchUrl": "http://localhost:7060/Games",
+      "launchUrl": "http://localhost:7060/",
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       }

src/GameIdeas/Client/GameIdeas.BlazorApp/Services/HttpClientService.cs

@@ -5,13 +5,15 @@ using System.Text.Json;
 using System.Text;
 using Blazored.LocalStorage;
 using GameIdeas.Shared.Constants;
+using Microsoft.AspNetCore.Components.Authorization;
 
 namespace GameIdeas.BlazorApp.Services;
 
 public class HttpClientService(
     IHttpClientFactory httpClientFactory, 
     ILoggerFactory loggerFactory,
-    ILocalStorageService localStorage) : IHttpClientService
+    ILocalStorageService localStorage,
+    AuthenticationStateProvider stateProvider) : IHttpClientService
 {
     private readonly HttpClient httpClient = httpClientFactory.CreateClient("GameIdeas.WebAPI");
     private readonly ILogger<HttpClientService> logger = loggerFactory.CreateLogger<HttpClientService>();
@@ -141,6 +143,16 @@ public class HttpClientService(
 
     private async Task SetAuthorizationHeader()
     {
+        var expired = await localStorage.GetItemAsStringAsync(GlobalConstants.LS_EXPIRED_STORAGE_KEY);
+
+        if (expired == null 
+            || (DateTime.TryParse(expired, out DateTime expiration) 
+                && expiration < DateTime.UtcNow))
+        {
+            await ((JwtAuthenticationStateProvider)stateProvider).NotifyUserLogoutAsync();
+            return;
+        }
+
         var token = await localStorage.GetItemAsStringAsync(GlobalConstants.LS_AUTH_STORAGE_KEY);
         httpClient.DefaultRequestHeaders.Authorization =
             new AuthenticationHeaderValue("bearer", token);

src/GameIdeas/Client/GameIdeas.BlazorApp/Services/JwtAuthenticationStateProvider.cs

@@ -3,6 +3,7 @@ using Microsoft.AspNetCore.Components.Authorization;
 using System.Security.Claims;
 using System.IdentityModel.Tokens.Jwt;
 using GameIdeas.Shared.Constants;
+using GameIdeas.Shared.Dto;
 
 namespace GameIdeas.BlazorApp.Services;
 
@@ -31,9 +32,17 @@ public class JwtAuthenticationStateProvider(ILocalStorageService localStorage) :
         return new AuthenticationState(new ClaimsPrincipal(new ClaimsIdentity()));
     }
 
-    public async Task NotifyUserAuthenticationAsync(string token)
+    public async Task NotifyUserAuthenticationAsync(TokenDto token)
     {
-        await localStorage.SetItemAsStringAsync(GlobalConstants.LS_AUTH_STORAGE_KEY, token);
+        if (token?.Token != null)
+        {
+            await localStorage.SetItemAsStringAsync(GlobalConstants.LS_AUTH_STORAGE_KEY, token.Token);
+        }
+
+        if (token?.Expiration != null)
+        {
+            await localStorage.SetItemAsStringAsync(GlobalConstants.LS_EXPIRED_STORAGE_KEY, token.Expiration.Value.ToString());
+        }
 
         NotifyAuthenticationStateChanged(GetAuthenticationStateAsync());
     }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ButtonAdd/ButtonAdd.razor

@@ -0,0 +1,27 @@
+@using GameIdeas.BlazorApp.Shared.Components.Select
+@using GameIdeas.BlazorApp.Shared.Components.Select.Models
+@using GameIdeas.Shared.Constants
+@using GameIdeas.BlazorApp.Shared.Models
+@using Microsoft.AspNetCore.Components.Authorization
+
+<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="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">
+                    <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>
+
+

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ButtonAdd/ButtonAdd.razor.cs

@@ -1,17 +1,14 @@
-using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Components.Select;
 using GameIdeas.BlazorApp.Shared.Models;
 using GameIdeas.Resources;
 using Microsoft.AspNetCore.Components;
 
-namespace GameIdeas.BlazorApp.Pages.Games.Header;
+namespace GameIdeas.BlazorApp.Shared.Components.ButtonAdd;
 
-public partial class GameHeader : ComponentBase
+public partial class ButtonAdd
 {
-    [Parameter] public bool DisplayAdd { get; set; } = true;
     [Parameter] public EventCallback<AddType> AddTypeChanged { get; set; }
-    [Parameter] public RenderFragment? ChildContent { get; set; }
-
 
     private readonly Dictionary<AddType, string> AddTypes = new() {
         { AddType.Manual, ResourcesKey.ManualAdd },
@@ -37,4 +34,4 @@ public partial class GameHeader : ComponentBase
         SelectListAdd?.Close();
         await AddTypeChanged.InvokeAsync(values.FirstOrDefault().Key);
     }
-}
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/ButtonAdd/ButtonAdd.razor.css

@@ -1,40 +1,10 @@
-.header-tab {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-    align-items: flex-end;
-    padding: 0px 10px;
-    height: 40px;
-}
-
-.icon-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-    width: 40px;
-    height: 100%;
-    cursor: pointer;
-}
-
-    .icon-container img {
-        max-height: 85%;
-        max-width: 85%;
-    }
-
-.account-add-container {
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    align-items: flex-end;
-}
-
-.add-buttons {
+.add-buttons {
     display: flex;
     flex-direction: row;
     background: var(--violet);
     border-radius: var(--small-radius);
     margin-right: 40px;
+    margin-left: 8px;
 }
 
 .button {
@@ -64,4 +34,4 @@
     .button-icon:hover {
         background: var(--violet-selected);
         cursor: pointer;
-    }
+    }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor

@@ -0,0 +1,22 @@
+ @using GameIdeas.BlazorApp.Pages.Games
+@using GameIdeas.BlazorApp.Pages.UserMenu
+@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
+
+<div class="header-tab">
+    <a href="/" class="icon-container">
+        <img src="icon.png" alt="Game Ideas">
+    </a>
+
+    <div class="content">
+        @ChildContent
+    </div>
+
+    <UserMenu />
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.cs

@@ -0,0 +1,12 @@
+using GameIdeas.BlazorApp.Shared.Components.Select;
+using GameIdeas.BlazorApp.Shared.Components.Select.Models;
+using GameIdeas.BlazorApp.Shared.Models;
+using GameIdeas.Resources;
+using Microsoft.AspNetCore.Components;
+
+namespace GameIdeas.BlazorApp.Shared.Components.Header;
+
+public partial class HeaderGameIdeas : ComponentBase
+{
+    [Parameter] public RenderFragment? ChildContent { get; set; }
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Header/HeaderGameIdeas.razor.css

@@ -0,0 +1,28 @@
+.header-tab {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: flex-end;
+    padding: 0px 10px;
+    height: 40px;
+}
+
+.icon-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 40px;
+    height: 100%;
+    cursor: pointer;
+}
+
+    .icon-container img {
+        max-height: 85%;
+        max-width: 85%;
+    }
+
+.content {
+    width: 100%;
+    display: flex;
+}

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Search/SearchInput.razor.cs

@@ -1,4 +1,5 @@
 using GameIdeas.BlazorApp.Shared.Constants;
+using GameIdeas.Shared.Constants;
 using Microsoft.AspNetCore.Components;
 
 namespace GameIdeas.BlazorApp.Shared.Components.Search;
@@ -21,7 +22,7 @@ public partial class SearchInput
         Text = string.Empty;
         Timer = new()
         {
-            Interval = 500,
+            Interval = GlobalConstants.DELAY_INPUT_MS,
             AutoReset = false,
         };
 

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor

@@ -1,11 +1,10 @@
 <div class="container">
-    <div class="slider-track"></div>
-    
-    <input type="range" id="min-range" style="@StatusColor(Value)" min="@Params.Min" max="@Params.Max"
-           @bind="@Value" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+    <div class="input">
+        <div class="slider-track"></div>
 
-    <div class="values">
-        <span class="value">@Params.Min</span>
-        <span class="value">@Params.Max</span>
+        <input type="range" id="min-range" style="@StatusColor(Value)" min="@Params.Min" max="@Params.Max"
+               @bind="@Value" @bind:event="oninput" @bind:after=HandleSlideOnInput />
     </div>
-</div>
+
+    <span class="value">@Value</span>
+</div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Slider/Slider.razor.css

@@ -1,7 +1,7 @@
-.container {
-    position: relative;
+.input {
     width: 100%;
-    z-index: 0
+    position: relative;
+    height: 2px;
 }
 
 input[type="range"] {
@@ -24,7 +24,6 @@ input[type="range"] {
     margin: auto;
     border-radius: 2px;
     background: var(--input-primary);
-    
 }
 
 input[type="range"]::-webkit-slider-runnable-track {
@@ -75,15 +74,13 @@ input[type="range"]::-ms-thumb {
 }
 
 .values {
-    display: flex;
-    position: absolute;
-    margin-top: 2px;
-    width: 100%;
     font-weight: bold;
-    justify-content: space-between;
+    width: 1em;
 }
 
-.value {
-    width: 1em;
-    text-align:center;
+.container {
+    gap: 8px;
+    width: 100%;
+    display: flex;
+    align-items: center;
 }

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor

@@ -1,13 +1,13 @@
 <div class="container">
     <div class="slider-track" style="@FillColor()"></div>
     
-    <input type="range" id="min-range" style="@StatusColor(Min)" min="@Params.Min" max="@Params.Max" 
-        @bind="@Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
-    <input type="range" id="max-range" style="@StatusColor(Max)" min="@Params.Min" max="@Params.Max" 
-        @bind="@Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
+    <input type="range" id="min-range" style="@StatusColor(Value.Min)" min="@Params.Min" max="@Params.Max"
+           @bind="@Value.Min" @bind:event="oninput" @bind:after=HandleSlideOnInput />
+    <input type="range" id="max-range" style="@StatusColor(Value.Max)" min="@Params.Min" max="@Params.Max"
+           @bind="@Value.Max" @bind:event="oninput" @bind:after=HandleSlideTwoInput />
 
     <div class="values">
-        <span class="value">@Min</span>
-        <span class="value">@Max</span>
+        <span class="value">@Value.Min</span>
+        <span class="value">@Value.Max</span>
     </div>
 </div>

src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/SliderRange/SliderRange.razor.cs

@@ -1,44 +1,58 @@
+using GameIdeas.Shared.Constants;
+using GameIdeas.Shared.Dto;
 using Microsoft.AspNetCore.Components;
-using System.Threading.Tasks;
-
 namespace GameIdeas.BlazorApp.Shared.Components.SliderRange;
 
 public partial class SliderRange
 {
     [Parameter] public SliderRangeParams Params { get; set; } = new();
-    [Parameter] public int Max { get; set; }
-    [Parameter] public EventCallback<int> MaxChanged { get; set; }
-    [Parameter] public int Min { get; set; }
-    [Parameter] public EventCallback<int> MinChanged { get; set; }
+    [Parameter] public MinMaxDto Value { get; set; } = new() { Min = 1, Max = 5 };
+    [Parameter] public EventCallback<MinMaxDto> ValueChanged { get; set; }
 
-    private async Task HandleSlideTwoInput()
+    private System.Timers.Timer? Timer;
+
+    protected override void OnInitialized()
     {
-        if (Max - Min <= Params.Gap)
+        Timer = new()
         {
-            Min = Max - Params.Gap;
-        }
+            Interval = GlobalConstants.DELAY_INPUT_MS,
+            AutoReset = false,
+        };
 
-        await MaxChanged.InvokeAsync(Max);
+        Timer.Elapsed += async (_, _) => await ValueChanged.InvokeAsync(Value);
+        base.OnInitialized();
     }
 
-    private async Task HandleSlideOnInput()
+    private void HandleSlideTwoInput()
     {
-        if (Max - Min <= Params.Gap)
+        if (Value.Max - Value.Min <= Params.Gap)
         {
-            Max = Min + Params.Gap;
+            Value.Min = Value.Max - Params.Gap;
         }
 
-        await MinChanged.InvokeAsync(Min);
+        Timer?.Stop();
+        Timer?.Start();
+    }
+
+    private void HandleSlideOnInput()
+    {
+        if (Value.Max - Value.Min <= Params.Gap)
+        {
+            Value.Max = Value.Min + Params.Gap;
+        }
+
+        Timer?.Stop();
+        Timer?.Start();
     }
 
     private string FillColor()
     {
-        var percent1 = (double)(Min - Params.Min) / (Params.Max - Params.Min) * 100;
-        var percent2 = (double)(Max - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent1 = (double?)(Value.Min - Params.Min) / (Params.Max - Params.Min) * 100;
+        var percent2 = (double?)(Value.Max - Params.Min) / (Params.Max - Params.Min) * 100;
         return $"background: linear-gradient(to right, var(--line) {percent1}% , var(--violet) {percent1}% , var(--violet) {percent2}%, var(--line) {percent2}%)";
     }
 
-    private string StatusColor(int value)
+    private string StatusColor(int? value)
     {
         string str = "--thumb-color: var({0});";
 

src/GameIdeas/GameIdeas.Shared/Constants/GlobalConstants.cs

@@ -12,13 +12,15 @@ public class GlobalConstants
     public const string MEMBER_NORMALIZED = "MEMBRE";
     public const string ADMIN_MEMBER = $"{ADMINISTRATOR}, {MEMBER}";
 
-    public const int JWT_DURATION_HOUR = 12;
+    public const int JWT_DURATION_HOUR = 168;
 
     public const int NUMBER_PER_PAGE = 50;
 
     public const string LS_AUTH_STORAGE_KEY = "authToken";
+    public const string LS_EXPIRED_STORAGE_KEY = "expiredToken";
 
     public const int API_PORT = 8000;
     public const string SUB_DOMAIN_NAME = "api-";
+
+    public const double DELAY_INPUT_MS = 500;
 }
-    

src/GameIdeas/GameIdeas.Shared/Dto/MinMaxDto.cs

@@ -0,0 +1,7 @@
+namespace GameIdeas.Shared.Dto;
+
+public class MinMaxDto
+{
+    public int? Min { get; set; }
+    public int? Max { get; set; }
+}

src/GameIdeas/Server/GameIdeas.WebAPI/GameIdeas.WebAPI.csproj

@@ -4,7 +4,6 @@
     <TargetFramework>net9.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
-    <UserSecretsId>c5ccfd3a-f458-4660-b6c4-81fcc2513737</UserSecretsId>
   </PropertyGroup>
 
   <ItemGroup>