added team store, team settings menu, and the ability to turn on valet feature from client

web/react/components/channel_loader.jsx

@@ -18,6 +18,7 @@ module.exports = React.createClass({
         AsyncClient.getChannelExtraInfo(true);
         AsyncClient.findTeams();
         AsyncClient.getStatuses();
+        AsyncClient.getMyTeam();
         /* End of async loads */
 
 

web/react/components/settings_sidebar.jsx

@@ -1,6 +1,8 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
+var utils = require('../utils/utils.jsx');
+
 module.exports = React.createClass({
     updateTab: function(tab) {
         this.props.updateTab(tab);
@@ -11,16 +13,11 @@ module.exports = React.createClass({
         return (
             <div className="">
                 <ul className="nav nav-pills nav-stacked">
-                    <li className={this.props.activeTab == 'general' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("general");}}><i className="glyphicon glyphicon-cog"></i>General</a></li>
-                    <li className={this.props.activeTab == 'security' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("security");}}><i className="glyphicon glyphicon-lock"></i>Security</a></li>
-                    <li className={this.props.activeTab == 'notifications' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("notifications");}}><i className="glyphicon glyphicon-exclamation-sign"></i>Notifications</a></li>
-                    <li className={this.props.activeTab == 'appearance' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("appearance");}}><i className="glyphicon glyphicon-wrench"></i>Appearance</a></li>
+                    {this.props.tabs.map(function(tab) {
+                        return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li>
+                    })}
                 </ul>
             </div>
         );
-        /* Temporarily removing sessions and activity logs
-                    <li className={this.props.activeTab == 'sessions' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("sessions");}}><i className="glyphicon glyphicon-globe"></i>Sessions</a></li>
-                    <li className={this.props.activeTab == 'activity_log' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("activity_log");}}><i className="glyphicon glyphicon-time"></i>Activity Log</a></li>
-        */
     }
 });

web/react/components/sidebar_header.jsx

@@ -94,7 +94,8 @@ var NavbarDropdown = React.createClass({
                         <i className="dropdown__icon"></i>
                     </a>
                     <ul className="dropdown-menu" role="menu">
-                        <li><a href="#" data-toggle="modal" data-target="#settings_modal">Account Settings</a></li>
+                        <li><a href="#" data-toggle="modal" data-target="#user_settings1">Account Settings</a></li>
+                        { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings">Team Settings</a></li> : "" }
                         { invite_link }
                         { team_link }
                         { manage_link }

web/react/components/sidebar_right_menu.jsx

@@ -59,7 +59,7 @@ module.exports = React.createClass({
 
                 <div className="nav-pills__container">
                     <ul className="nav nav-pills nav-stacked">
-                        <li><a href="#" data-toggle="modal" data-target="#settings_modal"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
+                        <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li>
                         { invite_link }
                         { team_link }
                         { manage_link }

web/react/components/team_settings.jsx

@@ -0,0 +1,151 @@
+// 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 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)
+        );
+    },
+    handleValetRadio: function(val) {
+        this.setState({ allow_valet: val });
+        this.refs.wrapper.getDOMNode().focus();
+    },
+    getInitialState: function() {
+        var team = this.props.team;
+
+        var allow_valet = "false";
+        if (team && team.allow_valet) {
+            allow_valet = "true";
+        }
+
+        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 className="col-sm-12">
+                    <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/>Warning: Turning on the Valet feature and using it with any third party software increases the risk of a security breach.</div>
+                </div>
+            );
+
+            valetSection = (
+                <SettingItemMax
+                    title="Valet"
+                    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"
+                    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>General 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>
+        );
+    }
+});
+
+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 {
+            return <div/>;
+        }
+    }
+});

web/react/components/team_settings_modal.jsx

@@ -2,7 +2,7 @@
 // See License.txt for license information.
 
 var SettingsSidebar = require('./settings_sidebar.jsx');
-var UserSettings = require('./user_settings.jsx');
+var TeamSettings = require('./team_settings.jsx');
 
 module.exports = React.createClass({
     componentDidMount: function() {
@@ -22,27 +22,31 @@ module.exports = React.createClass({
         this.setState({ active_section: section });
     },
     getInitialState: function() {
-        return { active_tab: "general", active_section: "" };
+        return { active_tab: "feature", active_section: "" };
     },
     render: function() {
+        var tabs = [];
+        tabs.push({name: "feature", ui_name: "Features", icon: "glyphicon glyphicon-wrench"});
+
         return (
-            <div className="modal fade" ref="modal" id="settings_modal" role="dialog" aria-hidden="true">
+            <div className="modal fade" ref="modal" id="team_settings" role="dialog" aria-hidden="true">
               <div className="modal-dialog settings-modal">
                 <div className="modal-content">
                   <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">Account Settings</h4>
+                    <h4 className="modal-title" ref="title">Team Settings</h4>
                   </div>
                   <div className="modal-body">
                     <div className="settings-table">
                         <div className="settings-links">
                             <SettingsSidebar
+                                tabs={tabs}
                                 activeTab={this.state.active_tab}
                                 updateTab={this.updateTab}
                             />
                         </div>
                         <div className="settings-content">
-                            <UserSettings
+                            <TeamSettings
                                 activeTab={this.state.active_tab}
                                 activeSection={this.state.active_section}
                                 updateSection={this.updateSection}

web/react/components/user_settings_modal.jsx

@@ -0,0 +1,68 @@
+// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
+// See License.txt for license information.
+
+var SettingsSidebar = require('./settings_sidebar.jsx');
+var UserSettings = require('./user_settings.jsx');
+
+module.exports = React.createClass({
+    componentDidMount: function() {
+        $('body').on('click', '.modal-back', function(){
+            $(this).closest('.modal-dialog').removeClass('display--content');
+        });
+        $('body').on('click', '.modal-header .close', function(){
+            setTimeout(function() {
+                $('.modal-dialog.display--content').removeClass('display--content');
+            }, 500);
+        });
+    },
+    updateTab: function(tab) {
+        this.setState({ active_tab: tab });
+    },
+    updateSection: function(section) {
+        this.setState({ active_section: section });
+    },
+    getInitialState: function() {
+        return { active_tab: "general", active_section: "" };
+    },
+    render: function() {
+        var tabs = [];
+        tabs.push({name: "general", ui_name: "General", icon: "glyphicon glyphicon-cog"});
+        tabs.push({name: "security", ui_name: "Security", icon: "glyphicon glyphicon-lock"});
+        tabs.push({name: "notifications", ui_name: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"});
+        tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"});
+        //tabs.push({name: "sessions", ui_name: "Sessions", icon: "glyphicon glyphicon-globe"});
+        //tabs.push({name: "activity_log", ui_name: "Activity Log", icon: "glyphicon glyphicon-time"});
+
+        return (
+            <div className="modal fade" ref="modal" id="user_settings1" role="dialog" aria-hidden="true">
+              <div className="modal-dialog settings-modal">
+                <div className="modal-content">
+                  <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">Account Settings</h4>
+                  </div>
+                  <div className="modal-body">
+                    <div className="settings-table">
+                        <div className="settings-links">
+                            <SettingsSidebar
+                                tabs={tabs}
+                                activeTab={this.state.active_tab}
+                                updateTab={this.updateTab}
+                            />
+                        </div>
+                        <div className="settings-content">
+                            <UserSettings
+                                activeTab={this.state.active_tab}
+                                activeSection={this.state.active_section}
+                                updateSection={this.updateSection}
+                            />
+                        </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+        );
+    }
+});
+