acetheking987/bsky-social-app
1
0
Fork 0
Code Issues Actions Packages Projects Releases 1 Wiki Activity

new users hint for handle

Browse Source
This commit is contained in:
Samuel Newman
2024-12-03 23:47:45 +00:00
parent 7b503db8ac
commit 2714ccab25
1 changed files with 68 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Signup/StepHandle.tsx
+68 -55
View File
@@ -9,10 +9,11 @@ import {
maxServiceHandleLength, maxServiceHandleLength,
validateHandle, validateHandle,
} from '#/lib/strings/handles' } from '#/lib/strings/handles'
import {useAgent} from '#/state/session' import {useAgent, useSession} from '#/state/session'
import {ScreenTransition} from '#/screens/Login/ScreenTransition' import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {useSignupContext} from '#/screens/Signup/state' import {useSignupContext} from '#/screens/Signup/state'
import {atoms as a, useTheme} from '#/alf' import {atoms as a, useTheme} from '#/alf'
import {Admonition} from '#/components/Admonition'
import * as TextField from '#/components/forms/TextField' import * as TextField from '#/components/forms/TextField'
import {useThrottledValue} from '#/components/hooks/useThrottledValue' import {useThrottledValue} from '#/components/hooks/useThrottledValue'
import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At' import {At_Stroke2_Corner0_Rounded as At} from '#/components/icons/At'
@@ -29,6 +30,9 @@ export function StepHandle() {
const handleValueRef = useRef<string>(state.handle) const handleValueRef = useRef<string>(state.handle)
const [draftValue, setDraftValue] = React.useState(state.handle) const [draftValue, setDraftValue] = React.useState(state.handle)
const isLoading = useThrottledValue(state.isLoading, 500) const isLoading = useThrottledValue(state.isLoading, 500)
const {accounts} = useSession()
const isFirstTimeUser = accounts.length === 0
const onNextPress = React.useCallback(async () => { const onNextPress = React.useCallback(async () => {
const handle = handleValueRef.current.trim() const handle = handleValueRef.current.trim()
@@ -130,64 +134,73 @@ export function StepHandle() {
/> />
</TextField.Root> </TextField.Root>
</View> </View>
{draftValue !== '' && (
<Text style={[a.text_md]}>
<Trans>Your full username will be</Trans>{' '}
<Text style={[a.text_md, a.font_bold]}>
@{createFullHandle(draftValue, state.userDomain)}
</Text>
</Text>
)}
{draftValue !== '' && ( {draftValue === '' ? (
<View isFirstTimeUser && (
style={[ <Admonition type="tip">
a.w_full, <Trans>
a.rounded_sm, This is the unique name for your account. Pick something
a.border, memorable!
a.p_md, </Trans>
a.gap_sm, </Admonition>
t.atoms.border_contrast_low, )
]}> ) : (
{state.error ? ( <>
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}> <Text style={[a.text_md]}>
<IsValidIcon valid={false} /> <Trans>Your full username will be</Trans>{' '}
<Text style={[a.text_md, a.flex_1]}>{state.error}</Text> <Text style={[a.text_md, a.font_bold]}>
</View> @{createFullHandle(draftValue, state.userDomain)}
) : undefined} </Text>
{validCheck.hyphenStartOrEnd ? ( </Text>
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}> <View
<IsValidIcon valid={validCheck.handleChars} /> style={[
<Text style={[a.text_md, a.flex_1]}> a.w_full,
<Trans>Only contains letters, numbers, and hyphens</Trans> a.rounded_sm,
</Text> a.border,
</View> a.p_md,
) : ( a.gap_sm,
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}> t.atoms.border_contrast_low,
<IsValidIcon valid={validCheck.hyphenStartOrEnd} /> ]}>
<Text style={[a.text_md, a.flex_1]}> {state.error ? (
<Trans>Doesn't begin or end with a hyphen</Trans> <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
</Text> <IsValidIcon valid={false} />
</View> <Text style={[a.text_md, a.flex_1]}>{state.error}</Text>
)} </View>
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}> ) : undefined}
<IsValidIcon {validCheck.hyphenStartOrEnd ? (
valid={validCheck.frontLength && validCheck.totalLength} <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
/> <IsValidIcon valid={validCheck.handleChars} />
{!validCheck.totalLength ? ( <Text style={[a.text_md, a.flex_1]}>
<Text style={[a.text_md, a.flex_1]}> <Trans>Only contains letters, numbers, and hyphens</Trans>
<Trans> </Text>
No longer than {maxServiceHandleLength(state.userDomain)}{' '} </View>
characters
</Trans>
</Text>
) : ( ) : (
<Text style={[a.text_md, a.flex_1]}> <View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
<Trans>At least 3 characters</Trans> <IsValidIcon valid={validCheck.hyphenStartOrEnd} />
</Text> <Text style={[a.text_md, a.flex_1]}>
<Trans>Doesn't begin or end with a hyphen</Trans>
</Text>
</View>
)} )}
<View style={[a.w_full, a.flex_row, a.align_center, a.gap_sm]}>
<IsValidIcon
valid={validCheck.frontLength && validCheck.totalLength}
/>
{!validCheck.totalLength ? (
<Text style={[a.text_md, a.flex_1]}>
<Trans>
No longer than {maxServiceHandleLength(state.userDomain)}{' '}
characters
</Trans>
</Text>
) : (
<Text style={[a.text_md, a.flex_1]}>
<Trans>At least 3 characters</Trans>
</Text>
)}
</View>
</View> </View>
</View> </>
)} )}
</View> </View>
<BackNextButtons <BackNextButtons