PasswordResetModal And DoneModal

resource/locales/en-US/translation.json

@@ -667,6 +667,7 @@
 
   "user_management": {
     "target_user": "Target User",
+    "new_password": "New Password",
     "invite_users": "Invite New Users",
     "emails": "Emails",
     "invite_thru_email": "Send Invitation Email",
@@ -686,6 +687,7 @@
     "unset": "No",
     "temporary_password": "The created user has a temporary password",
     "send_temporary_password": "Be sure to copy the temporary password ON THIS SCREEN and send it to the user.",
+    "password_reset_message": "Let the user know the new password below and strongly recommend to change another one immediately.",
     "send_new_password": "Please send the new password to the user.",
     "password_never_seen": "The temporary password can never be retrieved after this screen is closed.",
     "reset_password": "Reset Password",

resource/locales/ja/translation.json

@@ -650,6 +650,7 @@
 
   "user_management": {
     "target_user": "対象ユーザー",
+    "new_password": "新しいパスワード",
     "invite_users": "新規ユーザーの招待",
     "emails": "メールアドレス (複数行入力で複数人招待可能)",
     "invite_thru_email": "招待をメールで送信",
@@ -669,6 +670,7 @@
     "unset": "未設定",
     "temporary_password": "作成したユーザーは仮パスワードが設定されています。",
     "send_temporary_password": "招待メールを送っていない場合、この画面で必ず仮パスワードをコピーし、招待者へ連絡してください。",
+    "password_reset_message": "対象ユーザーに下記のパスワードを伝え、すぐに新しく別のパスワードを設定するよう伝えてください。",
     "send_new_password": "新規発行したパスワードを、対象ユーザーへ連絡してください。",
     "password_never_seen": "表示されたパスワードはこの画面を閉じると二度と表示できませんのでご注意ください。",
     "reset_password": "パスワードの再発行",

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

@@ -0,0 +1,83 @@
+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 PasswordResetDoneModal extends React.Component {
+
+  constructor() {
+    super();
+
+    this.state = {
+      isOpenThisModal: false,
+    };
+
+    this.isShow = this.isShow.bind(this);
+    this.onHideDoneModal = this.onHideDoneModal.bind(this);
+  }
+
+  isShow() {
+    this.setState({ isOpenThisModal: true });
+  }
+
+  onHideDoneModal() {
+    this.setState({ isOpenThisModal: false });
+  }
+
+  render() {
+    const { t, user, onHide } = this.props;
+
+    return (
+      <div>
+        <button type="submit" className="btn btn-primary" onClick={this.isShow}>
+          { t('user_management.reset_password')}
+        </button>
+        <Modal show={this.state.isOpenThisModal} onHide={this.onHideDoneModal && onHide}>
+          <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>newPassword</code>
+              </p>
+            </div>
+          </Modal.Body>
+          <Modal.Footer>
+            <div>
+              <button type="submit" className="btn btn-primary" onClick={this.onHideDoneModal && onHide}>OK</button>
+            </div>
+          </Modal.Footer>
+        </Modal>
+      </div>
+    );
+  }
+
+}
+
+/**
+ * Wrapper component for using unstated
+ */
+const PasswordResetDoneModalWrapper = (props) => {
+  return createSubscribedElement(PasswordResetDoneModal, props, [AppContainer]);
+};
+
+PasswordResetDoneModal.propTypes = {
+  t: PropTypes.func.isRequired, // i18next
+  appContainer: PropTypes.instanceOf(AppContainer).isRequired,
+
+  user: PropTypes.object.isRequired,
+  onHide: PropTypes.func.isRequired,
+};
+
+export default withTranslation()(PasswordResetDoneModalWrapper);

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

@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
 import Modal from 'react-bootstrap/es/Modal';
+import PasswordResetDoneModal from './PasswordResetDoneModal';
 
 import { createSubscribedElement } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
@@ -52,9 +53,10 @@ class PasswordResetModal extends React.Component {
               <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>
+              <PasswordResetDoneModal
+                user={user}
+                onHide={this.onHide}
+              />
             </div>
           </Modal.Body>
         </Modal>
@@ -79,8 +81,4 @@ PasswordResetModal.propTypes = {
   user: PropTypes.object.isRequired,
 };
 
-PasswordResetModal.defaultProps = {
-
-};
-
 export default withTranslation()(PasswordResetModalWrapper);

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

@@ -141,31 +141,6 @@ class UserMenu extends React.Component {
             <li>{adminMenu}</li>
           </ul>
         </div>
-
-        <div className="modal fade" id="admin-password-reset-modal-done">
-          <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 className="alert alert-danger">Let the user know the new password below and strongly recommend to change another one immediately. </p>
-                <p>
-                Reset user: <code id="admin-password-reset-done-user"></code>
-                </p>
-                <p>
-                New password: <code id="admin-password-reset-done-password"></code>
-                </p>
-              </div>
-              <div className="modal-footer">
-                <button type="submit" className="btn btn-primary" data-dismiss="modal">OK</button>
-              </div>
-            </div>
-          </div>
-        </div>
       </Fragment>
     );
   }