diff --git a/src/lib/strings/handles.ts b/src/lib/strings/handles.ts index 90786ac3f6..1672cfb258 100644 --- a/src/lib/strings/handles.ts +++ b/src/lib/strings/handles.ts @@ -19,6 +19,10 @@ export function createFullHandle(name: string, domain: string): string { return `${name}.${domain}` } +export function maxServiceHandleLength(domain: string): number { + return 30 - `.${(domain || '').replace(/^[.]+/, '')}`.length +} + export function isInvalidHandle(handle: string): boolean { return handle === 'handle.invalid' } @@ -38,7 +42,11 @@ export interface IsValidHandle { } // 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 { +export function validateHandle( + str: string, + userDomain: string, + serviceHandle?: boolean, +): IsValidHandle { const fullHandle = createFullHandle(str, userDomain) const results = { @@ -46,7 +54,7 @@ export function validateHandle(str: string, userDomain: string): IsValidHandle { !str || (VALIDATE_REGEX.test(fullHandle) && !str.includes('.')), hyphenStartOrEnd: !str.startsWith('-') && !str.endsWith('-'), frontLength: str.length >= 3, - totalLength: fullHandle.length <= 253, + totalLength: fullHandle.length <= (serviceHandle ? 30 : 253), } return { diff --git a/src/screens/Signup/StepHandle.tsx b/src/screens/Signup/StepHandle.tsx index dee7df8488..1d04264aec 100644 --- a/src/screens/Signup/StepHandle.tsx +++ b/src/screens/Signup/StepHandle.tsx @@ -4,7 +4,11 @@ import {msg, Trans} from '@lingui/macro' import {useLingui} from '@lingui/react' import {logEvent} from '#/lib/statsig/statsig' -import {createFullHandle, validateHandle} from '#/lib/strings/handles' +import { + createFullHandle, + maxServiceHandleLength, + validateHandle, +} from '#/lib/strings/handles' import {useAgent} from '#/state/session' import {ScreenTransition} from '#/screens/Login/ScreenTransition' import {useSignupContext} from '#/screens/Signup/state' @@ -93,7 +97,7 @@ export function StepHandle() { }) }, [dispatch, state.activeStep]) - const validCheck = validateHandle(draftValue, state.userDomain) + const validCheck = validateHandle(draftValue, state.userDomain, true) return ( @@ -166,7 +170,10 @@ export function StepHandle() { /> {!validCheck.totalLength ? ( - No longer than 253 characters + + No longer than {maxServiceHandleLength(state.userDomain)}{' '} + characters + ) : (