Differential D8000 Diff 27103 native/account/registration/password-selection.react.js

Changeset View

Standalone View

native/account/registration/password-selection.react.js

// @flow		// @flow

import * as React from 'react';		import * as React from 'react';
import { View, Text } from 'react-native';		import { View, Text, Platform } from 'react-native';

		import sleep from 'lib/utils/sleep.js';

import RegistrationButtonContainer from './registration-button-container.react.js';		import RegistrationButtonContainer from './registration-button-container.react.js';
import RegistrationButton from './registration-button.react.js';		import RegistrationButton from './registration-button.react.js';
import RegistrationContainer from './registration-container.react.js';		import RegistrationContainer from './registration-container.react.js';
import RegistrationContentContainer from './registration-content-container.react.js';		import RegistrationContentContainer from './registration-content-container.react.js';
import type { RegistrationNavigationProp } from './registration-navigator.react.js';		import type { RegistrationNavigationProp } from './registration-navigator.react.js';
import RegistrationTextInput from './registration-text-input.react.js';		import RegistrationTextInput from './registration-text-input.react.js';
import type { CoolOrNerdMode } from './registration-types.js';		import type { CoolOrNerdMode } from './registration-types.js';
▲ Show 20 Lines • Show All 57 Lines • ▼ Show 20 Lines	if (passwordError === 'passwords_dont_match') {
errorText = <Text style={styles.errorText}>Password cannot be empty</Text>;		errorText = <Text style={styles.errorText}>Password cannot be empty</Text>;
}		}

const confirmPasswordInputRef = React.useRef();		const confirmPasswordInputRef = React.useRef();
const focusConfirmPasswordInput = React.useCallback(() => {		const focusConfirmPasswordInput = React.useCallback(() => {
confirmPasswordInputRef.current?.focus();		confirmPasswordInputRef.current?.focus();
}, []);		}, []);

		/* eslint-disable react-hooks/rules-of-hooks */
		const passwordInputRef = React.useRef();
		if (Platform.OS === 'android') {
		// It's okay to call this hook conditionally because
		// the condition is guaranteed to never change
		React.useEffect(() => {
		(async () => {
		await sleep(250);
		passwordInputRef.current?.focus();
		})();
		}, []);
		}
		/* eslint-enable react-hooks/rules-of-hooks */

return (		return (
<RegistrationContainer>		<RegistrationContainer>
<RegistrationContentContainer>		<RegistrationContentContainer>
<Text style={styles.header}>Pick a password</Text>		<Text style={styles.header}>Pick a password</Text>
<RegistrationTextInput		<RegistrationTextInput
value={password}		value={password}
onChangeText={setPassword}		onChangeText={setPassword}
placeholder="Password"		placeholder="Password"
autoFocus={true}		autoFocus={Platform.select({
		android: false,
		default: true,
		})}
secureTextEntry={true}		secureTextEntry={true}
textContentType="newPassword"		textContentType="newPassword"
autoComplete="password-new"		autoComplete="password-new"
returnKeyType="next"		returnKeyType="next"
onSubmitEditing={focusConfirmPasswordInput}		onSubmitEditing={focusConfirmPasswordInput}
onBlur={potentiallyClearErrors}		onBlur={potentiallyClearErrors}
		ref={passwordInputRef}
/>		/>
<RegistrationTextInput		<RegistrationTextInput
value={confirmPassword}		value={confirmPassword}
onChangeText={setConfirmPassword}		onChangeText={setConfirmPassword}
placeholder="Confirm password"		placeholder="Confirm password"
secureTextEntry={true}		secureTextEntry={true}
textContentType="newPassword"		textContentType="newPassword"
autoComplete="password-new"		autoComplete="password-new"
Show All 40 Lines