switch body

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

@@ -15,7 +15,6 @@ class InviteUserControl extends React.Component {
     this.state = {
       isUserInviteModalShown: false,
       isConfirmPassWordModalShown: false,
-      invitedEmailList: null,
     };
 
     this.toggleUserInviteModal = this.toggleUserInviteModal.bind(this);

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

@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
 import Button from 'react-bootstrap/es/Button';
 import Modal from 'react-bootstrap/es/Modal';
 
@@ -18,6 +20,7 @@ class UserInviteModal extends React.Component {
     this.state = {
       emailInputValue: '',
       sendEmail: false,
+      invitedEmailList: null,
     };
 
     this.handleSubmit = this.handleSubmit.bind(this);
@@ -25,6 +28,38 @@ class UserInviteModal extends React.Component {
     this.handleCheckBox = this.handleCheckBox.bind(this);
   }
 
+  renderCreatedEmail(userList) {
+    return (
+      <ul>
+        {userList.map((user) => {
+          const copyText = `Email:${user.email} Password:${user.password} `;
+          return (
+            <CopyToClipboard 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>
+          );
+        })}
+      </ul>
+    );
+  }
+
+  renderExistingEmail(emailList) {
+    const { t } = this.props;
+
+    return (
+      <>
+        <p className="text-warning">{ t('user_management.existing_email') }</p>
+        <ul>
+          {emailList.map((user) => {
+            return (
+              <li key={user}><strong>{user}</strong></li>
+            );
+          })}
+        </ul>
+      </>
+    );
+  }
+
   validEmail() {
     return this.state.emailInputValue.match(/.+@.+\..+/) != null;
   }
@@ -42,8 +77,7 @@ class UserInviteModal extends React.Component {
         sendEmail: this.state.sendEmail,
       });
       this.setState({ emailInputValue: '' });
-      this.props.onToggleModal();
-      this.props.showConfirmPasswordModal(response.data.emailList);
+      this.setState({ invitedEmailList: response.data.emailList });
       toastSuccess('Inviting user success');
     }
     catch (err) {
@@ -61,6 +95,7 @@ class UserInviteModal extends React.Component {
 
   render() {
     const { t } = this.props;
+    const { invitedEmailList } = this.state;
 
     return (
       <Modal show={this.props.show} onHide={this.props.onToggleModal}>
@@ -70,15 +105,28 @@ class UserInviteModal extends React.Component {
           </Modal.Title>
         </Modal.Header>
         <Modal.Body>
-          <label> { t('user_management.emails') }</label>
-          <textarea
-            className="form-control"
-            placeholder="e.g. user@growi.org"
-            style={{ height: '200px' }}
-            value={this.state.emailInputValue}
-            onChange={this.handleInput}
-          />
-          {!this.validEmail() && <p className="m-2 text-danger">{ t('user_management.valid_email') }</p>}
+          {invitedEmailList == null ? (
+            <>
+              <label> { t('user_management.emails') }</label>
+              <textarea
+                className="form-control"
+                placeholder="e.g. user@growi.org"
+                style={{ height: '200px' }}
+                value={this.state.emailInputValue}
+                onChange={this.handleInput}
+              />
+              {!this.validEmail() && <p className="m-2 text-danger">{ t('user_management.valid_email') }</p>}
+            </>
+            ) : (
+              <>
+                <p>{t('user_management.temporary_password')}</p>
+                <p>{t('user_management.send_new_password')}</p>
+                <p className="text-danger">{t('user_management.send_temporary_password')}</p>
+                {invitedEmailList.createdUserList.length > 0 && this.renderCreatedEmail(invitedEmailList.createdUserList)}
+                {invitedEmailList.existingEmailList.length > 0 && this.renderExistingEmail(invitedEmailList.existingEmailList)}
+              </>
+            )
+          }
         </Modal.Body>
         <Modal.Footer className="d-flex">
           <label className="mr-3 text-left" style={{ flex: 1 }}>