104 lines
3.8 KiB
HTML
104 lines
3.8 KiB
HTML
{% extends 'base.html' %}
|
|
{% block content %}
|
|
<div class="login-layout">
|
|
<section class="card login-shell">
|
|
<header class="login-intro">
|
|
<h1>{{ t('subtitle') }}</h1>
|
|
<p>{{ t('login_note') }}</p>
|
|
</header>
|
|
<hr class="login-divider" />
|
|
<h2 class="login-title">{{ t('login') }}</h2>
|
|
<form method="post" action="{{ url_for('login') }}" class="form-grid">
|
|
<label>
|
|
{{ t('group_name') }}
|
|
<input type="text" name="group_name" required />
|
|
</label>
|
|
|
|
<label>
|
|
{{ t('group_password') }}
|
|
<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>
|
|
</form>
|
|
</section>
|
|
</div>
|
|
<aside class="login-privacy-banner" data-login-privacy-banner>
|
|
<p class="login-privacy-title">{{ t('login_privacy_title') }}</p>
|
|
<p class="login-privacy-text">
|
|
{{ t('login_privacy_text') }}
|
|
<a href="{{ url_for('datenschutz') }}">{{ t('privacy') }}</a>
|
|
</p>
|
|
<button class="btn login-privacy-btn" type="button" data-login-privacy-accept>{{ t('login_privacy_accept') }}</button>
|
|
</aside>
|
|
<script>
|
|
(() => {
|
|
const banner = document.querySelector("[data-login-privacy-banner]");
|
|
const acceptBtn = document.querySelector("[data-login-privacy-accept]");
|
|
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;
|
|
});
|
|
}
|
|
}
|
|
|
|
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 %}
|