// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. var utils = require('../utils/utils.jsx'); var ActionTypes = require('../utils/constants.jsx').ActionTypes; var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Client = require('../utils/client.jsx'); var ModalStore = require('../stores/modal_store.jsx'); var UserStore = require('../stores/user_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); var ConfirmModal = require('./confirm_modal.jsx'); const Modal = ReactBootstrap.Modal; export default class InviteMemberModal extends React.Component { constructor(props) { super(props); this.handleToggle = this.handleToggle.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleHide = this.handleHide.bind(this); this.addInviteFields = this.addInviteFields.bind(this); this.clearFields = this.clearFields.bind(this); this.removeInviteFields = this.removeInviteFields.bind(this); this.state = { show: false, inviteIds: [0], idCount: 0, emailErrors: {}, firstNameErrors: {}, lastNameErrors: {}, emailEnabled: global.window.mm_config.SendEmailNotifications === 'true', showConfirmModal: false }; } componentDidMount() { ModalStore.addModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); } componentWillUnmount() { ModalStore.removeModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); } handleToggle(value) { this.setState({ show: value }); } handleSubmit() { if (!this.state.emailEnabled) { return; } 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 = ReactDOM.findDOMNode(this.refs['email' + index]).value.trim(); if (!invite.email || !utils.isEmail(invite.email)) { emailErrors[index] = 'Please enter a valid email address'; valid = false; } else { emailErrors[index] = ''; } invite.firstName = ReactDOM.findDOMNode(this.refs['first_name' + index]).value.trim(); invite.lastName = ReactDOM.findDOMNode(this.refs['last_name' + index]).value.trim(); 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, () => { this.handleHide(false); }, (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}); } } ); } handleHide(requireConfirm) { if (requireConfirm) { var notEmpty = false; for (var i = 0; i < this.state.inviteIds.length; i++) { var index = this.state.inviteIds[i]; if (ReactDOM.findDOMNode(this.refs['email' + index]).value.trim() !== '') { notEmpty = true; break; } } if (notEmpty) { this.setState({ showConfirmModal: true }); return; } } this.clearFields(); this.setState({ show: false, showConfirmModal: false }); } componentDidUpdate(prevProps, prevState) { if (!prevState.show && this.state.show) { $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } } } addInviteFields() { var count = this.state.idCount + 1; var inviteIds = this.state.inviteIds; inviteIds.push(count); this.setState({inviteIds: inviteIds, idCount: count}); } clearFields() { var inviteIds = this.state.inviteIds; for (var i = 0; i < inviteIds.length; i++) { var index = inviteIds[i]; ReactDOM.findDOMNode(this.refs['email' + index]).value = ''; ReactDOM.findDOMNode(this.refs['first_name' + index]).value = ''; ReactDOM.findDOMNode(this.refs['last_name' + index]).value = ''; } this.setState({ inviteIds: [0], idCount: 0, emailErrors: {}, firstNameErrors: {}, lastNameErrors: {} }); } removeInviteFields(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}); } render() { 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 = ; } var firstNameError = null; if (this.state.firstNameErrors[index]) { firstNameError = ; } var lastNameError = null; if (this.state.lastNameErrors[index]) { lastNameError = ; } var removeButton = null; if (index) { removeButton = (
); } var emailClass = 'form-group invite'; if (emailError) { emailClass += ' has-error'; } var nameFields = null; var firstNameClass = 'form-group'; if (firstNameError) { firstNameClass += ' has-error'; } var lastNameClass = 'form-group'; if (lastNameError) { lastNameClass += ' has-error'; } nameFields = (
{firstNameError}
{lastNameError}
); inviteSections[index] = (
{removeButton}
{emailError}
{nameFields}
); } var serverError = null; if (this.state.serverError) { serverError =
; } var content = null; var sendButton = null; var sendButtonLabel = 'Send Invitation'; if (this.state.inviteIds.length > 1) { sendButtonLabel = 'Send Invitations'; } if (this.state.emailEnabled) { content = (
{serverError}

People invited automatically join Town Square channel.
); sendButton = ( ); } else { var teamInviteLink = null; if (currentUser && TeamStore.getCurrent().type === 'O') { var linkUrl = utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + TeamStore.getCurrent().invite_id; var link = ( this.handleHide(this, false)} >Team Invite Link ); teamInviteLink = (

You can also invite people using the {link}.

); } content = (

Email is currently disabled for your team, and email invitations cannot be sent. Contact your system administrator to enable email and email invitations.

{teamInviteLink}
); } return (
{'Invite New Member'}
{inviteSections}
{content}
{sendButton}
this.setState({showConfirmModal: false})} />
); } return null; } static show() { AppDispatcher.handleViewAction({ type: ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, value: true }); } } InviteMemberModal.propTypes = { };