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 = {