diff options
Diffstat (limited to 'webapp/components/admin_console/brand_image_setting.jsx')
| -rw-r--r-- | webapp/components/admin_console/brand_image_setting.jsx | 182 |
1 files changed, 182 insertions, 0 deletions
diff --git a/webapp/components/admin_console/brand_image_setting.jsx b/webapp/components/admin_console/brand_image_setting.jsx new file mode 100644 index 000000000..74f2290af --- /dev/null +++ b/webapp/components/admin_console/brand_image_setting.jsx @@ -0,0 +1,182 @@ +// Copyright (c) 2016 Mattermost, Inc. All Rights Reserved. +// See License.txt for license information. + +import $ from 'jquery'; +import React from 'react'; +import ReactDOM from 'react-dom'; + +import Client from 'utils/web_client.jsx'; +import * as Utils from 'utils/utils.jsx'; + +import FormError from 'components/form_error.jsx'; +import {FormattedHTMLMessage, FormattedMessage} from 'react-intl'; + +export default class BrandImageSetting extends React.Component { + static get propTypes() { + return { + disabled: React.PropTypes.bool.isRequired + }; + } + + constructor(props) { + super(props); + + this.handleImageChange = this.handleImageChange.bind(this); + this.handleImageSubmit = this.handleImageSubmit.bind(this); + + this.state = { + brandImage: null, + brandImageExists: false, + brandImageTimestamp: Date.now(), + uploading: false, + uploadCompleted: false, + error: '' + }; + } + + componentWillMount() { + $.get(Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp).done(() => { + this.setState({brandImageExists: true}); + }); + } + + handleImageChange() { + const element = $(this.refs.fileInput); + + if (element.prop('files').length > 0) { + this.setState({ + brandImage: element.prop('files')[0] + }); + } + } + + handleImageSubmit(e) { + e.preventDefault(); + + if (!this.state.brandImage) { + return; + } + + if (this.state.uploading) { + return; + } + + $(ReactDOM.findDOMNode(this.refs.upload)).button('loading'); + + this.setState({ + uploading: true, + error: '' + }); + + Client.uploadBrandImage( + this.state.brandImage, + () => { + $(ReactDOM.findDOMNode(this.refs.upload)).button('complete'); + + this.setState({ + brandImageExists: true, + brandImage: null, + brandImageTimestamp: Date.now(), + uploading: false + }); + }, + (err) => { + $(ReactDOM.findDOMNode(this.refs.upload)).button('reset'); + + this.setState({ + uploading: false, + error: err.message + }); + } + ); + } + + render() { + let btnClass = 'btn'; + if (this.state.brandImage) { + btnClass += ' btn-primary'; + } + + let img = null; + if (this.state.brandImage) { + img = ( + <img + ref='image' + className='brand-img' + src='' + /> + ); + } else if (this.state.brandImageExists) { + img = ( + <img + className='brand-img' + src={Client.getAdminRoute() + '/get_brand_image?t=' + this.state.brandImageTimestamp} + /> + ); + } else { + img = ( + <p> + <FormattedMessage + id='admin.team.noBrandImage' + defaultMessage='No brand image uploaded' + /> + </p> + ); + } + + return ( + <div className='form-group'> + <label className='control-label col-sm-4'> + <FormattedMessage + id='admin.team.brandImageTitle' + defaultMessage='Custom Brand Image:' + /> + </label> + <div className='col-sm-8'> + {img} + </div> + <div className='col-sm-4'/> + <div className='col-sm-8'> + <div className='file__upload'> + <button + className='btn btn-default' + disabled={this.props.disabled} + > + <FormattedMessage + id='admin.team.chooseImage' + defaultMessage='Choose New Image' + /> + </button> + <input + ref='fileInput' + type='file' + accept='.jpg,.png,.bmp' + onChange={this.handleImageChange} + /> + </div> + <button + className={btnClass} + disabled={this.props.disabled || !this.state.brandImage} + onClick={this.handleImageSubmit} + id='upload-button' + data-loading-text={'<span class=\'glyphicon glyphicon-refresh glyphicon-refresh-animate\'></span> ' + Utils.localizeMessage('admin.team.uploading', 'Uploading..')} + data-complete-text={'<span class=\'glyphicon glyphicon-ok\'></span> ' + Utils.localizeMessage('admin.team.uploaded', 'Uploaded!')} + > + <FormattedMessage + id='admin.team.upload' + defaultMessage='Upload' + /> + </button> + <br/> + <FormError error={this.state.error}/> + <p className='help-text no-margin'> + <FormattedHTMLMessage + id='admin.team.uploadDesc' + defaultMessage='Customize your user experience by adding a custom image to your login screen. See examples at <a href="http://docs.mattermost.com/administration/config-settings.html#custom-branding" target="_blank">docs.mattermost.com/administration/config-settings.html#custom-branding</a>.' + /> + </p> + </div> + </div> + ); + } +} |