mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
267 lines
11 KiB
JavaScript
267 lines
11 KiB
JavaScript
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
|
||
// See License.txt for license information.
|
||
|
||
var utils = require('../utils/utils.jsx');
|
||
var Client = require('../utils/client.jsx');
|
||
var UserStore = require('../stores/user_store.jsx');
|
||
var ConfirmModal = require('./confirm_modal.jsx');
|
||
|
||
module.exports = React.createClass({
|
||
componentDidMount: function() {
|
||
var self = this;
|
||
$('#invite_member').on('hide.bs.modal', function(e) {
|
||
if ($('#invite_member').attr('data-confirm') === 'true') {
|
||
$('#invite_member').attr('data-confirm', 'false');
|
||
return;
|
||
}
|
||
|
||
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 (notEmpty) {
|
||
$('#confirm_invite_modal').modal('show');
|
||
e.preventDefault();
|
||
}
|
||
});
|
||
|
||
$('#invite_member').on('hidden.bs.modal', function() {
|
||
self.clearFields();
|
||
});
|
||
},
|
||
handleSubmit: function(e) {
|
||
var inviteIds = this.state.inviteIds;
|
||
var count = inviteIds.length;
|
||
var invites = [];
|
||
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 = inviteIds[i];
|
||
var invite = {};
|
||
invite.email = this.refs['email' + index].getDOMNode().value.trim();
|
||
if (!invite.email || !utils.isEmail(invite.email)) {
|
||
emailErrors[index] = 'Please enter a valid email address';
|
||
valid = false;
|
||
} else {
|
||
emailErrors[index] = '';
|
||
}
|
||
|
||
if (config.AllowInviteNames) {
|
||
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 {
|
||
firstNameErrors[index] = '';
|
||
}
|
||
|
||
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 {
|
||
lastNameErrors[index] = '';
|
||
}
|
||
}
|
||
|
||
invites.push(invite);
|
||
}
|
||
|
||
this.setState({emailErrors: emailErrors, firstNameErrors: firstNameErrors, lastNameErrors: lastNameErrors});
|
||
|
||
if (!valid || invites.length === 0) {
|
||
return;
|
||
}
|
||
|
||
var data = {};
|
||
data.invites = invites;
|
||
|
||
Client.inviteMembers(data,
|
||
function() {
|
||
$(this.refs.modal.getDOMNode()).attr('data-confirm', 'true');
|
||
$(this.refs.modal.getDOMNode()).modal('hide');
|
||
}.bind(this),
|
||
function(err) {
|
||
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});
|
||
}
|
||
}.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.idCount + 1;
|
||
var inviteIds = this.state.inviteIds;
|
||
inviteIds.push(count);
|
||
this.setState({inviteIds: inviteIds, idCount: count});
|
||
},
|
||
clearFields: function() {
|
||
var inviteIds = this.state.inviteIds;
|
||
|
||
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.setState({
|
||
inviteIds: [0],
|
||
idCount: 0,
|
||
emailErrors: {},
|
||
firstNameErrors: {},
|
||
lastNameErrors: {}
|
||
});
|
||
},
|
||
removeInviteFields: function(index) {
|
||
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 {
|
||
inviteIds: [0],
|
||
idCount: 0,
|
||
emailErrors: {},
|
||
firstNameErrors: {},
|
||
lastNameErrors: {}
|
||
};
|
||
},
|
||
render: function() {
|
||
var currentUser = UserStore.getCurrentUser();
|
||
|
||
if (currentUser != 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>;
|
||
}
|
||
|
||
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 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>
|
||
<div ref='modalBody' className='modal-body'>
|
||
<form role='form'>
|
||
{inviteSections}
|
||
</form>
|
||
{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>
|
||
</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/'
|
||
/>
|
||
</div>
|
||
);
|
||
}
|
||
return <div/>;
|
||
}
|
||
});
|