Merge pull request #1257 from weseek/adjust-admin-usrs

Adjust admin usrs

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

@@ -49,7 +49,7 @@ const GiveAdminButtonWrapper = (props) => {
 GiveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminUsersContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
 };

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

@@ -73,7 +73,7 @@ const RemoveAdminButtonWrapper = (props) => {
 RemoveAdminButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminUsersContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
 };

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

@@ -72,7 +72,7 @@ const StatusSuspendedFormWrapper = (props) => {
 StatusSuspendedButton.propTypes = {
   t: PropTypes.func.isRequired, // i18next
   appContainer: PropTypes.instanceOf(AppContainer).isRequired,
-  adminUsersContainer: PropTypes.instanceOf(AppContainer).isRequired,
+  adminUsersContainer: PropTypes.instanceOf(AdminUsersContainer).isRequired,
 
   user: PropTypes.object.isRequired,
 };

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

@@ -76,14 +76,12 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="mr-3 text-left" style={{ flex: 1 }}>
-          <input
-            type="checkbox"
-            defaultChecked={this.state.sendEmail}
-            onChange={this.handleCheckBox}
-          />
-          <span className="ml-2">{ t('user_management.invite_thru_email') }</span>
-        </label>
+        <div className="checkbox checkbox-success text-left" onChange={this.handleCheckBox} style={{ flex: 1 }}>
+          <input type="checkbox" id="sendEmail" className="form-check-input" name="sendEmail" defaultChecked={this.state.sendEmail} />
+          <label htmlFor="sendEmail">
+            { t('user_management.invite_thru_email') }
+          </label>
+        </div>
         <div>
           <Button bsStyle="danger" className="fcbtn btn btn-xs btn-danger btn-outline btn-rounded" onClick={this.onToggleModal}>
           Cancel
@@ -126,7 +124,7 @@ class UserInviteModal extends React.Component {
         {userList.map((user) => {
           const copyText = `Email:${user.email} Password:${user.password} `;
           return (
-            <CopyToClipboard text={copyText} onCopy={this.showToaster}>
+            <CopyToClipboard key={user.email} text={copyText} onCopy={this.showToaster}>
               <li key={user.email} className="btn">Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong></li>
             </CopyToClipboard>
           );
@@ -157,19 +155,16 @@ class UserInviteModal extends React.Component {
   }
 
   async handleSubmit() {
-    const { appContainer } = this.props;
+    const { adminUsersContainer } = this.props;
 
     const array = this.state.emailInputValue.split('\n');
     const emailList = array.filter((element) => { return element.match(/.+@.+\..+/) });
     const shapedEmailList = emailList.map((email) => { return email.trim() });
 
     try {
-      const response = await appContainer.apiv3.post('/users/invite', {
-        shapedEmailList,
-        sendEmail: this.state.sendEmail,
-      });
+      const emailList = await adminUsersContainer.createUserInvited(shapedEmailList, this.state.sendEmail);
       this.setState({ emailInputValue: '' });
-      this.setState({ invitedEmailList: response.data.emailList });
+      this.setState({ invitedEmailList: emailList });
       toastSuccess('Inviting user success');
     }
     catch (err) {

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

@@ -28,9 +28,55 @@ class UserMenu extends React.Component {
     this.props.adminUsersContainer.showPasswordResetModal(this.props.user);
   }
 
-  render() {
+  renderEditMenu() {
+    const { t } = this.props;
+
+    return (
+      <Fragment>
+        <li className="dropdown-header">{ t('user_management.edit_menu') }</li>
+        <li onClick={this.onPasswordResetClicked}>
+          <a>
+            <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
+          </a>
+        </li>
+      </Fragment>
+    );
+  }
+
+  renderStatusMenu() {
+    const { t, user } = this.props;
+
+    return (
+      <Fragment>
+        <li className="divider"></li>
+        <li className="dropdown-header">{ t('status') }</li>
+        <li>
+          {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
+          {user.status === 2 && <StatusSuspendedButton user={user} />}
+          {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserButton user={user} />}
+        </li>
+      </Fragment>
+    );
+  }
+
+  renderAdminMenu() {
     const { t, user } = this.props;
 
+    return (
+      <Fragment>
+        <li className="divider pl-0"></li>
+        <li className="dropdown-header">{ t('user_management.administrator_menu') }</li>
+        <li>
+          {user.admin === true && <RemoveAdminButton user={user} />}
+          {user.admin === false && <GiveAdminButton user={user} />}
+        </li>
+      </Fragment>
+    );
+  }
+
+  render() {
+    const { user } = this.props;
+
     return (
       <Fragment>
         <div className="btn-group admin-user-menu">
@@ -38,25 +84,9 @@ class UserMenu extends React.Component {
             <i className="icon-settings"></i> <span className="caret"></span>
           </button>
           <ul className="dropdown-menu" role="menu">
-            <li className="dropdown-header">{ t('user_management.edit_menu') }</li>
-            <li onClick={this.onPasswordResetClicked}>
-              <a>
-                <i className="icon-fw icon-key"></i>{ t('user_management.reset_password') }
-              </a>
-            </li>
-            <li className="divider"></li>
-            <li className="dropdown-header">{ t('status') }</li>
-            <li>
-              {(user.status === 1 || user.status === 3) && <StatusActivateButton user={user} />}
-              {user.status === 2 && <StatusSuspendedButton user={user} />}
-              {(user.status === 1 || user.status === 3 || user.status === 5) && <RemoveUserButton user={user} />}
-            </li>
-            <li className="divider pl-0"></li>
-            <li className="dropdown-header">{ t('user_management.administrator_menu') }</li>
-            <li>
-              {user.status === 2 && user.admin === true && <RemoveAdminButton user={user} />}
-              {user.status === 2 && user.admin === false && <GiveAdminButton user={user} />}
-            </li>
+            {this.renderEditMenu()}
+            {user.status !== 4 && this.renderStatusMenu()}
+            {user.status === 2 && this.renderAdminMenu()}
           </ul>
         </div>
       </Fragment>

src/client/js/services/AdminUsersContainer.js

@@ -61,6 +61,21 @@ export default class AdminUsersContainer extends Container {
 
   }
 
+  /**
+   * create user invited
+   * @memberOf AdminUsersContainer
+   * @param {object} shapedEmailList
+   * @param {bool} sendEmail
+   */
+  async createUserInvited(shapedEmailList, sendEmail) {
+    const response = await this.appContainer.apiv3.post('/users/invite', {
+      shapedEmailList,
+      sendEmail,
+    });
+    const { emailList } = response.data;
+    return emailList;
+  }
+
   /**
    * open reset password modal, and props user
    * @memberOf AdminUsersContainer