fix some issues

public/pages.js

@@ -1,4 +1,4 @@
-import {get, post} from "/app/api.js";
+import {get, post} from "/app/api.js?v=20260909-account-controls";
 
 const params = new URLSearchParams(location.search);
 function returnPath() {
@@ -20,6 +20,14 @@ if (form) {
     const register = location.pathname === "/register";
     const status = document.querySelector("#accountStatus");
     const submit = document.querySelector("#accountSubmit");
+    function showAccountStatus(message, error = false) {
+        status.dataset.state = error ? "error" : "pending";
+        status.setAttribute("role", error ? "alert" : "status");
+        status.setAttribute("aria-live", error ? "assertive" : "polite");
+        status.classList.toggle("hidden", !message);
+        document.querySelector("#accountStatusText").textContent = message;
+        if (error) status.focus();
+    }
     const label = register ? "Create account" : "Sign in";
     document.title = `${label} · Elsewhere`;
     document.querySelector("#accountTitle").textContent = label;
@@ -34,7 +42,7 @@ if (form) {
         document.querySelector("#accountHeadline").textContent = "Your next conversation starts here.";
         document.querySelector("#accountDescription").textContent = "Choose a username and a password of at least 6 characters.";
     }
-    if (session.error) status.textContent = session.error;
+    if (session.error) showAccountStatus(session.error, true);
     const switchText = document.querySelector("#accountSwitch");
     switchText.append(register ? "Already have an account? " : "New to Elsewhere? ");
     const link = document.createElement("a");
@@ -44,18 +52,31 @@ if (form) {
     document.querySelector("#showPassword").addEventListener("click", event => {
         const show = form.elements.password.type === "password";
         form.elements.password.type = show ? "text" : "password";
-        event.currentTarget.textContent = show ? "Hide password" : "Show password";
+        const label = show ? "Hide password" : "Show password";
+        event.currentTarget.setAttribute("aria-label", label);
+        event.currentTarget.title = label;
         event.currentTarget.setAttribute("aria-pressed", String(show));
     });
     form.addEventListener("submit", async event => {
         event.preventDefault();
         submit.disabled = true;
-        status.textContent = register ? "Creating your account…" : "Signing in…";
+        form.elements.username.removeAttribute("aria-invalid");
+        form.elements.username.removeAttribute("aria-describedby");
+        showAccountStatus(register ? "Creating your account..." : "Signing in...");
         const result = await post(register ? "/register" : "/login", {
             username: form.elements.username.value.trim(), password: form.elements.password.value,
             ...(register ? {inviteCode: form.elements.inviteCode.value.trim()} : {})
         });
-        if (result.error) { status.textContent = result.error; submit.disabled = false; return; }
+        if (result.error) {
+            const duplicate = register && result.error === "User already exists";
+            if (duplicate) {
+                form.elements.username.setAttribute("aria-invalid", "true");
+                form.elements.username.setAttribute("aria-describedby", "accountStatus");
+            }
+            showAccountStatus(duplicate ? "That username is already taken. Choose another, or sign in below." : result.error, true);
+            submit.disabled = false;
+            return;
+        }
         location.assign(returnPath());
     });
 }