invite link in popup

frontend/src/components/dialog/invite-people-dialog.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {gettext} from '../../utils/constants';
 import {seafileAPI} from '../../utils/seafile-api';
 import {Modal, ModalHeader, ModalBody, ModalFooter, Input, Button} from 'reactstrap';
-import InvitationsToolbar from "../toolbar/invitations-toolbar";
+import toaster from "../toast";
 
 class InvitePeopleDialog extends React.Component {
 
@@ -29,50 +29,75 @@ class InvitePeopleDialog extends React.Component {
 
   handleKeyDown = (e) => {
     if (e.keyCode === 13) {
+      e.preventDefault();
       this.handleSubmitInvite();
     }
   }
 
   handleSubmitInvite = () => {
     let emails = this.state.emails.trim();
-    if (emails) {
-      seafileAPI.invitePeople(emails).then((res) => {
-
-        if (res.data.failed.length > 0) {
-          let inviteFailed = '';
-          for (let i = 0; i < res.data.failed.length; i++) {
-            inviteFailed += res.data.failed[i].error_msg
-          }
-          this.setState({
-            errorMsg: inviteFailed,
-          });
-          this.props.listInvitations();
-        } else {
-          this.setState({
-            emails: '',
-          });
-          this.props.onInvitePeople();
+    let emailsArray = [];
+    emails = emails.split(',');
+    for (let i = 0; i < emails.length; i++) {
+      let email = emails[i].trim();
+      if (email) {
+        emailsArray.push(email);
+      }
+    }
+    if (emailsArray.length) {
+      seafileAPI.invitePeople(emailsArray).then((res) => {
+        this.setState({
+          emails: '',
+        });
+        this.props.toggleInvitePeopleDialog();
+        // success messages
+        let successMsg = '';
+        if (res.data.success.length === 1) {
+          successMsg = gettext('Successfully invited %(email).')
+            .replace('%(email)', res.data.success[0].accepter);
+        } else if(res.data.success.length > 1) {
+          successMsg = gettext('Successfully invited %(email) and %(num) other people.')
+            .replace('%(email)', res.data.success[0].accepter)
+            .replace('%(num)', res.data.success.length - 1);
+        }
+        if (successMsg) {
+          toaster.success(successMsg, {duration: 2});
+          this.props.onInvitePeople(res.data.success);
+        }
+        // failed messages
+        if (res.data.failed.length) {
+          for (let i = 0; i< res.data.failed.length; i++){
+            let failedMsg = res.data.failed[i].email + ': ' + res.data.failed[i].error_msg;
+            toaster.danger(failedMsg, {duration: 3});}
         }
       }).catch((error) => {
-        let errorMsg = gettext(error.response.data.error_msg);
-        this.setState({
-          errorMsg: errorMsg,
-        });
+        this.props.toggleInvitePeopleDialog();
+        if (error.response){
+          toaster.danger(error.response.data.detail || gettext('Error'), {duration: 3});
+        } else {
+          toaster.danger(gettext('Please check the network.'), {duration: 3});
+        }
       });
     } else {
-      this.setState({
-        errorMsg: gettext('Email is required')
-      });
+      if (this.state.emails){
+        this.setState({
+          errorMsg: gettext('Email is invalid.')
+        });
+      } else {
+        this.setState({
+          errorMsg: gettext('It is required.')
+        });
+      }
     }
   }
 
   render() {
     return (
-      <Modal isOpen={this.props.showInvitationsModal} toggle={this.props.toggleInvitationsModal}>
-        <ModalHeader toggle={this.props.toggleInvitationsModal}>{gettext('Invite People')}</ModalHeader>
+      <Modal isOpen={this.props.isInvitePeopleDialogOpen} toggle={this.props.toggleInvitePeopleDialog}>
+        <ModalHeader toggle={this.props.toggleInvitePeopleDialog}>{gettext('Invite People')}</ModalHeader>
         <ModalBody>
-          <label htmlFor="emails">{gettext('Email')}</label>
-          <Input type="text" id="emails" placeholder="Emails, separated by ','"
+          <label htmlFor="emails">{gettext('Emails')}</label>
+          <Input type="text" id="emails" placeholder={gettext("Emails, separated by ','")}
                  value={this.state.emails}
                  onChange={this.handleEmailsChange}
                  onKeyDown={this.handleKeyDown}
@@ -80,7 +105,7 @@ class InvitePeopleDialog extends React.Component {
           <span className="error">{this.state.errorMsg}</span>
         </ModalBody>
         <ModalFooter>
-          <Button color="secondary" onClick={this.props.toggleInvitationsModal}>{gettext('Cancel')}</Button>
+          <Button color="secondary" onClick={this.props.toggleInvitePeopleDialog}>{gettext('Cancel')}</Button>
           <Button color="primary" onClick={this.handleSubmitInvite}>{gettext('Submit')}</Button>
         </ModalFooter>
       </Modal>
@@ -89,8 +114,8 @@ class InvitePeopleDialog extends React.Component {
 }
 
 const InvitePeopleDialogPropTypes = {
-  toggleInvitationsModal: PropTypes.func.isRequired,
-  showInvitationsModal: PropTypes.bool.isRequired,
+  toggleInvitePeopleDialog: PropTypes.func.isRequired,
+  isInvitePeopleDialogOpen: PropTypes.bool.isRequired,
   onInvitePeople: PropTypes.func.isRequired,
 };