NEW Add a prop to disallow registration screens from showing in the m…

…odal You can indicate which registration screens should not be accessible in the modal. Right now this is used to toggle away the modal if the user manages to navigate to the given screens. RegisteredMFAMethodListField has been updated to use this prop instead of it's own handling for this instance, and the Reset component now uses this prop to avoid showing invalid screens
silverstripe · Jul 25, 2019 · 762322a · 762322a
1 parent d43e3ba
commit 762322a
Show file tree

Hide file tree

Showing 4 changed files with 71 additions and 54 deletions.
diff --git a/client/dist/js/bundle-cms.js b/client/dist/js/bundle-cms.js
diff --git a/client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem/Reset.js b/client/src/components/FormField/RegisteredMFAMethodListField/MethodListItem/Reset.js
@@ -1,7 +1,11 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { SCREEN_REGISTER_METHOD } from 'components/Register';
+import {
+  SCREEN_CHOOSE_METHOD,
+  SCREEN_INTRODUCTION,
+  SCREEN_REGISTER_METHOD,
+} from 'components/Register';
 import { chooseMethod, showScreen } from 'state/mfaRegister/actions';
 import registeredMethodShape from 'types/registeredMethod';
 import availableMethodShape from 'types/availableMethod';
@@ -65,6 +69,7 @@ class Reset extends Component {
           toggle={this.handleToggleModal}
           resources={resources}
           endpoints={endpoints}
+          disallowedScreens={[SCREEN_CHOOSE_METHOD, SCREEN_INTRODUCTION]}
         />
       </button>
     );

diff --git a/client/src/components/FormField/RegisteredMFAMethodListField/RegisteredMFAMethodListField.js b/client/src/components/FormField/RegisteredMFAMethodListField/RegisteredMFAMethodListField.js
@@ -52,21 +52,6 @@ class RegisteredMFAMethodListField extends Component {
     onSetDefaultMethod(initialDefaultMethod);
   }
 
-  componentDidUpdate(prevProps, prevState) {
-    const { registrationScreen } = this.props;
-    const { modalOpen } = this.state;
-
-    // Toggle the modal if the modal is open and the register screen has changed back to "intro"
-    if (
-      prevProps.registrationScreen !== registrationScreen
-      && registrationScreen === SCREEN_INTRODUCTION
-      && prevState.modalOpen
-      && modalOpen
-    ) {
-      this.handleToggleModal();
-    }
-  }
-
   /**
    * The backup method is rendered separately
    *
@@ -201,6 +186,7 @@ class RegisteredMFAMethodListField extends Component {
         toggle={this.handleToggleModal}
         resources={resources}
         endpoints={endpoints}
+        disallowedScreens={[SCREEN_INTRODUCTION]}
       />
     );
   }

diff --git a/client/src/components/RegisterModal.js b/client/src/components/RegisterModal.js
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Modal, ModalBody, ModalHeader } from 'reactstrap';
 import { inject } from 'lib/Injector'; // eslint-disable-line
@@ -15,47 +15,72 @@ const fallbacks = require('../../lang/src/en.json');
  * Renders a modal that contains a register component. Given endpoints it will register MFA methods
  * and update redux state accordingly
  */
-const RegisterModal = ({
-  backupMethod,
-  endpoints,
-  isOpen,
-  toggle,
-  onAddRegisteredMethod,
-  registeredMethods,
-  registrationScreen,
-  resources,
-  RegisterComponent
-}) => (
-  <Modal
-    isOpen={isOpen}
-    toggle={toggle}
-    className="registered-mfa-method-list-field-register-modal"
-  >
-    <ModalHeader toggle={toggle}><Title Tag={null} /></ModalHeader>
-    <ModalBody className="registered-mfa-method-list-field-register-modal__content">
-      {registrationScreen !== SCREEN_INTRODUCTION && (<RegisterComponent
-        backupMethod={backupMethod}
-        registeredMethods={registeredMethods}
-        onCompleteRegistration={toggle}
-        onRegister={onAddRegisteredMethod}
-        resources={resources}
-        endpoints={endpoints}
-        showTitle={false}
-        showSubTitle={false}
-        completeMessage={window.ss.i18n._t(
-          'MultiFactorAuthentication.ADMIN_SETUP_COMPLETE_CONTINUE',
-          fallbacks['MultiFactorAuthentication.ADMIN_SETUP_COMPLETE_CONTINUE']
-        )}
-      />)}
-    </ModalBody>
-  </Modal>
-);
+class RegisterModal extends Component {
+  componentDidUpdate() {
+    const { disallowedScreens, isOpen, registrationScreen, toggle } = this.props;
+
+    if (!isOpen || !disallowedScreens.length) {
+      return;
+    }
+
+    if (disallowedScreens.includes(registrationScreen)) {
+      toggle();
+    }
+  }
+
+  render() {
+    const {
+      backupMethod,
+      endpoints,
+      isOpen,
+      toggle,
+      onAddRegisteredMethod,
+      registeredMethods,
+      registrationScreen,
+      resources,
+      RegisterComponent
+    } = this.props;
+
+    return (
+      <Modal
+        isOpen={isOpen}
+        toggle={toggle}
+        className="registered-mfa-method-list-field-register-modal"
+      >
+        <ModalHeader toggle={toggle}><Title Tag={null} /></ModalHeader>
+        <ModalBody className="registered-mfa-method-list-field-register-modal__content">
+          {registrationScreen !== SCREEN_INTRODUCTION && (<RegisterComponent
+            backupMethod={backupMethod}
+            registeredMethods={registeredMethods}
+            onCompleteRegistration={toggle}
+            onRegister={onAddRegisteredMethod}
+            resources={resources}
+            endpoints={endpoints}
+            showTitle={false}
+            showSubTitle={false}
+            completeMessage={window.ss.i18n._t(
+              'MultiFactorAuthentication.ADMIN_SETUP_COMPLETE_CONTINUE',
+              fallbacks['MultiFactorAuthentication.ADMIN_SETUP_COMPLETE_CONTINUE']
+            )}
+          />)}
+        </ModalBody>
+      </Modal>
+    );
+  }
+}
 
 
 RegisterModal.propTypes = {
-  backupMethod: registeredMethodShape,
+  // Boolean for if the modal is open
   isOpen: PropTypes.bool,
+  // A function that is used to toggle the modal. This should affect the `isOpen` prop
   toggle: PropTypes.func,
+  // Screens of the RegisterComponent that should not show. If they are shown while the modal is
+  // open then the toggle function will be called
+  disallowedScreens: PropTypes.arrayOf(PropTypes.number),
+
+  // RegisterComponent props
+  backupMethod: registeredMethodShape,
   resources: PropTypes.object,
   endpoints: PropTypes.shape({
     register: PropTypes.string,
@@ -72,6 +97,7 @@ RegisterModal.propTypes = {
 
 RegisterModal.defaultProps = {
   isOpen: false,
+  disallowedScreens: [],
 };
 
 const mapStateToProps = state => ({