// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import ReactDOM from 'react-dom'; import * as utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; const ActionTypes = Constants.ActionTypes; import Client from 'utils/web_client.jsx'; import * as GlobalActions from 'action_creators/global_actions.jsx'; import ModalStore from 'stores/modal_store.jsx'; import UserStore from 'stores/user_store.jsx'; import ChannelStore from 'stores/channel_store.jsx'; import TeamStore from 'stores/team_store.jsx'; import ConfirmModal from './confirm_modal.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl'; import {Modal} from 'react-bootstrap'; const holders = defineMessages({ emailError: { id: 'invite_member.emailError', defaultMessage: 'Please enter a valid email address' }, firstname: { id: 'invite_member.firstname', defaultMessage: 'First name' }, lastname: { id: 'invite_member.lastname', defaultMessage: 'Last name' }, modalTitle: { id: 'invite_member.modalTitle', defaultMessage: 'Discard Invitations?' }, modalMessage: { id: 'invite_member.modalMessage', defaultMessage: 'You have unsent invitations, are you sure you want to discard them?' }, modalButton: { id: 'invite_member.modalButton', defaultMessage: 'Yes, Discard' } }); import React from 'react'; class InviteMemberModal extends React.Component { constructor(props) { super(props); this.teamChange = this.teamChange.bind(this); 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.showGetTeamInviteLinkModal = this.showGetTeamInviteLinkModal.bind(this); const team = TeamStore.getCurrent(); this.state = { show: false, inviteIds: [0], idCount: 0, emailErrors: {}, firstNameErrors: {}, lastNameErrors: {}, emailEnabled: global.window.mm_config.SendEmailNotifications === 'true', userCreationEnabled: global.window.mm_config.EnableUserCreation === 'true', showConfirmModal: false, isSendingEmails: false, teamType: team ? team.type : null }; } teamChange() { const team = TeamStore.getCurrent(); const teamType = team ? team.type : null; this.setState({ teamType }); } componentDidMount() { ModalStore.addModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); TeamStore.addChangeListener(this.teamChange); } componentWillUnmount() { ModalStore.removeModalListener(ActionTypes.TOGGLE_INVITE_MEMBER_MODAL, this.handleToggle); TeamStore.removeChangeListener(this.teamChange); } 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] = this.props.intl.formatMessage(holders.emailError); 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; this.setState({isSendingEmails: true}); Client.inviteMembers( data, () => { this.handleHide(false); this.setState({isSendingEmails: false}); }, (err) => { if (err.id === 'api.team.invite_members.already.app_error') { emailErrors[err.detailed_error] = err.message; this.setState({emailErrors: emailErrors}); } else { this.setState({serverError: err.message}); } this.setState({isSendingEmails: false}); } ); } 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 }); } 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}); } showGetTeamInviteLinkModal() { this.handleHide(false); GlobalActions.showGetTeamInviteLinkModal(); } render() { var currentUser = UserStore.getCurrentUser(); const {formatMessage} = this.props.intl; if (currentUser != null && this.state.teamType != 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 = (