diff options
author | Corey Hulen <corey@hulen.com> | 2015-06-25 11:20:19 -0400 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-06-25 11:20:19 -0400 |
commit | 049a41f9beb3b55a4eb84d4730011b257aaf26b3 (patch) | |
tree | 7ea9f7eeaa753d8ceac1f955b6b9af061fe4d751 /web/react | |
parent | bfe8d13cd15d7e4ba7da76d3b202109d2a4b7847 (diff) | |
parent | 40b9fc5e398f8212feca10459b654230af872298 (diff) | |
download | chat-049a41f9beb3b55a4eb84d4730011b257aaf26b3.tar.gz chat-049a41f9beb3b55a4eb84d4730011b257aaf26b3.tar.bz2 chat-049a41f9beb3b55a4eb84d4730011b257aaf26b3.zip |
Merge pull request #27 from mattermost/mm-1240
fixes mm-1240 adds ability to turn valet feature on
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/channel_loader.jsx | 1 | ||||
-rw-r--r-- | web/react/components/settings_sidebar.jsx | 13 | ||||
-rw-r--r-- | web/react/components/sidebar_header.jsx | 3 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 2 | ||||
-rw-r--r-- | web/react/components/team_settings.jsx | 161 | ||||
-rw-r--r-- | web/react/components/team_settings_modal.jsx (renamed from web/react/components/settings_modal.jsx) | 14 | ||||
-rw-r--r-- | web/react/components/user_settings_modal.jsx | 68 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 15 | ||||
-rw-r--r-- | web/react/stores/team_store.jsx | 100 | ||||
-rw-r--r-- | web/react/utils/async_client.jsx | 22 | ||||
-rw-r--r-- | web/react/utils/client.jsx | 31 | ||||
-rw-r--r-- | web/react/utils/constants.jsx | 3 |
12 files changed, 416 insertions, 17 deletions
diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 5252f275c..537a41d03 100644 --- a/web/react/components/channel_loader.jsx +++ b/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 */ diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index a1546890f..ae8510cf2 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/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> - */ } }); diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 5a872b7a0..0b59d2036 100644 --- a/web/react/components/sidebar_header.jsx +++ b/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 } diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index d0c139d1a..c523ce554 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/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 } diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx new file mode 100644 index 000000000..0cec30f3e --- /dev/null +++ b/web/react/components/team_settings.jsx @@ -0,0 +1,161 @@ +// 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(); + }, + 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 }); + }, + 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">×</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/>; + } + } +}); diff --git a/web/react/components/settings_modal.jsx b/web/react/components/team_settings_modal.jsx index 57a869f93..08a952d2e 100644 --- a/web/react/components/settings_modal.jsx +++ b/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">×</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} diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx new file mode 100644 index 000000000..ff001611d --- /dev/null +++ b/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">×</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> + ); + } +}); + diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index df67d4360..3aa985863 100644 --- a/web/react/pages/channel.jsx +++ b/web/react/pages/channel.jsx @@ -22,7 +22,8 @@ var MoreChannelsModal = require('../components/more_channels.jsx'); var NewChannelModal = require('../components/new_channel.jsx'); var PostDeletedModal = require('../components/post_deleted_modal.jsx'); var ChannelNotificationsModal = require('../components/channel_notifications.jsx'); -var UserSettingsModal = require('../components/settings_modal.jsx'); +var UserSettingsModal = require('../components/user_settings_modal.jsx'); +var TeamSettingsModal = require('../components/team_settings_modal.jsx'); var ChannelMembersModal = require('../components/channel_members.jsx'); var ChannelInviteModal = require('../components/channel_invite_modal.jsx'); var TeamMembersModal = require('../components/team_members.jsx'); @@ -36,7 +37,7 @@ var ChannelInfoModal = require('../components/channel_info_modal.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -global.window.setup_channel_page = function(team_name, team_type, channel_name, channel_id) { +global.window.setup_channel_page = function(team_name, team_type, team_id, channel_name, channel_id) { AppDispatcher.handleViewAction({ type: ActionTypes.CLICK_CHANNEL, @@ -44,6 +45,11 @@ global.window.setup_channel_page = function(team_name, team_type, channel_name, id: channel_id }); + AppDispatcher.handleViewAction({ + type: ActionTypes.CLICK_TEAM, + id: team_id + }); + React.render( <ErrorBar/>, document.getElementById('error_bar') @@ -80,6 +86,11 @@ global.window.setup_channel_page = function(team_name, team_type, channel_name, ); React.render( + <TeamSettingsModal />, + document.getElementById('team_settings_modal') + ); + + React.render( <TeamMembersModal teamName={team_name} />, document.getElementById('team_members_modal') ); diff --git a/web/react/stores/team_store.jsx b/web/react/stores/team_store.jsx new file mode 100644 index 000000000..e95daeeba --- /dev/null +++ b/web/react/stores/team_store.jsx @@ -0,0 +1,100 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); +var EventEmitter = require('events').EventEmitter; +var assign = require('object-assign'); + +var Constants = require('../utils/constants.jsx'); +var ActionTypes = Constants.ActionTypes; + + +var CHANGE_EVENT = 'change'; + +var TeamStore = assign({}, EventEmitter.prototype, { + emitChange: function() { + this.emit(CHANGE_EVENT); + }, + addChangeListener: function(callback) { + this.on(CHANGE_EVENT, callback); + }, + removeChangeListener: function(callback) { + this.removeListener(CHANGE_EVENT, callback); + }, + get: function(id) { + var c = this._getTeams(); + return c[id]; + }, + getByName: function(name) { + var current = null; + var t = this._getTeams(); + + for (id in t) { + if (t[id].name == name) { + return t[id]; + } + } + + return null; + }, + getAll: function() { + return this._getTeams(); + }, + setCurrentId: function(id) { + if (id == null) + sessionStorage.removeItem("current_team_id"); + else + sessionStorage.setItem("current_team_id", id); + }, + getCurrentId: function() { + return sessionStorage.getItem("current_team_id"); + }, + getCurrent: function() { + var currentId = TeamStore.getCurrentId(); + + if (currentId != null) + return this.get(currentId); + else + return null; + }, + storeTeam: function(team) { + var teams = this._getTeams(); + teams[team.id] = team; + this._storeTeams(teams); + }, + _storeTeams: function(teams) { + sessionStorage.setItem("user_teams", JSON.stringify(teams)); + }, + _getTeams: function() { + var teams = {}; + + try { + teams = JSON.parse(sessionStorage.user_teams); + } + catch (err) { + } + + return teams; + } +}); + +TeamStore.dispatchToken = AppDispatcher.register(function(payload) { + var action = payload.action; + + switch(action.type) { + + case ActionTypes.CLICK_TEAM: + TeamStore.setCurrentId(action.id); + TeamStore.emitChange(); + break; + + case ActionTypes.RECIEVED_TEAM: + TeamStore.storeTeam(action.team); + TeamStore.emitChange(); + break; + + default: + } +}); + +module.exports = TeamStore; diff --git a/web/react/utils/async_client.jsx b/web/react/utils/async_client.jsx index fc8c23fd5..9383057c3 100644 --- a/web/react/utils/async_client.jsx +++ b/web/react/utils/async_client.jsx @@ -357,3 +357,25 @@ module.exports.getStatuses = function() { } ); } + +module.exports.getMyTeam = function() { + if (isCallInProgress("getMyTeam")) return; + + callTracker["getMyTeam"] = utils.getTimestamp(); + client.getMyTeam( + function(data, textStatus, xhr) { + callTracker["getMyTeam"] = 0; + + if (xhr.status === 304 || !data) return; + + AppDispatcher.handleServerAction({ + type: ActionTypes.RECIEVED_TEAM, + team: data + }); + }, + function(err) { + callTracker["getMyTeam"] = 0; + dispatchError(err, "getMyTeam"); + } + ); +} diff --git a/web/react/utils/client.jsx b/web/react/utils/client.jsx index 786e6dcea..15b6ace91 100644 --- a/web/react/utils/client.jsx +++ b/web/react/utils/client.jsx @@ -811,3 +811,34 @@ module.exports.getStatuses = function(success, error) { } }); }; + +module.exports.getMyTeam = function(success, error) { + $.ajax({ + url: "/api/v1/teams/me", + dataType: 'json', + type: 'GET', + success: success, + ifModified: true, + error: function(xhr, status, err) { + e = handleError("getMyTeam", xhr, status, err); + error(e); + } + }); +}; + +module.exports.updateValetFeature = function(data, success, error) { + $.ajax({ + url: "/api/v1/teams/update_valet_feature", + dataType: 'json', + contentType: 'application/json', + type: 'POST', + data: JSON.stringify(data), + success: success, + error: function(xhr, status, err) { + e = handleError("updateValetFeature", xhr, status, err); + error(e); + } + }); + + module.exports.track('api', 'api_teams_update_valet_feature'); +}; diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx index deb07409b..4a0d243e2 100644 --- a/web/react/utils/constants.jsx +++ b/web/react/utils/constants.jsx @@ -27,6 +27,9 @@ module.exports = { RECIEVED_STATUSES: null, RECIEVED_MSG: null, + + CLICK_TEAM: null, + RECIEVED_TEAM: null, }), PayloadSources: keyMirror({ |