// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. var utils = require('../utils/utils.jsx'); var ConfigStore = require('../stores/config_store.jsx'); var Client = require('../utils/client.jsx'); var UserStore = require('../stores/user_store.jsx'); var ConfirmModal = require('./confirm_modal.jsx'); import {config} from '../utils/config.js'; export default class InviteMemberModal extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.addInviteFields = this.addInviteFields.bind(this); this.clearFields = this.clearFields.bind(this); this.removeInviteFields = this.removeInviteFields.bind(this); this.state = { inviteIds: [0], idCount: 0, emailErrors: {}, firstNameErrors: {}, lastNameErrors: {}, emailEnabled: !ConfigStore.getSettingAsBoolean('ByPassEmail', false) }; } componentDidMount() { var self = this; $('#invite_member').on('hide.bs.modal', function hide(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 (React.findDOMNode(self.refs['email' + index]).value.trim() !== '') { notEmpty = true; break; } } if (notEmpty) { $('#confirm_invite_modal').modal('show'); e.preventDefault(); } }); $('#invite_member').on('hidden.bs.modal', function show() { self.clearFields(); }); } 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 = React.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] = ''; } if (config.AllowInviteNames) { invite.firstName = React.findDOMNode(this.refs['first_name' + index]).value.trim(); if (!invite.firstName && config.RequireInviteNames) { firstNameErrors[index] = 'This is a required field'; valid = false; } else { firstNameErrors[index] = ''; } invite.lastName = React.findDOMNode(this.refs['last_name' + index]).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 success() { $(React.findDOMNode(this.refs.modal)).attr('data-confirm', 'true'); $(React.findDOMNode(this.refs.modal)).modal('hide'); }.bind(this), function fail(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() { $(React.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 200); $(React.findDOMNode(this.refs.modalBody)).css('overflow-y', 'scroll'); } 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]; React.findDOMNode(this.refs['email' + index]).value = ''; if (config.AllowInviteNames) { React.findDOMNode(this.refs['first_name' + index]).value = ''; React.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; if (config.AllowInviteNames) { 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; if (this.state.emailEnabled) { content = (
{serverError}

People invited automatically join Town Square channel.
); sendButton = ( ); } else { var teamInviteLink = null; if (currentUser && this.props.teamType === 'O') { var linkUrl = utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id; var link = ( 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 (
); } return
; } } InviteMemberModal.propTypes = { teamType: React.PropTypes.string };