diff --git a/native/account/restore-prompt-screen.react.js b/native/account/restore-prompt-screen.react.js new file mode 100644 --- /dev/null +++ b/native/account/restore-prompt-screen.react.js @@ -0,0 +1,74 @@ +// @flow + +import * as React from 'react'; +import { Text, View } from 'react-native'; + +import PromptButton from './prompt-button.react.js'; +import RegistrationButtonContainer from './registration/registration-button-container.react.js'; +import RegistrationContainer from './registration/registration-container.react.js'; +import RegistrationContentContainer from './registration/registration-content-container.react.js'; +import type { SignInNavigationProp } from './sign-in-navigator.react'; +import type { NavigationRoute } from '../navigation/route-names'; +import { useStyles } from '../themes/colors.js'; + +type Props = { + +navigation: SignInNavigationProp<'RestorePromptScreen'>, + +route: NavigationRoute<'RestorePromptScreen'>, +}; + +// eslint-disable-next-line no-unused-vars +function RestorePromptScreen(props: Props): React.Node { + const styles = useStyles(unboundStyles); + + return ( + + + Restore account + + Restoring an account allows you to keep using Comm after losing access + to your primary device. In order to restore, you should choose the + same login method that was used during registration. This operation + will log you out from all your other devices. + + + + + {}} + variant="siwe" + /> + + + {}} + variant="regular" + /> + + + + ); +} + +const unboundStyles = { + container: { + backgroundColor: 'panelBackground', + justifyContent: 'space-between', + }, + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + body: { + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + }, + buttonContainer: { + flexDirection: 'row', + }, +}; + +export default RestorePromptScreen; diff --git a/native/account/sign-in-navigator.react.js b/native/account/sign-in-navigator.react.js --- a/native/account/sign-in-navigator.react.js +++ b/native/account/sign-in-navigator.react.js @@ -9,11 +9,13 @@ import { SafeAreaView } from 'react-native-safe-area-context'; import QRCodeScreen from './qr-code-screen.react.js'; +import RestorePromptScreen from './restore-prompt-screen.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; import { type ScreenParamList, type SignInParamList, QRCodeScreenRouteName, + RestorePromptScreenRouteName, } from '../navigation/route-names.js'; import { useStyles, useColors } from '../themes/colors.js'; @@ -58,6 +60,10 @@ name={QRCodeScreenRouteName} component={QRCodeScreen} /> + ); 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 @@ -151,6 +151,7 @@ export const CreateRolesScreenRouteName = 'CreateRolesScreen'; export const SignInNavigatorRouteName = 'SignInNavigator'; export const QRCodeScreenRouteName = 'QRCodeScreen'; +export const RestorePromptScreenRouteName = 'RestorePromptScreen'; export const UserProfileBottomSheetNavigatorRouteName = 'UserProfileBottomSheetNavigator'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; @@ -335,6 +336,7 @@ export type SignInParamList = { +QRCodeScreen: void, + +RestorePromptScreen: void, }; export type UserProfileBottomSheetParamList = {