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,96 @@
},
};
+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 +123,18 @@
color: 'panelForegroundLabel',
paddingBottom: 16,
},
+ error: {
+ marginTop: 16,
+ },
+ errorText: {
+ fontFamily: 'Arial',
+ fontSize: 15,
+ lineHeight: 20,
+ color: 'redText',
+ },
+ confirmPassword: {
+ marginTop: 16,
+ },
};
export default PasswordSelection;