Merge pull request #7790 from weseek/imprv/122259-124062-footer-modal-design

imprv: After reset password footer modal design

apps/app/public/static/locales/ja_JP/commons.json

@@ -5,6 +5,9 @@
   "Reset": "リセット",
   "Sign out": "ログアウト",
   "New": "作成",
+  "Send": "送信",
+  "Close": "閉じる",
+  "Done": "完了",
   "meta": {
     "display_name": "日本語"
   },

apps/app/public/static/locales/zh_CN/commons.json

@@ -5,6 +5,9 @@
   "Reset": "重启",
 	"Sign out": "退出",
   "New": "新建",
+  "Send": "发送",
+  "Close": "关闭",
+  "Done": "完成",
 
   "meta": {
     "display_name": "简体中文"

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -18,8 +18,10 @@ class PasswordResetModal extends React.Component {
     super(props);
 
     this.state = {
-      temporaryPassword: [],
+      temporaryPassword: '',
       isPasswordResetDone: false,
+      isEmailSent: false,
+      isEmailSending: false,
       showTooltip: false,
     };
 
@@ -41,19 +43,42 @@ class PasswordResetModal extends React.Component {
 
   renderButtons() {
     const { t, isMailerSetup } = this.props;
+    const { isEmailSent, isEmailSending } = this.state;
 
     return (
       <>
-        <button type="submit" className="btn btn-primary" onClick={this.onClickSendNewPasswordButton} disabled={!isMailerSetup}>
-          {t('Send')}
+        <button type="submit" className={`btn ${isEmailSent ? 'btn-secondary' : 'btn-primary'}`}
+          onClick={this.onClickSendNewPasswordButton} disabled={!isMailerSetup || isEmailSending || isEmailSent}>
+          {isEmailSending && <i className='fa fa-spinner fa-pulse mx-2' />}
+          {!isEmailSending && (isEmailSent ? t('commons:Done') : t('commons:Send'))}
         </button>
         <button type="submit" className="btn btn-danger" onClick={this.props.onClose}>
-          {t('Close')}
+          {t('commons:Close')}
         </button>
       </>
     );
   }
 
+  renderAddress() {
+    const { t, isMailerSetup, userForPasswordResetModal } = this.props;
+
+    return (
+      <div className="d-flex col text-left ml-1 pl-0">
+        {!isMailerSetup ? (
+          <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
+        ) : (
+          <>
+            <p className="mr-2">To:</p>
+            <div>
+              <p className="mb-0">{userForPasswordResetModal.username}</p>
+              <p className="mb-0">{userForPasswordResetModal.email}</p>
+            </div>
+          </>
+        )}
+      </div>
+    );
+  }
+
   renderModalBodyBeforeReset() {
     const { t, userForPasswordResetModal } = this.props;
 
@@ -122,25 +147,9 @@ class PasswordResetModal extends React.Component {
   }
 
   returnModalFooterAfterReset() {
-    const { t, isMailerSetup, userForPasswordResetModal } = this.props;
-
-    if (!isMailerSetup) {
-      return (
-        <>
-          <div>
-            <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
-          </div>
-          {this.renderButtons()}
-        </>
-      );
-    }
     return (
       <>
-        <p className="mb-4 mt-1">To:</p>
-        <div className="mr-3">
-          <p className="mb-0">{userForPasswordResetModal.username}</p>
-          <p className="mb-0">{userForPasswordResetModal.email}</p>
-        </div>
+        {this.renderAddress()}
         {this.renderButtons()}
       </>
     );
@@ -152,13 +161,19 @@ class PasswordResetModal extends React.Component {
       userForPasswordResetModal,
     } = this.props;
 
+    this.setState({ isEmailSending: true });
 
     try {
       await apiv3Put('/users/reset-password-email', { id: userForPasswordResetModal._id, newPassword: this.state.temporaryPassword });
+      this.setState({ isEmailSent: true });
     }
     catch (err) {
+      this.setState({ isEmailSent: false });
       toastError(err);
     }
+    finally {
+      this.setState({ isEmailSending: false });
+    }
   }
 
 

apps/app/src/server/routes/apiv3/users.js

@@ -1021,6 +1021,7 @@ module.exports = (crowi) => {
       };
 
       await sendEmailByUser(userInfo);
+      return res.apiv3();
     }
     catch (err) {
       const msg = err.message;