From 21a65be5a71ed642e31e7c73a54747b3122e48cb Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Tue, 19 Aug 2025 16:50:44 +0200
Subject: [PATCH 1/3] Fix 2FA icon styles #3431

Signed-off-by: idotj <info@idotj.com>
---
 login.lp          | 10 +++++++---
 settings-api.lp   | 12 ++++++++----
 style/pi-hole.css |  6 +++++-
 3 files changed, 20 insertions(+), 8 deletions(-)

diff --git a/login.lp b/login.lp
index 1ac17150..08e01654 100644
--- a/login.lp
+++ b/login.lp
@@ -50,9 +50,13 @@ mg.include('scripts/lua/header.lp','r')
                             </span>
                         </div>
                     </div>
-                    <div class="form-group has-feedback hidden" id="totp_input">
-                        <input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus autocomplete="off">
-                        <span class="fa fa-clock-rotate-left pwd-field form-control-feedback"></span>
+                    <div class="form-group hidden" id="totp_input">
+                        <div class="input-group">
+                            <input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus autocomplete="off">
+                            <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verfication code">
+                                <i class="fa fa-clock-rotate-left form-control-feedback"></i>
+                            </div>
+                        </div>
                     </div>
                     <div class="form-group">
                         <button type="submit" class="btn btn-primary form-control"><i class="fas fa-sign-in-alt"></i>&nbsp;&nbsp;&nbsp;Log in (uses cookie)</button>
diff --git a/settings-api.lp b/settings-api.lp
index 2bdbe3e7..584d7bbe 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -192,11 +192,15 @@ mg.include('scripts/lua/settings_header.lp','r')
                 <p>2. Enter the 2FA code from your app below to confirm that you have set up 2FA correctly.</p>
                 <div class="row">
                     <div class="col-md-6 col-md-offset-3">
-                        <div id="totp_div" class="has-feedback has-error">
-                            <div class="pwd-field form-group">
-                                <input type="text" size="6" maxlength="6" class="form-control totp_token" id="totp_code" placeholder="">
+                        <div id="totp_div">
+                            <div class="pwd-field form-group has-error">
+                                <div class="input-group">
+                                    <input type="text" size="6" maxlength="6" class="form-control totp_token" id="totp_code" placeholder="">
+                                    <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verfication code">
+                                        <i class="fa fa-clock-rotate-left form-control-feedback"></i>
+                                    </div>
+                                </div>
                             </div>
-                            <i class="fa-solid fa-clock-rotate-left pwd-field form-control-feedback"></i>
                         </div>
                     </div>
                 </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 1da12ba4..2c7dec19 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -575,7 +575,7 @@ td.details-control {
 }
 
 .form-control-feedback {
-  right: 0.5em;
+  right: 1em;
   width: 16px;
   height: 100%;
 }
@@ -1136,6 +1136,10 @@ table.dataTable tbody > tr > .selected {
   opacity: 0.1;
 }
 
+.totp_token + .input-group-addon {
+  padding: 0 1.5em;
+}
+
 .save-button-container {
   position: fixed;
   bottom: 1.2em;

From 2768c44d24d592e888ea1c48fd62c4321e463e67 Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Tue, 19 Aug 2025 18:47:21 +0200
Subject: [PATCH 2/3] Fix typo

Signed-off-by: idotj <info@idotj.com>
---
 login.lp        | 2 +-
 settings-api.lp | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/login.lp b/login.lp
index 08e01654..c3db77c0 100644
--- a/login.lp
+++ b/login.lp
@@ -53,7 +53,7 @@ mg.include('scripts/lua/header.lp','r')
                     <div class="form-group hidden" id="totp_input">
                         <div class="input-group">
                             <input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus autocomplete="off">
-                            <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verfication code">
+                            <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verification code">
                                 <i class="fa fa-clock-rotate-left form-control-feedback"></i>
                             </div>
                         </div>
diff --git a/settings-api.lp b/settings-api.lp
index 584d7bbe..031f96e8 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -196,7 +196,7 @@ mg.include('scripts/lua/settings_header.lp','r')
                             <div class="pwd-field form-group has-error">
                                 <div class="input-group">
                                     <input type="text" size="6" maxlength="6" class="form-control totp_token" id="totp_code" placeholder="">
-                                    <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verfication code">
+                                    <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verification code">
                                         <i class="fa fa-clock-rotate-left form-control-feedback"></i>
                                     </div>
                                 </div>

From ee02f1aea8d6b09ad6930aad77cf7a9332c8e81f Mon Sep 17 00:00:00 2001
From: idotj <info@idotj.com>
Date: Wed, 20 Aug 2025 14:20:11 +0200
Subject: [PATCH 3/3] Remove CSS

Signed-off-by: idotj <info@idotj.com>
---
 login.lp          |  2 +-
 settings-api.lp   |  2 +-
 style/pi-hole.css | 10 ----------
 3 files changed, 2 insertions(+), 12 deletions(-)

diff --git a/login.lp b/login.lp
index c3db77c0..d360f404 100644
--- a/login.lp
+++ b/login.lp
@@ -54,7 +54,7 @@ mg.include('scripts/lua/header.lp','r')
                         <div class="input-group">
                             <input type="text" id="totp" size="6" maxlen="6" class="form-control totp_token" placeholder="123456" value="" spellcheck="false" autofocus autocomplete="off">
                             <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verification code">
-                                <i class="fa fa-clock-rotate-left form-control-feedback"></i>
+                                <i class="fa fa-clock-rotate-left"></i>
                             </div>
                         </div>
                     </div>
diff --git a/settings-api.lp b/settings-api.lp
index 031f96e8..2331abd6 100644
--- a/settings-api.lp
+++ b/settings-api.lp
@@ -197,7 +197,7 @@ mg.include('scripts/lua/settings_header.lp','r')
                                 <div class="input-group">
                                     <input type="text" size="6" maxlength="6" class="form-control totp_token" id="totp_code" placeholder="">
                                     <div class="input-group-addon" data-toggle="tooltip" data-placement="auto" title="TOTP verification code">
-                                        <i class="fa fa-clock-rotate-left form-control-feedback"></i>
+                                        <i class="fa fa-clock-rotate-left"></i>
                                     </div>
                                 </div>
                             </div>
diff --git a/style/pi-hole.css b/style/pi-hole.css
index 2c7dec19..693e4f1d 100644
--- a/style/pi-hole.css
+++ b/style/pi-hole.css
@@ -574,12 +574,6 @@ td.details-control {
   border: none;
 }
 
-.form-control-feedback {
-  right: 1em;
-  width: 16px;
-  height: 100%;
-}
-
 .loginpage-logo {
   margin: 0 0 10px;
 }
@@ -1136,10 +1130,6 @@ table.dataTable tbody > tr > .selected {
   opacity: 0.1;
 }
 
-.totp_token + .input-group-addon {
-  padding: 0 1.5em;
-}
-
 .save-button-container {
   position: fixed;
   bottom: 1.2em;