// 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 Client from 'utils/web_client.jsx'; import * as Utils from 'utils/utils.jsx'; import TeamStore from 'stores/team_store.jsx'; import {intlShape, injectIntl, defineMessages, FormattedMessage} from 'react-intl'; const holders = defineMessages({ dirDisabled: { id: 'general_tab.dirDisabled', defaultMessage: 'Team Directory has been disabled. Please ask a System Admin to enable the Team Directory in the System Console team settings.' }, required: { id: 'general_tab.required', defaultMessage: 'This field is required' }, chooseName: { id: 'general_tab.chooseName', defaultMessage: 'Please choose a new name for your team' }, includeDirTitle: { id: 'general_tab.includeDirTitle', defaultMessage: 'Include this team in the Team Directory' }, yes: { id: 'general_tab.yes', defaultMessage: 'Yes' }, no: { id: 'general_tab.no', defaultMessage: 'No' }, dirOff: { id: 'general_tab.dirOff', defaultMessage: 'Team directory is turned off for this system.' }, openInviteTitle: { id: 'general_tab.openInviteTitle', defaultMessage: 'Allow anyone to join this team' }, codeTitle: { id: 'general_tab.codeTitle', defaultMessage: 'Invite Code' }, codeDesc: { id: 'general_tab.codeDesc', defaultMessage: "Click 'Edit' to regenerate Invite Code." }, teamNameInfo: { id: 'general_tab.teamNameInfo', defaultMessage: 'Set the name of the team as it appears on your sign-in screen and at the top of the left-hand sidebar.' } }); 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.handleClose = this.handleClose.bind(this); this.onUpdateNameSection = this.onUpdateNameSection.bind(this); this.updateName = this.updateName.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) { $('.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, serverError: '', clientError: '' }; } componentWillReceiveProps(nextProps) { this.setState({ name: nextProps.team.display_name, 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; Client.updateTeam(data, (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } handleNameSubmit(e) { e.preventDefault(); var state = {serverError: '', clientError: ''}; let valid = true; const {formatMessage} = this.props.intl; const name = this.state.name.trim(); if (!name) { state.clientError = formatMessage(holders.required); valid = false; } else if (name === this.props.team.display_name) { state.clientError = formatMessage(holders.chooseName); valid = false; } else { state.clientError = ''; } this.setState(state); if (!valid) { return; } var data = this.props.team; data.display_name = this.state.name; Client.updateTeam(data, (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); 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 = this.props.intl.fromatMessage(holders.required); valid = false; } this.setState(state); if (!valid) { return; } var data = this.props.team; data.invite_id = this.state.invite_id; Client.updateTeam(data, (team) => { TeamStore.saveTeam(team); TeamStore.emitChange(); this.updateSection(''); }, (err) => { state.serverError = err.message; this.setState(state); } ); } handleClose() { this.updateSection(''); } 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'); } } 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) { e.preventDefault(); this.setState({name: e.target.value}); } updateInviteId(e) { e.preventDefault(); 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; } const {formatMessage} = this.props.intl; let openInviteSection; if (this.props.activeSection === 'open_invite') { const inputs = [



]; openInviteSection = ( ); } else { let describe = ''; if (this.state.allow_open_invite === true) { describe = formatMessage(holders.yes); } else { describe = formatMessage(holders.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 = {formatMessage(holders.teamNameInfo)}; nameSection = ( ); } else { var describe = this.state.name; nameSection = ( ); } return (

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