// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import $ from 'jquery'; import Client from 'utils/web_client.jsx'; import * as AsyncClient from 'utils/async_client.jsx'; import * as Utils from 'utils/utils.jsx'; import {injectIntl, intlShape, defineMessages, FormattedMessage, FormattedHTMLMessage} from 'react-intl'; const holders = defineMessages({ siteNameExample: { id: 'admin.team.siteNameExample', defaultMessage: 'Ex "Mattermost"' }, maxUsersExample: { id: 'admin.team.maxUsersExample', defaultMessage: 'Ex "25"' }, restrictExample: { id: 'admin.team.restrictExample', defaultMessage: 'Ex "corp.mattermost.com, mattermost.org"' }, saving: { id: 'admin.team.saving', defaultMessage: 'Saving Config...' }, restrictDirectMessageAny: { id: 'admin.team.restrict_direct_message_any', defaultMessage: 'Any user on the Mattermost server' }, restrictDirectMessageTeam: { id: 'admin.team.restrict_direct_message_team', defaultMessage: 'Any member of the team' } }); import React from 'react'; const ENABLE_BRAND_ACTION = 'enable_brand_action'; const DISABLE_BRAND_ACTION = 'disable_brand_action'; class TeamSettings extends React.Component { constructor(props) { super(props); this.handleChange = this.handleChange.bind(this); this.handleSubmit = this.handleSubmit.bind(this); this.handleImageChange = this.handleImageChange.bind(this); this.handleImageSubmit = this.handleImageSubmit.bind(this); this.uploading = false; this.timestamp = 0; this.state = { saveNeeded: false, brandImageExists: false, enableCustomBrand: this.props.config.TeamSettings.EnableCustomBrand, restrictDirectMessage: this.props.config.TeamSettings.RestrictDirectMessage, serverError: null }; } componentWillMount() { if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.CustomBrand === 'true') { $.get(Client.getAdminRoute() + '/get_brand_image').done(() => this.setState({brandImageExists: true})); } } componentDidUpdate() { if (this.refs.image) { const reader = new FileReader(); const img = this.refs.image; reader.onload = (e) => { $(img).attr('src', e.target.result); }; reader.readAsDataURL(this.state.brandImage); } } handleChange(action) { var s = {saveNeeded: true}; if (action === ENABLE_BRAND_ACTION) { s.enableCustomBrand = true; } if (action === DISABLE_BRAND_ACTION) { s.enableCustomBrand = false; } this.setState(s); } handleImageChange() { const element = $(this.refs.fileInput); if (element.prop('files').length > 0) { this.setState({fileSelected: true, brandImage: element.prop('files')[0]}); } $('#upload-button').button('reset'); } handleSubmit(e) { e.preventDefault(); $('#save-button').button('loading'); var config = this.props.config; config.TeamSettings.SiteName = this.refs.SiteName.value.trim(); config.TeamSettings.RestrictCreationToDomains = this.refs.RestrictCreationToDomains.value.trim(); config.TeamSettings.EnableTeamCreation = this.refs.EnableTeamCreation.checked; config.TeamSettings.EnableUserCreation = this.refs.EnableUserCreation.checked; config.TeamSettings.EnableOpenServer = this.refs.EnableOpenServer.checked; config.TeamSettings.RestrictTeamNames = this.refs.RestrictTeamNames.checked; config.TeamSettings.RestrictDirectMessage = this.refs.RestrictDirectMessage.value.trim(); if (this.refs.EnableCustomBrand) { config.TeamSettings.EnableCustomBrand = this.refs.EnableCustomBrand.checked; } if (this.refs.CustomBrandText) { config.TeamSettings.CustomBrandText = this.refs.CustomBrandText.value; } var MaxUsersPerTeam = 50; if (!isNaN(parseInt(this.refs.MaxUsersPerTeam.value, 10))) { MaxUsersPerTeam = parseInt(this.refs.MaxUsersPerTeam.value, 10); } config.TeamSettings.MaxUsersPerTeam = MaxUsersPerTeam; this.refs.MaxUsersPerTeam.value = MaxUsersPerTeam; Client.saveConfig( config, () => { AsyncClient.getConfig(); this.setState({ serverError: null, saveNeeded: false }); $('#save-button').button('reset'); }, (err) => { this.setState({ serverError: err.message, saveNeeded: true }); $('#save-button').button('reset'); } ); } handleImageSubmit(e) { e.preventDefault(); if (!this.state.brandImage) { return; } if (this.uploading) { return; } $('#upload-button').button('loading'); this.uploading = true; Client.uploadBrandImage(this.state.brandImage, () => { $('#upload-button').button('complete'); this.timestamp = Utils.getTimestamp(); this.setState({brandImageExists: true, brandImage: null}); this.uploading = false; }, (err) => { $('#upload-button').button('reset'); this.uploading = false; this.setState({serverImageError: err.message}); } ); } createBrandSettings() { var btnClass = 'btn'; if (this.state.fileSelected) { btnClass = 'btn btn-primary'; } var serverImageError = ''; if (this.state.serverImageError) { serverImageError =
; } let uploadImage; let uploadText; if (this.state.enableCustomBrand) { let img; if (this.state.brandImage) { img = ( ); } else if (this.state.brandImageExists) { img = (

); } uploadImage = (
{img}

{serverImageError}

); uploadText = (

); } return (

{uploadImage} {uploadText}
); } render() { const {formatMessage} = this.props.intl; var serverError = ''; if (this.state.serverError) { serverError =
; } var saveClass = 'btn'; if (this.state.saveNeeded) { saveClass = 'btn btn-primary'; } let brand; if (global.window.mm_license.IsLicensed === 'true' && global.window.mm_license.CustomBrand === 'true') { brand = this.createBrandSettings(); } return (

{brand}
{serverError}
); } } TeamSettings.propTypes = { intl: intlShape.isRequired, config: React.PropTypes.object }; export default injectIntl(TeamSettings);