Ouverture de l'authentification dans une modal

ChessCubing.App/Components/SiteMenu.razor

@@ -1,5 +1,7 @@
 @using System.Security.Claims
+@implements IAsyncDisposable
 @inject NavigationManager Navigation
+@inject IJSRuntime JS
 
 <div class="site-menu-shell">
     <header class="site-menu-bar">
@@ -35,8 +37,8 @@
                     <div class="site-menu-account">
                         <span class="micro-label">Compte Keycloak</span>
                         <div class="site-menu-account-actions">
-                            <a class="button secondary small" href="@LoginHref">Se connecter</a>
-                            <a class="button ghost small" href="@RegisterHref">Creer un compte</a>
+                            <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
+                            <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
                         </div>
                     </div>
                 </Authorizing>
@@ -44,8 +46,8 @@
                     <div class="site-menu-account">
                         <span class="micro-label">Compte Keycloak</span>
                         <div class="site-menu-account-actions">
-                            <a class="button secondary small" href="@LoginHref">Se connecter</a>
-                            <a class="button ghost small" href="@RegisterHref">Creer un compte</a>
+                            <button class="button secondary small" type="button" @onclick="OpenLoginModal">Se connecter</button>
+                            <button class="button ghost small" type="button" @onclick="OpenRegisterModal">Creer un compte</button>
                         </div>
                     </div>
                 </NotAuthorized>
@@ -54,11 +56,39 @@
     </header>
 </div>
 
+<section class="modal @(ShowAuthModal ? string.Empty : "hidden")" aria-hidden="@BoolString(!ShowAuthModal)">
+    <div class="modal-backdrop" @onclick="CloseAuthModal"></div>
+    <div class="modal-card auth-modal-card">
+        <div class="modal-head">
+            <div>
+                <p class="eyebrow">Compte Keycloak</p>
+                <h2>@AuthModalTitle</h2>
+            </div>
+            <button class="button ghost small" type="button" @onclick="CloseAuthModal">Fermer</button>
+        </div>
+        <p class="auth-modal-copy">
+            L'authentification se fait maintenant dans cette fenetre integree, sans quitter la page en cours.
+        </p>
+        @if (!string.IsNullOrWhiteSpace(AuthModalSource))
+        {
+            <div class="auth-modal-frame-shell">
+                <iframe class="auth-modal-frame" src="@AuthModalSource" title="@AuthModalTitle"></iframe>
+            </div>
+        }
+    </div>
+</section>
+
 @code {
     private static readonly string[] HomePaths = ["", "index.html"];
     private static readonly string[] ApplicationPaths = ["application", "application.html"];
     private static readonly string[] RulesPaths = ["reglement", "reglement.html"];
 
+    private DotNetObjectReference<SiteMenu>? _dotNetReference;
+    private bool _listenerRegistered;
+    private string? AuthModalSource;
+    private string AuthModalTitle = "Authentification";
+    private bool ShowAuthModal;
+
     private string LoginHref => BuildAuthHref("login", EffectiveReturnUrl);
     private string RegisterHref => BuildAuthHref("register", EffectiveReturnUrl);
     private string LogoutHref => BuildAuthHref("logout", "/");
@@ -109,4 +139,69 @@
     private static string BuildMeta(ClaimsPrincipal user)
         => user.FindFirst("email")?.Value
             ?? "Session active";
+
+    protected override async Task OnAfterRenderAsync(bool firstRender)
+    {
+        if (!firstRender)
+        {
+            return;
+        }
+
+        _dotNetReference = DotNetObjectReference.Create(this);
+        await JS.InvokeVoidAsync("chesscubingAuthModal.registerListener", _dotNetReference);
+        _listenerRegistered = true;
+    }
+
+    private void OpenLoginModal()
+        => OpenAuthModal("Se connecter", LoginHref);
+
+    private void OpenRegisterModal()
+        => OpenAuthModal("Creer un compte", RegisterHref);
+
+    private void OpenAuthModal(string title, string source)
+    {
+        AuthModalTitle = title;
+        AuthModalSource = source;
+        ShowAuthModal = true;
+    }
+
+    private void CloseAuthModal()
+    {
+        ShowAuthModal = false;
+        AuthModalSource = null;
+    }
+
+    [JSInvokable]
+    public Task HandleAuthModalMessage(string status)
+    {
+        if (!string.Equals(status, "login-succeeded", StringComparison.OrdinalIgnoreCase)
+            && !string.Equals(status, "logout-succeeded", StringComparison.OrdinalIgnoreCase))
+        {
+            return Task.CompletedTask;
+        }
+
+        CloseAuthModal();
+        StateHasChanged();
+        Navigation.NavigateTo(Navigation.Uri, forceLoad: true);
+        return Task.CompletedTask;
+    }
+
+    public async ValueTask DisposeAsync()
+    {
+        if (_listenerRegistered)
+        {
+            try
+            {
+                await JS.InvokeVoidAsync("chesscubingAuthModal.unregisterListener");
+            }
+            catch
+            {
+            }
+        }
+
+        _dotNetReference?.Dispose();
+    }
+
+    private static string BoolString(bool value)
+        => value ? "true" : "false";
 }