Switch Modals

src/client/js/components/Admin/Users/PasswordResetModal.jsx

@@ -14,52 +14,56 @@ class PasswordResetModal extends React.Component {
 
     return (
       <div>
-        <Modal show={this.props.isOpenPasswordResetModal} onHide={this.props.onHideModal}>
-          <Modal.Header className="modal-header" closeButton>
-            <Modal.Title>
-              {t('user_management.reset_password')}
-            </Modal.Title>
-          </Modal.Header>
-          <Modal.Body>
-            <div>
-              <p>
-                { t('user_management.password_never_seen') }<br />
-                <span className="text-danger">{ t('user_management.send_new_password') }</span>
-              </p>
-              <p>
-                { t('user_management.target_user') }: <code>{ user.email }</code>
-              </p>
-              <div>
-                <button type="submit" className="btn btn-primary" onClick={this.props.isShowDoneModal && this.props.resetPassword}>
-                  { t('user_management.reset_password')}
-                </button>
-                <Modal show={this.props.isOpenPasswordResetDoneModal} onHide={this.props.onHideDoneModal && this.props.onHideModal}>
-                  <Modal.Header className="modal-header" closeButton>
-                    <Modal.Title>
-                      { t('user_management.reset_password') }
-                    </Modal.Title>
-                  </Modal.Header>
-                  <Modal.Body>
-                    <div>
-                      <p className="alert alert-danger">{ t('user_management.password_reset_message') }</p>
-                      <p>
-                        { t('user_management.target_user') }: <code>{ user.email }</code>
-                      </p>
-                      <p>
-                        { t('user_management.new_password') }: <code>{ this.props.temporaryPassword }</code>
-                      </p>
-                    </div>
-                  </Modal.Body>
-                  <Modal.Footer>
-                    <div>
-                      <button type="submit" className="btn btn-primary" onClick={this.props.onHideDoneModal && this.props.onHideModal}>OK</button>
-                    </div>
-                  </Modal.Footer>
-                </Modal>
-              </div>
-            </div>
-          </Modal.Body>
-        </Modal>
+        {this.props.isResetDone
+          ? (
+            <Modal show={this.props.isOpenPasswordResetDoneModal} onHide={this.props.onHideDoneModal}>
+              <Modal.Header className="modal-header" closeButton>
+                <Modal.Title>
+                  { t('user_management.reset_password') }
+                </Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <div>
+                  <p className="alert alert-danger">{ t('user_management.password_reset_message') }</p>
+                  <p>
+                    { t('user_management.target_user') }: <code>{ user.email }</code>
+                  </p>
+                  <p>
+                    { t('user_management.new_password') }: <code>{ this.props.temporaryPassword }</code>
+                  </p>
+                </div>
+              </Modal.Body>
+              <Modal.Footer>
+                <div>
+                  <button type="submit" className="btn btn-primary" onClick={this.props.onHideDoneModal}>OK</button>
+                </div>
+              </Modal.Footer>
+            </Modal>
+          )
+          : (
+            <Modal show={this.props.isOpenPasswordResetModal} onHide={this.props.onHideModal}>
+              <Modal.Header className="modal-header" closeButton>
+                <Modal.Title>
+                  {t('user_management.reset_password')}
+                </Modal.Title>
+              </Modal.Header>
+              <Modal.Body>
+                <div>
+                  <p>
+                    { t('user_management.password_never_seen') }<br />
+                    <span className="text-danger">{ t('user_management.send_new_password') }</span>
+                  </p>
+                  <p>
+                    { t('user_management.target_user') }: <code>{ user.email }</code>
+                  </p>
+                  <button type="submit" className="btn btn-primary" onClick={this.props.resetPassword}>
+                    { t('user_management.reset_password')}
+                  </button>
+                </div>
+              </Modal.Body>
+            </Modal>
+        )
+      }
       </div>
 
     );
@@ -79,14 +83,14 @@ PasswordResetModal.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
   user: PropTypes.object.isRequired,
-  isOpenPasswordResetModal: PropTypes.bool,
-  isOpenPasswordResetDoneModal: PropTypes.bool,
-  temporaryPassword: PropTypes.array,
-  isShow: PropTypes.func,
+  isOpenPasswordResetModal: PropTypes.bool.isRequired,
+  temporaryPassword: PropTypes.array.isRequired,
   onHideModal: PropTypes.func.isRequired,
   isShowDoneModal: PropTypes.func.isRequired,
+  isOpenPasswordResetDoneModal: PropTypes.bool.isRequired,
   onHideDoneModal: PropTypes.func.isRequired,
   resetPassword: PropTypes.func.isRequired,
+  isResetDone: PropTypes.bool,
 };
 
 export default withTranslation()(PasswordResetModalWrapper);

src/client/js/components/Admin/Users/UserMenu.jsx

@@ -20,13 +20,12 @@ class UserMenu extends React.Component {
 
     this.state = {
       isOpenPasswordResetModal: false,
-      isOpenPasswordResetDoneModal: false,
       temporaryPassword: [],
+      isResetDone: false,
     };
 
     this.isShow = this.isShow.bind(this);
     this.onHideModal = this.onHideModal.bind(this);
-    this.isShowDoneModal = this.isShowDoneModal.bind(this);
     this.onHideDoneModal = this.onHideDoneModal.bind(this);
     this.resetPassword = this.resetPassword.bind(this);
   }
@@ -39,10 +38,6 @@ class UserMenu extends React.Component {
     this.setState({ isOpenPasswordResetModal: false });
   }
 
-  isShowDoneModal() {
-    this.setState({ isOpenPasswordResetDoneModal: true });
-  }
-
   onHideDoneModal() {
     this.setState({ isOpenPasswordResetDoneModal: false });
   }
@@ -52,8 +47,7 @@ class UserMenu extends React.Component {
 
     const res = await appContainer.apiPost('/admin/users.resetPassword', { user_id: user._id });
     if (res.ok) {
-      this.setState({ temporaryPassword: res.newPassword });
-      this.setState({ isOpenPasswordResetDoneModal: true });
+      this.setState({ temporaryPassword: res.newPassword, isOpenPasswordResetDoneModal: true, isResetDone: true });
     }
     else {
       toastError('Failed to reset password');
@@ -65,26 +59,25 @@ class UserMenu extends React.Component {
 
     return (
       <Fragment>
+        <PasswordResetModal
+          user={this.props.user}
+          isOpenPasswordResetModal={this.state.isOpenPasswordResetModal}
+          isOpenPasswordResetDoneModal={this.state.isOpenPasswordResetDoneModal}
+          temporaryPassword={this.state.temporaryPassword}
+          onHideModal={this.onHideModal}
+          onHideDoneModal={this.onHideDoneModal}
+          resetPassword={this.resetPassword}
+          isResetDone={this.state.isResetDone}
+        />
         <div className="btn-group admin-user-menu">
           <button type="button" className="btn btn-sm btn-default dropdown-toggle" data-toggle="dropdown">
             <i className="icon-settings"></i> <span className="caret"></span>
           </button>
           <ul className="dropdown-menu" role="menu">
             <li className="dropdown-header">{ t('user_management.edit_menu') }</li>
-            <li>
-              <a onClick={this.isShow}>
+            <li onClick={this.isShow}>
+              <a>
                 <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
-                <PasswordResetModal
-                  user={this.props.user}
-                  isOpenPasswordResetModal={this.state.isOpenPasswordResetModal}
-                  isOpenPasswordResetDoneModal={this.state.isOpenPasswordResetDoneModal}
-                  temporaryPassword={this.state.temporaryPassword}
-                  isShow={this.isShow}
-                  onHideModal={this.onHideModal}
-                  isShowDoneModal={this.isShowDoneModal}
-                  onHideDoneModal={this.onHideDoneModal}
-                  resetPassword={this.resetPassword}
-                />
               </a>
             </li>
             <li className="divider"></li>