Better screen transitions for auth flow (#7803)
This commit is contained in:
Samuel Newman
+112
-100
@@ -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>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user