From 7f4cf76141924d7ccdc5259ea6a5ac26caf5e6c5 Mon Sep 17 00:00:00 2001
From: Miodec <jack@monkeytype.com>
Date: Tue, 18 Mar 2025 20:18:32 +0100
Subject: [PATCH] impr: parse username locally before querying the server

also fixes non user friendly error messages

!nuf
---
 frontend/src/ts/pages/login.ts | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/frontend/src/ts/pages/login.ts b/frontend/src/ts/pages/login.ts
index 3248406f8..be56ae8ae 100644
--- a/frontend/src/ts/pages/login.ts
+++ b/frontend/src/ts/pages/login.ts
@@ -7,6 +7,7 @@ import * as Skeleton from "../utils/skeleton";
 import * as Misc from "../utils/misc";
 import TypoList from "../utils/typo-list";
 import { z } from "zod";
+import { UserNameSchema } from "@monkeytype/contracts/users";
 
 export function enableSignUpButton(): void {
   $(".page.pageLogin .register.side button").prop("disabled", false);
@@ -59,6 +60,14 @@ const checkNameDebounced = debounce(1000, async () => {
     updateSignupButton();
     return;
   }
+
+  const parsed = UserNameSchema.safeParse(val);
+  if (!parsed.success) {
+    nameIndicator.show("unavailable", parsed.error.errors[0]?.message);
+    updateSignupButton();
+    return;
+  }
+
   const response = await Ape.users.getNameAvailability({
     params: { name: val },
   });