diff --git a/native/account/registration/password-selection.react.js b/native/account/registration/password-selection.react.js
new file mode 100644
--- /dev/null
+++ b/native/account/registration/password-selection.react.js
@@ -0,0 +1,56 @@
+// @flow
+
+import * as React from 'react';
+import { 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 type { CoolOrNerdMode } from './registration-types.js';
+import type { NavigationRoute } from '../../navigation/route-names.js';
+import { useStyles } from '../../themes/colors.js';
+
+export type PasswordSelectionParams = {
+ +userSelections: {
+ +coolOrNerdMode: CoolOrNerdMode,
+ +keyserverUsername: string,
+ +username: string,
+ },
+};
+
+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 styles = useStyles(unboundStyles);
+ return (
+
+
+ Pick a password
+
+
+
+
+
+ );
+}
+
+const unboundStyles = {
+ header: {
+ fontSize: 24,
+ color: 'panelForegroundLabel',
+ paddingBottom: 16,
+ },
+};
+
+export default PasswordSelection;
diff --git a/native/account/registration/registration-navigator.react.js b/native/account/registration/registration-navigator.react.js
--- a/native/account/registration/registration-navigator.react.js
+++ b/native/account/registration/registration-navigator.react.js
@@ -11,6 +11,7 @@
import CoolOrNerdModeSelection from './cool-or-nerd-mode-selection.react.js';
import ExistingEthereumAccount from './existing-ethereum-account.react.js';
import KeyserverSelection from './keyserver-selection.react.js';
+import PasswordSelection from './password-selection.react.js';
import UsernameSelection from './username-selection.react.js';
import type { RootNavigationProp } from '../../navigation/root-navigator.react.js';
import {
@@ -19,6 +20,7 @@
ConnectEthereumRouteName,
ExistingEthereumAccountRouteName,
UsernameSelectionRouteName,
+ PasswordSelectionRouteName,
type ScreenParamList,
type RegistrationParamList,
} from '../../navigation/route-names.js';
@@ -71,6 +73,10 @@
name={UsernameSelectionRouteName}
component={UsernameSelection}
/>
+
);
}
diff --git a/native/account/registration/username-selection.react.js b/native/account/registration/username-selection.react.js
--- a/native/account/registration/username-selection.react.js
+++ b/native/account/registration/username-selection.react.js
@@ -21,7 +21,10 @@
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 {
+ type NavigationRoute,
+ PasswordSelectionRouteName,
+} from '../../navigation/route-names.js';
import { useSelector } from '../../redux/redux-utils.js';
import { useStyles } from '../../themes/colors.js';
@@ -42,7 +45,6 @@
+navigation: RegistrationNavigationProp<'UsernameSelection'>,
+route: NavigationRoute<'UsernameSelection'>,
};
-// eslint-disable-next-line no-unused-vars
function UsernameSelection(props: Props): React.Node {
const [username, setUsername] = React.useState('');
const validUsername = username.search(validUsernameRegex) > -1;
@@ -59,6 +61,8 @@
const exactSearchUserCall = useServerCall(exactSearchUser);
const dispatchActionPromise = useDispatchActionPromise();
+ const { navigate } = props.navigation;
+ const { userSelections } = props.route.params;
const onProceed = React.useCallback(async () => {
if (!checkUsernameValidity()) {
return;
@@ -74,11 +78,22 @@
}
setUsernameError(undefined);
+ navigate<'PasswordSelection'>({
+ name: PasswordSelectionRouteName,
+ params: {
+ userSelections: {
+ ...userSelections,
+ username,
+ },
+ },
+ });
}, [
checkUsernameValidity,
username,
exactSearchUserCall,
dispatchActionPromise,
+ navigate,
+ userSelections,
]);
const exactSearchUserCallLoading = useSelector(
diff --git a/native/navigation/route-names.js b/native/navigation/route-names.js
--- a/native/navigation/route-names.js
+++ b/native/navigation/route-names.js
@@ -7,6 +7,7 @@
import type { ConnectEthereumParams } from '../account/registration/connect-ethereum.react.js';
import type { ExistingEthereumAccountParams } from '../account/registration/existing-ethereum-account.react.js';
import type { KeyserverSelectionParams } from '../account/registration/keyserver-selection.react.js';
+import type { PasswordSelectionParams } from '../account/registration/password-selection.react.js';
import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js';
import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js';
import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js';
@@ -106,6 +107,7 @@
export const ExistingEthereumAccountRouteName = 'ExistingEthereumAccount';
export const UsernameSelectionRouteName = 'UsernameSelection';
export const MessageSearchRouteName = 'MessageSearch';
+export const PasswordSelectionRouteName = 'PasswordSelection';
export type RootParamList = {
+LoggedOutModal: void,
@@ -201,6 +203,7 @@
+ConnectEthereum: ConnectEthereumParams,
+ExistingEthereumAccount: ExistingEthereumAccountParams,
+UsernameSelection: UsernameSelectionParams,
+ +PasswordSelection: PasswordSelectionParams,
};
export type InviteLinkParamList = {