forked from
jollywhoppers.com/witchsky.app
Bluesky app fork with some witchin' additions 💫
[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
+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
+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
+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]}>