Dominic/Wedding-Website
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

h

Browse Source
This commit is contained in:
Dominic
2026-03-09 19:47:07 +00:00
parent f98aad15f0
commit c1a424a4d9
7 changed files with 145 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

71
backend/templates/login.html
View File

@@ -16,7 +16,28 @@
<label>
{{ t('group_password') }}
<input type="password" name="group_password" required />
<div class="password-input-wrap">
<input type="password" name="group_password" required data-password-input />
<button
type="button"
class="password-toggle"
data-password-toggle
aria-label="{{ t('show_password') }}"
title="{{ t('show_password') }}"
hidden
>
<svg class="icon-eye icon-eye-open" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M2 12c2.7-4.2 6-6.3 10-6.3s7.3 2.1 10 6.3c-2.7 4.2-6 6.3-10 6.3S4.7 16.2 2 12z" />
<circle cx="12" cy="12" r="3.1" />
</svg>
<svg class="icon-eye icon-eye-closed" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
<path d="M3 3l18 18" />
<path d="M2.4 12c1.1-1.8 2.4-3.2 4-4.3" />
<path d="M9.4 6.2a9 9 0 0 1 2.6-.4c4 0 7.3 2.1 10 6.3a16.2 16.2 0 0 1-3 3.6" />
<path d="M14.7 14.7a3.8 3.8 0 0 1-5.4-5.4" />
</svg>
</button>
</div>
</label>
<button class="btn" type="submit">{{ t('login_submit') }}</button>
@@ -35,16 +56,48 @@
(() => {
const banner = document.querySelector("[data-login-privacy-banner]");
const acceptBtn = document.querySelector("[data-login-privacy-accept]");
if (!banner || !acceptBtn) return;
const storageKey = "login_privacy_banner_v1_ack";
if (localStorage.getItem(storageKey) === "1") {
banner.hidden = true;
return;
if (banner && acceptBtn) {
const storageKey = "login_privacy_banner_v1_ack";
if (localStorage.getItem(storageKey) === "1") {
banner.hidden = true;
} else {
acceptBtn.addEventListener("click", () => {
localStorage.setItem(storageKey, "1");
banner.hidden = true;
});
}
}
acceptBtn.addEventListener("click", () => {
localStorage.setItem(storageKey, "1");
banner.hidden = true;
const passwordInput = document.querySelector("[data-password-input]");
const passwordToggle = document.querySelector("[data-password-toggle]");
if (!passwordInput || !passwordToggle) return;
const labelShow = "{{ t('show_password') }}";
const labelHide = "{{ t('hide_password') }}";
const syncState = () => {
const hasValue = passwordInput.value.length > 0;
passwordToggle.hidden = !hasValue;
passwordToggle.classList.toggle("is-visible", hasValue);
if (!hasValue) {
passwordInput.type = "password";
passwordToggle.setAttribute("aria-label", labelShow);
passwordToggle.setAttribute("title", labelShow);
passwordToggle.classList.remove("is-active");
}
};
passwordToggle.addEventListener("click", () => {
const showPassword = passwordInput.type === "password";
passwordInput.type = showPassword ? "text" : "password";
const label = showPassword ? labelHide : labelShow;
passwordToggle.setAttribute("aria-label", label);
passwordToggle.setAttribute("title", label);
passwordToggle.classList.toggle("is-active", showPassword);
});
passwordInput.addEventListener("input", syncState);
syncState();
})();
</script>
{% endblock %}