diff options
Diffstat (limited to 'web/react/components/team_settings.jsx')
| -rw-r--r-- | web/react/components/team_settings.jsx | 245 |
1 files changed, 38 insertions, 207 deletions
diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx index 433ec9177..94d536651 100644 --- a/web/react/components/team_settings.jsx +++ b/web/react/components/team_settings.jsx @@ -1,231 +1,62 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. -var UserStore = require('../stores/user_store.jsx'); var TeamStore = require('../stores/team_store.jsx'); -var SettingItemMin = require('./setting_item_min.jsx'); -var SettingItemMax = require('./setting_item_max.jsx'); -var SettingPicture = require('./setting_picture.jsx'); -var SettingUpload = require('./setting_upload.jsx'); +var ImportTab = require('./team_import_tab.jsx'); +var FeatureTab = require('./team_feature_tab.jsx'); var utils = require('../utils/utils.jsx'); -var client = require('../utils/client.jsx'); -var AsyncClient = require('../utils/async_client.jsx'); -var Constants = require('../utils/constants.jsx'); - -var FeatureTab = React.createClass({ - submitValetFeature: function() { - data = {}; - data['allow_valet'] = this.state.allow_valet; - - client.updateValetFeature(data, - function(data) { - this.props.updateSection(""); - AsyncClient.getMyTeam(); - }.bind(this), - function(err) { - state = this.getInitialState(); - state.server_error = err; - this.setState(state); - }.bind(this) - ); +module.exports = React.createClass({ + displayName: 'Team Settings', + propTypes: { + activeTab: React.PropTypes.string.isRequired, + activeSection: React.PropTypes.string.isRequired, + updateSection: React.PropTypes.func.isRequired }, - handleValetRadio: function(val) { - this.setState({ allow_valet: val }); - this.refs.wrapper.getDOMNode().focus(); + componentDidMount: function() { + TeamStore.addChangeListener(this.onChange); }, - componentWillReceiveProps: function(newProps) { - var team = newProps.team; - - var allow_valet = "false"; - if (team && team.allow_valet) { - allow_valet = "true"; - } - - this.setState({ allow_valet: allow_valet }); + componentWillUnmount: function() { + TeamStore.removeChangeListener(this.onChange); }, - getInitialState: function() { - var team = this.props.team; - - var allow_valet = "false"; - if (team && team.allow_valet) { - allow_valet = "true"; + onChange: function() { + var team = TeamStore.getCurrent(); + if (!utils.areStatesEqual(this.state.team, team)) { + this.setState({team: team}); } - - return { allow_valet: allow_valet }; }, - render: function() { - var team = this.props.team; - - var client_error = this.state.client_error ? this.state.client_error : null; - var server_error = this.state.server_error ? this.state.server_error : null; - - var valetSection; - var self = this; - - if (this.props.activeSection === 'valet') { - var valetActive = ["",""]; - if (this.state.allow_valet === "false") { - valetActive[1] = "active"; - } else { - valetActive[0] = "active"; - } - - var inputs = []; - - inputs.push( - <div> - <div className="btn-group" data-toggle="buttons-radio"> - <button className={"btn btn-default "+valetActive[0]} onClick={function(){self.handleValetRadio("true")}}>On</button> - <button className={"btn btn-default "+valetActive[1]} onClick={function(){self.handleValetRadio("false")}}>Off</button> - </div> - <div><br/>Valet is a preview feature for enabling a non-user account limited to basic member permissions that can be manipulated by 3rd parties.<br/><br/>IMPORTANT: The preview version of Valet should not be used without a secure connection and a trusted 3rd party, since user credentials are used to connect. OAuth2 will be used in the final release.</div> - </div> - ); - - valetSection = ( - <SettingItemMax - title="Valet (Preview - EXPERTS ONLY)" - inputs={inputs} - submit={this.submitValetFeature} - server_error={server_error} - client_error={client_error} - updateSection={function(e){self.props.updateSection("");e.preventDefault();}} - /> - ); - } else { - var describe = ""; - if (this.state.allow_valet === "false") { - describe = "Off"; - } else { - describe = "On"; - } - - valetSection = ( - <SettingItemMin - title="Valet (Preview - EXPERTS ONLY)" - describe={describe} - updateSection={function(){self.props.updateSection("valet");}} - /> - ); - } - - return ( - <div> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title"><i className="modal-back"></i>Feature Settings</h4> - </div> - <div ref="wrapper" className="user-settings"> - <h3 className="tab-header">Feature Settings</h3> - <div className="divider-dark first"/> - {valetSection} - <div className="divider-dark"/> - </div> - </div> - ); - } -}); - -var ImportTab = React.createClass({ getInitialState: function() { - return {status: 'ready'}; - }, - onImportFailure: function() { - this.setState({status: 'fail'}); - }, - onImportSuccess: function(data) { - this.setState({status: 'done'}); - }, - doImportSlack: function(file) { - this.setState({status: 'in-progress'}); - utils.importSlack(file, this.onImportSuccess, this.onImportFailure); + return {team: TeamStore.getCurrent()}; }, render: function() { - - uploadSection = ( - <SettingUpload - title="Import from Slack" - submit={this.doImportSlack} - fileTypesAccepted='.zip'/> - ); - - var messageSection; - switch (this.state.status) { - case 'ready': - messageSection = ''; + var result; + switch (this.props.activeTab) { + case 'general': + result = ( + <div> + </div> + ); break; - case 'in-progress': - messageSection = ( - <p>Importing...</p> + case 'feature': + result = ( + <div> + <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> + </div> ); break; - case 'done': - messageSection = ( - <p>Import sucessfull: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p> + case 'import': + result = ( + <div> + <ImportTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> + </div> ); break; - case 'fail': - messageSection = ( - <p>Import failure: <a href={this.state.link} download='MattermostImportSummery.txt'>View Summery</a></p> + default: + result = ( + <div/> ); break; } - - return ( - <div> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title"><i className="modal-back"></i>Import</h4> - </div> - <div ref="wrapper" className="user-settings"> - <h3 className="tab-header">Import</h3> - <div className="divider-dark first"/> - {uploadSection} - {messageSection} - <div className="divider-dark"/> - </div> - </div> - ); - } -}); - -module.exports = React.createClass({ - componentDidMount: function() { - TeamStore.addChangeListener(this._onChange); - }, - componentWillUnmount: function() { - TeamStore.removeChangeListener(this._onChange); - }, - _onChange: function () { - var team = TeamStore.getCurrent(); - if (!utils.areStatesEqual(this.state.team, team)) { - this.setState({ team: team }); - } - }, - getInitialState: function() { - return { team: TeamStore.getCurrent() }; - }, - render: function() { - if (this.props.activeTab === 'general') { - return ( - <div> - </div> - ); - } else if (this.props.activeTab === 'feature') { - return ( - <div> - <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> - </div> - ); - } else if (this.props.activeTab === 'import') { - return ( - <div> - <ImportTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> - </div> - ); - } else { - return <div/>; - } + return result; } }); |