Add essential cookies consent gate on auth forms
This commit is contained in:
@@ -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);
|
||||||
|
|||||||
@@ -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">
|
||||||
|
|||||||
@@ -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",
|
||||||
|
|||||||
Reference in New Issue
Block a user