provide error message on login and display it nicely

server now provides a reason for login fail to the web ui, and displays
it inside the login button, which looks a lot nicer than the previously
used error box.

auth.go

@@ -97,7 +97,7 @@ func (app *appContext) GetToken(gc *gin.Context) {
 		if status != 200 || err != nil {
 			if status == 401 || status == 400 {
 				app.info.Println("Auth failed: Invalid username and/or password")
-				respond(401, "Unauthorized", gc)
+				respond(401, "Invalid username/password", gc)
 				return
 			}
 			app.err.Printf("Auth failed: Couldn't authenticate with Jellyfin: Code %d", status)

data/static/admin.js

@@ -527,9 +527,13 @@ document.getElementById('inviteForm').onsubmit = function() {
 document.getElementById('loginForm').onsubmit = function() {
     window.token = "";
     let details = serializeForm('loginForm');
-    let errorArea = document.getElementById('loginErrorArea');
-    errorArea.textContent = '';
+    // let errorArea = document.getElementById('loginErrorArea');
+    // errorArea.textContent = '';
     let button = document.getElementById('loginSubmit');
+    if (button.classList.contains('btn-danger')) {
+        button.classList.add('btn-primary');
+        button.classList.remove('btn-danger');
+    }
     button.disabled = true;
     button.innerHTML =
         '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
@@ -538,14 +542,24 @@ document.getElementById('loginForm').onsubmit = function() {
     req.responseType = 'json';
     req.onreadystatechange = function() {
         if (this.readyState == 4) {
-            if (this.status == 401) {
+            if (this.status != 200) {
+                let errormsg = req.response["error"];
+                if (errormsg == "") {
+                    errormsg = "Unknown error"
+                }
                 button.disabled = false;
-                button.textContent = 'Login';
-                let wrongPassword = document.createElement('div');
-                wrongPassword.classList.add('alert', 'alert-danger');
-                wrongPassword.setAttribute('role', 'alert');
-                wrongPassword.textContent = "Incorrect username or password.";
-                errorArea.appendChild(wrongPassword);
+                button.textContent = errormsg;
+                if (!button.classList.contains('btn-danger')) {
+                    button.classList.add('btn-danger');
+                    button.classList.remove('btn-primary');
+                }
+                setTimeout(function () {
+                    if (button.classList.contains('btn-danger')) {
+                        button.classList.add('btn-primary');
+                        button.classList.remove('btn-danger');
+                        button.textContent = 'Login';
+                    }
+                }, 4000)
             } else {
                 const data = this.response;
                 window.token = data['token'];

data/templates/admin.html

@@ -136,7 +136,6 @@
                                 <input type="password" class="form-control" id="password" name="password" placeholder="Password" required>
                             </div>
                         </form>
-                        <div id="loginErrorArea"></div>
                     </div>
                     <div class="modal-footer">
                         <button type="submit" id="loginSubmit" class="btn btn-primary" form="loginForm">Login</button>