// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import SettingItemMin from './setting_item_min.jsx'; import SettingItemMax from './setting_item_max.jsx'; import * as Utils from 'utils/utils.jsx'; import Constants from 'utils/constants.jsx'; import {FormattedMessage} from 'react-intl'; import {updateTeam} from 'actions/team_actions.jsx'; import React from 'react'; class GeneralTab extends React.Component { constructor(props) { super(props); this.updateSection = this.updateSection.bind(this); this.handleNameSubmit = this.handleNameSubmit.bind(this); this.handleInviteIdSubmit = this.handleInviteIdSubmit.bind(this); this.handleOpenInviteSubmit = this.handleOpenInviteSubmit.bind(this); this.handleDescriptionSubmit = this.handleDescriptionSubmit.bind(this); this.handleClose = this.handleClose.bind(this); this.onUpdateNameSection = this.onUpdateNameSection.bind(this); this.updateName = this.updateName.bind(this); this.updateDescription = this.updateDescription.bind(this); this.onUpdateDescriptionSection = this.onUpdateDescriptionSection.bind(this); this.onUpdateInviteIdSection = this.onUpdateInviteIdSection.bind(this); this.updateInviteId = this.updateInviteId.bind(this); this.onUpdateOpenInviteSection = this.onUpdateOpenInviteSection.bind(this); this.handleOpenInviteRadio = this.handleOpenInviteRadio.bind(this); this.handleGenerateInviteId = this.handleGenerateInviteId.bind(this); this.state = this.setupInitialState(props); } updateSection(section) { if ($('.section-max').length) { $('.settings-modal .modal-body').scrollTop(0).perfectScrollbar('update'); } this.setState(this.setupInitialState(this.props)); this.props.updateSection(section); } setupInitialState(props) { const team = props.team; return { name: team.display_name, invite_id: team.invite_id, allow_open_invite: team.allow_open_invite, description: team.description, serverError: '', clientError: '' }; } componentWillReceiveProps(nextProps) { this.setState({ name: nextProps.team.display_name, description: nextProps.team.description, invite_id: nextProps.team.invite_id, allow_open_invite: nextProps.team.allow_open_invite }); } handleGenerateInviteId(e) { e.preventDefault(); var newId = ''; for (var i = 0; i < 32; i++) { newId += Math.floor(Math.random() * 16).toString(16); } this.setState({invite_id: newId}); } handleOpenInviteRadio(openInvite) { this.setState({allow_open_invite: openInvite}); } handleOpenInviteSubmit(e) { e.preventDefault(); var state = {serverError: '', clientError: ''}; var data = this.props.team; data.allow_open_invite = this.state.allow_open_invite; updateTeam(data, () => { this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } handleNameSubmit(e) { e.preventDefault(); var state = {serverError: '', clientError: ''}; let valid = true; const name = this.state.name.trim(); if (name) { state.clientError = ''; } else { state.clientError = Utils.localizeMessage('general_tab.required', 'This field is required'); valid = false; } this.setState(state); if (!valid) { return; } var data = this.props.team; data.display_name = this.state.name; updateTeam(data, () => { this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } handleInviteIdSubmit(e) { e.preventDefault(); var state = {serverError: '', clientError: ''}; let valid = true; const inviteId = this.state.invite_id.trim(); if (inviteId) { state.clientError = ''; } else { state.clientError = Utils.localizeMessage('general_tab.required', 'This field is required'); valid = false; } this.setState(state); if (!valid) { return; } var data = this.props.team; data.invite_id = this.state.invite_id; updateTeam(data, () => { this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } handleClose() { this.updateSection(''); } handleDescriptionSubmit(e) { e.preventDefault(); var state = {serverError: '', clientError: ''}; let valid = true; const description = this.state.description.trim(); if (description === this.props.team.description) { state.clientError = Utils.localizeMessage('general_tab.chooseDescription', 'Please choose a new description for your team'); valid = false; } else { state.clientError = ''; } this.setState(state); if (!valid) { return; } var data = this.props.team; data.description = this.state.description; updateTeam(data, () => { this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } componentDidMount() { $('#team_settings').on('hidden.bs.modal', this.handleClose); } componentWillUnmount() { $('#team_settings').off('hidden.bs.modal', this.handleClose); } onUpdateNameSection(e) { e.preventDefault(); if (this.props.activeSection === 'name') { this.updateSection(''); } else { this.updateSection('name'); } } onUpdateDescriptionSection(e) { e.preventDefault(); if (this.props.activeSection === 'description') { this.updateSection(''); } else { this.updateSection('description'); } } onUpdateInviteIdSection(e) { e.preventDefault(); if (this.props.activeSection === 'invite_id') { this.updateSection(''); } else { this.updateSection('invite_id'); } } onUpdateOpenInviteSection(e) { e.preventDefault(); if (this.props.activeSection === 'open_invite') { this.updateSection(''); } else { this.updateSection('open_invite'); } } updateName(e) { this.setState({name: e.target.value}); } updateDescription(e) { this.setState({description: e.target.value}); } updateInviteId(e) { this.setState({invite_id: e.target.value}); } render() { let clientError = null; let serverError = null; if (this.state.clientError) { clientError = this.state.clientError; } if (this.state.serverError) { serverError = this.state.serverError; } let openInviteSection; if (this.props.activeSection === 'open_invite') { const inputs = [



]; openInviteSection = ( ); } else { let describe = ''; if (this.state.allow_open_invite === true) { describe = Utils.localizeMessage('general_tab.yes', 'Yes'); } else { describe = Utils.localizeMessage('general_tab.no', 'No'); } openInviteSection = ( ); } let inviteSection; if (this.props.activeSection === 'invite_id') { const inputs = []; inputs.push(
) }} />
); inviteSection = ( ); } else { inviteSection = ( ); } let nameSection; if (this.props.activeSection === 'name') { const inputs = []; let teamNameLabel = ( ); if (Utils.isMobile()) { teamNameLabel = ''; } inputs.push(
); const nameExtraInfo = {Utils.localizeMessage('general_tab.teamNameInfo', 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.')}; nameSection = ( ); } else { var describe = this.state.name; nameSection = ( ); } let descriptionSection; if (this.props.activeSection === 'description') { const inputs = []; let teamDescriptionLabel = ( ); if (Utils.isMobile()) { teamDescriptionLabel = ''; } inputs.push(
); const descriptionExtraInfo = {Utils.localizeMessage('general_tab.teamDescriptionInfo', 'Team description provides additional information to help users select the right team. Maximum of 50 characters.')}; descriptionSection = ( ); } else { let describemsg = ''; if (this.state.description) { describemsg = this.state.description; } else { describemsg = ( ); } descriptionSection = ( ); } return (

{nameSection}
{descriptionSection}
{openInviteSection}
{inviteSection}
); } } GeneralTab.propTypes = { updateSection: React.PropTypes.func.isRequired, team: React.PropTypes.object.isRequired, activeSection: React.PropTypes.string.isRequired }; export default GeneralTab;