Add essential cookies consent gate on auth forms

This commit is contained in:
2026-02-06 23:44:42 +01:00
parent bab0fc6eaf
commit 7319188fdb
3 changed files with 39 additions and 0 deletions

View File

@@ -40,6 +40,25 @@ function setupHandlers() {
} }
setAuthMode(state.authMode); setAuthMode(state.authMode);
const hasConsent = () => document.cookie.split(";").some((c) => c.trim().startsWith("cookie_consent=1"));
const setConsent = () => { document.cookie = "cookie_consent=1; path=/; max-age=31536000; SameSite=Lax"; };
const consentRows = document.querySelectorAll(".consent-row");
const toggleConsentRows = () => {
const hide = hasConsent();
consentRows.forEach((row) => row.classList.toggle("hidden", hide));
};
toggleConsentRows();
["login-consent", "register-consent"].forEach((id) => {
const box = $(id);
if (box) {
box.checked = hasConsent();
box.addEventListener("change", () => {
if (box.checked) setConsent();
toggleConsentRows();
});
}
});
const loginUser = $("login-username"); const loginUser = $("login-username");
if (loginUser) { if (loginUser) {
const markEditing = () => { loginUser.dataset.userEditing = "1"; }; const markEditing = () => { loginUser.dataset.userEditing = "1"; };
@@ -76,8 +95,10 @@ function setupHandlers() {
const password = $("login-password").value; const password = $("login-password").value;
if (username.length > 24) return toast("Username must be 24 characters or fewer.", true); if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
if (!username || !password) return toast(t("auth.needCredentials"), true); if (!username || !password) return toast(t("auth.needCredentials"), true);
if (!hasConsent() && !$("login-consent")?.checked) return toast(t("auth.cookieRequired"), true);
try { try {
await api.login({ username, password }); await api.login({ username, password });
setConsent();
setSavedUsername(username); setSavedUsername(username);
state.isAuthenticated = true; state.isAuthenticated = true;
setAuthUI(true); setAuthUI(true);
@@ -102,8 +123,10 @@ function setupHandlers() {
if (username.length > 24) return toast("Username must be 24 characters or fewer.", true); if (username.length > 24) return toast("Username must be 24 characters or fewer.", true);
if (displayName.length > 16) return toast("Display name must be 16 characters or fewer.", true); if (displayName.length > 16) return toast("Display name must be 16 characters or fewer.", true);
if (!username || !password) return toast(t("auth.needCredentials"), true); if (!username || !password) return toast(t("auth.needCredentials"), true);
if (!hasConsent() && !$("register-consent")?.checked) return toast(t("auth.cookieRequired"), true);
try { try {
await api.register({ username, password, displayName, adminKey }); await api.register({ username, password, displayName, adminKey });
setConsent();
setSavedUsername(username); setSavedUsername(username);
state.isAuthenticated = true; state.isAuthenticated = true;
setAuthUI(true); setAuthUI(true);

View File

@@ -41,6 +41,12 @@
<span class="label" data-i18n="auth.password">Password</span> <span class="label" data-i18n="auth.password">Password</span>
<input id="login-password" name="password" type="password" autocomplete="current-password" required /> <input id="login-password" name="password" type="password" autocomplete="current-password" required />
</label> </label>
<label class="stack consent-row">
<span class="label">
<input id="login-consent" type="checkbox" />
<span data-i18n="auth.cookieLabel">I agree to essential cookies.</span>
</span>
</label>
<button type="submit" data-i18n="auth.loginSubmit">Log in</button> <button type="submit" data-i18n="auth.loginSubmit">Log in</button>
</form> </form>
<form id="register-form" class="stack auth-form hidden" data-mode="register"> <form id="register-form" class="stack auth-form hidden" data-mode="register">
@@ -60,6 +66,12 @@
<span class="label" data-i18n="auth.adminKey">Admin key (optional)</span> <span class="label" data-i18n="auth.adminKey">Admin key (optional)</span>
<input id="register-adminkey" name="adminKey" type="password" maxlength="128" /> <input id="register-adminkey" name="adminKey" type="password" maxlength="128" />
</label> </label>
<label class="stack consent-row">
<span class="label">
<input id="register-consent" type="checkbox" />
<span data-i18n="auth.cookieLabel">I agree to essential cookies.</span>
</span>
</label>
<button type="submit" data-i18n="auth.registerSubmit">Create account</button> <button type="submit" data-i18n="auth.registerSubmit">Create account</button>
</form> </form>
<div class="stack"> <div class="stack">

View File

@@ -16,6 +16,8 @@ const translations = {
"auth.registerHeading": "Create account", "auth.registerHeading": "Create account",
"auth.switchToRegister": "Need an account? Register", "auth.switchToRegister": "Need an account? Register",
"auth.switchToLogin": "Have an account? Log in", "auth.switchToLogin": "Have an account? Log in",
"auth.cookieLabel": "I agree to the use of essential cookies.",
"auth.cookieRequired": "Please agree to essential cookies to continue.",
"auth.logout": "Logout", "auth.logout": "Logout",
"auth.welcome": "Welcome, {name}!", "auth.welcome": "Welcome, {name}!",
"auth.defaultName": "Player", "auth.defaultName": "Player",
@@ -185,6 +187,8 @@ const translations = {
"auth.registerHeading": "Konto erstellen", "auth.registerHeading": "Konto erstellen",
"auth.switchToRegister": "Noch kein Konto? Registrieren", "auth.switchToRegister": "Noch kein Konto? Registrieren",
"auth.switchToLogin": "Schon ein Konto? Anmelden", "auth.switchToLogin": "Schon ein Konto? Anmelden",
"auth.cookieLabel": "Ich stimme der Nutzung erforderlicher Cookies zu.",
"auth.cookieRequired": "Bitte stimme den erforderlichen Cookies zu.",
"auth.logout": "Abmelden", "auth.logout": "Abmelden",
"auth.welcome": "Willkommen, {name}!", "auth.welcome": "Willkommen, {name}!",
"auth.defaultName": "Spieler", "auth.defaultName": "Spieler",