Follow best-practice rules for login pages from https://web.dev/artic…

…les/sign-in-form-best-practices Signed-off-by: DL6ER <[email protected]>
pi-hole · Oct 30, 2023 · cd28d48 · cd28d48
1 parent 2218257
commit cd28d48
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/login.lp b/login.lp
@@ -45,11 +45,12 @@ mg.include('scripts/pi-hole/lua/header.lp','r')
                         <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 -->
-                            <input type="password" id="loginpw" class="form-control" placeholder="Password" value="" spellcheck="false" autocomplete="current-password" autofocus>
+                            <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>
                         </div>
                     </div>
-                    <div class="form-group has-feedback" id="totp_input">
+                    <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>
                         <span class="fa fa-clock-rotate-left pwd-field form-control-feedback"></span>
                     </div>

diff --git a/scripts/pi-hole/js/login.js b/scripts/pi-hole/js/login.js
@@ -87,7 +87,7 @@ $("#loginform").submit(function (e) {
     return;
   }*/
 
-  doLogin($("#loginpw").val());
+  doLogin($("#current-password").val());
 });
 
 // Trigger keyup event when pasting into the TOTP code input field
@@ -98,7 +98,7 @@ $("#totp").on("paste", function (e) {
 // Submit form when TOTP code is entered and password is already filled
 $("#totp").on("keyup", function () {
   const code = $(this).val();
-  const password = $("#loginpw").val();
+  const password = $("#current-password").val();
   if (code.length === 6 && password.length > 0) {
     $("#loginform").submit();
   }
@@ -120,8 +120,11 @@ $(function () {
     })
     .fail(function (xhr) {
       const session = xhr.responseJSON.session;
-      // If TOPT is enabled, show the input field
-      if (session.totp === true) $("#totp_input").removeClass("hidden");
+      // If TOPT is enabled, show the input field and add the required attribute
+      if (session.totp === true) {
+        $("#totp_input").removeClass("hidden");
+        $("#totp").attr("required", "required");
+      }
     });
 
   // Get information about HTTPS port and DNS status
@@ -144,3 +147,21 @@ $(function () {
   // Clear TOTP field
   $("#totp").val("");
 });
+
+const passwordInput = document.getElementById("current-password");
+const togglePasswordButton = document.getElementById("toggle-password");
+togglePasswordButton.addEventListener("click", togglePassword);
+function togglePassword() {
+  if (passwordInput.type === "password") {
+    passwordInput.type = "text";
+    togglePasswordButton.textContent = "Hide password";
+    togglePasswordButton.setAttribute("title", "Hide password");
+  } else {
+    passwordInput.type = "password";
+    togglePasswordButton.textContent = "Show password";
+    togglePasswordButton.setAttribute(
+      "title",
+      "Show password as plain text. Warning: this will display your password on the screen"
+    );
+  }
+}
diff --git a/style/pi-hole.css b/style/pi-hole.css
@@ -1390,3 +1390,17 @@ table.dataTable tbody > tr > .selected {
     white 4%
   );
 }
+
+button#toggle-password {
+  background: none;
+  border: none;
+  cursor: pointer;
+  /* Media query isn't shown here. */
+  font-size: var(--mobile-font-size);
+  font-weight: 300;
+  padding: 0;
+  /* Display at the top right of the container */
+  position: absolute;
+  top: -1.5em;
+  right: 0;
+}