Bluesky app fork with some witchin' additions 💫
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

[ELI5] Validate too long handles in signup (#7422)

* validate too long handles in signup

* make change handle screen generic

authored by

Samuel Newman and committed by
GitHub
a7da6462 d79c66af

+24 -11
+10 -2
src/lib/strings/handles.ts
··· 19 19 return `${name}.${domain}` 20 20 } 21 21 22 + export function maxServiceHandleLength(domain: string): number { 23 + return 30 - `.${(domain || '').replace(/^[.]+/, '')}`.length 24 + } 25 + 22 26 export function isInvalidHandle(handle: string): boolean { 23 27 return handle === 'handle.invalid' 24 28 } ··· 38 42 } 39 43 40 44 // More checks from https://github.com/bluesky-social/atproto/blob/main/packages/pds/src/handle/index.ts#L72 41 - export function validateHandle(str: string, userDomain: string): IsValidHandle { 45 + export function validateHandle( 46 + str: string, 47 + userDomain: string, 48 + isServiceHandle?: boolean, 49 + ): IsValidHandle { 42 50 const fullHandle = createFullHandle(str, userDomain) 43 51 44 52 const results = { ··· 46 54 !str || (VALIDATE_REGEX.test(fullHandle) && !str.includes('.')), 47 55 hyphenStartOrEnd: !str.startsWith('-') && !str.endsWith('-'), 48 56 frontLength: str.length >= 3, 49 - totalLength: fullHandle.length <= 253, 57 + totalLength: fullHandle.length <= (isServiceHandle ? 30 : 253), 50 58 } 51 59 52 60 return {
+4 -6
src/screens/Settings/components/ChangeHandleDialog.tsx
··· 172 172 const host = serviceInfo.availableUserDomains[0] 173 173 174 174 const validation = useMemo( 175 - () => validateHandle(subdomain, host), 175 + () => validateHandle(subdomain, host, true), 176 176 [subdomain, host], 177 177 ) 178 178 179 - const isTooLong = subdomain.length > 18 180 179 const isInvalid = 181 - isTooLong || 182 180 !validation.handleChars || 183 181 !validation.hyphenStartOrEnd || 184 182 !validation.totalLength ··· 231 229 label={_(msg`Save new handle`)} 232 230 variant="solid" 233 231 size="large" 234 - color={validation.overall && !isTooLong ? 'primary' : 'secondary'} 235 - disabled={!validation.overall && !isTooLong} 232 + color={validation.overall ? 'primary' : 'secondary'} 233 + disabled={!validation.overall} 236 234 onPress={() => { 237 - if (validation.overall && !isTooLong) { 235 + if (validation.overall) { 238 236 changeHandle({handle: createFullHandle(subdomain, host)}) 239 237 } 240 238 }}>
+10 -3
src/screens/Signup/StepHandle.tsx
··· 4 4 import {useLingui} from '@lingui/react' 5 5 6 6 import {logEvent} from '#/lib/statsig/statsig' 7 - import {createFullHandle, validateHandle} from '#/lib/strings/handles' 7 + import { 8 + createFullHandle, 9 + maxServiceHandleLength, 10 + validateHandle, 11 + } from '#/lib/strings/handles' 8 12 import {useAgent} from '#/state/session' 9 13 import {ScreenTransition} from '#/screens/Login/ScreenTransition' 10 14 import {useSignupContext} from '#/screens/Signup/state' ··· 93 97 }) 94 98 }, [dispatch, state.activeStep]) 95 99 96 - const validCheck = validateHandle(draftValue, state.userDomain) 100 + const validCheck = validateHandle(draftValue, state.userDomain, true) 97 101 return ( 98 102 <ScreenTransition> 99 103 <View style={[a.gap_lg]}> ··· 166 170 /> 167 171 {!validCheck.totalLength ? ( 168 172 <Text style={[a.text_md, a.flex_1]}> 169 - <Trans>No longer than 253 characters</Trans> 173 + <Trans> 174 + No longer than {maxServiceHandleLength(state.userDomain)}{' '} 175 + characters 176 + </Trans> 170 177 </Text> 171 178 ) : ( 172 179 <Text style={[a.text_md, a.flex_1]}>