Merge pull request #3982 from weseek/feat/GW-6653-6664-mark-out

resource/locales/en_US/admin/admin.json

@@ -271,7 +271,8 @@
       "valid_email": "Valid email address is required",
       "temporary_password": "The created user has a temporary password",
       "send_new_password": "Please send the new password to the user.",
-      "send_temporary_password": "Be sure to copy the temporary password ON THIS SCREEN and send it to the user.",
+      "send_temporary_password": "If you have not sent an invitation email, copy the temporary password on this screen and contact the inviter.",
+      "send_email": "You can also send or resend the invitation email from the drop-down in the users table.",
       "existing_email": "The following emails already exist",
       "issue": "Issue"
     },

resource/locales/ja_JP/admin/admin.json

@@ -269,7 +269,8 @@
       "valid_email": "メールアドレスを入力してください。",
       "temporary_password": "作成したユーザーは仮パスワードが設定されています。",
       "send_new_password": "新規発行したパスワードを、対象ユーザーへ連絡してください。",
-      "send_temporary_password": "招待メールを送っていない場合、この画面で必ず仮パスワードをコピーし、招待者へ連絡してください。",
+      "send_temporary_password": "招待メールを送っていない場合、この画面で仮パスワードをコピーし、招待者へ連絡してください。",
+      "send_email": "ユーザーテーブルのドロップダウンから招待メールの送信または再送信を行うこともできます。",
       "existing_email": "以下のEmailはすでに存在しています。",
       "issue": "発行"
     },

resource/locales/zh_CN/admin/admin.json

@@ -279,7 +279,8 @@
 			"invite_thru_email": "发送邀请电子邮件",
 			"temporary_password": "创建的用户具有临时密码",
 			"send_new_password": "请将新密码发送给用户。",
-			"send_temporary_password": "请确保复制此屏幕上的临时密码并将其发送给用户。",
+			"send_temporary_password": "如果你没有发送电子邮件邀请，请复制此屏幕上的临时密码并联系邀请人。",
+      "send_email": "你也可以从用户表中的下拉菜单中发送或重新发送邀请邮件。",
 			"existing_email": "以下电子邮件已存在",
       "issue": "Issue"
 		},

src/client/js/components/Admin/Users/SendInvitationMailButton.jsx → src/client/js/components/Admin/Users/SendInvitationEmailButton.jsx

@@ -7,10 +7,12 @@ import AdminUsersContainer from '../../../services/AdminUsersContainer';
 import { withUnstatedContainers } from '../../UnstatedUtils';
 
 const SendInvitationEmailButton = (props) => {
-  const { appContainer, user } = props;
+  const {
+    appContainer, user, isInvitationEmailSended, onSuccessfullySentInvitationEmail,
+  } = props;
   const { t } = useTranslation();
 
-  const textColor = !user.isInvitationEmailSended ? 'text-danger' : '';
+  const textColor = !isInvitationEmailSended ? 'text-danger' : '';
 
   const onClickSendInvitationEmailButton = async() => {
     try {
@@ -19,6 +21,7 @@ const SendInvitationEmailButton = (props) => {
       if (failedToSendEmail == null) {
         const msg = `Email has been sent<br>・${user.email}`;
         toastSuccess(msg);
+        onSuccessfullySentInvitationEmail();
       }
       else {
         const msg = { message: `email: ${failedToSendEmail.email}<br>reason: ${failedToSendEmail.reason}` };
@@ -33,8 +36,8 @@ const SendInvitationEmailButton = (props) => {
   return (
     <button className={`dropdown-item ${textColor}`} type="button" onClick={() => { onClickSendInvitationEmailButton() }}>
       <i className="icon-fw icon-envelope"></i>
-      {user.isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
-      {!user.isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
+      {isInvitationEmailSended && (<>{t('admin:user_management.user_table.resend_invitation_email')}</>)}
+      {!isInvitationEmailSended && (<>{t('admin:user_management.user_table.send_invitation_email')}</>)}
     </button>
   );
 };
@@ -44,6 +47,8 @@ const SendInvitationEmailButtonWrapper = withUnstatedContainers(SendInvitationEm
 SendInvitationEmailButton.propTypes = {
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
   user: PropTypes.object.isRequired,
+  isInvitationEmailSended: PropTypes.bool.isRequired,
+  onSuccessfullySentInvitationEmail: PropTypes.func.isRequired,
 };
 
 export default SendInvitationEmailButtonWrapper;

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

@@ -9,7 +9,6 @@ import {
   Modal, ModalHeader, ModalBody, ModalFooter,
 } from 'reactstrap';
 
-import * as toastr from 'toastr';
 import { toastSuccess, toastError, toastWarning } from '../../../util/apiNotification';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
@@ -58,14 +57,7 @@ class UserInviteModal extends React.Component {
         toastWarning(msg);
         break;
       case 'error':
-        toastr.error(msg, 'Error', {
-          closeButton: true,
-          progressBar: true,
-          newestOnTop: false,
-          showDuration: '100',
-          hideDuration: '100',
-          timeOut: '0',
-        });
+        toastError({ message: msg });
         break;
     }
   }
@@ -160,8 +152,9 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="mr-3 text-left text-danger" style={{ flex: 1 }}>
-          {t('admin:user_management.invite_modal.send_temporary_password')}
+        <label className="mr-3 text-left" style={{ flex: 1 }}>
+          <text className="text-danger">{t('admin:user_management.invite_modal.send_temporary_password')}</text>
+          <text>{t('admin:user_management.invite_modal.send_email')}</text>
         </label>
         <button
           type="button"

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

@@ -10,7 +10,7 @@ import StatusSuspendedButton from './StatusSuspendedButton';
 import UserRemoveButton from './UserRemoveButton';
 import RemoveAdminButton from './RemoveAdminButton';
 import GiveAdminButton from './GiveAdminButton';
-import SendInvitationEmailButton from './SendInvitationMailButton';
+import SendInvitationEmailButton from './SendInvitationEmailButton';
 
 import { withUnstatedContainers } from '../../UnstatedUtils';
 import AppContainer from '../../../services/AppContainer';
@@ -22,16 +22,21 @@ class UserMenu extends React.Component {
     super(props);
 
     this.state = {
-
+      isInvitationEmailSended: this.props.user.isInvitationEmailSended,
     };
 
     this.onPasswordResetClicked = this.onPasswordResetClicked.bind(this);
+    this.onSuccessfullySentInvitationEmail = this.onSuccessfullySentInvitationEmail.bind(this);
   }
 
   onPasswordResetClicked() {
     this.props.adminUsersContainer.showPasswordResetModal(this.props.user);
   }
 
+  onSuccessfullySentInvitationEmail() {
+    this.setState({ isInvitationEmailSended: true });
+  }
+
   renderEditMenu() {
     const { t } = this.props;
 
@@ -50,6 +55,7 @@ class UserMenu extends React.Component {
 
   renderStatusMenu() {
     const { t, user } = this.props;
+    const { isInvitationEmailSended } = this.state;
 
     return (
       <Fragment>
@@ -58,7 +64,13 @@ class UserMenu extends React.Component {
         <li>
           {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
           {user.status === 2 && <StatusSuspendedButton user={user} />}
-          {user.status === 5 && <SendInvitationEmailButton user={user} />}
+          {user.status === 5 && (
+          <SendInvitationEmailButton
+            user={user}
+            isInvitationEmailSended={isInvitationEmailSended}
+            onSuccessfullySentInvitationEmail={this.onSuccessfullySentInvitationEmail}
+          />
+          )}
           {(user.status === 1 || user.status === 3 || user.status === 5) && <UserRemoveButton user={user} />}
         </li>
       </Fragment>
@@ -82,12 +94,13 @@ class UserMenu extends React.Component {
 
   render() {
     const { user } = this.props;
+    const { isInvitationEmailSended } = this.state;
 
     return (
       <UncontrolledDropdown id="userMenu" size="sm">
         <DropdownToggle caret color="secondary" outline>
           <i className="icon-settings" />
-          {(user.status === 5 && !user.isInvitationEmailSended) && <i className="fa fa-circle text-danger grw-usermenu-notification-icon" />}
+          {(user.status === 5 && !isInvitationEmailSended) && <i className="fa fa-circle text-danger grw-usermenu-notification-icon" />}
         </DropdownToggle>
         <DropdownMenu positionFixed>
           {this.renderEditMenu()}