v0.13.3 account delete api, web client and toolchain update
This commit is contained in:
lixen committed
1 parent
cc03dc0294
commit
ffbf603bc8
16 files changed
+672
-57
No files matched your search
@@ -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
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in new issue
Block a user