Dynamically check username

templates/settings/edit_user.html

@@ -14,6 +14,8 @@
         <label class="form-label mt-4" for="username">User name</label>
         <input class="form-control" id="username" type="text"
                name="username" value="{{ u.username }}" required/>
+        <div class="valid-feedback">This username is valid</div>
+        <div class="invalid-feedback">This username is already taken.</div>
     </div>
 
     <!-- First name -->
@@ -99,6 +101,39 @@
 </form>
 
 <script>
+    // Check Username
+    async function find_username(username) {
+        let data = new URLSearchParams();
+        data.append("username", username);
+
+        return (await(await fetch("/admin/api/find_username", {
+            body: data,
+            method: "POST",
+        })).json()).user_id
+    }
+
+    const usernameEl = document.getElementById("username")
+    async function check_username() {
+         try {
+                usernameEl.classList.remove("is-invalid");
+                usernameEl.classList.remove("is-valid");
+
+                if (usernameEl.value === "")
+                    return;
+
+                const userID = await find_username(usernameEl.value);
+                usernameEl.classList.add((userID === null || userID === "{{ u.uid }}") ? "is-valid" : "is-invalid");
+
+            } catch(e) {
+                console.error(e);
+            }
+    }
+
+    check_username();
+    usernameEl.addEventListener("change", check_username);
+    usernameEl.addEventListener("keyup", check_username);
+
+
     // Clients granted
     function refreshDisplayAuthorizedClients() {
         const clientsSelectorEl = document.getElementById("clients_target");
@@ -110,5 +145,8 @@
         el.addEventListener("change", refreshDisplayAuthorizedClients)
     })
 
+
+
+
 </script>
 {% endblock content %}