diff options
Diffstat (limited to 'web/react/components/team_feature_tab.jsx')
-rw-r--r-- | web/react/components/team_feature_tab.jsx | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/web/react/components/team_feature_tab.jsx b/web/react/components/team_feature_tab.jsx new file mode 100644 index 000000000..ee0bfa874 --- /dev/null +++ b/web/react/components/team_feature_tab.jsx @@ -0,0 +1,147 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SettingItemMin = require('./setting_item_min.jsx'); +var SettingItemMax = require('./setting_item_max.jsx'); + +var client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); + +module.exports = React.createClass({ + displayName: 'Feature Tab', + propTypes: { + updateSection: React.PropTypes.func.isRequired, + team: React.PropTypes.object.isRequired, + activeSection: React.PropTypes.string.isRequired + }, + submitValetFeature: function() { + var data = {}; + data.allowValet = this.state.allowValet; + + client.updateValetFeature(data, + function() { + this.props.updateSection(''); + AsyncClient.getMyTeam(); + }.bind(this), + function(err) { + var state = this.getInitialState(); + state.serverError = err; + this.setState(state); + }.bind(this) + ); + }, + handleValetRadio: function(val) { + this.setState({allowValet: val}); + this.refs.wrapper.getDOMNode().focus(); + }, + componentWillReceiveProps: function(newProps) { + var team = newProps.team; + + var allowValet = 'false'; + if (team && team.allowValet) { + allowValet = 'true'; + } + + this.setState({allowValet: allowValet}); + }, + getInitialState: function() { + var team = this.props.team; + + var allowValet = 'false'; + if (team && team.allowValet) { + allowValet = 'true'; + } + + return {allowValet: allowValet}; + }, + onUpdateSection: function() { + if (this.props.activeSection === 'valet') { + self.props.updateSection('valet'); + } else { + self.props.updateSection(''); + } + }, + render: function() { + var clientError = null; + var serverError = null; + if (this.state.clientError) { + clientError = this.state.clientError; + } + if (this.state.serverError) { + serverError = this.state.serverError; + } + + var valetSection; + var self = this; + + if (this.props.activeSection === 'valet') { + var valetActive = ['', '']; + if (this.state.allowValet === 'false') { + valetActive[1] = 'active'; + } else { + valetActive[0] = 'active'; + } + + var inputs = []; + + function valetActivate() { + self.handleValetRadio('true'); + } + + function valetDeactivate() { + self.handleValetRadio('false'); + } + + inputs.push( + <div> + <div className='btn-group' data-toggle='buttons-radio'> + <button className={'btn btn-default ' + valetActive[0]} onClick={valetActivate}>On</button> + <button className={'btn btn-default ' + valetActive[1]} onClick={valetDeactivate}>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} + serverError={serverError} + clientError={clientError} + updateSection={this.onUpdateSection} + /> + ); + } else { + var describe = ''; + if (this.state.allowValet === 'false') { + describe = 'Off'; + } else { + describe = 'On'; + } + + valetSection = ( + <SettingItemMin + title='Valet (Preview - EXPERTS ONLY)' + describe={describe} + updateSection={this.onUpdateSection} + /> + ); + } + + 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> + ); + } +}); |