From bd5c18b145707b1488411f2dafea8e0603e62047 Mon Sep 17 00:00:00 2001
From: Paul Seebach <admin@ezxd.cloud>
Date: Sat, 21 Mar 2026 15:54:34 +0100
Subject: [PATCH 1/2] [Web] Add show/hide password toggle on login pages

Adds an eye icon button to the password field on the user, admin, and
domain admin login pages. Clicking it toggles between hidden and visible
password text, using Bootstrap Icons (bi-eye / bi-eye-slash).

Closes #6893
---
 data/web/templates/admin_index.twig       | 1 +
 data/web/templates/domainadmin_index.twig | 1 +
 data/web/templates/user_index.twig        | 1 +
 3 files changed, 3 insertions(+)

diff --git a/data/web/templates/admin_index.twig b/data/web/templates/admin_index.twig
index 0dcb9145e0..12e1b6cdaa 100644
--- a/data/web/templates/admin_index.twig
+++ b/data/web/templates/admin_index.twig
@@ -49,6 +49,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
+              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
diff --git a/data/web/templates/domainadmin_index.twig b/data/web/templates/domainadmin_index.twig
index 2fc7bad98f..3e76cf2e81 100644
--- a/data/web/templates/domainadmin_index.twig
+++ b/data/web/templates/domainadmin_index.twig
@@ -49,6 +49,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
+              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
diff --git a/data/web/templates/user_index.twig b/data/web/templates/user_index.twig
index 28eb6389c2..2e843e0d76 100644
--- a/data/web/templates/user_index.twig
+++ b/data/web/templates/user_index.twig
@@ -56,6 +56,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
+              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="mt-2 text-muted" style="font-size: 0.9rem;">

From 5408bc809d4304806fb1a54baf099e0bc9dd9e56 Mon Sep 17 00:00:00 2001
From: Paul Seebach <admin@ezxd.cloud>
Date: Sat, 21 Mar 2026 15:59:29 +0100
Subject: [PATCH 2/2] [Web] Use input-group-text for password toggle button

Replaces btn-outline-secondary with input-group-text so the toggle
button border matches the surrounding input group consistently.
---
 data/web/templates/admin_index.twig       | 2 +-
 data/web/templates/domainadmin_index.twig | 2 +-
 data/web/templates/user_index.twig        | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/data/web/templates/admin_index.twig b/data/web/templates/admin_index.twig
index 12e1b6cdaa..44b3564cc0 100644
--- a/data/web/templates/admin_index.twig
+++ b/data/web/templates/admin_index.twig
@@ -49,7 +49,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
-              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
+              <button type="button" class="input-group-text" style="cursor:pointer;" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
diff --git a/data/web/templates/domainadmin_index.twig b/data/web/templates/domainadmin_index.twig
index 3e76cf2e81..af667756a4 100644
--- a/data/web/templates/domainadmin_index.twig
+++ b/data/web/templates/domainadmin_index.twig
@@ -49,7 +49,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
-              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
+              <button type="button" class="input-group-text" style="cursor:pointer;" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="d-flex justify-content-between mt-4" style="position: relative">
diff --git a/data/web/templates/user_index.twig b/data/web/templates/user_index.twig
index 2e843e0d76..a06cdb3f6a 100644
--- a/data/web/templates/user_index.twig
+++ b/data/web/templates/user_index.twig
@@ -56,7 +56,7 @@
             <div class="input-group">
               <div class="input-group-text"><i class="bi bi-lock-fill"></i></div>
               <input name="pass_user" type="password" id="pass_user" class="form-control" placeholder="{{ lang.login.password }}" required="" autocomplete="current-password">
-              <button type="button" class="btn btn-outline-secondary" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
+              <button type="button" class="input-group-text" style="cursor:pointer;" onclick="var i=document.getElementById('pass_user'),ic=this.querySelector('i');if(i.type==='password'){i.type='text';ic.className='bi bi-eye-slash';}else{i.type='password';ic.className='bi bi-eye';}" tabindex="-1" aria-label="Toggle password visibility"><i class="bi bi-eye"></i></button>
             </div>
           </div>
           <div class="mt-2 text-muted" style="font-size: 0.9rem;">