h

GUESTS.md

@@ -2,7 +2,7 @@
 
 Aktueller Stand der Login-Gruppen aus `backend/app.py` (`DEFAULT_INVITATION_GROUPS`).
 
-Anzahl Gruppen: **39**
+Anzahl Gruppen: **41**
 
 | Username | Rolle | Passwort | Members |
 |---|---|---|---|
@@ -45,5 +45,7 @@ Anzahl Gruppen: **39**
 | Alfred & Nadia | guest | `Alfr&Nad24!#` | Alfred, Nadia |
 | Anne-Marie & Erny | guest | `Anne&Ern24!#` | Anne-Marie, Erny |
 | Familie Kieffer | guest | `Kief!Fest24#` | Anny, John, Jana |
+| Peter | guest | `Peter!Fest26#` | Peter |
+| Johanna | guest | `Joha!Fest26#` | Johanna |
 
 Hinweis: Diese Datei enthält Klartext-Passwörter und sollte nicht öffentlich geteilt werden.

backend/app.py

@@ -207,6 +207,8 @@ DEFAULT_INVITATION_GROUPS = [
         "role": "guest",
         "members": ["Anny", "John", "Jana"],
     },
+    {"name": "Peter", "password": "Peter!Fest26#", "role": "guest", "members": ["Peter"]},
+    {"name": "Johanna", "password": "Joha!Fest26#", "role": "guest", "members": ["Johanna"]},
 ]
 AGE_REQUIRED_NAMES = {"Lena", "Finn", "Fin", "Bruno"}
 
@@ -272,6 +274,8 @@ TEXTS = {
         "login": "Login",
         "group_name": "Benutzername",
         "group_password": "Passwort",
+        "show_password": "Passwort anzeigen",
+        "hide_password": "Passwort verbergen",
         "login_submit": "Weiter zum Eingangsbereich",
         "guest_area": "Gästebereich",
         "hello_guest": "Hallo {name}.",
@@ -411,6 +415,8 @@ TEXTS = {
         "login": "Login",
         "group_name": "Username",
         "group_password": "Password",
+        "show_password": "Show password",
+        "hide_password": "Hide password",
         "login_submit": "Continue to entrance area",
         "guest_area": "Guest Area",
         "hello_guest": "Hello {name}.",

backend/static/styles.css

@@ -296,6 +296,80 @@ section.card > p {
   background: rgba(255, 255, 255, 0.96);
 }
 
+.password-input-wrap {
+  position: relative;
+}
+
+.password-input-wrap input[type="password"],
+.password-input-wrap input[type="text"] {
+  padding-right: 3.1rem;
+}
+
+.password-input-wrap input[type="password"]::-ms-reveal,
+.password-input-wrap input[type="password"]::-ms-clear {
+  display: none;
+}
+
+.password-input-wrap input[type="password"]::-webkit-credentials-auto-fill-button,
+.password-input-wrap input[type="password"]::-webkit-contacts-auto-fill-button {
+  visibility: hidden;
+  display: none !important;
+  pointer-events: none;
+}
+
+.password-toggle {
+  position: absolute;
+  right: 0.5rem;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 2rem;
+  height: 2rem;
+  border: 0;
+  border-radius: 999px;
+  background: transparent;
+  display: grid;
+  place-items: center;
+  cursor: pointer;
+  color: rgba(122, 47, 63, 0.72);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.18s ease, color 0.18s ease, background-color 0.18s ease;
+}
+
+.password-toggle.is-visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.password-toggle:hover,
+.password-toggle:focus-visible {
+  color: rgba(122, 47, 63, 0.95);
+  background: rgba(178, 137, 70, 0.16);
+  outline: none;
+}
+
+.password-toggle .icon-eye {
+  width: 1.1rem;
+  height: 1.1rem;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 1.9;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.password-toggle .icon-eye-closed {
+  display: none;
+}
+
+.password-toggle.is-active .icon-eye-open {
+  display: none;
+}
+
+.password-toggle.is-active .icon-eye-closed {
+  display: block;
+}
+
 .login-shell input[type="text"]:focus,
 .login-shell input[type="password"]:focus {
   border-color: rgba(122, 47, 63, 0.58);

backend/templates/login.html

@@ -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;
+    if (banner && acceptBtn) {
       const storageKey = "login_privacy_banner_v1_ack";
       if (localStorage.getItem(storageKey) === "1") {
         banner.hidden = true;
-      return;
-    }
+      } 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 %}