Add handle validation to create account UI (#2959)

* show uiState errors in the box as well

simplify copy

update ui for only letters and numbers

add ui validation to handle selection

* simplify names

* Fix accidental text-node render

---------

Co-authored-by: Paul Frazee <pfrazee@gmail.com>

1 files changed, 29 insertions, 0 deletions

diff --git a/src/lib/strings/handles.ts b/src/lib/strings/handles.ts
index 6ce462435..a18fef453 100644
--- a/src/lib/strings/handles.ts
+++ b/src/lib/strings/handles.ts
@@ -1,3 +1,8 @@
+// Regex from the go implementation
+// https://github.com/bluesky-social/indigo/blob/main/atproto/syntax/handle.go#L10
+const VALIDATE_REGEX =
+  /^([a-zA-Z0-9]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?\.)+[a-zA-Z]([a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?$/
+
 export function makeValidHandle(str: string): string {
   if (str.length > 20) {
     str = str.slice(0, 20)
@@ -19,3 +24,27 @@ export function isInvalidHandle(handle: string): boolean {
 export function sanitizeHandle(handle: string, prefix = ''): string {
   return isInvalidHandle(handle) ? '⚠Invalid Handle' : `${prefix}${handle}`
 }
+
+export interface IsValidHandle {
+  handleChars: boolean
+  frontLength: boolean
+  totalLength: boolean
+  overall: boolean
+}
+
+// More checks from https://github.com/bluesky-social/atproto/blob/main/packages/pds/src/handle/index.ts#L72
+export function validateHandle(str: string, userDomain: string): IsValidHandle {
+  const fullHandle = createFullHandle(str, userDomain)
+
+  const results = {
+    handleChars:
+      !str || (VALIDATE_REGEX.test(fullHandle) && !str.includes('.')),
+    frontLength: str.length >= 3,
+    totalLength: fullHandle.length <= 253,
+  }
+
+  return {
+    ...results,
+    overall: !Object.values(results).includes(false),
+  }
+}