Skip to content

Commit

Permalink
Merge pull request #4167 from tloncorp/james/tlon-3204-native-tapping…
Browse files Browse the repository at this point in the history 
…-next-on-keyboard-when-email-input-is-ready

onboarding: "next" usability
  • Loading branch information
@jamesacklin
jamesacklin authored Nov 12, 2024
2 parents 6585932 + a3113ef commit b3e4003
Show file tree
Hide file tree
Showing 2 changed files with 85 additions and 49 deletions.
62 changes: 40 additions & 22 deletions apps/tlon-mobile/src/screens/Onboarding/SignupScreen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ import {
KeyboardAvoidingView,
OnboardingInviteBlock,
OnboardingTextBlock,
PrimaryButton,
ScreenHeader,
TextInput,
TlonText,
Expand Down Expand Up @@ -188,11 +189,6 @@ export const SignupScreen = ({ navigation }: Props) => {
showSessionStatus={false}
backAction={goBack}
isLoading={isSubmitting}
rightControls={
<ScreenHeader.TextButton onPress={onSubmit} disabled={isSubmitting}>
Next
</ScreenHeader.TextButton>
}
/>
<KeyboardAvoidingView behavior="height" keyboardVerticalOffset={180}>
<YStack gap="$2xl" paddingHorizontal="$2xl" paddingVertical="$l">
Expand Down Expand Up @@ -235,34 +231,55 @@ export const SignupScreen = ({ navigation }: Props) => {
autoCorrect={false}
returnKeyType="next"
enablesReturnKeyAutomatically
onSubmitEditing={onSubmit}
autoFocus
/>
</Field>
)}
name="email"
/>
)}
<View marginLeft="$s">
<TlonText.Text size="$label/s" color="$tertiaryText">
By signing up you agree to Tlon&rsquo;s{' '}
<TlonText.RawText
pressStyle={{
opacity: 0.5,
}}
textDecorationLine="underline"
textDecorationDistance={10}
onPress={handlePressEula}
>
Terms of Service
</TlonText.RawText>

<PrimaryButton
onPress={onSubmit}
loading={isSubmitting}
disabled={
isSubmitting ||
remoteError !== undefined ||
(otpMethod === 'phone'
? !phoneForm.formState.isValid
: !emailForm.formState.isValid)
}
>
<TlonText.Text color="$background" size="$label/l">
Sign up
</TlonText.Text>
</View>
</YStack>
<View marginLeft="$l" marginTop="$m">
</PrimaryButton>
<TlonText.Text
marginTop="$m"
textAlign="center"
size="$label/s"
color="$tertiaryText"
>
By signing up you agree to Tlon&rsquo;s{' '}
<TlonText.RawText
pressStyle={{
opacity: 0.5,
}}
textDecorationLine="underline"
textDecorationDistance={10}
onPress={handlePressEula}
>
Terms of Service
</TlonText.RawText>
</TlonText.Text>
</YStack>
<View marginLeft="$l" marginTop="$m">
<TlonText.Text
size="$label/m"
color="$secondaryText"
onPress={toggleSignupMode}
textAlign="center"
>
Or if you&apos;d prefer,{' '}
<TlonText.RawText
Expand All @@ -273,7 +290,8 @@ export const SignupScreen = ({ navigation }: Props) => {
textDecorationDistance={10}
onPress={toggleSignupMode}
>
sign up with {otpMethod === 'phone' ? 'email' : 'phone number'}
sign up with{' '}
{otpMethod === 'phone' ? 'an email address' : 'a phone number'}
</TlonText.RawText>
</TlonText.Text>
</View>
Expand Down
72 changes: 45 additions & 27 deletions apps/tlon-mobile/src/screens/Onboarding/TlonLogin.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
Field,
KeyboardAvoidingView,
OnboardingTextBlock,
PrimaryButton,
ScreenHeader,
TextInput,
TlonText,
Expand Down Expand Up @@ -135,11 +136,6 @@ export const TlonLoginScreen = ({ navigation, route }: Props) => {
showSessionStatus={false}
backAction={goBack}
isLoading={isSubmitting}
rightControls={
<ScreenHeader.TextButton onPress={onSubmit} disabled={isSubmitting}>
Next
</ScreenHeader.TextButton>
}
/>
<KeyboardAvoidingView behavior="height" keyboardVerticalOffset={180}>
<YStack gap="$2xl" paddingHorizontal="$2xl" paddingVertical="$l">
Expand Down Expand Up @@ -183,37 +179,59 @@ export const TlonLoginScreen = ({ navigation, route }: Props) => {
autoCorrect={false}
returnKeyType="next"
enablesReturnKeyAutomatically
onSubmitEditing={onSubmit}
/>
</Field>
)}
name="email"
/>
)}
<View marginLeft="$s">
<TlonText.Text size="$label/s" color="$tertiaryText">
By logging in you agree to Tlon&rsquo;s{' '}
<TlonText.RawText
pressStyle={{
opacity: 0.5,
}}
textDecorationLine="underline"
textDecorationDistance={10}
onPress={handlePressEula}
>
Terms of Service
</TlonText.RawText>

<PrimaryButton
onPress={onSubmit}
loading={isSubmitting}
disabled={
isSubmitting ||
remoteError !== undefined ||
(otpMethod === 'phone'
? !phoneForm.formState.isValid
: !emailForm.formState.isValid)
}
>
<TlonText.Text color="$background" size="$label/l">
Send code to log in
</TlonText.Text>
</View>
</PrimaryButton>

<TlonText.Text
textAlign="center"
size="$label/s"
color="$tertiaryText"
marginTop="$m"
>
By logging in you agree to Tlon&rsquo;s{' '}
<TlonText.RawText
pressStyle={{
opacity: 0.5,
}}
textDecorationLine="underline"
textDecorationDistance={10}
onPress={handlePressEula}
>
Terms of Service
</TlonText.RawText>
</TlonText.Text>
</YStack>
<View marginLeft="$l">
<View>
{otpMethod === 'email' ? (
<>
<TlonText.Text
size="$label/s"
color="$tertiaryText"
color="$secondaryText"
marginTop="$xl"
textAlign="center"
>
We&apos;ll email you a code to log in. Or you can{' '}
We&apos;ll email you a 6-digit code to log in. Otherwise, you
can{' '}
<TlonText.RawText
pressStyle={{
opacity: 0.5,
Expand All @@ -226,20 +244,20 @@ export const TlonLoginScreen = ({ navigation, route }: Props) => {
</TlonText.RawText>
</TlonText.Text>
<TlonText.Text
size="$label/s"
color="$tertiaryText"
color="$secondaryText"
onPress={handlePressEmailSignup}
marginTop="$xl"
textDecorationLine="underline"
textDecorationDistance={10}
textAlign="center"
>
Log in with phone number instead
</TlonText.Text>
</>
) : (
<TlonText.Text
size="$label/s"
color="$tertiaryText"
color="$secondaryText"
textAlign="center"
onPress={handlePressEmailSignup}
marginTop="$xl"
textDecorationLine="underline"
Expand Down

0 comments on commit b3e4003

Please sign in to comment.