fix: display friendly error message for password validation on signup (#5563)

Co-authored-by: Claude <noreply@anthropic.com>

frontend/src/i18n/en.json

@@ -102,6 +102,7 @@
     "username": "Username",
     "usernameTaken": "Username already taken",
     "wrongCredentials": "Wrong credentials",
+    "passwordTooShort": "Password must be at least {min} characters",
     "logout_reasons": {
       "inactivity": "You have been logged out due to inactivity."
     }

frontend/src/utils/auth.ts

@@ -101,7 +101,11 @@ export async function signup(username: string, password: string) {
   });
 
   if (res.status !== 200) {
-    throw new StatusError(`${res.status} ${res.statusText}`, res.status);
+    const body = await res.text();
+    throw new StatusError(
+      body || `${res.status} ${res.statusText}`,
+      res.status
+    );
   }
 }
 

frontend/src/views/Login.vue

@@ -112,6 +112,13 @@ const submit = async (event: Event) => {
         error.value = t("login.usernameTaken");
       } else if (e.status === 403) {
         error.value = t("login.wrongCredentials");
+      } else if (e.status === 400) {
+        const match = e.message.match(/minimum length is (\d+)/);
+        if (match) {
+          error.value = t("login.passwordTooShort", { min: match[1] });
+        } else {
+          error.value = e.message;
+        }
       } else {
         $showError(e);
       }