Merge pull request Expensify#89704 from bernhardoj/feat/86580-device-management

#2 - Add device management feature

Author: arosiclair

src/libs/API/parameters/SignUpUserParams.ts

@@ -3,6 +3,7 @@ import type Locale from '@src/types/onyx/Locale';
 type SignUpUserParams = {
     email?: string;
     preferredLocale: Locale | null;
+    deviceInfo: string;
 };
 
 export default SignUpUserParams;

src/libs/API/parameters/ValidateSecondaryLoginParams.ts

@@ -1,3 +1,3 @@
-type ValidateSecondaryLoginParams = {partnerUserID: string; validateCode: string};
+type ValidateSecondaryLoginParams = {partnerUserID: string; validateCode: string; deviceInfo: string};
 
 export default ValidateSecondaryLoginParams;

src/libs/actions/Session/index.ts

@@ -643,9 +643,10 @@ function signUpUser(preferredLocale: Locale | undefined) {
         },
     ];
 
-    const params: SignUpUserParams = {email: credentials.login, preferredLocale: preferredLocale ?? null};
-
-    API.write(WRITE_COMMANDS.SIGN_UP_USER, params, {optimisticData, successData, failureData});
+    Device.getDeviceInfoWithID().then((deviceInfo) => {
+        const params: SignUpUserParams = {email: credentials.login, preferredLocale: preferredLocale ?? null, deviceInfo};
+        API.write(WRITE_COMMANDS.SIGN_UP_USER, params, {optimisticData, successData, failureData});
+    });
 }
 
 function setupNewDotAfterTransitionFromOldDot(hybridAppSettings: HybridAppSettings, tryNewDot?: TryNewDot) {

src/libs/actions/User.ts

@@ -66,6 +66,7 @@ import {getDeviceInfoWithID} from './Device';
 import {openOldDotLink} from './Link';
 import {showReportActionNotification} from './Report';
 import {resendValidateCode as sessionResendValidateCode} from './Session';
+import redirectToSignIn from './SignInRedirect';
 
 type DomainOnyxUpdate =
     | OnyxUpdate<`${typeof ONYXKEYS.COLLECTION.DOMAIN}${string}`>
@@ -81,7 +82,11 @@ type LockAccountOnyxKey =
     | `${typeof ONYXKEYS.COLLECTION.DOMAIN_PENDING_ACTIONS}${string}`
     | `${typeof ONYXKEYS.COLLECTION.DOMAIN_ERRORS}${string}`;
 
-function revokeDevice(login: NewLogin) {
+function revokeDevice(login: NewLogin, autoGeneratedLogin: string | undefined) {
+    if (!autoGeneratedLogin) {
+        return;
+    }
+
     const loginKey = getLoginKey(login);
     const optimisticData: Array<OnyxUpdate<typeof ONYXKEYS.LOGINS>> = [
         {
@@ -124,6 +129,11 @@ function revokeDevice(login: NewLogin) {
         optimisticData,
         successData,
         failureData,
+    }).then(() => {
+        if (login.partnerUserID !== autoGeneratedLogin) {
+            return;
+        }
+        redirectToSignIn();
     });
 }
 
@@ -642,9 +652,10 @@ function validateSecondaryLogin(contactMethod: string, validateCode: string, for
         failureData.push(optimisticResetActionCode);
     }
 
-    const parameters: ValidateSecondaryLoginParams = {partnerUserID: contactMethod, validateCode};
-
-    API.write(WRITE_COMMANDS.VALIDATE_SECONDARY_LOGIN, parameters, {optimisticData, successData, failureData});
+    getDeviceInfoWithID().then((deviceInfo) => {
+        const parameters: ValidateSecondaryLoginParams = {partnerUserID: contactMethod, validateCode, deviceInfo};
+        API.write(WRITE_COMMANDS.VALIDATE_SECONDARY_LOGIN, parameters, {optimisticData, successData, failureData});
+    });
 }
 
 /**

src/pages/settings/Security/DeviceManagementPage.tsx

@@ -2,10 +2,10 @@ import {FlashList} from '@shopify/flash-list';
 import type {ListRenderItemInfo} from '@shopify/flash-list';
 import React from 'react';
 import {View} from 'react-native';
+import type {OnyxEntry} from 'react-native-onyx';
 import Button from '@components/Button';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
 import OfflineWithFeedback from '@components/OfflineWithFeedback';
-import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
 import Text from '@components/Text';
 import useLocalize from '@hooks/useLocalize';
@@ -15,13 +15,19 @@ import {clearRevokeError, revokeDevice} from '@libs/actions/User';
 import Navigation from '@libs/Navigation/Navigation';
 import {getDeviceLogins, getLastLogin, getLoginKey} from '@libs/UserUtils';
 import ONYXKEYS from '@src/ONYXKEYS';
+import type {Credentials} from '@src/types/onyx';
 import type {Login} from '@src/types/onyx/Logins';
 
+function autoGeneratedLoginSelector(credentials: OnyxEntry<Credentials>) {
+    return credentials?.autoGeneratedLogin;
+}
+
 function DeviceManagementPage() {
     const styles = useThemeStyles();
     const {translate, datetimeToRelative} = useLocalize();
 
     const [logins] = useOnyx(ONYXKEYS.LOGINS, {selector: getDeviceLogins});
+    const [autoGeneratedLogin] = useOnyx(ONYXKEYS.CREDENTIALS, {selector: autoGeneratedLoginSelector});
 
     const renderItem = ({item}: ListRenderItemInfo<Login>) => {
         const {deviceName, deviceVersion, os, osVersion} = item.additionalData ?? {};
@@ -40,7 +46,7 @@ function DeviceManagementPage() {
                     danger
                     small
                     text={translate('deviceManagementPage.revoke')}
-                    onPress={() => revokeDevice(item)}
+                    onPress={() => revokeDevice(item, autoGeneratedLogin)}
                 />
             </OfflineWithFeedback>
         );
@@ -55,9 +61,7 @@ function DeviceManagementPage() {
                 title={translate('deviceManagementPage.title')}
                 onBackButtonPress={Navigation.goBack}
             />
-            <View style={[styles.ph5, styles.pv3]}>
-                <RenderHTML html={translate('deviceManagementPage.description')} />
-            </View>
+            <Text style={[styles.ph5, styles.pv3]}>{translate('deviceManagementPage.description')}</Text>
             <FlashList
                 data={logins}
                 renderItem={renderItem}

tests/actions/UserTest.ts

@@ -6,10 +6,13 @@ import CONST from '@src/CONST';
 import type {OnyxKey} from '@src/ONYXKEYS';
 import ONYXKEYS from '@src/ONYXKEYS';
 import type {NewLogin} from '@src/types/onyx';
+import redirectToSignIn from '../../src/libs/actions/SignInRedirect';
 import * as UserActions from '../../src/libs/actions/User';
 import waitForBatchedUpdates from '../utils/waitForBatchedUpdates';
 
 jest.mock('@libs/API');
+jest.mock('../../src/libs/actions/SignInRedirect');
+
 const mockAPI = API as jest.Mocked<typeof API>;
 
 describe('actions/User', () => {
@@ -880,7 +883,7 @@ describe('actions/User', () => {
             const login = {partnerID, partnerUserID} as NewLogin;
 
             // When revokeDevice is called
-            UserActions.revokeDevice(login);
+            UserActions.revokeDevice(login, 'a');
             await waitForBatchedUpdates();
 
             // Then API.write should be called with correct command and parameters
@@ -933,5 +936,22 @@ describe('actions/User', () => {
                 },
             });
         });
+
+        it('should call redirectToSignIn when the device belongs to the current user', async () => {
+            // Given a device to revoke that belongs to the current user
+            const partnerID = CONST.PARTNER_ID.IPHONE;
+            const partnerUserID = 'device_123';
+            const autoGeneratedLogin = 'device_123';
+            const login = {partnerID, partnerUserID} as NewLogin;
+
+            (mockAPI.write as jest.Mock).mockResolvedValue(null);
+
+            // When revokeDevice is called
+            UserActions.revokeDevice(login, autoGeneratedLogin);
+            await waitForBatchedUpdates();
+
+            // Then redirectToSignIn should be called
+            expect(redirectToSignIn).toHaveBeenCalled();
+        });
     });
 });