Login form tweaks
Eric Bailey
parent
5c08f0d95b
commit
70f5cc6a9f
|
|
@ -143,84 +143,85 @@ export const LoginForm = ({
|
||||||
<TextField.Label>
|
<TextField.Label>
|
||||||
<Trans>Account</Trans>
|
<Trans>Account</Trans>
|
||||||
</TextField.Label>
|
</TextField.Label>
|
||||||
<TextField.Root>
|
<View style={[a.gap_sm]}>
|
||||||
<TextField.Icon icon={At} />
|
<TextField.Root>
|
||||||
<TextField.Input
|
<TextField.Icon icon={At} />
|
||||||
testID="loginUsernameInput"
|
<TextField.Input
|
||||||
label={_(msg`Username or email address`)}
|
testID="loginUsernameInput"
|
||||||
autoCapitalize="none"
|
label={_(msg`Username or email address`)}
|
||||||
autoFocus
|
autoCapitalize="none"
|
||||||
autoCorrect={false}
|
autoFocus
|
||||||
autoComplete="username"
|
autoCorrect={false}
|
||||||
returnKeyType="next"
|
autoComplete="username"
|
||||||
textContentType="username"
|
returnKeyType="next"
|
||||||
onSubmitEditing={() => {
|
textContentType="username"
|
||||||
passwordInputRef.current?.focus()
|
onSubmitEditing={() => {
|
||||||
}}
|
passwordInputRef.current?.focus()
|
||||||
blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
|
}}
|
||||||
value={identifier}
|
blurOnSubmit={false} // prevents flickering due to onSubmitEditing going to next field
|
||||||
onChangeText={str =>
|
value={identifier}
|
||||||
setIdentifier((str || '').toLowerCase().trim())
|
onChangeText={str =>
|
||||||
}
|
setIdentifier((str || '').toLowerCase().trim())
|
||||||
editable={!isProcessing}
|
}
|
||||||
accessibilityHint={_(
|
editable={!isProcessing}
|
||||||
msg`Input the username or email address you used at signup`,
|
accessibilityHint={_(
|
||||||
)}
|
msg`Input the username or email address you used at signup`,
|
||||||
/>
|
)}
|
||||||
</TextField.Root>
|
/>
|
||||||
</View>
|
</TextField.Root>
|
||||||
<View>
|
|
||||||
<TextField.Root>
|
<TextField.Root>
|
||||||
<TextField.Icon icon={Lock} />
|
<TextField.Icon icon={Lock} />
|
||||||
<TextField.Input
|
<TextField.Input
|
||||||
testID="loginPasswordInput"
|
testID="loginPasswordInput"
|
||||||
inputRef={passwordInputRef}
|
inputRef={passwordInputRef}
|
||||||
label={_(msg`Password`)}
|
label={_(msg`Password`)}
|
||||||
autoCapitalize="none"
|
autoCapitalize="none"
|
||||||
autoCorrect={false}
|
autoCorrect={false}
|
||||||
autoComplete="password"
|
autoComplete="password"
|
||||||
returnKeyType="done"
|
returnKeyType="done"
|
||||||
enablesReturnKeyAutomatically={true}
|
enablesReturnKeyAutomatically={true}
|
||||||
secureTextEntry={true}
|
secureTextEntry={true}
|
||||||
textContentType="password"
|
textContentType="password"
|
||||||
clearButtonMode="while-editing"
|
clearButtonMode="while-editing"
|
||||||
value={password}
|
value={password}
|
||||||
onChangeText={setPassword}
|
onChangeText={setPassword}
|
||||||
onSubmitEditing={onPressNext}
|
onSubmitEditing={onPressNext}
|
||||||
blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
|
blurOnSubmit={false} // HACK: https://github.com/facebook/react-native/issues/21911#issuecomment-558343069 Keyboard blur behavior is now handled in onSubmitEditing
|
||||||
editable={!isProcessing}
|
editable={!isProcessing}
|
||||||
accessibilityHint={
|
accessibilityHint={
|
||||||
identifier === ''
|
identifier === ''
|
||||||
? _(msg`Input your password`)
|
? _(msg`Input your password`)
|
||||||
: _(msg`Input the password tied to ${identifier}`)
|
: _(msg`Input the password tied to ${identifier}`)
|
||||||
}
|
}
|
||||||
/>
|
/>
|
||||||
<Button
|
<Button
|
||||||
testID="forgotPasswordButton"
|
testID="forgotPasswordButton"
|
||||||
onPress={onPressForgotPassword}
|
onPress={onPressForgotPassword}
|
||||||
label={_(msg`Forgot password?`)}
|
label={_(msg`Forgot password?`)}
|
||||||
accessibilityHint={_(msg`Opens password reset form`)}
|
accessibilityHint={_(msg`Opens password reset form`)}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
style={[
|
style={[
|
||||||
a.rounded_sm,
|
a.rounded_sm,
|
||||||
t.atoms.bg_contrast_100,
|
// t.atoms.bg_contrast_100,
|
||||||
{marginLeft: 'auto', left: 6, padding: 6},
|
{marginLeft: 'auto', left: 6, padding: 6},
|
||||||
a.z_10,
|
a.z_10,
|
||||||
]}>
|
]}>
|
||||||
<ButtonText>
|
<ButtonText>
|
||||||
<Trans>Forgot?</Trans>
|
<Trans>Forgot?</Trans>
|
||||||
</ButtonText>
|
</ButtonText>
|
||||||
</Button>
|
</Button>
|
||||||
</TextField.Root>
|
</TextField.Root>
|
||||||
|
</View>
|
||||||
</View>
|
</View>
|
||||||
<FormError error={error} />
|
<FormError error={error} />
|
||||||
<View style={[a.flex_row, a.align_center]}>
|
<View style={[a.flex_row, a.align_center, a.pt_md]}>
|
||||||
<Button
|
<Button
|
||||||
label={_(msg`Back`)}
|
label={_(msg`Back`)}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
size="small"
|
size="medium"
|
||||||
onPress={onPressBack}>
|
onPress={onPressBack}>
|
||||||
<ButtonText>
|
<ButtonText>
|
||||||
<Trans>Back</Trans>
|
<Trans>Back</Trans>
|
||||||
|
|
@ -234,7 +235,7 @@ export const LoginForm = ({
|
||||||
accessibilityHint={_(msg`Retries login`)}
|
accessibilityHint={_(msg`Retries login`)}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="secondary"
|
color="secondary"
|
||||||
size="small"
|
size="medium"
|
||||||
onPress={onPressRetryConnect}>
|
onPress={onPressRetryConnect}>
|
||||||
{_(msg`Retry`)}
|
{_(msg`Retry`)}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -251,7 +252,7 @@ export const LoginForm = ({
|
||||||
accessibilityHint={_(msg`Navigates to the next screen`)}
|
accessibilityHint={_(msg`Navigates to the next screen`)}
|
||||||
variant="solid"
|
variant="solid"
|
||||||
color="primary"
|
color="primary"
|
||||||
size="small"
|
size="medium"
|
||||||
onPress={onPressNext}>
|
onPress={onPressNext}>
|
||||||
<ButtonText>
|
<ButtonText>
|
||||||
<Trans>Next</Trans>
|
<Trans>Next</Trans>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue