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

Add header for game list #3

Merged
Egamorf merged 14 commits from feature/add-header-for-games-list into main 2025-02-27 01:09:05 +01:00
Conversation 0 Commits 14 Files Changed 28 +263 -51
15 changed files with 263 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit f5fc908f53 - Show all commits

3
src/GameIdeas/Client/GameIdeas.BlazorApp/GameIdeas.BlazorApp.csproj
View File

@@ -8,6 +8,8 @@
</PropertyGroup>
<ItemGroup>
<PackageReference Include="Blazored.FluentValidation" Version="2.2.0" />
<PackageReference Include="FluentValidation" Version="11.11.0" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly" Version="9.0.2" />
<PackageReference Include="Microsoft.AspNetCore.Components.WebAssembly.DevServer" Version="9.0.2" PrivateAssets="all" />
<PackageReference Include="Microsoft.Extensions.Http" Version="9.0.2" />
@@ -15,6 +17,7 @@
<ItemGroup>
<ProjectReference Include="..\..\GameIdeas.Resources\GameIdeas.Resources.csproj" />
<ProjectReference Include="..\..\GameIdeas.Shared\GameIdeas.Shared.csproj" />
</ItemGroup>
</Project>

1
src/GameIdeas/Client/GameIdeas.BlazorApp/Pages/Games/AccountSetting.cs
View File

@@ -2,7 +2,6 @@ namespace GameIdeas.BlazorApp.Pages.Games;
public enum AccountSetting
{
Login,
Logout
}

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Program.cs
View File

@@ -1,5 +1,6 @@
using System.Net.Http.Json;
using GameIdeas.BlazorApp;
using GameIdeas.BlazorApp.Services;
using GameIdeas.Resources;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
@@ -21,6 +22,8 @@ builder.Services.AddHttpClient(
client.Timeout = TimeSpan.FromMinutes(3);
});
builder.Services.AddScoped<AuthentificationService>();
builder.Services.AddSingleton<TranslationService>();
builder.Services.AddSingleton<Translations>();

21
src/GameIdeas/Client/GameIdeas.BlazorApp/Services/AuthentificationService.cs Normal file
View File

@@ -0,0 +1,21 @@
namespace GameIdeas.BlazorApp.Services;
public class AuthentificationService
{
private bool isLogin;
public bool IsLogin
{
get { return isLogin; }
}
public void Login()
{
isLogin = true;
}
public void Logout()
{
isLogin = false;
}
}

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Components/Dropdown/DropdownContent.razor.css
View File

@@ -5,7 +5,8 @@
border-radius: var(--small-radius);
position: fixed;
animation-name: fade-in;
animation-duration: 0.4s
animation-duration: 0.4s;
margin-top: 4px;
}
.drowdown-element {

48
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor
View File

@@ -1,6 +1,46 @@
<div @ref=Content class="account-setting-container" tabindex="1000"
@onfocusout=HandleAccountSettingFocusOut>
<div class="account-setting-content @(ContentVisile ? string.Empty : "invisible"))">
@using GameIdeas.Resources
@using Blazored.FluentValidation;
<div class="account-setting-container" tabindex="1001">
<div class="account-setting-content @(ContentVisile ? string.Empty : "invisible")">
@if (!AuthentificationService.IsLogin)
{
<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="LoginDto.Username" />
</div>
<div class="login-field">
<div class="input-title">@ResourcesKey.EnterPassword</div>
<InputText class="input-text"
@bind-Value="LoginDto.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>
}
else
{
<div class="settings-list">
<div class="settings-element" @onclick="HandleLogoutClicked">
@ResourcesKey.Logout
</div>
@* <span class="line"></span> *@
</div>
}
</div>
</div>

60
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.cs
View File

@@ -1,27 +1,59 @@
using Microsoft.AspNetCore.Components;
using GameIdeas.BlazorApp.Services;
using GameIdeas.Shared.Dto;
using Microsoft.AspNetCore.Components.Forms;
namespace GameIdeas.BlazorApp.Shared.Headers;
public partial class AccountSettings
public partial class AccountSettings (
AuthentificationService AuthentificationService)
{
private bool ContentVisile = false;
private DateTime ContentLastFocusOut = DateTime.Now;
private ElementReference Content;
private EditContext? EditContext;
private LoginDto LoginDto = new();
private bool IsLoading = false;
public async Task OpenAsync()
protected override void OnInitialized()
{
if (DateTime.Now - ContentLastFocusOut >= TimeSpan.FromSeconds(0.2))
{
await Content.FocusAsync();
ContentVisile = true;
}
EditContext = new EditContext(LoginDto);
}
public void Close() => ContentVisile = false;
private void HandleAccountSettingFocusOut()
public void Open()
{
ContentVisile = true;
StateHasChanged();
}
public void Close()
{
ContentLastFocusOut = DateTime.Now;
ContentVisile = false;
StateHasChanged();
}
public void Toggle()
{
ContentVisile = !ContentVisile;
StateHasChanged();
}
private async Task HandleLoginSubmit()
{
if (EditContext?.Validate() == false)
{
LoginDto.Password = string.Empty;
return;
}
IsLoading = true;
await Task.Delay(TimeSpan.FromSeconds(5));
IsLoading = false;
LoginDto = new();
Close();
AuthentificationService.Login();
}
private void HandleLogoutClicked()
{
Close();
AuthentificationService.Logout();
}
}

87
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/AccountSettings.razor.css
View File

@@ -1,13 +1,94 @@
.account-setting-content {
overflow: hidden;
display: flex;
flex-direction: column;
border-radius: var(--big-radius);
position: fixed;
animation-name: fade-in;
animation-duration: 0.4s
animation-duration: 0.4s;
border: 2px solid var(--light-grey);
background: var(--black);
right: 10px;
margin-top: 4px;
}
.invisible {
display: none;
}
.login-form {
display: flex;
flex-direction: column;
padding: 20px 6px;
gap: 20px;
max-width: 400px;
}
.login-field {
display: flex;
flex-direction: column;
width: 100%;
height: fit-content;
}
::deep .input-text {
background: var(--light-grey);
border: 2px solid rgb(255, 255, 255, 0.3);
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 var(--line-black);
border-top-color: var(--white);
animation: loading 1s linear infinite;
justify-self: center;
}
.settings-list {
display: flex;
flex-direction: column;
}
.line {
margin: 0 6px;
border-bottom: 2px solid var(--light-grey);
}
.settings-element {
max-width: 140px;
height: 40px;
padding: 0 26px;
align-content: center;
}
.settings-element:hover {
background: var(--light-grey)
}

3
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor
View File

@@ -31,11 +31,12 @@
Theme="DropdownTheme.Navigation" />
</div>
<div class="account-container">
<div class="icon-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>
</div>
</div>

11
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/HeaderBase.razor.cs
View File

@@ -17,19 +17,30 @@ public partial class HeaderBase
new AddTypeParams(AddType.Auto, ResourcesKey.AutoAdd)
];
private AccountSettings? AccountSettings;
private void HandleIconClicked()
{
throw new NotImplementedException();
}
private async Task HandleMoreButton()
{
if (DropdownAdd != null)
{
await DropdownAdd.OpenAsync();
}
AccountSettings?.Close();
}
private async Task HandleAddTypeClickedAsync(AddTypeParams value)
{
await AddTypeChanged.InvokeAsync(value.AddType);
}
private void HandleAccountClicked()
{
AccountSettings?.Toggle();
}
}

18
src/GameIdeas/Client/GameIdeas.BlazorApp/Shared/Headers/LoginValidator.cs Normal file
View File

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

39
src/GameIdeas/Client/GameIdeas.BlazorApp/wwwroot/css/app.css
View File

@@ -3,6 +3,7 @@
:root {
--background: linear-gradient(180deg, #2B1D3D 0%, #171229 100%);
--violet: #A380D1;
--violet-selected: #8266a7;
--red: #FF5E51;
--yellow: #FFC107;
--green: #43F8C0;
@@ -30,38 +31,16 @@ html, body, #app {
overflow: hidden;
}
h1:focus {
outline: none;
}
a, .btn-link {
color: #0071c1;
}
.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;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
border: 2px solid var(--green);
}
.invalid {
outline: 1px solid red;
border: 2px solid var(--red) !important;
}
.validation-message {
color: red;
color: var(--red);
}
#blazor-error-ui {
@@ -142,7 +121,17 @@ code {
text-align: start;
}
:focus-visible {
outline: none;
}
@keyframes fade-in {
0% {opacity: 0}
100% {opacity: 1}
}
@keyframes loading {
to {
transform: rotate(360deg);
}
}

4
src/GameIdeas/GameIdeas.Resources/CreateStaticResourceKey.cs
View File

@@ -8,6 +8,8 @@ public class Translations (TranslationService translationService)
public string AutoAdd => translationService.Translate(nameof(AutoAdd));
public string Login => translationService.Translate(nameof(Login));
public string Logout => translationService.Translate(nameof(Logout));
public string EnterUsername => translationService.Translate(nameof(EnterUsername));
public string EnterPassword => translationService.Translate(nameof(EnterPassword));
}
public static class ResourcesKey
@@ -24,4 +26,6 @@ public static class ResourcesKey
public static string AutoAdd => _instance?.AutoAdd ?? throw new InvalidOperationException("ResourcesKey.AutoAdd is not initialized.");
public static string Login => _instance?.Login ?? throw new InvalidOperationException("ResourcesKey.Login is not initialized.");
public static string Logout => _instance?.Logout ?? throw new InvalidOperationException("ResourcesKey.Logout is not initialized.");
public static string EnterUsername => _instance?.EnterUsername ?? throw new InvalidOperationException("ResourcesKey.EnterUsername is not initialized.");
public static string EnterPassword => _instance?.EnterPassword ?? throw new InvalidOperationException("ResourcesKey.EnterPassword is not initialized.");
}

7
src/GameIdeas/GameIdeas.Shared/Dto/LoginDto.cs Normal file
View File

@@ -0,0 +1,7 @@
namespace GameIdeas.Shared.Dto;
public class LoginDto
{
public string? Username { get; set; }
public string? Password { get; set; }
}

6
src/GameIdeas/Server/GameIdeas.WebAPI/Files/GameIdeas.fr.json
View File

@@ -2,6 +2,8 @@
"GamesIdeas": "Game Ideas",
"ManualAdd": "Manuel",
"AutoAdd": "Automatique",
"Login": "Connexion",
"Logout": "Déconnexion"
"Login": "Se connecter",
"Logout": "Se déconnecter",
"EnterUsername": "Nom d'utilisateur",
"EnterPassword": "Mot de passe"
}