summaryrefslogtreecommitdiffstats
path: root/web/react/components/team_settings.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/team_settings.jsx')
-rw-r--r--web/react/components/team_settings.jsx245
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">&times;</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">&times;</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;
}
});