From ad1c1d22545cadf523721e319f3bc29b41d3d1c7 Mon Sep 17 00:00:00 2001
From: James Cole <james@firefly-iii.org>
Date: Fri, 8 Aug 2025 06:42:54 +0200
Subject: [PATCH] Fix #10071

---
 resources/views/auth/login.blade.php | 26 ++++++++++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/resources/views/auth/login.blade.php b/resources/views/auth/login.blade.php
index 4163ba5f55..35725ba7e1 100644
--- a/resources/views/auth/login.blade.php
+++ b/resources/views/auth/login.blade.php
@@ -56,8 +56,12 @@
                     <div class="input-group-text"> <em class="fa-solid fa-user"></em> </div>
                 </div>
                 @endif
-                <div class="input-group mb-3"> <input type="password" name="password" class="form-control" placeholder="{{ trans('form.password') }}" @if(true===$IS_DEMO_SITE)value="{{ $DEMO_PASSWORD }}"@endif autocomplete="current-password">
-                    <div class="input-group-text"> <em class="fa-solid fa-lock"></em> </div>
+                <div class="input-group mb-3">
+                    <input type="password" id="password" name="password" class="form-control" placeholder="{{ trans('form.password') }}" @if(true===$IS_DEMO_SITE)value="{{ $DEMO_PASSWORD }}"@endif autocomplete="current-password">
+                    <div class="input-group-text">
+                        <em class="fa-solid fa-lock"></em>
+                        <i class="fa-solid fa-eye-slash fa-eye" id="togglePassword"></i>
+                    </div>
                 </div> <!--begin::Row-->
                 <div class="row">
                     <div class="col-8">
@@ -80,3 +84,21 @@
     </div>
 
 @endsection
+@section('scripts')
+<script nonce="{{ $JS_NONCE }}">
+    const togglePassword = document.querySelector('#togglePassword');
+    const password = document.querySelector('#password');
+    togglePassword.addEventListener('click', () => {
+        const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
+        if('text' === type) {
+            togglePassword.classList.add('fa-eye');
+            togglePassword.classList.remove('fa-eye-slash');
+        }
+        if('password' === type) {
+            togglePassword.classList.add('fa-eye-slash');
+            togglePassword.classList.remove('fa-eye');
+        }
+        password.setAttribute('type', type);
+    });
+</script>
+@endsection