Improve login UI (#1525)

* Improve login UI

* Tweak layout some more

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`, {
+        if (loginInput.value === "") {
-            method: "POST",
+            loginDialog.close();
-            headers: {
+        }
-                "Content-Type": "application/json"
+        else {
-            },
+            fetch(`${location.origin}/a/authenticate`, {
-            body: JSON.stringify({ version: 1, password: document.querySelector("#login input").value })
+                method: "POST",
-        }).then(function(response) {
+                headers: {
-            if (response.status === 200) {
+                    "Content-Type": "application/json"
-                response.json().then(function(json) {
+                },
-                    if (json.authenticated) {
+                body: JSON.stringify({ version: 1, password: document.querySelector("#login input").value })
-                        location.replace(location.origin);
+            }).then(function(response) {
-                    }
+                if (response.status === 200) {
-                });
+                    response.json().then(function(json) {
-            }
+                        loginInput.value = "";
-        });
+                        loginButton.innerText = "Dismiss";
-        loginDialog.close();
+                        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">

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
 {