v0.13.3 account delete api and web client update for it

internal/server/webserver/chess-client-web/app.js

@@ -17,6 +17,7 @@ let gameState = {
     username: null,
     authBusy: false,
     newGameBusy: false,
+    accountBusy: false, // logout or account deletion in flight
     termination: '',
     actionBusy: false, // a draw or resign request is in flight
 };
@@ -85,6 +86,9 @@ document.getElementById('login-submit-btn').addEventListener('click', handleLogi
 document.getElementById('register-submit-btn').addEventListener('click', handleRegister);
 document.getElementById('auth-cancel-btn').addEventListener('click', hideAuthModal);
 document.getElementById('auth-cancel-btn-2').addEventListener('click', hideAuthModal);
+document.getElementById('logout-btn').addEventListener('click', handleLogoutClick);
+document.getElementById('account-cancel-btn').addEventListener('click', hideAccountModal);
+document.getElementById('delete-account-btn').addEventListener('click', deleteAccount);
 document.querySelectorAll('.promotion-choice').forEach(btn => {
     btn.addEventListener('click', () => closePromotion(btn.dataset.piece));
 });
@@ -143,15 +147,113 @@ function updateAuthIndicator(authenticated) {
 
 function handleAuthClick() {
     if (gameState.authToken) {
-        // Logged in - confirm logout
-        if (confirm(`Logout ${gameState.username}?`)) {
-            handleLogout();
-        }
+        showAccountModal();
     } else {
         showAuthModal();
     }
 }
 
+// Account dialog, for a signed-in user: log out, or delete the account. It
+// replaces a native confirm(), which a sandboxed embed may not be allowed.
+function showAccountModal() {
+    document.getElementById('account-username').textContent = gameState.username || '';
+    document.getElementById('delete-account').open = false;
+    document.getElementById('delete-password').value = '';
+    clearModalMessage('account-modal-message');
+    document.getElementById('account-overlay').classList.add('show');
+    document.removeEventListener('keydown', handleAccountKeydown);
+    document.addEventListener('keydown', handleAccountKeydown);
+    document.getElementById('account-cancel-btn').focus();
+}
+
+function hideAccountModal() {
+    if (gameState.accountBusy) return;
+    document.getElementById('account-overlay').classList.remove('show');
+    document.getElementById('delete-password').value = '';
+    document.removeEventListener('keydown', handleAccountKeydown);
+}
+
+function setAccountBusy(busy) {
+    gameState.accountBusy = busy;
+    for (const id of ['logout-btn', 'account-cancel-btn', 'delete-account-btn', 'delete-password']) {
+        document.getElementById(id).disabled = busy;
+    }
+}
+
+function handleAccountKeydown(e) {
+    if (gameState.accountBusy) {
+        if (e.key === 'Enter' || e.key === 'Escape') e.preventDefault();
+        return;
+    }
+    if (e.key === 'Escape') {
+        e.preventDefault();
+        hideAccountModal();
+    } else if (e.key === 'Enter' && document.activeElement?.id === 'delete-password') {
+        e.preventDefault();
+        deleteAccount();
+    }
+}
+
+async function handleLogoutClick() {
+    setAccountBusy(true);
+    await handleLogout();
+    setAccountBusy(false);
+    hideAccountModal();
+}
+
+// The server re-checks the password, ends the session, clears the account's
+// claims and names from its games, then deletes it (DELETE /api/auth/me).
+async function deleteAccount() {
+    if (gameState.accountBusy) return;
+    const password = document.getElementById('delete-password').value;
+    if (!password) {
+        setModalMessage('account-modal-message', 'Enter your password to delete the account', 'error');
+        return;
+    }
+
+    setAccountBusy(true);
+    clearModalMessage('account-modal-message');
+    let response;
+    try {
+        response = await authFetch(`${gameState.apiUrl}/api/auth/me`, {
+            method: 'DELETE',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({ password }),
+        });
+    } catch {
+        setAccountBusy(false);
+        setModalMessage('account-modal-message', 'Network error: the account was not deleted', 'error');
+        return;
+    }
+
+    if (response.status === 204) {
+        const name = gameState.username;
+        clearAuthState();
+        setModalMessage('account-modal-message', `Account ${name} deleted`, 'success');
+        setTimeout(() => {
+            setAccountBusy(false);
+            hideAccountModal();
+        }, MODAL_SUCCESS_DISPLAY_MS * 2);
+        return;
+    }
+
+    setAccountBusy(false);
+    const data = await parseErrorResponse(response);
+    let message;
+    if (response.status === 401 && data.error === 'invalid credentials') {
+        message = 'Wrong password';
+    } else if (response.status === 401) {
+        // The token itself was refused: the session is already gone.
+        clearAuthState();
+        message = 'Your session has ended. Log in again to delete the account.';
+    } else if (response.status === 429) {
+        message = 'Too many attempts. Wait a minute and try again.';
+    } else {
+        message = data.error ? `Not deleted: ${data.error}` : `Server error (${response.status})`;
+    }
+    setModalMessage('account-modal-message', message, 'error');
+}
+
 // Disables/enables every interactive control in the auth modal at once, and tracks
 // whether a login/register request is in flight (or its success message is showing).
 // Guards re-entrancy from the Enter-key handler, which bypasses individual button

internal/server/webserver/chess-client-web/index.html

@@ -117,14 +117,40 @@
     </div>
 </div>
 
+<!-- Account Modal: shown instead of the login modal while signed in -->
+<div id="account-overlay" class="modal-overlay">
+    <div class="modal account-modal" role="dialog" aria-modal="true" aria-labelledby="account-title">
+        <h2 id="account-title">Account</h2>
+        <div id="account-modal-message" class="modal-message" role="status" aria-live="polite"></div>
+        <p class="account-name">Signed in as <strong id="account-username"></strong></p>
+        <div class="modal-buttons">
+            <button id="logout-btn" class="btn btn-primary">Log out</button>
+            <button id="account-cancel-btn" class="btn btn-secondary">Close</button>
+        </div>
+        <details class="danger-zone" id="delete-account">
+            <summary>Delete account</summary>
+            <p>Deletes the account and signs you out. Your name and claim are removed
+            from every stored game; games nobody else plays are deleted 24 hours
+            after their last move. This cannot be undone.</p>
+            <div class="form-group account-form">
+                <label for="delete-password">Password</label>
+                <input type="password" id="delete-password" autocomplete="current-password">
+            </div>
+            <div class="modal-buttons">
+                <button id="delete-account-btn" class="btn btn-danger">Delete account</button>
+            </div>
+        </details>
+    </div>
+</div>
+
 <!-- Overlay Modal -->
 <div id="modal-overlay" class="modal-overlay">
     <div class="modal">
         <h2>New Game</h2>
-        <div id="new-game-modal-message" class="modal-message"></div>
-        <div class="form-group">
-            <label class="group-label">Your Color</label>
-            <div class="radio-group">
+        <div id="new-game-modal-message" class="modal-message" role="status" aria-live="polite"></div>
+        <div class="form-group form-row">
+            <span class="group-label" id="player-color-label">Your Color</span>
+            <div class="radio-group" role="radiogroup" aria-labelledby="player-color-label">
                 <label><input type="radio" name="player-color" value="white" checked><span>White</span></label>
                 <label><input type="radio" name="player-color" value="black"><span>Black</span></label>
             </div>

internal/server/webserver/chess-client-web/style.css

@@ -490,6 +490,16 @@ main {
     transform: translateY(-1px);
 }
 
+.btn-danger {
+    background: var(--tokyo-red);
+    color: var(--host-bg);
+}
+
+.btn-danger:hover:not(:disabled) {
+    filter: brightness(1.1);
+    transform: translateY(-1px);
+}
+
 .btn:disabled {
     opacity: 0.4;
     cursor: not-allowed;
@@ -546,7 +556,15 @@ main {
 }
 
 .form-group .group-label {
-    text-align: center;
+    color: var(--tokyo-cyan);
+}
+
+/* Label and control on one line: the colour choice. */
+.form-group.form-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
 }
 
 .radio-group {
@@ -643,7 +661,8 @@ input[type="range"]::-webkit-slider-thumb {
 
 .auth-form input[type="text"],
 .auth-form input[type="email"],
-.auth-form input[type="password"] {
+.auth-form input[type="password"],
+.account-form input[type="password"] {
     width: 100%;
     padding: 0.5rem;
     background: var(--host-bg);
@@ -653,7 +672,8 @@ input[type="range"]::-webkit-slider-thumb {
     font-size: 0.9rem;
 }
 
-.auth-form input:focus {
+.auth-form input:focus,
+.account-form input:focus {
     outline: none;
     border-color: var(--host-royal);
 }
@@ -679,18 +699,29 @@ input[type="range"]::-webkit-slider-thumb {
     color: var(--tokyo-green);
 }
 
-/* --- Modal status message (Issue 2) --- */
+/* --- Modal status message ---
+   A reserved slot, not a block that appears: an empty message keeps its height
+   and is only invisible, so a message never moves the form or pushes the
+   buttons out of a short frame (the embedded board on lixen.com is one). Sized
+   for one line; a longer message wraps and grows the slot, which the modal's
+   own scroll absorbs. */
 .modal-message {
-    display: none;
-    margin-bottom: 1rem;
-    padding: 0.6rem 0.75rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 2.3rem;
+    margin-bottom: 0.75rem;
+    padding: 0.35rem 0.75rem;
+    border: 1px solid transparent;
     border-radius: 6px;
     font-size: 0.85rem;
+    line-height: 1.3;
     text-align: center;
+    visibility: hidden;
 }
 
 .modal-message.show {
-    display: block;
+    visibility: visible;
 }
 
 .modal-message.error {
@@ -706,7 +737,8 @@ input[type="range"]::-webkit-slider-thumb {
 }
 
 /* --- Disabled state while a modal request is in flight (Issue 1) --- */
-.auth-form input:disabled {
+.auth-form input:disabled,
+.account-form input:disabled {
     opacity: 0.5;
     cursor: not-allowed;
 }
@@ -956,6 +988,37 @@ input[type="range"]:disabled {
     text-shadow: 1px 1px 2px rgba(255,255,255,0.2);
 }
 
+/* Account */
+.account-modal {
+    max-width: 360px;
+}
+
+.account-name {
+    text-align: center;
+}
+
+.danger-zone {
+    margin-top: 1.5rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--tokyo-border);
+}
+
+.danger-zone summary {
+    cursor: pointer;
+    color: var(--tokyo-red);
+    text-align: center;
+}
+
+.danger-zone p {
+    margin: 0.75rem 0 1rem;
+    font-size: 0.85rem;
+    line-height: 1.4;
+}
+
+.danger-zone .modal-buttons {
+    margin-top: 1rem;
+}
+
 /* Resign confirmation */
 .confirm-modal {
     max-width: 320px;