From 022819cbe6c1dc15a4252b1abc6087edde403f34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bj=C3=B6rn=20Fromme?= <fromme@dreipunktnull.com>
Date: Wed, 1 Jul 2026 10:29:30 +0200
Subject: [PATCH] feat: reveal password toggle for login form

addresses #869cqrw6w
---
 .../controllers/password_reveal_controller.js | 11 ++++++++++
 .../booking/create/authenticate.html.twig     | 22 +++++++++++++------
 templates/security/login.html.twig            | 22 +++++++++++++------
 3 files changed, 41 insertions(+), 14 deletions(-)
 create mode 100644 assets/controllers/password_reveal_controller.js

diff --git a/assets/controllers/password_reveal_controller.js b/assets/controllers/password_reveal_controller.js
new file mode 100644
index 0000000..547ece4
--- /dev/null
+++ b/assets/controllers/password_reveal_controller.js
@@ -0,0 +1,11 @@
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+
+    static targets = [ 'field' ]
+
+    toggle() {
+        let type = this.fieldTarget.getAttribute('type') === 'password' ? 'text' : 'password'
+        this.fieldTarget.setAttribute('type', type)
+    }
+}
diff --git a/templates/booking/create/authenticate.html.twig b/templates/booking/create/authenticate.html.twig
index ed05a18..072a91b 100644
--- a/templates/booking/create/authenticate.html.twig
+++ b/templates/booking/create/authenticate.html.twig
@@ -59,16 +59,24 @@
                                autocomplete="username">
                     </div>
 
-                    <div class="mb-4">
+                    <div class="mb-4" {{ stimulus_controller('password-reveal') }}>
                         <label for="password" class="mb-1 font-semibold text-white">
                             Passwort:
                         </label>
-                        <input type="password"
-                               id="password"
-                               name="_password"
-                               class="form-field"
-                               required
-                               autocomplete="current-password">
+                        <div class="relative">
+                            <input type="password"
+                                   id="password"
+                                   name="_password"
+                                   class="form-field"
+                                    {{ stimulus_target('password-reveal', 'field') }}
+                                   required
+                                   autocomplete="current-password">
+                            <button type="button"
+                                    {{ stimulus_action('password-reveal', 'toggle') }}
+                                    class="absolute top-0 right-0 mt-2 mr-2">
+                                {{ icon('eye', 'w-6 h-6 text-gray-500') }}
+                            </button>
+                        </div>
                     </div>
 
                     <button type="submit" class="button button--primary w-full md:w-auto">
diff --git a/templates/security/login.html.twig b/templates/security/login.html.twig
index 199af87..afe862a 100644
--- a/templates/security/login.html.twig
+++ b/templates/security/login.html.twig
@@ -24,16 +24,24 @@
                                required
                                autocomplete="username">
                     </div>
-                    <div class="mb-4">
+                    <div class="mb-4" {{ stimulus_controller('password-reveal') }}>
                         <label for="password" class="mb-1 font-semibold text-white">
                             Passwort:
                         </label>
-                        <input type="password"
-                               id="password"
-                               name="_password"
-                               class="form-field"
-                               required
-                               autocomplete="current-password">
+                        <div class="relative">
+                            <input type="password"
+                                   id="password"
+                                   name="_password"
+                                   class="form-field"
+                                    {{ stimulus_target('password-reveal', 'field') }}
+                                   required
+                                   autocomplete="current-password">
+                            <button type="button"
+                                    {{ stimulus_action('password-reveal', 'toggle') }}
+                                    class="absolute top-0 right-0 mt-2 mr-2">
+                                {{ icon('eye', 'w-6 h-6 text-gray-500') }}
+                            </button>
+                        </div>
                     </div>
                     <div class="flex flex-col lg:flex-row space-y-2 lg:space-y-0 lg:space-x-2 mt-4">
                         <button type="submit" class="button button--primary">