From 5cf46dce312d3180053934eb1ab1d35b8abd3d05 Mon Sep 17 00:00:00 2001 From: Christophe Date: Tue, 14 Apr 2026 20:03:26 +0200 Subject: [PATCH] Ajoute une page utilisateur et une persistance MySQL --- .env.example | 4 + ChessCubing.App/Components/SiteMenu.razor | 2 + .../Models/Users/UpdateUserProfileRequest.cs | 16 + .../Models/Users/UserProfileResponse.cs | 26 + ChessCubing.App/Pages/UserPage.razor | 475 ++++++++++++++++++ ChessCubing.Server/ChessCubing.Server.csproj | 4 + ChessCubing.Server/Data/SiteDataOptions.cs | 33 ++ ChessCubing.Server/Program.cs | 61 +++ .../Users/AuthenticatedSiteUser.cs | 40 ++ .../Users/MySqlUserProfileStore.cs | 296 +++++++++++ .../Users/UserProfileContracts.cs | 43 ++ README.md | 11 +- docker-compose.yml | 25 + styles.css | 73 +++ 14 files changed, 1106 insertions(+), 3 deletions(-) create mode 100644 ChessCubing.App/Models/Users/UpdateUserProfileRequest.cs create mode 100644 ChessCubing.App/Models/Users/UserProfileResponse.cs create mode 100644 ChessCubing.App/Pages/UserPage.razor create mode 100644 ChessCubing.Server/Data/SiteDataOptions.cs create mode 100644 ChessCubing.Server/Users/AuthenticatedSiteUser.cs create mode 100644 ChessCubing.Server/Users/MySqlUserProfileStore.cs create mode 100644 ChessCubing.Server/Users/UserProfileContracts.cs diff --git a/.env.example b/.env.example index 0193641..32384d2 100644 --- a/.env.example +++ b/.env.example @@ -3,3 +3,7 @@ KEYCLOAK_DB_USER=keycloak KEYCLOAK_DB_PASSWORD=change-me KEYCLOAK_ADMIN_USER=admin KEYCLOAK_ADMIN_PASSWORD=change-me +SITE_DB_NAME=chesscubing_site +SITE_DB_USER=chesscubing +SITE_DB_PASSWORD=change-me +SITE_DB_ROOT_PASSWORD=change-me diff --git a/ChessCubing.App/Components/SiteMenu.razor b/ChessCubing.App/Components/SiteMenu.razor index 10296fe..ba6f11e 100644 --- a/ChessCubing.App/Components/SiteMenu.razor +++ b/ChessCubing.App/Components/SiteMenu.razor @@ -24,6 +24,7 @@ Accueil Application Reglement + Utilisateur
@@ -154,6 +155,7 @@ private static readonly string[] HomePaths = ["", "index.html"]; private static readonly string[] ApplicationPaths = ["application", "application.html"]; private static readonly string[] RulesPaths = ["reglement", "reglement.html"]; + private static readonly string[] UserPaths = ["utilisateur", "utilisateur.html"]; private readonly LoginFormModel LoginModel = new(); private readonly RegisterFormModel RegisterModel = new(); diff --git a/ChessCubing.App/Models/Users/UpdateUserProfileRequest.cs b/ChessCubing.App/Models/Users/UpdateUserProfileRequest.cs new file mode 100644 index 0000000..25c8f45 --- /dev/null +++ b/ChessCubing.App/Models/Users/UpdateUserProfileRequest.cs @@ -0,0 +1,16 @@ +namespace ChessCubing.App.Models.Users; + +public sealed class UpdateUserProfileRequest +{ + public string? DisplayName { get; set; } + + public string? Club { get; set; } + + public string? City { get; set; } + + public string? PreferredFormat { get; set; } + + public string? FavoriteCube { get; set; } + + public string? Bio { get; set; } +} diff --git a/ChessCubing.App/Models/Users/UserProfileResponse.cs b/ChessCubing.App/Models/Users/UserProfileResponse.cs new file mode 100644 index 0000000..3f7b249 --- /dev/null +++ b/ChessCubing.App/Models/Users/UserProfileResponse.cs @@ -0,0 +1,26 @@ +namespace ChessCubing.App.Models.Users; + +public sealed class UserProfileResponse +{ + public string Subject { get; set; } = string.Empty; + + public string Username { get; set; } = string.Empty; + + public string? Email { get; set; } + + public string DisplayName { get; set; } = string.Empty; + + public string? Club { get; set; } + + public string? City { get; set; } + + public string? PreferredFormat { get; set; } + + public string? FavoriteCube { get; set; } + + public string? Bio { get; set; } + + public DateTime CreatedUtc { get; set; } + + public DateTime UpdatedUtc { get; set; } +} diff --git a/ChessCubing.App/Pages/UserPage.razor b/ChessCubing.App/Pages/UserPage.razor new file mode 100644 index 0000000..ac31037 --- /dev/null +++ b/ChessCubing.App/Pages/UserPage.razor @@ -0,0 +1,475 @@ +@page "/utilisateur" +@page "/utilisateur.html" +@using System.ComponentModel.DataAnnotations +@using System.Net +@using System.Net.Http.Json +@using ChessCubing.App.Models.Users +@implements IDisposable +@inject AuthenticationStateProvider AuthenticationStateProvider +@inject HttpClient Http + +ChessCubing Arena | Utilisateur + + +
+
+ +
+
+
+

Espace utilisateur

+

Gerer les donnees du site pour chaque joueur

+

+ Cette page relie le compte connecte a une fiche utilisateur stockee + cote serveur en MySQL. L'authentification reste geree par Keycloak, + mais les informations metier du site sont maintenant pretes pour des + evolutions futures. +

+
+ Ouvrir l'application + Voir les formats +
+
+ + +
+ +
+ @if (!IsAuthenticated) + { +
+
+
+

Connexion requise

+

Connecte-toi pour gerer ton profil

+
+

+ Utilise les boutons Se connecter ou Creer un compte dans le menu + en haut de page, puis reviens ici pour enregistrer tes informations. +

+
+ +
+ + Accueil + Retourner au site +

Revenir a la presentation generale de ChessCubing Arena.

+ + + Application + Ouvrir l'arbitrage +

Configurer un match pendant que le compte reste disponible dans le menu.

+ + + Reglement + Relire les formats +

Retrouver rapidement les differences entre Twice et Time.

+ +
+
+ } + else if (IsLoading) + { +
+

Chargement

+

Recuperation du profil utilisateur

+

Le serveur recharge les donnees enregistrees pour ce compte.

+
+ } + else if (!string.IsNullOrWhiteSpace(LoadError)) + { +
+

Serveur

+

Impossible de charger le profil

+

@LoadError

+
+ +
+
+ } + else if (Profile is not null) + { +
+
+
+

Compte relie

+

@Profile.DisplayName

+
+

+ Le compte connecte pilote l'identite, et cette page ajoute les donnees metier du site. +

+
+ +
+
+ Username + @Profile.Username +
+
+ Email + @(Profile.Email ?? "Non renseigne") +
+
+ Cree le + @FormatDate(Profile.CreatedUtc) +
+
+ Mis a jour + @FormatDate(Profile.UpdatedUtc) +
+
+
+ +
+
+
+

Resume du profil

+

Informations visibles pour le site

+
+
+ +
+
+ Club + @(Profile.Club ?? "A definir") +
+
+ Ville + @(Profile.City ?? "A definir") +
+
+ Format prefere + @(Profile.PreferredFormat ?? "A definir") +
+
+ Cube favori + @(Profile.FavoriteCube ?? "A definir") +
+
+ +
+ Bio +

@(Profile.Bio ?? "Aucune bio enregistree pour le moment.")

+
+
+ +
+
+
+

Edition

+

Mettre a jour le profil du site

+
+

+ Les champs ci-dessous sont stockes dans MySQL et pourront ensuite + servir a enrichir les pages, les inscriptions ou les statistiques. +

+
+ + @if (!string.IsNullOrWhiteSpace(SaveError)) + { +

@SaveError

+ } + + @if (!string.IsNullOrWhiteSpace(SaveMessage)) + { +

@SaveMessage

+ } + + + + +
+ + + + + + + + + + + +
+ +
+ +

Les champs vides restent facultatifs et peuvent etre completes plus tard.

+
+ +
+ } +
+
+ +@code { + private readonly UserProfileFormModel Form = new(); + + private UserProfileResponse? Profile; + private bool IsAuthenticated; + private bool IsLoading = true; + private bool IsSaving; + private string? LoadError; + private string? SaveError; + private string? SaveMessage; + + private string HeroStatusTitle + => !IsAuthenticated + ? "Connexion requise" + : IsLoading + ? "Chargement du profil" + : Profile?.DisplayName ?? "Profil utilisateur"; + + private string HeroStatusDescription + => !IsAuthenticated + ? "Le profil du site apparait des qu'un compte joueur est connecte." + : IsLoading + ? "Le serveur verifie la fiche utilisateur associee a ce compte." + : $"Compte lie a {Profile?.Username ?? "l'utilisateur connecte"} et stocke en base MySQL."; + + protected override async Task OnInitializedAsync() + { + AuthenticationStateProvider.AuthenticationStateChanged += HandleAuthenticationStateChanged; + await LoadProfileAsync(); + } + + private void HandleAuthenticationStateChanged(Task authenticationStateTask) + => _ = InvokeAsync(LoadProfileAsync); + + private async Task LoadProfileAsync() + { + LoadError = null; + SaveError = null; + SaveMessage = null; + IsLoading = true; + + try + { + var authState = await AuthenticationStateProvider.GetAuthenticationStateAsync(); + if (authState.User.Identity?.IsAuthenticated != true) + { + ResetProfileState(); + return; + } + + IsAuthenticated = true; + + var response = await Http.GetAsync("api/users/me"); + if (response.StatusCode == HttpStatusCode.Unauthorized) + { + ResetProfileState(); + return; + } + + if (!response.IsSuccessStatusCode) + { + LoadError = await ReadErrorAsync(response, "Le profil utilisateur n'a pas pu etre charge."); + Profile = null; + return; + } + + Profile = await response.Content.ReadFromJsonAsync(); + if (Profile is null) + { + LoadError = "Le serveur a retourne une reponse vide."; + return; + } + + FillForm(Profile); + } + catch (HttpRequestException) + { + LoadError = "Le service utilisateur est temporairement indisponible."; + Profile = null; + } + catch (TaskCanceledException) + { + LoadError = "La reponse du service utilisateur a pris trop de temps."; + Profile = null; + } + finally + { + IsLoading = false; + StateHasChanged(); + } + } + + private async Task SaveProfileAsync() + { + if (IsSaving || !IsAuthenticated) + { + return; + } + + IsSaving = true; + SaveError = null; + SaveMessage = null; + + try + { + var payload = new UpdateUserProfileRequest + { + DisplayName = Form.DisplayName, + Club = Form.Club, + City = Form.City, + PreferredFormat = Form.PreferredFormat, + FavoriteCube = Form.FavoriteCube, + Bio = Form.Bio, + }; + + var response = await Http.PutAsJsonAsync("api/users/me", payload); + if (!response.IsSuccessStatusCode) + { + SaveError = await ReadErrorAsync(response, "L'enregistrement du profil a echoue."); + return; + } + + Profile = await response.Content.ReadFromJsonAsync(); + if (Profile is null) + { + SaveError = "Le serveur a retourne une reponse vide apres la sauvegarde."; + return; + } + + FillForm(Profile); + SaveMessage = "Le profil utilisateur a bien ete enregistre."; + } + catch (HttpRequestException) + { + SaveError = "Le service utilisateur est temporairement indisponible."; + } + catch (TaskCanceledException) + { + SaveError = "La sauvegarde a pris trop de temps."; + } + finally + { + IsSaving = false; + } + } + + private void ResetProfileState() + { + IsAuthenticated = false; + Profile = null; + Form.Reset(); + } + + private void FillForm(UserProfileResponse profile) + { + Form.DisplayName = profile.DisplayName; + Form.Club = profile.Club; + Form.City = profile.City; + Form.PreferredFormat = profile.PreferredFormat; + Form.FavoriteCube = profile.FavoriteCube; + Form.Bio = profile.Bio; + } + + private static async Task ReadErrorAsync(HttpResponseMessage response, string fallbackMessage) + { + try + { + var error = await response.Content.ReadFromJsonAsync(); + if (!string.IsNullOrWhiteSpace(error?.Message)) + { + return error.Message; + } + } + catch + { + } + + return response.StatusCode switch + { + HttpStatusCode.Unauthorized => "La session a expire. Reconnecte-toi puis recharge la page.", + _ => fallbackMessage, + }; + } + + private static string FormatDate(DateTime value) + => value.ToLocalTime().ToString("dd MMM yyyy 'a' HH:mm", CultureInfo.GetCultureInfo("fr-FR")); + + public void Dispose() + => AuthenticationStateProvider.AuthenticationStateChanged -= HandleAuthenticationStateChanged; + + private sealed class ApiErrorMessage + { + public string? Message { get; set; } + } + + private sealed class UserProfileFormModel + { + [MaxLength(120, ErrorMessage = "Le nom affiche doit rester sous 120 caracteres.")] + public string? DisplayName { get; set; } + + [MaxLength(120, ErrorMessage = "Le club doit rester sous 120 caracteres.")] + public string? Club { get; set; } + + [MaxLength(120, ErrorMessage = "La ville doit rester sous 120 caracteres.")] + public string? City { get; set; } + + [MaxLength(40, ErrorMessage = "Le format prefere doit rester sous 40 caracteres.")] + public string? PreferredFormat { get; set; } + + [MaxLength(120, ErrorMessage = "Le cube favori doit rester sous 120 caracteres.")] + public string? FavoriteCube { get; set; } + + [MaxLength(1200, ErrorMessage = "La bio doit rester sous 1200 caracteres.")] + public string? Bio { get; set; } + + public void Reset() + { + DisplayName = string.Empty; + Club = string.Empty; + City = string.Empty; + PreferredFormat = string.Empty; + FavoriteCube = string.Empty; + Bio = string.Empty; + } + } +} diff --git a/ChessCubing.Server/ChessCubing.Server.csproj b/ChessCubing.Server/ChessCubing.Server.csproj index 567b474..7ea2ae0 100644 --- a/ChessCubing.Server/ChessCubing.Server.csproj +++ b/ChessCubing.Server/ChessCubing.Server.csproj @@ -8,4 +8,8 @@ ChessCubing.Server + + + + diff --git a/ChessCubing.Server/Data/SiteDataOptions.cs b/ChessCubing.Server/Data/SiteDataOptions.cs new file mode 100644 index 0000000..ad36abd --- /dev/null +++ b/ChessCubing.Server/Data/SiteDataOptions.cs @@ -0,0 +1,33 @@ +using MySqlConnector; + +namespace ChessCubing.Server.Data; + +public sealed class SiteDataOptions +{ + public string Host { get; set; } = "mysql"; + + public int Port { get; set; } = 3306; + + public string Database { get; set; } = "chesscubing_site"; + + public string Username { get; set; } = "chesscubing"; + + public string Password { get; set; } = "chesscubing"; + + public int InitializationRetries { get; set; } = 12; + + public int InitializationDelaySeconds { get; set; } = 3; + + public string BuildConnectionString() + => new MySqlConnectionStringBuilder + { + Server = Host, + Port = checked((uint)Port), + Database = Database, + UserID = Username, + Password = Password, + CharacterSet = "utf8mb4", + Pooling = true, + ConnectionTimeout = 15, + }.ConnectionString; +} diff --git a/ChessCubing.Server/Program.cs b/ChessCubing.Server/Program.cs index 413b5c9..2d82c9a 100644 --- a/ChessCubing.Server/Program.cs +++ b/ChessCubing.Server/Program.cs @@ -1,5 +1,7 @@ using System.Security.Claims; using ChessCubing.Server.Auth; +using ChessCubing.Server.Data; +using ChessCubing.Server.Users; using Microsoft.AspNetCore.Authentication; using Microsoft.AspNetCore.Authentication.Cookies; @@ -17,6 +19,20 @@ builder.Services.AddOptions() options.AdminPassword = configuration["KEYCLOAK_ADMIN_PASSWORD"] ?? options.AdminPassword; }); +builder.Services.AddOptions() + .Configure((options, configuration) => + { + options.Host = configuration["SITE_DB_HOST"] ?? options.Host; + options.Database = configuration["SITE_DB_NAME"] ?? options.Database; + options.Username = configuration["SITE_DB_USER"] ?? options.Username; + options.Password = configuration["SITE_DB_PASSWORD"] ?? options.Password; + + if (int.TryParse(configuration["SITE_DB_PORT"], out var port) && port > 0) + { + options.Port = port; + } + }); + builder.Services .AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme) .AddCookie(options => @@ -44,9 +60,16 @@ builder.Services builder.Services.AddAuthorization(); builder.Services.AddHttpClient(); +builder.Services.AddSingleton(); var app = builder.Build(); +await using (var scope = app.Services.CreateAsyncScope()) +{ + var profileStore = scope.ServiceProvider.GetRequiredService(); + await profileStore.InitializeAsync(CancellationToken.None); +} + app.UseAuthentication(); app.UseAuthorization(); @@ -55,6 +78,44 @@ app.MapGet("/api/health", () => TypedResults.Ok(new { status = "ok" })); app.MapGet("/api/auth/session", (ClaimsPrincipal user) => TypedResults.Ok(AuthSessionResponse.FromUser(user))); +app.MapGet("/api/users/me", async Task ( + ClaimsPrincipal user, + MySqlUserProfileStore profileStore, + CancellationToken cancellationToken) => +{ + var siteUser = AuthenticatedSiteUserFactory.FromClaimsPrincipal(user); + if (siteUser is null) + { + return TypedResults.BadRequest(new ApiErrorResponse("La session utilisateur est incomplete.")); + } + + var profile = await profileStore.GetOrCreateAsync(siteUser, cancellationToken); + return TypedResults.Ok(profile); +}).RequireAuthorization(); + +app.MapPut("/api/users/me", async Task ( + UpdateUserProfileRequest request, + ClaimsPrincipal user, + MySqlUserProfileStore profileStore, + CancellationToken cancellationToken) => +{ + var siteUser = AuthenticatedSiteUserFactory.FromClaimsPrincipal(user); + if (siteUser is null) + { + return TypedResults.BadRequest(new ApiErrorResponse("La session utilisateur est incomplete.")); + } + + try + { + var profile = await profileStore.UpdateAsync(siteUser, request, cancellationToken); + return TypedResults.Ok(profile); + } + catch (UserProfileValidationException exception) + { + return TypedResults.BadRequest(new ApiErrorResponse(exception.Message)); + } +}).RequireAuthorization(); + app.MapPost("/api/auth/login", async Task ( LoginRequest request, HttpContext httpContext, diff --git a/ChessCubing.Server/Users/AuthenticatedSiteUser.cs b/ChessCubing.Server/Users/AuthenticatedSiteUser.cs new file mode 100644 index 0000000..055224e --- /dev/null +++ b/ChessCubing.Server/Users/AuthenticatedSiteUser.cs @@ -0,0 +1,40 @@ +using System.Security.Claims; + +namespace ChessCubing.Server.Users; + +public sealed record AuthenticatedSiteUser( + string Subject, + string Username, + string? Email, + string DisplayName); + +public static class AuthenticatedSiteUserFactory +{ + public static AuthenticatedSiteUser? FromClaimsPrincipal(ClaimsPrincipal user) + { + if (user.Identity?.IsAuthenticated != true) + { + return null; + } + + var subject = user.FindFirst("sub")?.Value + ?? user.FindFirst(ClaimTypes.NameIdentifier)?.Value; + if (string.IsNullOrWhiteSpace(subject)) + { + return null; + } + + var username = user.FindFirst("preferred_username")?.Value + ?? user.Identity?.Name + ?? subject; + var email = user.FindFirst("email")?.Value; + var displayName = user.FindFirst("name")?.Value + ?? username; + + return new AuthenticatedSiteUser( + subject.Trim(), + username.Trim(), + string.IsNullOrWhiteSpace(email) ? null : email.Trim(), + displayName.Trim()); + } +} diff --git a/ChessCubing.Server/Users/MySqlUserProfileStore.cs b/ChessCubing.Server/Users/MySqlUserProfileStore.cs new file mode 100644 index 0000000..dee0c31 --- /dev/null +++ b/ChessCubing.Server/Users/MySqlUserProfileStore.cs @@ -0,0 +1,296 @@ +using ChessCubing.Server.Data; +using Microsoft.Extensions.Options; +using MySqlConnector; + +namespace ChessCubing.Server.Users; + +public sealed class MySqlUserProfileStore( + IOptions options, + ILogger logger) +{ + private const string CreateTableSql = """ + CREATE TABLE IF NOT EXISTS site_users ( + id BIGINT NOT NULL AUTO_INCREMENT, + subject VARCHAR(190) NOT NULL, + username VARCHAR(120) NOT NULL, + email VARCHAR(255) NULL, + display_name VARCHAR(120) NOT NULL, + club VARCHAR(120) NULL, + city VARCHAR(120) NULL, + preferred_format VARCHAR(40) NULL, + favorite_cube VARCHAR(120) NULL, + bio TEXT NULL, + created_utc DATETIME(6) NOT NULL, + updated_utc DATETIME(6) NOT NULL, + PRIMARY KEY (id), + UNIQUE KEY uq_site_users_subject (subject) + ) CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci; + """; + + private const string UpsertIdentitySql = """ + INSERT INTO site_users ( + subject, + username, + email, + display_name, + created_utc, + updated_utc + ) + VALUES ( + @subject, + @username, + @email, + @displayName, + @createdUtc, + @updatedUtc + ) + ON DUPLICATE KEY UPDATE + username = VALUES(username), + email = VALUES(email); + """; + + private const string UpsertProfileSql = """ + INSERT INTO site_users ( + subject, + username, + email, + display_name, + club, + city, + preferred_format, + favorite_cube, + bio, + created_utc, + updated_utc + ) + VALUES ( + @subject, + @username, + @email, + @displayName, + @club, + @city, + @preferredFormat, + @favoriteCube, + @bio, + @createdUtc, + @updatedUtc + ) + ON DUPLICATE KEY UPDATE + username = VALUES(username), + email = VALUES(email), + display_name = VALUES(display_name), + club = VALUES(club), + city = VALUES(city), + preferred_format = VALUES(preferred_format), + favorite_cube = VALUES(favorite_cube), + bio = VALUES(bio), + updated_utc = VALUES(updated_utc); + """; + + private const string SelectProfileSql = """ + SELECT + subject, + username, + email, + display_name, + club, + city, + preferred_format, + favorite_cube, + bio, + created_utc, + updated_utc + FROM site_users + WHERE subject = @subject + LIMIT 1; + """; + + private readonly SiteDataOptions _options = options.Value; + private readonly ILogger _logger = logger; + + public async Task InitializeAsync(CancellationToken cancellationToken) + { + for (var attempt = 1; attempt <= _options.InitializationRetries; attempt++) + { + try + { + await using var connection = new MySqlConnection(_options.BuildConnectionString()); + await connection.OpenAsync(cancellationToken); + + await using var command = connection.CreateCommand(); + command.CommandText = CreateTableSql; + await command.ExecuteNonQueryAsync(cancellationToken); + return; + } + catch (Exception exception) when (attempt < _options.InitializationRetries) + { + _logger.LogWarning( + exception, + "Initialisation MySQL impossible pour le profil utilisateur (tentative {Attempt}/{MaxAttempts}).", + attempt, + _options.InitializationRetries); + + await Task.Delay(TimeSpan.FromSeconds(_options.InitializationDelaySeconds), cancellationToken); + } + } + + await using var finalConnection = new MySqlConnection(_options.BuildConnectionString()); + await finalConnection.OpenAsync(cancellationToken); + + await using var finalCommand = finalConnection.CreateCommand(); + finalCommand.CommandText = CreateTableSql; + await finalCommand.ExecuteNonQueryAsync(cancellationToken); + } + + public async Task GetOrCreateAsync( + AuthenticatedSiteUser user, + CancellationToken cancellationToken) + { + await using var connection = new MySqlConnection(_options.BuildConnectionString()); + await connection.OpenAsync(cancellationToken); + + var nowUtc = DateTime.UtcNow; + + await using (var command = connection.CreateCommand()) + { + command.CommandText = UpsertIdentitySql; + command.Parameters.AddWithValue("@subject", user.Subject); + command.Parameters.AddWithValue("@username", user.Username); + command.Parameters.AddWithValue("@email", (object?)user.Email ?? DBNull.Value); + command.Parameters.AddWithValue("@displayName", user.DisplayName); + command.Parameters.AddWithValue("@createdUtc", nowUtc); + command.Parameters.AddWithValue("@updatedUtc", nowUtc); + await command.ExecuteNonQueryAsync(cancellationToken); + } + + return await ReadProfileAsync(connection, user.Subject, cancellationToken); + } + + public async Task UpdateAsync( + AuthenticatedSiteUser user, + UpdateUserProfileRequest request, + CancellationToken cancellationToken) + { + var input = NormalizeInput(user, request); + await using var connection = new MySqlConnection(_options.BuildConnectionString()); + await connection.OpenAsync(cancellationToken); + + var nowUtc = DateTime.UtcNow; + + await using (var command = connection.CreateCommand()) + { + command.CommandText = UpsertProfileSql; + command.Parameters.AddWithValue("@subject", user.Subject); + command.Parameters.AddWithValue("@username", user.Username); + command.Parameters.AddWithValue("@email", (object?)user.Email ?? DBNull.Value); + command.Parameters.AddWithValue("@displayName", input.DisplayName); + command.Parameters.AddWithValue("@club", (object?)input.Club ?? DBNull.Value); + command.Parameters.AddWithValue("@city", (object?)input.City ?? DBNull.Value); + command.Parameters.AddWithValue("@preferredFormat", (object?)input.PreferredFormat ?? DBNull.Value); + command.Parameters.AddWithValue("@favoriteCube", (object?)input.FavoriteCube ?? DBNull.Value); + command.Parameters.AddWithValue("@bio", (object?)input.Bio ?? DBNull.Value); + command.Parameters.AddWithValue("@createdUtc", nowUtc); + command.Parameters.AddWithValue("@updatedUtc", nowUtc); + await command.ExecuteNonQueryAsync(cancellationToken); + } + + return await ReadProfileAsync(connection, user.Subject, cancellationToken); + } + + private static UserProfileInput NormalizeInput(AuthenticatedSiteUser user, UpdateUserProfileRequest request) + { + var displayName = NormalizeOptionalValue(request.DisplayName, "nom affiche", 120) ?? user.DisplayName; + var club = NormalizeOptionalValue(request.Club, "club", 120); + var city = NormalizeOptionalValue(request.City, "ville", 120); + var favoriteCube = NormalizeOptionalValue(request.FavoriteCube, "cube favori", 120); + var bio = NormalizeOptionalValue(request.Bio, "bio", 1200); + var preferredFormat = NormalizePreferredFormat(request.PreferredFormat); + + return new UserProfileInput(displayName, club, city, preferredFormat, favoriteCube, bio); + } + + private static string? NormalizeOptionalValue(string? value, string fieldName, int maxLength) + { + var trimmed = value?.Trim(); + if (string.IsNullOrWhiteSpace(trimmed)) + { + return null; + } + + if (trimmed.Length > maxLength) + { + throw new UserProfileValidationException($"Le champ {fieldName} depasse {maxLength} caracteres."); + } + + return trimmed; + } + + private static string? NormalizePreferredFormat(string? value) + { + var normalized = NormalizeOptionalValue(value, "format prefere", 40); + if (normalized is null) + { + return null; + } + + return normalized switch + { + "Twice" => "Twice", + "Time" => "Time", + "Les deux" => "Les deux", + _ => throw new UserProfileValidationException("Le format prefere doit etre Twice, Time ou Les deux."), + }; + } + + private static async Task ReadProfileAsync( + MySqlConnection connection, + string subject, + CancellationToken cancellationToken) + { + await using var command = connection.CreateCommand(); + command.CommandText = SelectProfileSql; + command.Parameters.AddWithValue("@subject", subject); + + await using var reader = await command.ExecuteReaderAsync(cancellationToken); + if (!await reader.ReadAsync(cancellationToken)) + { + throw new InvalidOperationException("Le profil utilisateur n'a pas pu etre charge."); + } + + var subjectOrdinal = reader.GetOrdinal("subject"); + var usernameOrdinal = reader.GetOrdinal("username"); + var emailOrdinal = reader.GetOrdinal("email"); + var displayNameOrdinal = reader.GetOrdinal("display_name"); + var clubOrdinal = reader.GetOrdinal("club"); + var cityOrdinal = reader.GetOrdinal("city"); + var preferredFormatOrdinal = reader.GetOrdinal("preferred_format"); + var favoriteCubeOrdinal = reader.GetOrdinal("favorite_cube"); + var bioOrdinal = reader.GetOrdinal("bio"); + var createdUtcOrdinal = reader.GetOrdinal("created_utc"); + var updatedUtcOrdinal = reader.GetOrdinal("updated_utc"); + + return new UserProfileResponse + { + Subject = reader.GetString(subjectOrdinal), + Username = reader.GetString(usernameOrdinal), + Email = reader.IsDBNull(emailOrdinal) ? null : reader.GetString(emailOrdinal), + DisplayName = reader.GetString(displayNameOrdinal), + Club = reader.IsDBNull(clubOrdinal) ? null : reader.GetString(clubOrdinal), + City = reader.IsDBNull(cityOrdinal) ? null : reader.GetString(cityOrdinal), + PreferredFormat = reader.IsDBNull(preferredFormatOrdinal) ? null : reader.GetString(preferredFormatOrdinal), + FavoriteCube = reader.IsDBNull(favoriteCubeOrdinal) ? null : reader.GetString(favoriteCubeOrdinal), + Bio = reader.IsDBNull(bioOrdinal) ? null : reader.GetString(bioOrdinal), + CreatedUtc = DateTime.SpecifyKind(reader.GetDateTime(createdUtcOrdinal), DateTimeKind.Utc), + UpdatedUtc = DateTime.SpecifyKind(reader.GetDateTime(updatedUtcOrdinal), DateTimeKind.Utc), + }; + } + + private sealed record UserProfileInput( + string DisplayName, + string? Club, + string? City, + string? PreferredFormat, + string? FavoriteCube, + string? Bio); +} diff --git a/ChessCubing.Server/Users/UserProfileContracts.cs b/ChessCubing.Server/Users/UserProfileContracts.cs new file mode 100644 index 0000000..26f6374 --- /dev/null +++ b/ChessCubing.Server/Users/UserProfileContracts.cs @@ -0,0 +1,43 @@ +namespace ChessCubing.Server.Users; + +public sealed class UserProfileResponse +{ + public string Subject { get; init; } = string.Empty; + + public string Username { get; init; } = string.Empty; + + public string? Email { get; init; } + + public string DisplayName { get; init; } = string.Empty; + + public string? Club { get; init; } + + public string? City { get; init; } + + public string? PreferredFormat { get; init; } + + public string? FavoriteCube { get; init; } + + public string? Bio { get; init; } + + public DateTime CreatedUtc { get; init; } + + public DateTime UpdatedUtc { get; init; } +} + +public sealed class UpdateUserProfileRequest +{ + public string? DisplayName { get; init; } + + public string? Club { get; init; } + + public string? City { get; init; } + + public string? PreferredFormat { get; init; } + + public string? FavoriteCube { get; init; } + + public string? Bio { get; init; } +} + +public sealed class UserProfileValidationException(string message) : Exception(message); diff --git a/README.md b/README.md index de2bb3a..cc32e11 100644 --- a/README.md +++ b/README.md @@ -23,11 +23,11 @@ Le coeur de l'application se trouve dans `ChessCubing.App/`. - `ChessCubing.App/Services/MatchEngine.cs` : logique metier des matchs - `ChessCubing.App/Services/MatchStore.cs` : persistance navigateur - `ChessCubing.App/Services/AppAuthenticationStateProvider.cs` : session locale cote client -- `ChessCubing.Server/` : backend d'authentification qui parle a Keycloak +- `ChessCubing.Server/` : backend d'authentification Keycloak et API utilisateur reliee a MySQL - `ChessCubing.App/wwwroot/` : assets statiques, manifeste, PDFs, appli Ethan - `keycloak/realm/chesscubing-realm.json` : realm importable avec client Keycloak et roles - `keycloak/scripts/init-config.sh` : synchronisation automatique du client Keycloak au demarrage -- `docker-compose.yml` + `Dockerfile` + `Dockerfile.auth` : front Blazor, API d'auth et stack Keycloak/Postgres +- `docker-compose.yml` + `Dockerfile` + `Dockerfile.auth` : front Blazor, API d'auth, Keycloak/Postgres et MySQL pour les donnees du site Le projet continue a exposer les routes historiques `index.html`, `application.html`, `chrono.html`, `cube.html` et `reglement.html`. @@ -42,6 +42,7 @@ L'application embarque maintenant une authentification integree basee sur Keyclo - une session cookie locale est ensuite exposee au front via `/api/auth/session` - les roles Keycloak du realm restent exposes dans l'application - l'etat du match est isole par utilisateur dans le navigateur grace a une cle de stockage derivee du compte connecte +- une page `utilisateur` permet maintenant d'editer un profil du site persiste en base MySQL via `/api/users/me` Le realm importe par defaut : @@ -66,6 +67,7 @@ L'application est ensuite disponible sur `http://localhost:8080`. La console Keycloak est servie via le meme nginx sur `http://localhost:8080/auth/admin/`. L'API d'authentification integree est servie derriere le meme point d'entree via `/api/auth/*`. +L'API utilisateur et sa persistance MySQL sont egalement servies via `/api/users/*`. Identifiants d'administration par defaut pour le premier demarrage local : @@ -73,6 +75,7 @@ Identifiants d'administration par defaut pour le premier demarrage local : - mot de passe : `admin` Ces valeurs peuvent etre surchargees via les variables d'environnement de `.env.example`. +La base MySQL du site utilise les variables `SITE_DB_*` du meme fichier. Au demarrage, le service `keycloak-init` resynchronise automatiquement le realm courant pour garder l'inscription active et autoriser le flux de connexion integre, meme si la base Keycloak existe deja. @@ -134,13 +137,15 @@ bash -c "$(curl -fsSL https://git.jeannerot.fr/christophe/chesscubing/raw/branch ## Fichiers cles - `ChessCubing.App/Pages/Home.razor` : page d'accueil du site +- `ChessCubing.App/Pages/UserPage.razor` : page utilisateur connectee a MySQL - `ChessCubing.App/Pages/ApplicationPage.razor` : configuration et reprise de match - `ChessCubing.App/Pages/ChronoPage.razor` : phase chrono - `ChessCubing.App/Pages/CubePage.razor` : phase cube - `ChessCubing.App/Pages/RulesPage.razor` : synthese du reglement - `ChessCubing.App/Services/MatchEngine.cs` : regles de jeu et transitions - `ChessCubing.App/Services/AppAuthenticationStateProvider.cs` : etat de session cote client -- `ChessCubing.Server/Program.cs` : endpoints `/api/auth/*` +- `ChessCubing.Server/Program.cs` : endpoints `/api/auth/*` et `/api/users/*` +- `ChessCubing.Server/Users/MySqlUserProfileStore.cs` : creation de table et persistance du profil utilisateur - `keycloak/realm/chesscubing-realm.json` : realm, roles et client Keycloak importes - `keycloak/scripts/init-config.sh` : mise en conformite du client Keycloak au demarrage - `docker-compose.yml` + `Dockerfile` + `Dockerfile.auth` : execution locale diff --git a/docker-compose.yml b/docker-compose.yml index 57c7fe0..cc51dad 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -25,11 +25,18 @@ services: KEYCLOAK_CLIENT_ID: chesscubing-web KEYCLOAK_ADMIN_USERNAME: ${KEYCLOAK_ADMIN_USER:-admin} KEYCLOAK_ADMIN_PASSWORD: ${KEYCLOAK_ADMIN_PASSWORD:-admin} + SITE_DB_HOST: mysql + SITE_DB_PORT: 3306 + SITE_DB_NAME: ${SITE_DB_NAME:-chesscubing_site} + SITE_DB_USER: ${SITE_DB_USER:-chesscubing} + SITE_DB_PASSWORD: ${SITE_DB_PASSWORD:-chesscubing} depends_on: keycloak-init: condition: service_completed_successfully keycloak: condition: service_started + mysql: + condition: service_healthy restart: unless-stopped keycloak: @@ -89,5 +96,23 @@ services: retries: 5 restart: unless-stopped + mysql: + image: mysql:8.4 + container_name: chesscubing-site-db + environment: + MYSQL_DATABASE: ${SITE_DB_NAME:-chesscubing_site} + MYSQL_USER: ${SITE_DB_USER:-chesscubing} + MYSQL_PASSWORD: ${SITE_DB_PASSWORD:-chesscubing} + MYSQL_ROOT_PASSWORD: ${SITE_DB_ROOT_PASSWORD:-change-me} + volumes: + - site-mysql-data:/var/lib/mysql + healthcheck: + test: ["CMD-SHELL", "mysqladmin ping -h 127.0.0.1 -u$${MYSQL_USER} -p$${MYSQL_PASSWORD} --silent"] + interval: 10s + timeout: 5s + retries: 8 + restart: unless-stopped + volumes: keycloak-postgres: + site-mysql-data: diff --git a/styles.css b/styles.css index e335631..bc819c1 100644 --- a/styles.css +++ b/styles.css @@ -422,6 +422,7 @@ fieldset { } input:not([type="radio"]):not([type="checkbox"]), +select, textarea { width: 100%; padding: 0.95rem 1rem; @@ -439,6 +440,7 @@ textarea { } input:not([type="radio"]):not([type="checkbox"]):focus, +select:focus, textarea:focus { outline: 2px solid rgba(52, 141, 255, 0.45); outline-offset: 1px; @@ -1476,6 +1478,72 @@ body.site-menu-hidden .site-menu-shell { box-shadow: none; } +.user-hero { + align-items: stretch; +} + +.profile-meta-grid, +.profile-form-grid { + display: grid; + grid-template-columns: repeat(2, minmax(0, 1fr)); + gap: 0.9rem; +} + +.profile-meta-card { + display: grid; + gap: 0.35rem; + padding: 1rem; + border-radius: 22px; + border: 1px solid var(--panel-border); + background: var(--panel-alt); +} + +.profile-meta-card strong { + font-size: 1rem; +} + +.profile-highlights { + margin-bottom: 0.9rem; +} + +.profile-callout { + min-height: 100%; +} + +.profile-callout p { + margin-bottom: 0; +} + +.profile-actions { + display: flex; + flex-wrap: wrap; + align-items: center; + gap: 1rem; + margin-top: 1rem; +} + +.profile-actions .section-copy { + margin-bottom: 0; +} + +.profile-feedback { + margin: 0 0 1rem; + padding: 0.85rem 1rem; + border-radius: 18px; +} + +.profile-feedback.success { + border: 1px solid rgba(69, 185, 127, 0.3); + background: rgba(69, 185, 127, 0.12); + color: #dff7ea; +} + +.profile-feedback.error { + border: 1px solid rgba(255, 100, 127, 0.28); + background: rgba(255, 100, 127, 0.12); + color: #ffd8de; +} + @media (max-width: 1100px) { .hero, .setup-grid, @@ -1498,6 +1566,11 @@ body.site-menu-hidden .site-menu-shell { grid-column: span 12; } + .profile-meta-grid, + .profile-form-grid { + grid-template-columns: 1fr; + } + .phase-header { grid-template-columns: 1fr; text-align: center;