From ffda9117c22d7a62061dc6d6a4fbe6f90a8dda43 Mon Sep 17 00:00:00 2001
From: Tim Wilkinson <tim.j.wilkinson@gmail.com>
Date: Tue, 17 Sep 2024 13:19:02 -0700
Subject: [PATCH] Improve login UI (#1525)

* Improve login UI

* Tweak layout some more
---
 files/app/partial/login.ut      | 65 ++++++++++++++++++++++-----------
 files/app/resource/css/user.css | 32 ++++++++++++++--
 2 files changed, 73 insertions(+), 24 deletions(-)

diff --git a/files/app/partial/login.ut b/files/app/partial/login.ut
index 38b2e9d6..cf8673d1 100755
--- a/files/app/partial/login.ut
+++ b/files/app/partial/login.ut
@@ -34,7 +34,8 @@
 %}
 {% if (!auth.isAdmin) { %}
 <dialog id="login">
-    Password <input type="password"><button>OK</button>
+    <div>Password <input type="password"><button>Dismiss</button></div>
+    <div class="error"><div></div></div>
 </dialog>
 <div id="login-icon" class="popup-menu">
     <label title="Login as admin">
@@ -47,34 +48,56 @@
 </div>
 <script>
     const loginDialog = document.getElementById('login');
+    const loginInput = loginDialog.querySelector("input");
+    const loginButton = loginDialog.querySelector("button");
+    const loginError = loginDialog.querySelector(".error > div");
     document.querySelector("#login-icon .menu > div").addEventListener("click", function()
     {
+        loginInput.value = "";
+        loginButton.innerText = "Dismiss";
+        loginError.innerText = "";
         loginDialog.showModal();
     });
-    loginDialog.addEventListener("close", function()
-    {
-        loginDialog.querySelector("input").value = "";
-    });
     function doAuth() {
-        fetch(`${location.origin}/a/authenticate`, {
-            method: "POST",
-            headers: {
-                "Content-Type": "application/json"
-            },
-            body: JSON.stringify({ version: 1, password: document.querySelector("#login input").value })
-        }).then(function(response) {
-            if (response.status === 200) {
-                response.json().then(function(json) {
-                    if (json.authenticated) {
-                        location.replace(location.origin);
-                    }
-                });
-            }
-        });
-        loginDialog.close();
+        if (loginInput.value === "") {
+            loginDialog.close();
+        }
+        else {
+            fetch(`${location.origin}/a/authenticate`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({ version: 1, password: document.querySelector("#login input").value })
+            }).then(function(response) {
+                if (response.status === 200) {
+                    response.json().then(function(json) {
+                        loginInput.value = "";
+                        loginButton.innerText = "Dismiss";
+                        if (json.authenticated) {
+                            loginDialog.close();
+                            location.replace(location.origin);
+                        }
+                        else {
+                            loginError.innerText = "Incorrect password";
+                        }
+                    });
+                }
+                else {
+                    loginInput.value = "";
+                    loginButton.innerText = "Dismiss";
+                    loginError.innerText = "Login failure";
+                }
+            });
+        }
     }
     loginDialog.querySelector('button').addEventListener("click", doAuth);
     loginDialog.querySelector('input').addEventListener("change", doAuth);
+    loginDialog.querySelector('input').addEventListener("input", function()
+    {
+        loginError.innerText = "";
+        loginButton.innerText = loginInput.value ? "OK" : "Dismiss";
+    });
 </script>
 {% } else { %}
 <div id="logout-icon" class="popup-menu">
diff --git a/files/app/resource/css/user.css b/files/app/resource/css/user.css
index ff489e88..ab61bb35 100755
--- a/files/app/resource/css/user.css
+++ b/files/app/resource/css/user.css
@@ -656,17 +656,43 @@ body.authenticated #local-and-neighbor-devices .status.ctrl:hover
     border-radius: 20px;
     background-color: var(--ctrl-modal-bg-tertiary-color);
 }
-#login input {
+#login > div
+{
+    display: flex;
+    align-items: center;
+}
+#login input
+{
     color: inherit;
+    font-size: 14px;
     background-color: var(--ctrl-modal-textbox-bg-color);
     margin: 0 10px;
     outline: none;
+    border: 1px solid var(--ctrl-modal-textbox-border-color);
 }
-#login button {
+#login button
+{
+    position: relative;
+    padding-top: 2px;
     font: inherit;
-    font-size: 12px;
+    font-size: 14px;
     color: inherit;
     background-color: var(--ctrl-modal-textbox-bg-color);
+    min-width: 70px;
+    border: 1px solid var(--ctrl-modal-textbox-border-color);
+}
+#login .error
+{
+    position: relative;
+}
+#login .error > div
+{
+    position: absolute;
+    width: 100%;
+    padding-top: 26px;
+    text-align: center;
+    color: var(--ctrl-modal-border-color-error);
+    z-index: -1;
 }
 #login::backdrop
 {