Merge pull request #323 from rgarmsen2295/mm-1554

MM-1554 Removes the delete icon for the first entry in the 'Invite New Members' form

web/react/components/invite_member_modal.jsx

@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 var utils = require('../utils/utils.jsx');
-var Client =require('../utils/client.jsx');
+var Client = require('../utils/client.jsx');
 var UserStore = require('../stores/user_store.jsx');
 var ConfirmModal = require('./confirm_modal.jsx');
 
@@ -15,20 +15,19 @@ module.exports = React.createClass({
                 return;
             }
 
-            var not_empty = false;
-            for (var i = 0; i < self.state.invite_ids.length; i++) {
-                var index = self.state.invite_ids[i];
-                if (self.refs["email"+index].getDOMNode().value.trim() !== '') {
-                    not_empty = true;
+            var notEmpty = false;
+            for (var i = 0; i < self.state.inviteIds.length; i++) {
+                var index = self.state.inviteIds[i];
+                if (self.refs['email' + index].getDOMNode().value.trim() !== '') {
+                    notEmpty = true;
                     break;
                 }
             }
 
-            if (not_empty) {
+            if (notEmpty) {
                 $('#confirm_invite_modal').modal('show');
                 e.preventDefault();
             }
-
         });
 
         $('#invite_member').on('hidden.bs.modal', function() {
@@ -36,52 +35,54 @@ module.exports = React.createClass({
         });
     },
     handleSubmit: function(e) {
-        var invite_ids = this.state.invite_ids;
-        var count = invite_ids.length;
+        var inviteIds = this.state.inviteIds;
+        var count = inviteIds.length;
         var invites = [];
-        var email_errors = this.state.email_errors;
-        var first_name_errors = this.state.first_name_errors;
-        var last_name_errors = this.state.last_name_errors;
+        var emailErrors = this.state.emailErrors;
+        var firstNameErrors = this.state.firstNameErrors;
+        var lastNameErrors = this.state.lastNameErrors;
         var valid = true;
 
         for (var i = 0; i < count; i++) {
-            var index = invite_ids[i];
+            var index = inviteIds[i];
             var invite = {};
-            invite.email = this.refs["email"+index].getDOMNode().value.trim();
+            invite.email = this.refs['email' + index].getDOMNode().value.trim();
             if (!invite.email || !utils.isEmail(invite.email)) {
-                email_errors[index] = "Please enter a valid email address";
+                emailErrors[index] = 'Please enter a valid email address';
                 valid = false;
             } else {
-                email_errors[index] = "";
+                emailErrors[index] = '';
             }
 
             if (config.AllowInviteNames) {
-                invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim();
-                if (!invite.first_name && config.RequireInviteNames) {
-                    first_name_errors[index] = "This is a required field";
+                invite.firstName = this.refs['first_name' + index].getDOMNode().value.trim();
+                if (!invite.firstName && config.RequireInviteNames) {
+                    firstNameErrors[index] = 'This is a required field';
                     valid = false;
                 } else {
-                    first_name_errors[index] = "";
+                    firstNameErrors[index] = '';
                 }
 
-                invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim();
-                if (!invite.last_name && config.RequireInviteNames) {
-                    last_name_errors[index] = "This is a required field";
+                invite.lastName = this.refs['last_name' + index].getDOMNode().value.trim();
+                if (!invite.lastName && config.RequireInviteNames) {
+                    lastNameErrors[index] = 'This is a required field';
                     valid = false;
                 } else {
-                    last_name_errors[index] = "";
+                    lastNameErrors[index] = '';
                 }
             }
 
             invites.push(invite);
         }
 
-        this.setState({ email_errors: email_errors, first_name_errors: first_name_errors, last_name_errors: last_name_errors });
+        this.setState({emailErrors: emailErrors, firstNameErrors: firstNameErrors, lastNameErrors: lastNameErrors});
 
-        if (!valid || invites.length === 0) return;
+        if (!valid || invites.length === 0) {
+            return;
+        }
 
-        var data = {}
-        data["invites"] = invites;
+        var data = {};
+        data.invites = invites;
 
         Client.inviteMembers(data,
             function() {
@@ -89,146 +90,177 @@ module.exports = React.createClass({
                 $(this.refs.modal.getDOMNode()).modal('hide');
             }.bind(this),
             function(err) {
-                if (err.message === "This person is already on your team") {
-                    email_errors[err.detailed_error] = err.message;
-                    this.setState({ email_errors: email_errors });
+                if (err.message === 'This person is already on your team') {
+                    emailErrors[err.detailed_error] = err.message;
+                    this.setState({emailErrors: emailErrors});
+                } else {
+                    this.setState({serverError: err.message});
                 }
-                else
-                    this.setState({ server_error: err.message});
             }.bind(this)
         );
-
     },
     componentDidUpdate: function() {
         $(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200);
         $(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll');
     },
     addInviteFields: function() {
-        var count = this.state.id_count + 1;
-        var invite_ids = this.state.invite_ids;
-        invite_ids.push(count);
-        this.setState({ invite_ids: invite_ids, id_count: count });
+        var count = this.state.idCount + 1;
+        var inviteIds = this.state.inviteIds;
+        inviteIds.push(count);
+        this.setState({inviteIds: inviteIds, idCount: count});
     },
     clearFields: function() {
-        var invite_ids = this.state.invite_ids;
+        var inviteIds = this.state.inviteIds;
 
-        for (var i = 0; i < invite_ids.length; i++) {
-            var index = invite_ids[i];
-            this.refs["email"+index].getDOMNode().value = "";
+        for (var i = 0; i < inviteIds.length; i++) {
+            var index = inviteIds[i];
+            this.refs['email' + index].getDOMNode().value = '';
             if (config.AllowInviteNames) {
-                this.refs["first_name"+index].getDOMNode().value = "";
-                this.refs["last_name"+index].getDOMNode().value = "";
+                this.refs['first_name' + index].getDOMNode().value = '';
+                this.refs['last_name' + index].getDOMNode().value = '';
             }
         }
 
         this.setState({
-            invite_ids: [0],
-            id_count: 0,
-            email_errors: {},
-            first_name_errors: {},
-            last_name_errors: {}
+            inviteIds: [0],
+            idCount: 0,
+            emailErrors: {},
+            firstNameErrors: {},
+            lastNameErrors: {}
         });
     },
     removeInviteFields: function(index) {
-        var count = this.state.id_count;
-        var invite_ids = this.state.invite_ids;
-        var i = invite_ids.indexOf(index);
-        if (i > -1) invite_ids.splice(i, 1);
-        if (!invite_ids.length) invite_ids.push(++count);
-        this.setState({ invite_ids: invite_ids, id_count: count });
+        var count = this.state.idCount;
+        var inviteIds = this.state.inviteIds;
+        var i = inviteIds.indexOf(index);
+        if (i > -1) {
+            inviteIds.splice(i, 1);
+        }
+        if (!inviteIds.length) {
+            inviteIds.push(++count);
+        }
+        this.setState({inviteIds: inviteIds, idCount: count});
     },
     getInitialState: function() {
         return {
-            invite_ids: [0],
-            id_count: 0,
-            email_errors: {},
-            first_name_errors: {},
-            last_name_errors: {}
+            inviteIds: [0],
+            idCount: 0,
+            emailErrors: {},
+            firstNameErrors: {},
+            lastNameErrors: {}
         };
     },
     render: function() {
-        var currentUser = UserStore.getCurrentUser()
+        var currentUser = UserStore.getCurrentUser();
 
         if (currentUser != null) {
-            var invite_sections = [];
-            var invite_ids = this.state.invite_ids;
-            var self = this;
-            for (var i = 0; i < invite_ids.length; i++) {
-                var index = invite_ids[i];
-                var email_error = this.state.email_errors[index] ? <label className='control-label'>{ this.state.email_errors[index] }</label> : null;
-                var first_name_error = this.state.first_name_errors[index] ? <label className='control-label'>{ this.state.first_name_errors[index] }</label> : null;
-                var last_name_error = this.state.last_name_errors[index] ? <label className='control-label'>{ this.state.last_name_errors[index] }</label> : null;
+            var inviteSections = [];
+            var inviteIds = this.state.inviteIds;
+            for (var i = 0; i < inviteIds.length; i++) {
+                var index = inviteIds[i];
+                var emailError = null;
+                if (this.state.emailErrors[index]) {
+                    emailError = <label className='control-label'>{this.state.emailErrors[index]}</label>;
+                }
+                var firstNameError = null;
+                if (this.state.firstNameErrors[index]) {
+                    firstNameError = <label className='control-label'>{this.state.firstNameErrors[index]}</label>;
+                }
+                var lastNameError = null;
+                if (this.state.lastNameErrors[index]) {
+                    lastNameError = <label className='control-label'>{this.state.lastNameErrors[index]}</label>;
+                }
 
-                invite_sections[index] = (
-                    <div key={"key" + index}>
-                    <div>
-                        <button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></button>
-                    </div>
-                    <div className={ email_error ? "form-group invite has-error" : "form-group invite" }>
-                        <input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" />
-                        { email_error }
-                    </div>
-                    <div className="row--invite">
-                    { config.AllowInviteNames ?
-                    <div className="col-sm-6">
-                        <div className={ first_name_error ? "form-group has-error" : "form-group" }>
-                            <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
-                            { first_name_error }
-                        </div>
-                    </div>
-                    : "" }
-                    { config.AllowInviteNames ?
-                    <div className="col-sm-6">
-                        <div className={ last_name_error ? "form-group has-error" : "form-group" }>
-                            <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
-                            { last_name_error }
-                        </div>
-                    </div>
-                    : "" }
+                var removeButton = null;
+                if (index) {
+                    removeButton = (<div>
+                                        <button type='button' className='btn btn-link remove__member' onClick={this.removeInviteFields.bind(this, index)}><span className='fa fa-trash'></span></button>
+                                    </div>);
+                }
+                var emailClass = 'form-group invite';
+                if (emailError) {
+                    emailClass += ' has-error';
+                }
+
+                var nameFields = null;
+                if (config.AllowInviteNames) {
+                    var firstNameClass = 'form-group';
+                    if (firstNameError) {
+                        firstNameClass += ' has-error';
+                    }
+                    var lastNameClass = 'form-group';
+                    if (lastNameError) {
+                        lastNameClass += ' has-error';
+                    }
+                    nameFields = (<div className='row--invite'>
+                                    <div className='col-sm-6'>
+                                        <div className={firstNameClass}>
+                                            <input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' />
+                                            {firstNameError}
+                                        </div>
+                                    </div>
+                                    <div className='col-sm-6'>
+                                        <div className={lastNameClass}>
+                                            <input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' />
+                                            {lastNameError}
+                                        </div>
+                                    </div>
+                                </div>);
+                }
+
+                inviteSections[index] = (
+                    <div key={'key' + index}>
+                    {removeButton}
+                    <div className={emailClass}>
+                        <input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' />
+                        {emailError}
                     </div>
+                    {nameFields}
                     </div>
                 );
             }
 
-            var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null;
+            var serverError = null;
+            if (this.state.serverError) {
+                serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+            }
 
             return (
                 <div>
-                    <div className="modal fade" ref="modal" id="invite_member" tabIndex="-1" role="dialog" aria-hidden="true">
-                       <div className="modal-dialog">
-                          <div className="modal-content">
-                            <div className="modal-header">
-                            <button type="button" className="close" data-dismiss="modal" aria-label="Close" data-reactid=".5.0.0.0.0"><span aria-hidden="true" data-reactid=".5.0.0.0.0.0">×</span></button>
-                              <h4 className="modal-title" id="myModalLabel">Invite New Member</h4>
+                    <div className='modal fade' ref='modal' id='invite_member' tabIndex='-1' role='dialog' aria-hidden='true'>
+                       <div className='modal-dialog'>
+                          <div className='modal-content'>
+                            <div className='modal-header'>
+                            <button type='button' className='close' data-dismiss='modal' aria-label='Close' data-reactid='.5.0.0.0.0'><span aria-hidden='true' data-reactid='.5.0.0.0.0.0'>×</span></button>
+                              <h4 className='modal-title' id='myModalLabel'>Invite New Member</h4>
                             </div>
-                            <div ref="modalBody" className="modal-body">
-                                <form role="form">
-                                    { invite_sections }
+                            <div ref='modalBody' className='modal-body'>
+                                <form role='form'>
+                                    {inviteSections}
                                 </form>
-                                { server_error }
-                                <button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button>
+                                {serverError}
+                                <button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button>
                                 <br/>
                                 <br/>
                                 <span>People invited automatically join Town Square channel.</span>
                             </div>
-                            <div className="modal-footer">
-                              <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
-                              <button onClick={this.handleSubmit} type="button" className="btn btn-primary">Send Invitations</button>
+                            <div className='modal-footer'>
+                              <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
+                              <button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button>
                             </div>
                           </div>
                        </div>
                     </div>
                     <ConfirmModal
-                        id="confirm_invite_modal"
-                        parent_id="invite_member"
-                        title="Discard Invitations?"
-                        message="You have unsent invitations, are you sure you want to discard them?"
-                        confirm_button="Yes, Discard"
+                        id='confirm_invite_modal'
+                        parent_id='invite_member'
+                        title='Discard Invitations?'
+                        message='You have unsent invitations, are you sure you want to discard them?'
+                        confirm_button='Yes, Discard/'
                     />
                 </div>
             );
-        } else {
-            return <div/>;
         }
+        return <div/>;
     }
 });