[CA-1988] Add second factor removal (#121)

Author: sachaMemmir5

src/widgets/mfa/MfaCredentialsWidget.jsx

@@ -7,13 +7,25 @@ import {Info, Intro, Separator} from '../../components/miscComponent';
 import {createForm} from '../../components/form/formComponent';
 import {deepDefaults} from '../../helpers/deepDefaults';
 import phoneNumberField from '../../components/form/fields/phoneNumberField';
+import {withTheme} from '../../components/widget/widgetContext';
+import styled from 'styled-components';
 
 
 const EmailRegisteringCredentialForm = createForm({
     prefix: 'r5-mfa-credentials-email-',
     submitLabel: 'mfa.register.email'
 });
 
+const EmailCredentialRemovalForm = createForm({
+    prefix: 'r5-mfa-credentials-email-removal-',
+    submitLabel: 'mfa.remove.email'
+})
+
+const PhoneNumberCredentialRemovalForm = createForm({
+    prefix: 'r5-mfa-credentials-phone-number-removal-',
+    submitLabel: 'mfa.remove.phoneNumber'
+})
+
 const VerificationCodeForm = createForm({
     prefix: 'r5-mfa-credentials-verification-code-',
     fields: [
@@ -33,6 +45,11 @@ const PhoneNumberRegisteringCredentialForm = config => createForm({
     submitLabel: 'mfa.register.phoneNumber'
 })
 
+const DivCredentialBlock = withTheme(styled.div`
+    margin-left: ${props => props.theme.get('_blockInnerHeight')}px;
+    margin-bottom: 5em;
+`);
+
 class MainView extends React.Component {
     onEmailRegistering = _ => {
         return this.props.apiClient.startMfaEmailRegistration({
@@ -48,21 +65,64 @@ class MainView extends React.Component {
         })
     }
 
+    onEmailRemoval = _ => {
+        return this.props.apiClient.removeMfaEmail({
+            accessToken: this.props.accessToken
+        })
+    }
+
+    onPhoneNumberRemoval = data => {
+        return this.props.apiClient.removeMfaPhoneNumber({
+            accessToken: this.props.accessToken,
+            phoneNumber: data.phoneNumber
+        })
+    }
+
     render() {
-        const { i18n, showIntro, config } = this.props
+        const { i18n, showIntro, config, showRemoveMfaCredentials, credentials } = this.props
         const PhoneNumberInputForm = PhoneNumberRegisteringCredentialForm(config);
+        const phoneNumberCredentialRegistered = credentials.find(credential => credential.type === 'sms')
+        const isEmailCredentialRegistered = credentials.some(credential => credential.type === 'email')
         return (
             <div>
-                <div>
-                    {config.mfaEmailEnabled && showIntro && <Intro>{i18n('mfa.email.explain')}</Intro>}
-                    {config.mfaEmailEnabled && <EmailRegisteringCredentialForm handler={this.onEmailRegistering} onSuccess={data => this.props.goTo('verification-code', {...data, registrationType: 'email'})}/>}
-                </div>
-                {config.mfaEmailEnabled && config.mfaSmsEnabled && <Separator/>}
-                <div>
-                    {config.mfaSmsEnabled && <Intro>{showIntro && <Intro>{i18n('mfa.phoneNumber.explain')}</Intro>}</Intro>}
-                    {config.mfaSmsEnabled && <PhoneNumberInputForm
-                        handler={this.onPhoneNumberRegistering} onSuccess={data => this.props.goTo('verification-code', {...data, registrationType: 'sms'})}/> }
-                </div>
+                <DivCredentialBlock>
+                    {config.mfaEmailEnabled &&
+                        <div>
+                            {showIntro && <Intro>{i18n('mfa.email.explain')}</Intro>}
+                            <EmailRegisteringCredentialForm handler={this.onEmailRegistering} onSuccess={data => this.props.goTo('verification-code', {...data, registrationType: 'email'})}/>
+                        </div>
+                    }
+
+                    {config.mfaEmailEnabled && config.mfaSmsEnabled && <Separator/>}
+                    {config.mfaSmsEnabled &&
+                        <div>
+                            {showIntro && <Intro>{i18n('mfa.phoneNumber.explain')}</Intro>}
+                            <PhoneNumberInputForm
+                                handler={this.onPhoneNumberRegistering} onSuccess={data => this.props.goTo('verification-code', {...data, registrationType: 'sms'})}/>
+                        </div>
+                    }
+                </DivCredentialBlock>
+                <DivCredentialBlock>
+                    {showRemoveMfaCredentials &&
+                        config.mfaEmailEnabled &&
+                        isEmailCredentialRegistered &&
+                        <div>
+                            {showIntro && <Intro>{i18n('mfa.email.remove.explain')}</Intro>}
+                            <EmailCredentialRemovalForm handler={this.onEmailRemoval}
+                                                        onSuccess={_ => this.props.goTo('credential-removed', {credentialType: 'email'})}/>
+                        </div>
+                    }
+                    {showRemoveMfaCredentials && config.mfaEmailEnabled && config.mfaSmsEnabled && phoneNumberCredentialRegistered && isEmailCredentialRegistered && <Separator/>}
+                    {showRemoveMfaCredentials &&
+                        config.mfaSmsEnabled &&
+                        phoneNumberCredentialRegistered &&
+                        <div>
+                            {showIntro && <Intro>{i18n('mfa.phoneNumber.remove.explain')}</Intro>}
+                            <PhoneNumberCredentialRemovalForm handler={data => this.onPhoneNumberRemoval({...data, ...phoneNumberCredentialRegistered})}
+                                                         onSuccess={_ => this.props.goTo('credential-removed', {credentialType: 'sms'})}/>
+                        </div>
+                    }
+                </DivCredentialBlock>
             </div>
         )
     }
@@ -102,17 +162,27 @@ const CredentialRegisteredView = ({ i18n, registrationType}) => <div>
         {registrationType === 'sms' && <Info>{i18n('mfa.phoneNumber.registered')}</Info>}
     </div>
 
+const CredentialRemovedView = ({ i18n, credentialType}) => <div>
+    {credentialType === 'email' && <Info>{i18n('mfa.email.removed')}</Info>}
+    {credentialType === 'sms' && <Info>{i18n('mfa.phoneNumber.removed')}</Info>}
+</div>
+
 export default createMultiViewWidget({
     initialView: 'main',
     views: {
         'main': MainView,
         'credential-registered': CredentialRegisteredView,
-        'verification-code': VerificationCodeView
+        'verification-code': VerificationCodeView,
+        'credential-removed': CredentialRemovedView
     },
-    prepare: (options) => {
-        return deepDefaults({
-            showIntro: true,
-            ...options
-        }
-    )}
+    prepare: (options, { apiClient }) => {
+        return apiClient.listMfaCredentials(options.accessToken).then(credentials => {
+             return deepDefaults({
+                             showIntro: true,
+                             showRemoveMfaCredentials: true,
+                             ...options,
+                             ...credentials
+                         })
+        })
+    }
 })

tests/widgets/mfa/MfaCredentialsWidget.test.js

@@ -10,29 +10,42 @@ const defaultConfig = { domain: 'local.reach5.net', mfaEmailEnabled: true, mfaSm
 const textFilter = expected => (i, el) => $(el).text() === expected;
 
 describe('Snapshot', () => {
-    const generateSnapshot = (options, config = defaultConfig) => () => {
-        const tree = MfaCredentialsWidget(options, { config, apiClient: {} })
+    const generateSnapshot = ({options = {showIntro: true}, config = defaultConfig, credentials }) => () => {
+        const apiClient = {
+            listMfaCredentials: jest.fn().mockReturnValueOnce(Promise.resolve({ credentials }))
+        }
+        const tree = MfaCredentialsWidget(options, {config, apiClient} )
             .then(result => renderer.create(result).toJSON());
 
         expect(tree).resolves.toMatchSnapshot();
     };
 
     describe('mfaCredentials', () => {
-        test('default', generateSnapshot());
+        test('default', generateSnapshot({ credentials: []}));
 
-        test('no intro', generateSnapshot({ showIntro: false }));
+        test('no intro', generateSnapshot({ options: {showIntro: false}, credentials: [
+            { type: 'sms', phoneNumber: '33612345678', friendlyName: 'identifier', createdAt: '2022-09-21' },
+            { type: 'email', email: '[email protected]', friendlyName: 'identifier', createdAt: '2022-09-21' }
+        ]}));
     });
 });
 describe('DOM testing', () => {
-    const generateComponent = async (options, config = defaultConfig) => {
-        const result = await MfaCredentialsWidget(options, { config, apiClient: {} });
+    const generateComponent = async (options, config = defaultConfig, credentials) => {
+
+        const apiClient = {
+            listMfaCredentials: jest.fn().mockReturnValueOnce(Promise.resolve({ credentials }))
+        }
+        const result = await MfaCredentialsWidget(options, { config, apiClient });
 
         return render(result);
     };
 
     describe('mfaCredentials', () => {
         test('default', async () => {
-            const instance = await generateComponent({});
+            const instance = await generateComponent({showIntro: true, showRemoveMfaCredentials: true}, defaultConfig, [
+                    { type: 'sms', phoneNumber: '33612345678', friendlyName: 'identifier', createdAt: '2022-09-21' },
+                    { type: 'email', email: '[email protected]', friendlyName: 'identifier', createdAt: '2022-09-21' }
+                ]);
             // Intro
             expect(
                 instance.find('div').filter(textFilter('mfa.email.explain'))
@@ -43,10 +56,20 @@ describe('DOM testing', () => {
                 instance.find('button').filter(textFilter('mfa.register.phoneNumber'))
             ).toHaveLength(1);
 
-            // Form button email
+            // // Form button email
             expect(
                 instance.find('button').filter(textFilter('mfa.register.email'))
             ).toHaveLength(1);
+
+            // // Form button remove email
+            expect(
+                instance.find('button').filter(textFilter('mfa.remove.email'))
+            )
+
+            // // Form button remove phone number
+            expect(
+                instance.find('button').filter(textFilter('mfa.remove.phoneNumber'))
+            )
         });
     });
 });