mirror of
https://github.com/mattermost/mattermost.git
synced 2025-02-25 18:55:24 -06:00
235 lines
10 KiB
JavaScript
235 lines
10 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 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;
|
||
break;
|
||
}
|
||
}
|
||
|
||
if (not_empty) {
|
||
$('#confirm_invite_modal').modal('show');
|
||
e.preventDefault();
|
||
}
|
||
|
||
});
|
||
|
||
$('#invite_member').on('hidden.bs.modal', function() {
|
||
self.clearFields();
|
||
});
|
||
},
|
||
handleSubmit: function(e) {
|
||
var invite_ids = this.state.invite_ids;
|
||
var count = invite_ids.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 valid = true;
|
||
|
||
for (var i = 0; i < count; i++) {
|
||
var index = invite_ids[i];
|
||
var invite = {};
|
||
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";
|
||
valid = false;
|
||
} else {
|
||
email_errors[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";
|
||
valid = false;
|
||
} else {
|
||
first_name_errors[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";
|
||
valid = false;
|
||
} else {
|
||
last_name_errors[index] = "";
|
||
}
|
||
}
|
||
|
||
invites.push(invite);
|
||
}
|
||
|
||
this.setState({ email_errors: email_errors, first_name_errors: first_name_errors, last_name_errors: last_name_errors });
|
||
|
||
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") {
|
||
email_errors[err.detailed_error] = err.message;
|
||
this.setState({ email_errors: email_errors });
|
||
}
|
||
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 });
|
||
},
|
||
clearFields: function() {
|
||
var invite_ids = this.state.invite_ids;
|
||
|
||
for (var i = 0; i < invite_ids.length; i++) {
|
||
var index = invite_ids[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({
|
||
invite_ids: [0],
|
||
id_count: 0,
|
||
email_errors: {},
|
||
first_name_errors: {},
|
||
last_name_errors: {}
|
||
});
|
||
},
|
||
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 });
|
||
},
|
||
getInitialState: function() {
|
||
return {
|
||
invite_ids: [0],
|
||
id_count: 0,
|
||
email_errors: {},
|
||
first_name_errors: {},
|
||
last_name_errors: {}
|
||
};
|
||
},
|
||
render: function() {
|
||
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;
|
||
|
||
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>
|
||
: "" }
|
||
</div>
|
||
</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;
|
||
|
||
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">
|
||
{ invite_sections }
|
||
</form>
|
||
{ server_error }
|
||
<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">Close</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>
|
||
);
|
||
} else {
|
||
return <div/>;
|
||
}
|
||
}
|
||
});
|