diff --git a/native/account/restore-backup-screen.react.js b/native/account/restore-backup-screen.react.js new file mode 100644 --- /dev/null +++ b/native/account/restore-backup-screen.react.js @@ -0,0 +1,90 @@ +// @flow + +import * as React from 'react'; +import { Text, View } from 'react-native'; +import * as Progress from 'react-native-progress'; + +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.js'; +import type { NavigationRoute } from '../navigation/route-names.js'; +import { useColors, useStyles } from '../themes/colors.js'; + +type Props = { + +navigation: SignInNavigationProp<'RestoreBackupScreen'>, + +route: NavigationRoute<'RestoreBackupScreen'>, +}; + +export type RestoreBackupScreenParams = { + +username: string, + +credentials: + | { + +type: 'password', + +password: string, + } + | { + +type: 'siwe', + +message: string, + +signature: string, + }, +}; + +// eslint-disable-next-line no-unused-vars +function RestoreBackupScreen(props: Props): React.Node { + const styles = useStyles(unboundStyles); + const colors = useColors(); + return ( + + + Restoring from backup + + Your data is currently being restored. + + + You will be automatically navigated to the app after this process is + finished. + + Backup date: + + + + + + ); +} + +const unboundStyles = { + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + section: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, + detail: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundTertiaryLabel', + }, + progressContainer: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + }, + scrollViewContentContainer: { + flexGrow: 1, + }, +}; + +export default RestoreBackupScreen; diff --git a/native/account/restore-password-account-screen.react.js b/native/account/restore-password-account-screen.react.js --- a/native/account/restore-password-account-screen.react.js +++ b/native/account/restore-password-account-screen.react.js @@ -10,6 +10,7 @@ import RegistrationTextInput from './registration/registration-text-input.react.js'; import type { SignInNavigationProp } from './sign-in-navigator.react.js'; import type { NavigationRoute } from '../navigation/route-names.js'; +import { RestoreBackupScreenRouteName } from '../navigation/route-names.js'; import { useStyles } from '../themes/colors.js'; type Props = { @@ -17,7 +18,6 @@ +route: NavigationRoute<'RestorePasswordAccountScreen'>, }; -// eslint-disable-next-line no-unused-vars function RestorePasswordAccountScreen(props: Props): React.Node { const [username, setUsername] = React.useState(''); const [password, setPassword] = React.useState(''); @@ -28,7 +28,17 @@ }, []); const areCredentialsPresent = !!username && !!password; - const onProceed = React.useCallback(() => {}, []); + const onProceed = React.useCallback(() => { + if (areCredentialsPresent) { + props.navigation.navigate(RestoreBackupScreenRouteName, { + username, + credentials: { + type: 'password', + password, + }, + }); + } + }, [areCredentialsPresent, password, props.navigation, username]); const styles = useStyles(unboundStyles); return ( 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 @@ -8,6 +8,7 @@ import * as React from 'react'; import QRCodeScreen from './qr-code-screen.react.js'; +import RestoreBackupScreen from './restore-backup-screen.react.js'; import RestorePasswordAccountScreen from './restore-password-account-screen.react.js'; import RestorePromptScreen from './restore-prompt-screen.react.js'; import type { RootNavigationProp } from '../navigation/root-navigator.react.js'; @@ -17,6 +18,7 @@ QRCodeScreenRouteName, RestorePromptScreenRouteName, RestorePasswordAccountScreenRouteName, + RestoreBackupScreenRouteName, } from '../navigation/route-names.js'; import { useColors } from '../themes/colors.js'; @@ -65,6 +67,10 @@ name={RestorePasswordAccountScreenRouteName} component={RestorePasswordAccountScreen} /> + ); } 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 @@ -14,6 +14,7 @@ import type { RegistrationTermsParams } from '../account/registration/registration-terms.react.js'; import type { CreateSIWEBackupMessageParams } from '../account/registration/siwe-backup-message-creation.react.js'; import type { UsernameSelectionParams } from '../account/registration/username-selection.react.js'; +import type { RestoreBackupScreenParams } from '../account/restore-backup-screen.react'; import type { TermsAndPrivacyModalParams } from '../account/terms-and-privacy-modal.react.js'; import type { RestoreSIWEBackupParams } from '../backup/restore-siwe-backup.react.js'; import type { ThreadPickerModalParams } from '../calendar/thread-picker-modal.react.js'; @@ -154,6 +155,7 @@ export const RestorePromptScreenRouteName = 'RestorePromptScreen'; export const RestorePasswordAccountScreenRouteName = 'RestorePasswordAccountScreen'; +export const RestoreBackupScreenRouteName = 'RestoreBackupScreen'; export const UserProfileBottomSheetNavigatorRouteName = 'UserProfileBottomSheetNavigator'; export const UserProfileBottomSheetRouteName = 'UserProfileBottomSheet'; @@ -340,6 +342,7 @@ +QRCodeScreen: void, +RestorePromptScreen: void, +RestorePasswordAccountScreen: void, + +RestoreBackupScreen: RestoreBackupScreenParams, }; export type UserProfileBottomSheetParamList = {