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>

src/view/com/auth/create/state.ts

@@ -8,7 +8,7 @@ import {msg} from '@lingui/macro'
 import * as EmailValidator from 'email-validator'
 import {getAge} from 'lib/strings/time'
 import {logger} from '#/logger'
-import {createFullHandle} from '#/lib/strings/handles'
+import {createFullHandle, validateHandle} from '#/lib/strings/handles'
 import {cleanError} from '#/lib/strings/errors'
 import {useOnboardingDispatch} from '#/state/shell/onboarding'
 import {useSessionApi} from '#/state/session'
@@ -282,7 +282,8 @@ function compute(state: CreateAccountState): CreateAccountState {
       !!state.email &&
       !!state.password
   } else if (state.step === 2) {
-    canNext = !!state.handle
+    canNext =
+      !!state.handle && validateHandle(state.handle, state.userDomain).overall
   } else if (state.step === 3) {
     // Step 3 will automatically redirect as soon as the captcha completes
     canNext = false