From 99aafc537ec1fa29ccccc2e9d4f484113e3966ed Mon Sep 17 00:00:00 2001
From: DL6ER <dl6er@dl6er.de>
Date: Tue, 2 May 2023 20:57:33 +0200
Subject: [PATCH] Port wrong-password login from server-side to client-side.
 This avoids having to reload the page on failed password attempts.

Signed-off-by: DL6ER <dl6er@dl6er.de>
---
 login.lp                    | 15 ++++++---------
 scripts/pi-hole/js/login.js | 22 +++++++++++++++++++---
 2 files changed, 25 insertions(+), 12 deletions(-)
diff --git a/login.lp b/login.lp
index fc50cf53..ebef4f10 100644
--- a/login.lp
+++ b/login.lp
@@ -8,7 +8,6 @@
 --]]
 
 mg.include('scripts/pi-hole/lua/header.lp','r')
-wrongpassword = false
 
 ?>
 <body class="hold-transition layout-boxed login-page">
@@ -25,14 +24,12 @@ wrongpassword = false
         <div class="card">
             <div class="card-body login-card-body">
                 <div id="cookieInfo" class="panel-title text-center text-red" style="font-size: 150%" hidden>Verify that cookies are allowed</div>
-                <? if wrongpassword then mg.write('\
-                <div class="form-group has-error login-box-msg">\
-                    <label class="control-label"><i class="fa fa-times-circle"></i> Wrong password!</label>\
-                </div>\
-                ') end ?>
+                <div class="form-group has-error login-box-msg" id="error-label" style="display: none;">
+                    <label class="control-label"><i class="fa fa-times-circle"></i> Wrong password!</label>
+                </div>
 
                 <form id="loginform">
-                    <div class="login-options has-feedback<? if wrongpassword then mg.write(" has-error") end ?>">
+                    <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">
                             <!-- hidden username input field to help password managers to autfill the password -->
@@ -56,12 +53,12 @@ wrongpassword = false
                 <br>
                 <div class="row">
                     <div class="col-xs-12">
-                        <div class="box box-<? if not wrongpassword then mg.write("info collapsed-box") else mg.write("danger") end ?>">
+                        <div class="box box-info collapsed-box" id="forgot-pw-box">
                             <div class="box-header with-border pointer no-user-select" data-widget="collapse">
                                 <h3 class="box-title">Forgot password?</h3>
                                 <div class="box-tools pull-right">
                                     <button type="button" class="btn btn-box-tool">
-                                        <i class="fa <? if wrongpassword then mg.write("fa-minus") else mg.write("fa-plus") end ?>"></i>
+                                        <i class="fa fa-plus" id="forgot-pw-toggle-icon"></i>
                                     </button>
                                 </div>
                             </div>
diff --git a/scripts/pi-hole/js/login.js b/scripts/pi-hole/js/login.js
index 947cc242..83a0ae8b 100644
--- a/scripts/pi-hole/js/login.js
+++ b/scripts/pi-hole/js/login.js
@@ -40,7 +40,24 @@ function redirect() {
   window.location.replace(target);
 }
 
+function wrongPassword(is_wrong) {
+  if (is_wrong) {
+    $("#pw-field").addClass("has-error");
+    $("#error-label").show();
+    $("#forgot-pw-box").removeClass("box-info").removeClass("collapsed-box").addClass("box-danger");
+    $("#forgot-pw-box .box-body").show();
+    $("#forgot-pw-toggle-icon").removeClass("fa-plus").addClass("fa-minus");
+  } else {
+    $("#pw-field").removeClass("has-error");
+    $("#error-label").hide();
+    $("#forgot-pw-box").addClass("box-info").addClass("collapsed-box").removeClass("box-danger");
+    $("#forgot-pw-box .box-body").hide();
+    $("#forgot-pw-toggle-icon").removeClass("fa-minus").addClass("fa-plus");
+  }
+}
+
 function doLogin(response) {
+  wrongPassword(false);
   $.ajax({
     url: "/api/auth",
     method: "POST",
@@ -51,9 +68,8 @@ function doLogin(response) {
     })
     .fail(function (data) {
       if (data.status === 401) {
-        // Login failed
-        $("#pw-field").addClass("has-error");
-        $("#error-label").show();
+        // Login failed, show error message
+        wrongPassword(true);
       }
     });
 }
