V2 ish

static/register.js

@@ -0,0 +1,29 @@
+const form = document.getElementById("reg-form"); // Replace #my-form with your form's ID
+
+form.addEventListener("submit", async (event) => {
+    event.preventDefault();
+
+    let userId = document.getElementById("user-id").value;
+    let msgBox = document.getElementById("msg-box");
+    try {
+        const response = await fetch(`/api/checkname/${userId}`, {
+            method: "GET",
+        });
+
+        if (response.status === 409) {
+            msgBox.innerText = "Entry with id \"" + userId + "\" already in use";
+            return;
+        } else if (!response.ok) {
+            throw new Error(`Server Error: ${response.status}`);
+        }
+
+        const data = await response.json();
+        console.log("Fetch successful:", data);
+
+        form.submit();
+
+    } catch (error) {
+        console.error("Fetch failed:", error);
+        msgBox.innerText = "Internal Error: " + error;
+    }
+});

static/style.css

@@ -33,9 +33,8 @@
     .header-icon {
         display: block;
         flex: 0 0 72px;
-        width: 20vw;
-        height: auto;
-        max-height: 85px;
+        width: 85px;
+        height: 85px;
     }
 
     .footer {
@@ -51,7 +50,7 @@
         max-width: 800px;
         padding: 1.5rem;
         background: white;
-        border-radius: 5px;
+        border-radius: 15px;
         text-align: center;
     }
 
@@ -59,7 +58,7 @@
         font-size: 16px;
     }
 
-    .content button {
+    .btn {
         color: var(--dark);
         background-color: var(--light);
         border-radius: 8px;
@@ -76,6 +75,20 @@
         align-items: flex-start;
         margin-left: 5vw;
     }
+
+    .inputs {
+        display: flex;
+        flex: 1 0 auto;
+        flex-direction: column;
+    }
+
+    .inputs div {
+        flex: 1 0 auto;
+    }
+
+    .inputs input {
+        margin-bottom: 10px;
+    }
 }
 
 @media only screen and (min-width: 700px) {
@@ -100,12 +113,15 @@
         flex: 0 0 64px;
     }
 
+    .icon-link {
+        display: flex;
+    }
+
     .header-icon {
         display: block;
         flex: 0 0 64px;
-        width: 15vw;
-        height: auto;
-        max-height: 80px;
+        width: 80px;
+        height: 80px;
     }
 
     .footer {
@@ -129,7 +145,7 @@
         font-size: 16px;
     }
 
-    .content button {
+    .btn {
         color: var(--dark);
         background-color: var(--light);
         border-radius: 8px;
@@ -146,6 +162,22 @@
         align-items: flex-start;
         margin-left: 5vw;
     }
+
+    .inputs {
+        display: flex;
+        flex: 1 0 auto;
+        flex-direction: row;
+        justify-content: space-between;
+        column-gap: 5vw;
+    }
+
+    .inputs div {
+        flex: 1 0 auto;
+    }
+
+    .inputs input {
+        margin-bottom: 10px;
+    }
 }
 
 .title {
@@ -221,11 +253,17 @@
     background-color: var(--dark-click);
 }
 
+.flex {
+    display: flex;
+}
+
 .flex-vertical {
+    /*display: flex;*/
     flex-direction: column;
 }
 
 .flex-horizontal {
+    /*display: flex;*/
     flex-direction: row;
 }
 
@@ -242,6 +280,14 @@
     flex: 1 0 auto;
 }
 
+.label-left {
+    text-align: left;
+}
+
+#reg-form {
+    flex: 1 0 auto;
+}
+
 #status {
     margin-bottom: 0;
 }