Password Reset Modal With React Component

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

@@ -0,0 +1,86 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withTranslation } from 'react-i18next';
+
+import Modal from 'react-bootstrap/es/Modal';
+
+import { createSubscribedElement } from '../../UnstatedUtils';
+import AppContainer from '../../../services/AppContainer';
+
+class PasswordResetModal extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      isOpenModal: false,
+    };
+
+    this.isShow = this.isShow.bind(this);
+    this.onHide = this.onHide.bind(this);
+  }
+
+  isShow() {
+    this.setState({ isOpenModal: true });
+  }
+
+  onHide() {
+    this.setState({ isOpenModal: false });
+  }
+
+  render() {
+    const { t, user } = this.props;
+
+    return (
+      <div>
+        <div onClick={this.isShow}>
+          <i className="icon-fw icon-key"></i>
+          { t('user_management.reset_password') }
+        </div>
+        <Modal show={this.state.isOpenModal} onHide={this.onHide}>
+          <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" value="" className="btn btn-primary">
+                { t('user_management.reset_password')}
+              </button>
+            </div>
+          </Modal.Body>
+        </Modal>
+      </div>
+
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const PasswordResetModalWrapper = (props) => {
+  return createSubscribedElement(PasswordResetModal, props, [AppContainer]);
+};
+
+PasswordResetModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+};
+
+PasswordResetModal.defaultProps = {
+
+};
+
+export default withTranslation()(PasswordResetModalWrapper);

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

@@ -2,6 +2,8 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import PasswordResetModal from './PasswordResetModal';
+
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
 
@@ -125,14 +127,8 @@ class UserMenu extends React.Component {
           <ul className="dropdown-menu" role="menu">
             <li className="dropdown-header">{ t('user_management.edit_menu') }</li>
             <li>
-              <a
-                href="#"
-                data-user-id="{{ userId }}"
-                data-target="#admin-password-reset-modal"
-                data-toggle="modal"
-              >
-                <i className="icon-fw icon-key"></i>
-                { t('user_management.reset_password') }
+              <a>
+                <PasswordResetModal user={user} />
               </a>
             </li>
             <li className="divider"></li>
@@ -145,30 +141,7 @@ class UserMenu extends React.Component {
             <li>{adminMenu}</li>
           </ul>
         </div>
-        {/* password reset modal */}
-        <div className="modal fade" id="admin-password-reset-modal">
-          <div className="modal-dialog">
-            <div className="modal-content">
-              <div className="modal-header">
-                <button type="button" className="close" data-dismiss="modal" aria-hidden="true">&times;</button>
-                <div className="modal-title">{ t('user_management.reset_password')}</div>
-              </div>
 
-              <div className="modal-body">
-                <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" value="" className="btn btn-primary">
-                  { t('user_management.reset_password')}
-                </button>
-              </div>
-            </div>
-          </div>
-        </div>
         <div className="modal fade" id="admin-password-reset-modal-done">
           <div className="modal-dialog">
             <div className="modal-content">
@@ -207,7 +180,7 @@ UserMenu.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
 
-  user: PropTypes.array,
+  user: PropTypes.object.isRequired,
 };
 
 export default withTranslation()(UserMenuWrapper);