Account creation improvements & some other fixes (#2636)

* Quick fix to mobile

* Enlarge tap targets in account creation

* Improve keyboard behaviors during account creation

* Improve autocompletion behaviors during account creation

* Use the logo in the Deactivated screen
zio/stable
Paul Frazee 2024-01-25 22:24:37 -08:00 committed by GitHub
parent c8175b9c4e
commit 6149437c05
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 28 additions and 18 deletions

View File

@ -14,8 +14,8 @@ import {Text} from '#/components/Typography'
import {isWeb} from '#/platform/detection'
import {H2, P} from '#/components/Typography'
import {ScrollView} from '#/view/com/util/Views'
import {Group3_Stroke2_Corner0_Rounded as Group3} from '#/components/icons/Group3'
import {Loader} from '#/components/Loader'
import {Logo} from '#/view/icons/Logo'
const COL_WIDTH = 400
@ -96,8 +96,8 @@ export function Deactivated() {
style={[a.flex_row, a.justify_center, gtMobile ? a.pt_4xl : a.px_xl]}>
<View style={[a.flex_1, {maxWidth: COL_WIDTH}]}>
<View
style={[a.w_full, a.justify_center, a.align_center, a.mt_4xl]}>
<Group3 fill="none" stroke={t.palette.contrast_900} width={120} />
style={[a.w_full, a.justify_center, a.align_center, a.my_4xl]}>
<Logo width={120} />
</View>
<H2 style={[a.pb_sm]}>
@ -105,8 +105,8 @@ export function Deactivated() {
</H2>
<P style={[t.atoms.text_contrast_700]}>
<Trans>
There's been a rush of new users! We'll activate your account as
soon as we can.
There's been a rush of new users to Bluesky! We'll activate your
account as soon as we can.
</Trans>
</P>

View File

@ -22,7 +22,7 @@ import {
useSetSaveFeedsMutation,
DEFAULT_PROD_FEEDS,
} from '#/state/queries/preferences'
import {FEEDBACK_FORM_URL, IS_PROD} from '#/lib/constants'
import {FEEDBACK_FORM_URL, HITSLOP_10, IS_PROD} from '#/lib/constants'
import {Step1} from './Step1'
import {Step2} from './Step2'
@ -121,7 +121,11 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
leadin=""
title={_(msg`Create Account`)}
description={_(msg`We're so excited to have you join us!`)}>
<ScrollView testID="createAccount" style={pal.view}>
<ScrollView
testID="createAccount"
style={pal.view}
keyboardShouldPersistTaps="handled"
keyboardDismissMode="on-drag">
<View style={styles.stepContainer}>
{uiState.step === 1 && (
<Step1 uiState={uiState} uiDispatch={uiDispatch} />
@ -137,7 +141,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
<TouchableOpacity
onPress={onPressBackInner}
testID="backBtn"
accessibilityRole="button">
accessibilityRole="button"
hitSlop={HITSLOP_10}>
<Text type="xl" style={pal.link}>
<Trans>Back</Trans>
</Text>
@ -147,7 +152,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
<TouchableOpacity
testID="nextBtn"
onPress={onPressNext}
accessibilityRole="button">
accessibilityRole="button"
hitSlop={HITSLOP_10}>
{uiState.isProcessing ? (
<ActivityIndicator />
) : (
@ -163,7 +169,8 @@ export function CreateAccount({onPressBack}: {onPressBack: () => void}) {
accessibilityRole="button"
accessibilityLabel={_(msg`Retry`)}
accessibilityHint=""
accessibilityLiveRegion="polite">
accessibilityLiveRegion="polite"
hitSlop={HITSLOP_10}>
<Text type="xl-bold" style={[pal.link, s.pr5]}>
<Trans>Retry</Trans>
</Text>

View File

@ -144,7 +144,7 @@ export function Step1({
accessibilityHint={_(msg`Input email for Bluesky account`)}
accessibilityLabelledBy="email"
autoCapitalize="none"
autoComplete="off"
autoComplete="email"
autoCorrect={false}
autoFocus={!uiState.isInviteCodeRequired}
/>
@ -169,7 +169,7 @@ export function Step1({
accessibilityHint={_(msg`Set password`)}
accessibilityLabelledBy="password"
autoCapitalize="none"
autoComplete="off"
autoComplete="new-password"
autoCorrect={false}
/>
</View>

View File

@ -28,6 +28,7 @@ import {
FontAwesomeIcon,
FontAwesomeIconStyle,
} from '@fortawesome/react-native-fontawesome'
import {HITSLOP_10} from '#/lib/constants'
export function Step2({
uiState,
@ -243,7 +244,8 @@ export function Step2({
<TouchableWithoutFeedback
onPress={onPressRetry}
accessibilityLabel={_(msg`Retry.`)}
accessibilityHint="">
accessibilityHint=""
hitSlop={HITSLOP_10}>
<View style={styles.touchable}>
<Text
type="md-medium"

View File

@ -33,6 +33,9 @@ export function Step3({
placeholder="e.g. alice"
value={uiState.handle}
editable
autoFocus
autoComplete="off"
autoCorrect={false}
onChange={value => uiDispatch({type: 'set-handle', value})}
// TODO: Add explicit text label
accessibilityLabel={_(msg`User handle`)}

View File

@ -68,11 +68,9 @@ let PostMeta = (opts: PostMetaOpts): React.ReactNode => {
</>
}
href={makeProfileLink(opts.author)}
onPointerEnter={() => {
if (isWeb) {
prefetchProfileQuery(opts.author.did)
}
}}
onPointerEnter={
isWeb ? () => prefetchProfileQuery(opts.author.did) : undefined
}
/>
</View>
{!isAndroid && (