diff --git a/native/account/qr-auth/qr-auth-navigator.react.js b/native/account/qr-auth/qr-auth-navigator.react.js --- a/native/account/qr-auth/qr-auth-navigator.react.js +++ b/native/account/qr-auth/qr-auth-navigator.react.js @@ -11,6 +11,7 @@ import { QRAuthContextProvider } from './qr-auth-context-provider.js'; import QRAuthNotPrimaryDevice from './qr-auth-not-primary-device.react.js'; import SecondaryDeviceConnected from './secondary-device-connected.react.js'; +import SecondaryDeviceNotResponding from './secondary-device-not-responding.react.js'; import SecondaryDeviceQRCodeScanner from './secondary-device-qr-code-scanner.react.js'; import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; import { @@ -20,6 +21,7 @@ QRAuthNotPrimaryDeviceRouteName, type ScreenParamList, SecondaryDeviceConnectedRouteName, + SecondaryDeviceNotRespondingRouteName, SecondaryDeviceQRCodeScannerRouteName, } from '../../navigation/route-names.js'; import { deviceIsEmulator } from '../../utils/url-utils.js'; @@ -81,6 +83,11 @@ component={SecondaryDeviceConnected} options={disableGesturesScreenOptions} /> + ); diff --git a/native/account/qr-auth/secondary-device-not-responding.react.js b/native/account/qr-auth/secondary-device-not-responding.react.js new file mode 100644 --- /dev/null +++ b/native/account/qr-auth/secondary-device-not-responding.react.js @@ -0,0 +1,106 @@ +// @flow + +import type { + StackNavigationEventMap, + StackNavigationState, + StackOptions, +} from '@react-navigation/core'; +import invariant from 'invariant'; +import * as React from 'react'; +import { Text } from 'react-native'; + +import { getMessageForException } from 'lib/utils/errors.js'; + +import { QRAuthContext } from './qr-auth-context.js'; +import type { QRAuthNavigationProp } from './qr-auth-navigator.react.js'; +import RegistrationButtonContainer from '../../account/registration/registration-button-container.react.js'; +import RegistrationContainer from '../../account/registration/registration-container.react.js'; +import RegistrationContentContainer from '../../account/registration/registration-content-container.react.js'; +import PrimaryButton from '../../components/primary-button.react.js'; +import type { RootNavigationProp } from '../../navigation/root-navigator.react.js'; +import { + type NavigationRoute, + type ScreenParamList, +} from '../../navigation/route-names.js'; +import { useStyles } from '../../themes/colors.js'; + +type Props = { + +navigation: QRAuthNavigationProp<'SecondaryDeviceNotResponding'>, + +route: NavigationRoute<'SecondaryDeviceNotResponding'>, +}; + +function SecondaryDeviceNotResponding(props: Props): React.Node { + const { navigation } = props; + + const qrAuthContext = React.useContext(QRAuthContext); + invariant(qrAuthContext, 'qrAuthContext should be set'); + const { onRemoveSecondaryDevice } = qrAuthContext; + + const navigateToLinkedDevices = React.useCallback(() => { + navigation + .getParent< + ScreenParamList, + 'LinkedDevicesBottomSheet', + StackNavigationState, + StackOptions, + StackNavigationEventMap, + RootNavigationProp<'LinkedDevicesBottomSheet'>, + >() + ?.goBack(); + }, [navigation]); + + const onPressRemove = React.useCallback(async () => { + try { + await onRemoveSecondaryDevice(); + } catch (e) { + console.log( + 'Error while removing unresponsive secondary device ', + getMessageForException(e), + ); + } + navigateToLinkedDevices(); + }, [navigateToLinkedDevices, onRemoveSecondaryDevice]); + + const styles = useStyles(unboundStyles); + + return ( + + + New device not responding + + Has the new device successfully logged in? If not, we'd suggest + removing it and trying again. + + + + + + + + ); +} + +const unboundStyles = { + header: { + fontSize: 24, + color: 'panelForegroundLabel', + paddingBottom: 16, + }, + body: { + fontFamily: 'Arial', + fontSize: 15, + lineHeight: 20, + color: 'panelForegroundSecondaryLabel', + paddingBottom: 16, + }, +}; + +export default SecondaryDeviceNotResponding; 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 @@ -184,6 +184,8 @@ export const QRAuthNotPrimaryDeviceRouteName = 'QRAuthNotPrimaryDevice'; export const ConnectSecondaryDeviceRouteName = 'ConnectSecondaryDevice'; export const SecondaryDeviceConnectedRouteName = 'SecondaryDeviceConnected'; +export const SecondaryDeviceNotRespondingRouteName = + 'SecondaryDeviceNotResponding'; export type RootParamList = { +LoggedOutModal: void, @@ -361,6 +363,7 @@ +QRAuthNotPrimaryDevice: void, +ConnectSecondaryDevice: ConnectSecondaryDeviceParams, +SecondaryDeviceConnected: void, + +SecondaryDeviceNotResponding: void, }; export type ScreenParamList = {