Differential D8004 Diff 27110 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, Platform } from 'react-native';		import { View, Text, Platform } from 'react-native';

import sleep from 'lib/utils/sleep.js';		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';
import type { NavigationRoute } from '../../navigation/route-names.js';		import {
		type NavigationRoute,
		AvatarSelectionRouteName,
		} from '../../navigation/route-names.js';
import { useStyles } from '../../themes/colors.js';		import { useStyles } from '../../themes/colors.js';
import type { KeyPressEvent } from '../../types/react-native.js';		import type { KeyPressEvent } from '../../types/react-native.js';

export type PasswordSelectionParams = {		export type PasswordSelectionParams = {
+userSelections: {		+userSelections: {
+coolOrNerdMode: CoolOrNerdMode,		+coolOrNerdMode: CoolOrNerdMode,
+keyserverUsername: string,		+keyserverUsername: string,
+username: string,		+username: string,
},		},
};		};

type PasswordError = 'passwords_dont_match' \| 'empty_password';		type PasswordError = 'passwords_dont_match' \| 'empty_password';

type Props = {		type Props = {
+navigation: RegistrationNavigationProp<'PasswordSelection'>,		+navigation: RegistrationNavigationProp<'PasswordSelection'>,
+route: NavigationRoute<'PasswordSelection'>,		+route: NavigationRoute<'PasswordSelection'>,
};		};
// eslint-disable-next-line no-unused-vars
function PasswordSelection(props: Props): React.Node {		function PasswordSelection(props: Props): React.Node {
const [password, setPassword] = React.useState('');		const [password, setPassword] = React.useState('');
const [confirmPassword, setConfirmPassword] = React.useState('');		const [confirmPassword, setConfirmPassword] = React.useState('');
const passwordsMatch = password === confirmPassword;		const passwordsMatch = password === confirmPassword;
const passwordIsEmpty = password === '';		const passwordIsEmpty = password === '';

const [passwordError, setPasswordError] = React.useState<?PasswordError>();		const [passwordError, setPasswordError] = React.useState<?PasswordError>();
const potentiallyClearErrors = React.useCallback(() => {		const potentiallyClearErrors = React.useCallback(() => {
Show All 10 Lines	if (!passwordsMatch) {
return false;		return false;
} else if (passwordIsEmpty) {		} else if (passwordIsEmpty) {
setPasswordError('empty_password');		setPasswordError('empty_password');
return false;		return false;
}		}
return potentiallyClearErrors();		return potentiallyClearErrors();
}, [passwordsMatch, passwordIsEmpty, potentiallyClearErrors]);		}, [passwordsMatch, passwordIsEmpty, potentiallyClearErrors]);

		const { userSelections } = props.route.params;
		const { navigate } = props.navigation;
const onProceed = React.useCallback(() => {		const onProceed = React.useCallback(() => {
if (!checkPasswordValidity()) {		if (!checkPasswordValidity()) {
return;		return;
}		}
}, [checkPasswordValidity]);
		const { coolOrNerdMode, keyserverUsername, username } = userSelections;
		const newUserSelections = {
		coolOrNerdMode,
		keyserverUsername,
		accountSelections: {
		accountType: 'username',
		username,
		password,
		},
		};
		navigate<'AvatarSelection'>({
		name: AvatarSelectionRouteName,
		params: { userSelections: newUserSelections },
		});
		}, [checkPasswordValidity, userSelections, password, navigate]);

const styles = useStyles(unboundStyles);		const styles = useStyles(unboundStyles);
let errorText;		let errorText;
if (passwordError === 'passwords_dont_match') {		if (passwordError === 'passwords_dont_match') {
errorText = (		errorText = (
<Text style={styles.errorText}>Passwords don’t match</Text>		<Text style={styles.errorText}>Passwords don’t match</Text>
);		);
} else if (passwordError === 'empty_password') {		} else if (passwordError === 'empty_password') {
▲ Show 20 Lines • Show All 134 Lines • Show Last 20 Lines