many updates

html/js/authentication_ts.js

@@ -1,8 +1,13 @@
 function login() {
     var err = false;
+    var firstInvalid = null;
     var data = new Object();
     var div = document.getElementById("content");
     var form = document.getElementById("authentication");
+    var errElement = document.getElementById("err");
+    if (errElement != null) {
+        errElement.innerHTML = "";
+    }
     var inputs = div.getElementsByTagName("INPUT");
     console.log(inputs);
     for (var i = inputs.length - 1; i >= 0; i--) {
@@ -10,14 +15,22 @@ function login() {
         var value = inputs[i].value;
         if (value.length == 0) {
             inputs[i].style.borderColor = "red";
+            inputs[i].setAttribute("aria-invalid", "true");
+            if (firstInvalid == null) {
+                firstInvalid = inputs[i];
+            }
             err = true;
         }
         else {
             inputs[i].style.borderColor = "";
+            inputs[i].setAttribute("aria-invalid", "false");
         }
         data[key] = value;
     }
     if (err == true) {
+        if (firstInvalid != null) {
+            firstInvalid.focus();
+        }
         data = new Object();
         return;
     }
@@ -25,10 +38,31 @@ function login() {
         if (data["confirm"] != data["password"]) {
             document.getElementById('password').style.borderColor = "red";
             document.getElementById('confirm').style.borderColor = "red";
+            document.getElementById('password').setAttribute("aria-invalid", "true");
+            document.getElementById('confirm').setAttribute("aria-invalid", "true");
             document.getElementById("err").innerHTML = "{{.account.failed}}";
+            document.getElementById('password').focus();
             return;
         }
     }
     console.log(data);
     form.submit();
 }
+document.addEventListener("DOMContentLoaded", function () {
+    var form = document.getElementById("authentication");
+    if (form == null) {
+        return;
+    }
+    var inputs = form.getElementsByTagName("INPUT");
+    for (var i = 0; i < inputs.length; i++) {
+        inputs[i].addEventListener("keydown", function (event) {
+            if (event.key == "Enter") {
+                event.preventDefault();
+                login();
+            }
+        });
+    }
+    if (inputs.length > 0) {
+        inputs[0].focus();
+    }
+});