Add an inline button to show/hide the password

using input-group and input-group-btn classes. Also remove the key icon from the password field. Signed-off-by: RD WebDesign <[email protected]>
pi-hole · Nov 3, 2023 · 6f6361c · 6f6361c
1 parent cd28d48
commit 6f6361c
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/login.lp b/login.lp
@@ -43,11 +43,14 @@ mg.include('scripts/pi-hole/lua/header.lp','r')
                 <form id="loginform">
                     <div class="login-options has-feedback" id="pw-field">
                         <input type="text" id="username" value="pi.hole" autocomplete="username" hidden>
-                        <div class="pwd-field form-group">
+                        <div class="input-group pwd-field form-group">
                             <!-- hidden username input field to help password managers to autfill the password -->
-                            <button id="toggle-password" type="button" title="Show password as plain text. Warning: this will display your password on the screen.">Show password</button>
                             <input type="password" class="form-control" placeholder="Password" value="" spellcheck="false" autocomplete="current-password" id="current-password" autofocus required>
-                            <span class="fa fa-key pwd-field form-control-feedback"></span>
+                            <span class="input-group-btn">
+                                <button class="btn btn-default" id="toggle-password" type="button" title="Show password as plain text. Warning: this will display your password on the screen.">
+                                    <span class="fa fa-fw fa-eye field-icon"></span>
+                                </button>
+                            </span>
                         </div>
                     </div>
                     <div class="form-group has-feedback hidden" id="totp_input">