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

Better screen transitions for auth flow (#7803)

Browse Source
This commit is contained in:
Samuel Newman
2025-09-23 20:04:22 +03:00
committed by GitHub
parent 6d85fe05d1
commit 7916c73b09
13 changed files with 265 additions and 216 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/screens/Signup/StepCaptcha/index.tsx
+2 -3
View File
@@ -8,7 +8,6 @@ import {nanoid} from 'nanoid/non-secure'
import {createFullHandle} from '#/lib/strings/handles'
import {logger} from '#/logger'
import {isAndroid, isIOS, isNative, isWeb} from '#/platform/detection'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {useSignupContext} from '#/screens/Signup/state'
import {CaptchaWebView} from '#/screens/Signup/StepCaptcha/CaptchaWebView'
import {atoms as a, useTheme} from '#/alf'
@@ -143,7 +142,7 @@ function StepCaptchaInner({
}, [dispatch, state.handle])
return (
<ScreenTransition>
<>
<View style={[a.gap_lg, a.pt_lg]}>
<View
style={[
@@ -171,7 +170,7 @@ function StepCaptchaInner({
isLoading={state.isLoading}
onBackPress={onBackPress}
/>
</ScreenTransition>
</>
)
}
src/screens/Signup/StepHandle/index.tsx
+2 -3
View File
@@ -19,7 +19,6 @@ import {
checkHandleAvailability,
useHandleAvailabilityQuery,
} from '#/state/queries/handle-availability'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {useSignupContext} from '#/screens/Signup/state'
import {atoms as a, native, useTheme} from '#/alf'
import * as TextField from '#/components/forms/TextField'
@@ -141,7 +140,7 @@ export function StepHandle() {
!validCheck.totalLength
return (
<ScreenTransition>
<>
<View style={[a.gap_sm, a.pt_lg, a.z_10]}>
<View>
<TextField.Root isInvalid={textFieldInvalid}>
@@ -252,7 +251,7 @@ export function StepHandle() {
onNextPress={onNextPress}
/>
</Animated.View>
</ScreenTransition>
</>
)
}
src/screens/Signup/StepInfo/index.tsx
+2 -3
View File
@@ -7,7 +7,6 @@ import type tldts from 'tldts'
import {isEmailMaybeInvalid} from '#/lib/strings/email'
import {logger} from '#/logger'
import {ScreenTransition} from '#/screens/Login/ScreenTransition'
import {is13, is18, useSignupContext} from '#/screens/Signup/state'
import {Policies} from '#/screens/Signup/StepInfo/Policies'
import {atoms as a, native} from '#/alf'
@@ -147,7 +146,7 @@ export function StepInfo({
}
return (
<ScreenTransition>
<>
<View style={[a.gap_md, a.pt_lg]}>
<FormError error={state.error} />
<HostingProvider
@@ -292,6 +291,6 @@ export function StepInfo({
onRetryPress={refetchServer}
overrideNextText={hasWarnedEmail ? _(msg`It's correct`) : undefined}
/>
</ScreenTransition>
</>
)
}
src/screens/Signup/index.tsx
+112 -100
View File
@@ -23,11 +23,12 @@ import {
import {StepCaptcha} from '#/screens/Signup/StepCaptcha'
import {StepHandle} from '#/screens/Signup/StepHandle'
import {StepInfo} from '#/screens/Signup/StepInfo'
import {atoms as a, useBreakpoints, useTheme} from '#/alf'
import {atoms as a, native, useBreakpoints, useTheme} from '#/alf'
import {AppLanguageDropdown} from '#/components/AppLanguageDropdown'
import {Divider} from '#/components/Divider'
import {LinearGradientBackground} from '#/components/LinearGradientBackground'
import {InlineLinkText} from '#/components/Link'
import {ScreenTransition} from '#/components/ScreenTransition'
import {Text} from '#/components/Typography'
import {GCP_PROJECT_ID} from '#/env'
import * as bsky from '#/types/bsky'
@@ -116,109 +117,120 @@ export function Signup({onPressBack}: {onPressBack: () => void}) {
}, [])
return (
<SignupContext.Provider value={{state, dispatch}}>
<LoggedOutLayout
leadin=""
title={_(msg`Create Account`)}
description={_(msg`We're so excited to have you join us!`)}
scrollable>
<View testID="createAccount" style={a.flex_1}>
{showStarterPackCard &&
bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
starterPack.record,
AppBskyGraphStarterpack.isRecord,
) ? (
<Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
<LinearGradientBackground
style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
<Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
{starterPack.record.name}
</Text>
<Text style={[{color: 'white'}]}>
{starterPack.feeds?.length ? (
<Trans>
You'll follow the suggested users and feeds once you
finish creating your account!
</Trans>
<Animated.View exiting={native(FadeIn.duration(90))} style={a.flex_1}>
<SignupContext.Provider value={{state, dispatch}}>
<LoggedOutLayout
leadin=""
title={_(msg`Create Account`)}
description={_(msg`We're so excited to have you join us!`)}
scrollable>
<View testID="createAccount" style={a.flex_1}>
{showStarterPackCard &&
bsky.dangerousIsType<AppBskyGraphStarterpack.Record>(
starterPack.record,
AppBskyGraphStarterpack.isRecord,
) ? (
<Animated.View entering={!isFetchedAtMount ? FadeIn : undefined}>
<LinearGradientBackground
style={[a.mx_lg, a.p_lg, a.gap_sm, a.rounded_sm]}>
<Text style={[a.font_bold, a.text_xl, {color: 'white'}]}>
{starterPack.record.name}
</Text>
<Text style={[{color: 'white'}]}>
{starterPack.feeds?.length ? (
<Trans>
You'll follow the suggested users and feeds once you
finish creating your account!
</Trans>
) : (
<Trans>
You'll follow the suggested users once you finish
creating your account!
</Trans>
)}
</Text>
</LinearGradientBackground>
</Animated.View>
) : null}
<LayoutAnimationConfig skipEntering>
<ScreenTransition
key={state.activeStep}
direction={state.screenTransitionDirection}>
<View
style={[
a.flex_1,
a.px_xl,
a.pt_2xl,
!gtMobile && {paddingBottom: 100},
]}>
<View style={[a.gap_sm, a.pb_3xl]}>
<Text style={[a.font_bold, t.atoms.text_contrast_medium]}>
<Trans>
Step {state.activeStep + 1} of{' '}
{state.serviceDescription &&
!state.serviceDescription.phoneVerificationRequired
? '2'
: '3'}
</Trans>
</Text>
<Text style={[a.text_3xl, a.font_bold]}>
{state.activeStep === SignupStep.INFO ? (
<Trans>Your account</Trans>
) : state.activeStep === SignupStep.HANDLE ? (
<Trans>Choose your username</Trans>
) : (
<Trans>Complete the challenge</Trans>
)}
</Text>
</View>
{state.activeStep === SignupStep.INFO ? (
<StepInfo
onPressBack={onPressBack}
isLoadingStarterPack={
isFetchingStarterPack && !isErrorStarterPack
}
isServerError={isError}
refetchServer={refetch}
/>
) : state.activeStep === SignupStep.HANDLE ? (
<StepHandle />
) : (
<Trans>
You'll follow the suggested users once you finish creating
your account!
</Trans>
<StepCaptcha />
)}
</Text>
</LinearGradientBackground>
</Animated.View>
) : null}
<View
style={[
a.flex_1,
a.px_xl,
a.pt_2xl,
!gtMobile && {paddingBottom: 100},
]}>
<View style={[a.gap_sm, a.pb_sm]}>
<Text
style={[a.text_sm, a.font_bold, t.atoms.text_contrast_medium]}>
<Trans>
Step {state.activeStep + 1} of{' '}
{state.serviceDescription &&
!state.serviceDescription.phoneVerificationRequired
? '2'
: '3'}
</Trans>
</Text>
<Text style={[a.text_3xl, a.font_heavy]}>
{state.activeStep === SignupStep.INFO ? (
<Trans>Your account</Trans>
) : state.activeStep === SignupStep.HANDLE ? (
<Trans>Choose your username</Trans>
) : (
<Trans>Complete the challenge</Trans>
)}
</Text>
</View>
<LayoutAnimationConfig skipEntering skipExiting>
{state.activeStep === SignupStep.INFO ? (
<StepInfo
onPressBack={onPressBack}
isLoadingStarterPack={
isFetchingStarterPack && !isErrorStarterPack
}
isServerError={isError}
refetchServer={refetch}
/>
) : state.activeStep === SignupStep.HANDLE ? (
<StepHandle />
) : (
<StepCaptcha />
)}
<Divider />
<View
style={[
a.w_full,
a.py_lg,
a.flex_row,
a.gap_md,
a.align_center,
]}>
<AppLanguageDropdown />
<Text
style={[
a.flex_1,
t.atoms.text_contrast_medium,
!gtMobile && a.text_md,
]}>
<Trans>Having trouble?</Trans>{' '}
<InlineLinkText
label={_(msg`Contact support`)}
to={FEEDBACK_FORM_URL({email: state.email})}
style={[!gtMobile && a.text_md]}>
<Trans>Contact support</Trans>
</InlineLinkText>
</Text>
</View>
</View>
</ScreenTransition>
</LayoutAnimationConfig>
<Divider />
<View
style={[a.w_full, a.py_lg, a.flex_row, a.gap_md, a.align_center]}>
<AppLanguageDropdown />
<Text
style={[
a.flex_1,
t.atoms.text_contrast_medium,
!gtMobile && a.text_md,
]}>
<Trans>Having trouble?</Trans>{' '}
<InlineLinkText
label={_(msg`Contact support`)}
to={FEEDBACK_FORM_URL({email: state.email})}
style={[!gtMobile && a.text_md]}>
<Trans>Contact support</Trans>
</InlineLinkText>
</Text>
</View>
</View>
</View>
</LoggedOutLayout>
</SignupContext.Provider>
</LoggedOutLayout>
</SignupContext.Provider>
</Animated.View>
)
}
src/screens/Signup/state.ts
+4 -2
View File
@@ -41,6 +41,7 @@ type ErrorField =
export type SignupState = {
hasPrev: boolean
activeStep: SignupStep
screenTransitionDirection: 'Forward' | 'Backward'
serviceUrl: string
serviceDescription?: ServiceDescription
@@ -84,6 +85,7 @@ export type SignupAction =
export const initialState: SignupState = {
hasPrev: false,
activeStep: SignupStep.INFO,
screenTransitionDirection: 'Forward',
serviceUrl: DEFAULT_SERVICE,
serviceDescription: undefined,
@@ -126,7 +128,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
switch (a.type) {
case 'prev': {
if (s.activeStep !== SignupStep.INFO) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
next.screenTransitionDirection = 'Backward'
next.activeStep--
next.error = ''
next.errorField = undefined
@@ -135,7 +137,7 @@ export function reducer(s: SignupState, a: SignupAction): SignupState {
}
case 'next': {
if (s.activeStep !== SignupStep.CAPTCHA) {
LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut)
next.screenTransitionDirection = 'Forward'
next.activeStep++
next.error = ''
next.errorField = undefined