diff --git a/native/account/registration/password-selection.react.js b/native/account/registration/password-selection.react.js --- a/native/account/registration/password-selection.react.js +++ b/native/account/registration/password-selection.react.js @@ -1,13 +1,14 @@ // @flow import * as React from 'react'; -import { Text } from 'react-native'; +import { View, Text } from 'react-native'; import RegistrationButtonContainer from './registration-button-container.react.js'; import RegistrationButton from './registration-button.react.js'; import RegistrationContainer from './registration-container.react.js'; import RegistrationContentContainer from './registration-content-container.react.js'; import type { RegistrationNavigationProp } from './registration-navigator.react.js'; +import RegistrationTextInput from './registration-text-input.react.js'; import type { CoolOrNerdMode } from './registration-types.js'; import type { NavigationRoute } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; @@ -20,25 +21,95 @@ }, }; +type PasswordError = 'passwords_dont_match' | 'empty_password'; + type Props = { +navigation: RegistrationNavigationProp<'PasswordSelection'>, +route: NavigationRoute<'PasswordSelection'>, }; // eslint-disable-next-line no-unused-vars function PasswordSelection(props: Props): React.Node { - const onProceed = React.useCallback(() => {}, []); + const [password, setPassword] = React.useState(''); + const [confirmPassword, setConfirmPassword] = React.useState(''); + const passwordsMatch = password === confirmPassword; + const passwordIsEmpty = password === ''; + + const [passwordError, setPasswordError] = React.useState(); + const potentiallyClearErrors = React.useCallback(() => { + if (!passwordsMatch || passwordIsEmpty) { + return false; + } + setPasswordError(null); + return true; + }, [passwordsMatch, passwordIsEmpty]); + const checkPasswordValidity = React.useCallback(() => { + if (!passwordsMatch) { + setPasswordError('passwords_dont_match'); + return false; + } else if (passwordIsEmpty) { + setPasswordError('empty_password'); + return false; + } + return potentiallyClearErrors(); + }, [passwordsMatch, passwordIsEmpty, potentiallyClearErrors]); + + const onProceed = React.useCallback(() => { + if (!checkPasswordValidity()) { + return; + } + }, [checkPasswordValidity]); const styles = useStyles(unboundStyles); + let errorText; + if (passwordError === 'passwords_dont_match') { + errorText = ( + Passwords don’t match + ); + } else if (passwordError === 'empty_password') { + errorText = Password cannot be empty; + } + + const confirmPasswordInputRef = React.useRef(); + const focusConfirmPasswordInput = React.useCallback(() => { + confirmPasswordInputRef.current?.focus(); + }, []); + return ( Pick a password + + + {errorText} @@ -51,6 +122,18 @@ color: 'panelForegroundLabel', paddingBottom: 16, }, + error: { + marginTop: 16, + }, + errorText: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'redText', + }, + confirmPassword: { + marginTop: 16, + }, }; export default PasswordSelection;