From 0dd6fcbf5efbe7203f859462540ea7e051abb608 Mon Sep 17 00:00:00 2001
From: Lorenz Stechauner <lorenz.stechauner@necronda.net>
Date: Sun, 9 May 2021 18:38:50 +0200
Subject: [PATCH] Improve domain fetch api

---
 www/res/js/locutus.js     | 45 +++++++++++++++++++++++++++++++++------
 www/res/styles/styles.css | 37 +++++++++++++++++++++++++-------
 2 files changed, 67 insertions(+), 15 deletions(-)

diff --git a/www/res/js/locutus.js b/www/res/js/locutus.js
index ec3168c..0146880 100644
--- a/www/res/js/locutus.js
+++ b/www/res/js/locutus.js
@@ -28,18 +28,49 @@ function createLoginWindow() {
             <button type="submit">Login</button>
         </form>`;
 
-    win.getElementsByTagName('form')[0].addEventListener("submit", function (evt) {
+    win.getElementsByTagName("form")[0].addEventListener("submit", (evt) => {
         evt.preventDefault();
         let form = evt.target;
+        for (let e of form) e.disabled = true;
+
+        for (let d of form.getElementsByTagName("div")) {
+            form.removeChild(d);
+        }
+
         usimp.lookup(form.domain.value)
-            .then(res => res.json()
-                .then(data => console.log(data))
-                .catch(reason => console.error(reason)))
-            .catch(reason => console.error(reason));
+            .then(res => {
+                if (res.ok) {
+                    res.json()
+                        .then(data => console.log(data))
+                        .catch(reason => console.error(reason))
+                } else {
+                    document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
+                    let div = document.createElement("div");
+                    div.classList.add("error");
+                    div.innerText = "Invalid USIMP domain";
+                    form.appendChild(div);
+                }
+            })
+            .catch(reason => {
+                document.getElementsByName("domain")[0].setAttribute("invalid", "invalid");
+                let div = document.createElement("div");
+                div.classList.add("error");
+                div.innerText = "Invalid USIMP domain";
+                form.appendChild(div);
+            })
+            .finally(() => {
+                for (let e of form) e.disabled = false;
+            });
     });
 
     while (windows.lastChild) windows.removeChild(windows.lastChild);
     windows.appendChild(win);
+
+    document.getElementsByName("domain")[0].addEventListener("input", (evt) => {
+        evt.target.removeAttribute("invalid");
+    });
+
+    document.getElementsByName("account")[0].focus();
 }
 
 function handleHash(hash) {
@@ -64,7 +95,7 @@ function handleUrl(url) {
     handleHash(new URL(url).hash);
 }
 
-window.addEventListener("DOMContentLoaded", function () {
+window.addEventListener("DOMContentLoaded", (evt) => {
     main = document.getElementsByTagName("main")[0];
     windows = document.getElementById("windows");
 
@@ -74,6 +105,6 @@ window.addEventListener("DOMContentLoaded", function () {
     handleUrl(document.URL)
 });
 
-window.addEventListener("hashchange", function (evt) {
+window.addEventListener("hashchange", (evt) => {
     handleUrl(evt.newURL);
 });
diff --git a/www/res/styles/styles.css b/www/res/styles/styles.css
index e0ba82d..488b110 100644
--- a/www/res/styles/styles.css
+++ b/www/res/styles/styles.css
@@ -116,8 +116,8 @@ form {
 
 form input,
 form button,
-a.button {
-    background-color: var(--bg);
+a.button,
+form div {
     border: 1px solid var(--bg);
     border-radius: 4px;
     outline: none;
@@ -130,6 +130,19 @@ a.button {
     transition: border-color 0.125s, background-color 0.125s;
 }
 
+form input,
+form button,
+a.button {
+    background-color: var(--bg);
+}
+
+form div.error {
+    border-color: rgba(192, 0, 0, 0.75);
+    text-align: center;
+    color: #C00000;
+    padding: 1em;
+}
+
 a.button {
     text-decoration: none;
     text-align: center;
@@ -152,15 +165,23 @@ form input::placeholder {
     opacity: 1;
 }
 
-form input:focus,
-form input:hover,
-form button:focus,
-form button:hover,
-a.button:focus,
-a.button:hover {
+form input[invalid] {
+    border-color: rgba(192, 0, 0, 0.75);
+}
+
+form input:not(:disabled):focus,
+form input:not(:disabled):hover,
+form button:not(:disabled):focus,
+form button:not(:disabled):hover,
+a.button:not(:disabled):focus,
+a.button:not(:disabled):hover {
     border-color: rgba(255, 255, 255, 0.75);
 }
 
+form *:disabled {
+    cursor: not-allowed;
+}
+
 form button:active,
 a.button:active {
     background-color: rgba(224, 224, 224, 0.75);