122639 hide new passsword

apps/app/public/static/locales/en_US/admin.json

@@ -759,7 +759,9 @@
       "target_user": "Target User",
       "new_password": "New Password",
       "send_password_email": "Send the password to user",
-      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>"
+      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "show_password": "Click to show password",
+      "hide_password": "hide"
     },
     "external_account": "External Account Management",
     "external_accounts":"External accounts",

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

@@ -767,7 +767,9 @@
       "target_user": "対象ユーザー",
       "new_password": "新しいパスワード",
       "send_password_email": "メールを送信する",
-      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>メールの設定</a>"
+      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>メールの設定</a>",
+      "show_password": "クリックしてパスワードを表示",
+      "hide_password": "非表示"
     },
     "external_account": "外部アカウントの管理",
     "external_accounts": "外部アカウント",

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

@@ -767,7 +767,9 @@
       "target_user": "Target User",
       "new_password": "New Password",
       "send_password_email": "Send the password to user",
-      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>"
+      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "show_password": "Click to show password",
+      "hide_password": "hide"
     },
     "external_account": "外部账户管理",
     "external_accounts": "外部账户",

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

@@ -3,7 +3,7 @@ import React from 'react';
 import { useTranslation } from 'next-i18next';
 import PropTypes from 'prop-types';
 import {
-  Modal, ModalHeader, ModalBody, ModalFooter,
+  Modal, ModalHeader, ModalBody, ModalFooter, Collapse,
 } from 'reactstrap';
 
 import { apiv3Put } from '~/client/util/apiv3-client';
@@ -21,25 +21,18 @@ class PasswordResetModal extends React.Component {
       isPasswordResetDone: false,
       sendEmail: false,
       isCreateUserButtonPushed: false,
+      collapse: false,
     };
 
     this.resetPassword = this.resetPassword.bind(this);
-    this.handleCheckBox = this.handleCheckBox.bind(this);
+    this.toggle = this.toggle.bind(this);
   }
 
   async resetPassword() {
     const { t, userForPasswordResetModal } = this.props;
     try {
       const res = await apiv3Put('/users/reset-password', { id: userForPasswordResetModal._id });
-      const { newPassword, failedToSendEmail } = res.data;
-      if (failedToSendEmail == null) {
-        const msg = `Email has been sent<br>・${userForPasswordResetModal.email}`;
-        toastSuccess(msg);
-      }
-      else {
-        const msg = { message: `email: ${failedToSendEmail.email}<br>reason: ${failedToSendEmail.reason}` };
-        toastError(msg);
-      }
+      const { newPassword } = res.data;
       this.setState({ temporaryPassword: newPassword, isPasswordResetDone: true });
     }
     catch (err) {
@@ -47,6 +40,10 @@ class PasswordResetModal extends React.Component {
     }
   }
 
+  toggle() {
+    this.setState({ collapse: !this.state.collapse });
+  }
+
   renderModalBodyBeforeReset() {
     const { t, userForPasswordResetModal } = this.props;
 
@@ -73,7 +70,17 @@ class PasswordResetModal extends React.Component {
           {t('user_management.reset_password_modal.target_user')}: <code>{userForPasswordResetModal.email}</code>
         </p>
         <p>
-          {t('user_management.reset_password_modal.new_password')}: <code>{this.state.temporaryPassword}</code>
+          {t('user_management.reset_password_modal.new_password')}:
+          <button className="btn btn-secondary mx-2 px-1 py-0" size="sm" onClick={this.toggle} aria-expanded="false">
+            {this.state.collapse ? t('user_management.reset_password_modal.hide_password') : t('user_management.reset_password_modal.show_password') }
+          </button>
+          {this.state.collapse && (
+            <Collapse isOpen={this.state.collapse}>
+              <code>
+                {this.state.temporaryPassword}
+              </code>
+            </Collapse>
+          )}
         </p>
       </>
     );
@@ -82,32 +89,9 @@ class PasswordResetModal extends React.Component {
   returnModalFooterBeforeReset() {
     const { t, isMailerSetup } = this.props;
     return (
-      <>
-        <div className="col text-left custom-control custom-checkbox custom-checkbox-info text-left" onChange={this.handleCheckBox}>
-          <input
-            type="checkbox"
-            id="sendEmail"
-            className="custom-control-input"
-            name="sendEmail"
-            defaultChecked={this.state.sendEmail}
-            disabled={!isMailerSetup}
-          />
-          <label className="custom-control-label" htmlFor="sendEmail">
-            {t('admin:user_management.reset_password_modal.send_password_email')}
-          </label>
-          {isMailerSetup
-            // eslint-disable-next-line react/no-danger
-            ? <p className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:user_management.reset_password_modal.mail_setting_link') }} />
-            // eslint-disable-next-line react/no-danger
-            : <p className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
-          }
-        </div>
-        <div>
-          <button type="submit" className="btn btn-danger" onClick={this.resetPassword}>
-            {t('user_management.reset_password')}
-          </button>
-        </div>
-      </>
+      <button type="submit" className="btn btn-danger" onClick={this.resetPassword}>
+        {t('user_management.reset_password')}
+      </button>
     );
   }