From a3dcf5af2bc179759b0df4928fd3cdfb0a92bb98 Mon Sep 17 00:00:00 2001 From: xsanm Date: Wed, 8 Jan 2025 14:31:31 +0100 Subject: [PATCH] [native] add graphics to QR Auth Flow Summary: [ENG-10030](https://linear.app/comm/issue/ENG-10030/add-graphics-to-qr-auth-flow). [Figma link](https://www.figma.com/design/OkZJNFCa4T871Bxv6iwEyv/ENG-9968---Final-Testing-Task-Screens?node-id=0-1&p=f&t=ZBsTFzmyt5OXJlPA-0) Scanning on native: {F3711246} Scanning non-native: {F3711250} Device not responding: {F3711247} Device added: {F3711248} Scanning on non-primary: {F3711249} Recording of Flow: {F3711326} Test Plan: Test Flow to navigate to all screens Reviewers: angelika, tomek Reviewed By: tomek Subscribers: ashoat Differential Revision: https://phab.comm.dev/D14185 --- .../qr-auth/connect-secondary-device.react.js | 31 ++++++++- .../qr-auth-not-primary-device.react.js | 17 ++++- .../secondary-device-connected.react.js | 17 ++++- .../secondary-device-not-responding.react.js | 17 ++++- ...nect-secondary-device-laptop-icon.react.js | 65 ++++++++++++++++++ ...nect-secondary-device-mobile-icon.react.js | 56 +++++++++++++++ .../vectors/device-not-primary-icon.react.js | 57 ++++++++++++++++ .../secondary-device-added-icon.react.js | 68 +++++++++++++++++++ ...ondary-device-not-responding-icon.react.js | 46 +++++++++++++ 9 files changed, 366 insertions(+), 8 deletions(-) create mode 100644 native/vectors/connect-secondary-device-laptop-icon.react.js create mode 100644 native/vectors/connect-secondary-device-mobile-icon.react.js create mode 100644 native/vectors/device-not-primary-icon.react.js create mode 100644 native/vectors/secondary-device-added-icon.react.js create mode 100644 native/vectors/secondary-device-not-responding-icon.react.js diff --git a/native/account/qr-auth/connect-secondary-device.react.js b/native/account/qr-auth/connect-secondary-device.react.js index b2b634bad5..6fb5ec787c 100644 --- a/native/account/qr-auth/connect-secondary-device.react.js +++ b/native/account/qr-auth/connect-secondary-device.react.js @@ -2,13 +2,18 @@ import invariant from 'invariant'; import * as React from 'react'; -import { Text } from 'react-native'; +import { Text, View } from 'react-native'; + +import { parseDataFromDeepLink } from 'lib/facts/links.js'; +import { identityDeviceTypes } from 'lib/types/identity-service-types.js'; import { PrimaryDeviceQRAuthContext } from './primary-device-qr-auth-context.js'; import type { QRAuthNavigationProp } from './qr-auth-navigator.react.js'; import PrimaryButton from '../../components/primary-button.react.js'; import { type NavigationRoute } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; +import ConnectSecondaryDeviceLaptopIcon from '../../vectors/connect-secondary-device-laptop-icon.react.js'; +import ConnectSecondaryDeviceMobileIcon from '../../vectors/connect-secondary-device-mobile-icon.react.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js'; @@ -41,13 +46,26 @@ function ConnectSecondaryDevice(props: Props): React.Node { void onConnect(data); }, [data, onConnect]); + const icon = React.useMemo(() => { + const parsedData = parseDataFromDeepLink(data); + if ( + parsedData?.data && + (parsedData.data.deviceType === identityDeviceTypes.IOS || + parsedData.data.deviceType === identityDeviceTypes.ANDROID) + ) { + return ; + } + return ; + }, [data]); + return ( - + Connect with this device? Are you sure you want to allow this device to log in to your account? + {icon} - + Device not primary This mobile device is not your primary device, and cannot be used to authorize new devices. Please try your other mobile device(s). + + + - + Device added Your new device has been successfully registered! + + + @@ -70,6 +74,15 @@ const unboundStyles = { color: 'panelForegroundSecondaryLabel', paddingBottom: 16, }, + iconContainer: { + flexGrow: 1, + alignItems: 'center', + justifyContent: 'center', + paddingBottom: 32, + }, + scrollViewContentContainer: { + flexGrow: 1, + }, }; export default SecondaryDeviceConnected; diff --git a/native/account/qr-auth/secondary-device-not-responding.react.js b/native/account/qr-auth/secondary-device-not-responding.react.js index 536a384de6..3f330d55ed 100644 --- a/native/account/qr-auth/secondary-device-not-responding.react.js +++ b/native/account/qr-auth/secondary-device-not-responding.react.js @@ -7,7 +7,7 @@ import type { } from '@react-navigation/core'; import invariant from 'invariant'; import * as React from 'react'; -import { Text } from 'react-native'; +import { Text, View } from 'react-native'; import { getMessageForException } from 'lib/utils/errors.js'; @@ -20,6 +20,7 @@ import { type ScreenParamList, } from '../../navigation/route-names.js'; import { useStyles } from '../../themes/colors.js'; +import SecondaryDeviceNotRespondingIcon from '../../vectors/secondary-device-not-responding-icon.react.js'; import AuthButtonContainer from '../auth-components/auth-button-container.react.js'; import AuthContainer from '../auth-components/auth-container.react.js'; import AuthContentContainer from '../auth-components/auth-content-container.react.js'; @@ -70,12 +71,15 @@ function SecondaryDeviceNotResponding(props: Props): React.Node { return ( - + New device not responding Has the new device successfully logged in? If not, we'd suggest removing it and trying again. + + + + + + + + + + + + + + + ); +} + +export default ConnectSecondaryDeviceLaptopIcon; diff --git a/native/vectors/connect-secondary-device-mobile-icon.react.js b/native/vectors/connect-secondary-device-mobile-icon.react.js new file mode 100644 index 0000000000..c1b83a8186 --- /dev/null +++ b/native/vectors/connect-secondary-device-mobile-icon.react.js @@ -0,0 +1,56 @@ +// @flow + +import * as React from 'react'; +import { Svg, Path } from 'react-native-svg'; + +function ConnectSecondaryDeviceMobileIcon(): React.Node { + return ( + + + + + + + + + + + ); +} + +export default ConnectSecondaryDeviceMobileIcon; diff --git a/native/vectors/device-not-primary-icon.react.js b/native/vectors/device-not-primary-icon.react.js new file mode 100644 index 0000000000..d8fac33e41 --- /dev/null +++ b/native/vectors/device-not-primary-icon.react.js @@ -0,0 +1,57 @@ +// @flow + +import * as React from 'react'; +import { Svg, Path } from 'react-native-svg'; + +function DeviceNotPrimaryIcon(): React.Node { + return ( + + + + + + + + + + + ); +} + +export default DeviceNotPrimaryIcon; diff --git a/native/vectors/secondary-device-added-icon.react.js b/native/vectors/secondary-device-added-icon.react.js new file mode 100644 index 0000000000..8a7bcd564d --- /dev/null +++ b/native/vectors/secondary-device-added-icon.react.js @@ -0,0 +1,68 @@ +// @flow + +import * as React from 'react'; +import { Svg, Path, Defs, Rect, LinearGradient, Stop } from 'react-native-svg'; + +function SecondaryDeviceAddedIcon(): React.Node { + return ( + + + + + + + + + + + + + + + ); +} + +export default SecondaryDeviceAddedIcon; diff --git a/native/vectors/secondary-device-not-responding-icon.react.js b/native/vectors/secondary-device-not-responding-icon.react.js new file mode 100644 index 0000000000..257d012133 --- /dev/null +++ b/native/vectors/secondary-device-not-responding-icon.react.js @@ -0,0 +1,46 @@ +// @flow + +import * as React from 'react'; +import { Svg, Path, Rect } from 'react-native-svg'; + +function SecondaryDeviceNotRespondingIcon(): React.Node { + return ( + + + + + + + ); +} + +export default SecondaryDeviceNotRespondingIcon;