fix: move from username to password to code with the return key when signing in

This commit is contained in:
Linus Rath
2026-10-15 03:18:24 +02:00
parent f891bf3abb
commit ae1ef5ba5e
2 changed files with 16 additions and 3 deletions
+4
View File
@@ -9,6 +9,8 @@ interface InputProps extends TextInputProps {
containerStyle?: ViewStyle;
leftIcon?: React.ReactNode;
rightIcon?: React.ReactNode;
/** React 19 passes `ref` as a prop; it reaches the TextInput (focus chaining). */
ref?: React.Ref<RNTextInput>;
}
/**
@@ -27,6 +29,7 @@ export default function Input({
leftIcon,
rightIcon,
style,
ref,
...props
}: InputProps) {
const c = useColors();
@@ -44,6 +47,7 @@ export default function Input({
]}>
{leftIcon && <View style={styles.iconLeft}>{leftIcon}</View>}
<RNTextInput
ref={ref}
{...props}
style={[styles.input, style]}
placeholderTextColor={c.textMuted}
+12 -3
View File
@@ -1,5 +1,5 @@
import React from 'react';
import { View, Text, Pressable, StyleSheet } from 'react-native';
import { View, Text, Pressable, StyleSheet, type TextInput } from 'react-native';
import { Eye, EyeOff } from 'lucide-react-native';
import { spacing, typography, type ThemePalette } from '../../theme/tokens';
import { useColors } from '../../theme/colors';
@@ -43,6 +43,9 @@ export default function PasswordStep({
const styles = React.useMemo(() => makeStyles(c), [c]);
const t = useLocaleStore((s) => s.t);
const [showPassword, setShowPassword] = React.useState(false);
// Return moves username → password → code, then signs in.
const passwordRef = React.useRef<TextInput>(null);
const totpRef = React.useRef<TextInput>(null);
return (
<View style={styles.root}>
@@ -63,6 +66,9 @@ export default function PasswordStep({
autoComplete="email"
textContentType="username"
keyboardType="email-address"
returnKeyType="next"
blurOnSubmit={false}
onSubmitEditing={() => passwordRef.current?.focus()}
/>
<Input
@@ -74,12 +80,14 @@ export default function PasswordStep({
secureTextEntry={!showPassword}
autoComplete="current-password"
textContentType="password"
ref={passwordRef}
returnKeyType={totpRequired ? 'next' : 'go'}
onSubmitEditing={totpRequired ? undefined : onSubmit}
blurOnSubmit={!totpRequired}
onSubmitEditing={totpRequired ? () => totpRef.current?.focus() : onSubmit}
rightIcon={
<Pressable
onPress={() => setShowPassword((v) => !v)}
hitSlop={8}
hitSlop={14}
accessibilityRole="button"
accessibilityLabel={showPassword ? t('login.hide_password', 'Hide password') : t('login.show_password', 'Show password')}
>
@@ -93,6 +101,7 @@ export default function PasswordStep({
label={t('login.totp_label', 'Two-factor code')}
placeholder="123456"
value={totp}
ref={totpRef}
onChangeText={(value) => onChangeTotp?.(value)}
autoFocus
keyboardType="number-pad"