diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/access_history_modal.jsx | 57 | ||||
-rw-r--r-- | web/react/components/activity_log_modal.jsx | 113 | ||||
-rw-r--r-- | web/react/components/sidebar_header.jsx | 2 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 2 | ||||
-rw-r--r-- | web/react/components/user_settings.jsx | 31 | ||||
-rw-r--r-- | web/react/components/user_settings_modal.jsx | 3 |
6 files changed, 115 insertions, 93 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx index 16768a119..a19e5c16e 100644 --- a/web/react/components/access_history_modal.jsx +++ b/web/react/components/access_history_modal.jsx @@ -13,21 +13,23 @@ function getStateFromStoresForAudits() { } module.exports = React.createClass({ + displayName: 'AccessHistoryModal', componentDidMount: function() { - UserStore.addAuditsChangeListener(this._onChange); - $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) { + UserStore.addAuditsChangeListener(this.onListenerChange); + $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function() { AsyncClient.getAudits(); }); var self = this; - $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { + $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function() { + $('#user_settings').modal('show'); self.setState({moreInfo: []}); }); }, componentWillUnmount: function() { - UserStore.removeAuditsChangeListener(this._onChange); + UserStore.removeAuditsChangeListener(this.onListenerChange); }, - _onChange: function() { + onListenerChange: function() { var newState = getStateFromStoresForAudits(); if (!utils.areStatesEqual(newState.audits, this.state.audits)) { this.setState(newState); @@ -61,6 +63,21 @@ module.exports = React.createClass({ currentAudit.session_id = 'N/A (Login attempt)'; } + var moreInfo = (<a href='#' className='theme' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>); + if (this.state.moreInfo[i]) { + moreInfo = ( + <div> + <div>{'Session ID: ' + currentAudit.session_id}</div> + <div>{'URL: ' + currentAudit.action.replace(/\/api\/v[1-9]/, '')}</div> + </div> + ); + } + + var divider = null; + if (i < this.state.audits.length - 1) { + divider = (<div className='divider-light'></div>) + } + accessList[i] = ( <div className='access-history__table'> <div className='access__date'>{newDate}</div> @@ -68,25 +85,21 @@ module.exports = React.createClass({ <div className='report__time'>{newHistoryDate.toLocaleTimeString(navigator.language, {hour: '2-digit', minute: '2-digit'})}</div> <div className='report__info'> <div>{'IP: ' + currentAudit.ip_address}</div> - {this.state.moreInfo[i] ? - <div> - <div>{'Session ID: ' + currentAudit.session_id}</div> - <div>{'URL: ' + currentAudit.action.replace(/\/api\/v[1-9]/, '')}</div> - </div> - : - <a href='#' className='theme' onClick={this.handleMoreInfo.bind(this, i)}>More info</a> - } + {moreInfo} </div> - {i < this.state.audits.length - 1 ? - <div className='divider-light'/> - : - null - } + {divider} </div> </div> ); } + var content; + if (this.state.audits.loading) { + content = (<LoadingScreen />); + } else { + content = (<form role='form'>{accessList}</form>); + } + return ( <div> <div className='modal fade' ref='modal' id='access-history' tabIndex='-1' role='dialog' aria-hidden='true'> @@ -97,13 +110,7 @@ module.exports = React.createClass({ <h4 className='modal-title' id='myModalLabel'>Access History</h4> </div> <div ref='modalBody' className='modal-body'> - {!this.state.audits.loading ? - <form role='form'> - {accessList} - </form> - : - <LoadingScreen /> - } + {content} </div> </div> </div> diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx index f28f0d5f1..1192a72bc 100644 --- a/web/react/components/activity_log_modal.jsx +++ b/web/react/components/activity_log_modal.jsx @@ -10,40 +10,41 @@ var utils = require('../utils/utils.jsx'); function getStateFromStoresForSessions() { return { sessions: UserStore.getSessions(), - server_error: null, - client_error: null + serverError: null, + clientError: null }; } module.exports = React.createClass({ + displayName: 'ActivityLogModal', submitRevoke: function(altId) { - var self = this; Client.revokeSession(altId, function(data) { AsyncClient.getSessions(); }.bind(this), function(err) { - state = getStateFromStoresForSessions(); - state.server_error = err; + var state = getStateFromStoresForSessions(); + state.serverError = err; this.setState(state); }.bind(this) ); }, componentDidMount: function() { - UserStore.addSessionsChangeListener(this._onChange); + UserStore.addSessionsChangeListener(this.onListenerChange); $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) { AsyncClient.getSessions(); }); var self = this; $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) { - self.setState({ moreInfo: [] }); + $('#user_settings').modal('show'); + self.setState({moreInfo: []}); }); }, componentWillUnmount: function() { - UserStore.removeSessionsChangeListener(this._onChange); + UserStore.removeSessionsChangeListener(this.onListenerChange); }, - _onChange: function() { + onListenerChange: function() { var newState = getStateFromStoresForSessions(); if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) { this.setState(newState); @@ -52,7 +53,7 @@ module.exports = React.createClass({ handleMoreInfo: function(index) { var newMoreInfo = this.state.moreInfo; newMoreInfo[index] = true; - this.setState({ moreInfo: newMoreInfo }); + this.setState({moreInfo: newMoreInfo}); }, getInitialState: function() { var initialState = getStateFromStoresForSessions(); @@ -61,68 +62,76 @@ module.exports = React.createClass({ }, render: function() { var activityList = []; - var server_error = this.state.server_error ? this.state.server_error : null; + var serverError = this.state.serverError; + + // Squash any false-y value for server error into null + if (!serverError) { + serverError = null; + } for (var i = 0; i < this.state.sessions.length; i++) { var currentSession = this.state.sessions[i]; var lastAccessTime = new Date(currentSession.last_activity_at); var firstAccessTime = new Date(currentSession.create_at); - var devicePicture = ""; + var devicePicture = ''; - if (currentSession.props.platform === "Windows") { - devicePicture = "fa fa-windows"; + if (currentSession.props.platform === 'Windows') { + devicePicture = 'fa fa-windows'; } - else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") { - devicePicture = "fa fa-apple"; + else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') { + devicePicture = 'fa fa-apple'; } - else if (currentSession.props.platform === "Linux") { - devicePicture = "fa fa-linux"; + else if (currentSession.props.platform === 'Linux') { + devicePicture = 'fa fa-linux'; + } + + var moreInfo; + if (this.state.moreInfo[i]) { + moreInfo = ( + <div> + <div>{'First time active: ' + firstAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div> + <div>{'OS: ' + currentSession.props.os}</div> + <div>{'Browser: ' + currentSession.props.browser}</div> + <div>{'Session ID: ' + currentSession.alt_id}</div> + </div> + ); + } else { + moreInfo = (<a className='theme' href='#' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>); } activityList[i] = ( - <div className="activity-log__table"> - <div className="activity-log__report"> - <div className="report__platform"><i className={devicePicture} />{currentSession.props.platform}</div> - <div className="report__info"> - <div>{"Last activity: " + lastAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div> - { this.state.moreInfo[i] ? - <div> - <div>{"First time active: " + firstAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div> - <div>{"OS: " + currentSession.props.os}</div> - <div>{"Browser: " + currentSession.props.browser}</div> - <div>{"Session ID: " + currentSession.alt_id}</div> - </div> - : - <a className="theme" href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a> - } + <div className='activity-log__table'> + <div className='activity-log__report'> + <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div> + <div className='report__info'> + <div>{'Last activity: ' + lastAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div> + {moreInfo} </div> </div> - <div className="activity-log__action"><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className="btn btn-primary">Logout</button></div> + <div className='activity-log__action'><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className='btn btn-primary'>Logout</button></div> </div> ); } + var content; + if (this.state.sessions.loading) { + content = (<LoadingScreen />); + } else { + content = (<form role='form'>{activityList}</form>); + } + return ( <div> - <div className="modal fade" ref="modal" id="activity-log" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog modal-lg"> - <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" id="myModalLabel">Active Sessions</h4> + <div className='modal fade' ref='modal' id='activity-log' tabIndex='-1' role='dialog' aria-hidden='true'> + <div className='modal-dialog modal-lg'> + <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' id='myModalLabel'>Active Sessions</h4> </div> - <p className="session-help-text">Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the "Logout" button below to end a session.</p> - <div ref="modalBody" className="modal-body"> - { !this.state.sessions.loading ? - <div> - <form role="form"> - { activityList } - </form> - { server_error } - </div> - : - <LoadingScreen /> - } + <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p> + <div ref='modalBody' className='modal-body'> + {content} </div> </div> </div> diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index cc3f255ee..761c06e74 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -96,7 +96,7 @@ var NavbarDropdown = React.createClass({ <span className='dropdown__icon' dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> </a> <ul className='dropdown-menu' role='menu'> - <li><a href='#' data-toggle='modal' data-target='#user_settings1'>Account Settings</a></li> + <li><a href='#' data-toggle='modal' data-target='#user_settings'>Account Settings</a></li> {teamSettings} {inviteLink} {teamLink} diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 2439719a1..d221ca840 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -72,7 +72,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='#user_settings1'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li> + <li><a href='#' data-toggle='modal' data-target='#user_settings'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li> {teamSettingsLink} {inviteLink} {teamLink} diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 1a0c313d3..a5fa01dc9 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -105,11 +105,11 @@ var NotificationsTab = React.createClass({ }, componentDidMount: function() { UserStore.addChangeListener(this._onChange); - $('#user_settings1').on('hidden.bs.modal', this.handleClose); + $('#user_settings').on('hidden.bs.modal', this.handleClose); }, componentWillUnmount: function() { UserStore.removeChangeListener(this._onChange); - $('#user_settings1').off('hidden.bs.modal', this.handleClose); + $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); }, _onChange: function() { @@ -513,27 +513,34 @@ var SecurityTab = React.createClass({ this.setState({confirmPassword: e.target.value}); }, handleHistoryOpen: function() { - $('#user_settings1').modal('hide'); + this.setState({willReturn: true}); + $("#user_settings").modal('hide'); }, handleDevicesOpen: function() { - $('#user_settings1').modal('hide'); + this.setState({willReturn: true}); + $("#user_settings").modal('hide'); }, handleClose: function() { $(this.getDOMNode()).find('.form-control').each(function() { this.value = ''; }); this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); - this.props.updateTab('general'); + + if (!this.state.willReturn) { + this.props.updateTab('general'); + } else { + this.setState({willReturn: false}); + } }, componentDidMount: function() { - $('#user_settings1').on('hidden.bs.modal', this.handleClose); + $('#user_settings').on('hidden.bs.modal', this.handleClose); }, componentWillUnmount: function() { - $('#user_settings1').off('hidden.bs.modal', this.handleClose); + $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); }, getInitialState: function() { - return {currentPassword: '', newPassword: '', confirmPassword: ''}; + return {currentPassword: '', newPassword: '', confirmPassword: '', willReturn: false}; }, render: function() { var serverError = this.state.serverError ? this.state.serverError : null; @@ -811,10 +818,10 @@ var GeneralTab = React.createClass({ this.props.updateSection(''); }, componentDidMount: function() { - $('#user_settings1').on('hidden.bs.modal', this.handleClose); + $('#user_settings').on('hidden.bs.modal', this.handleClose); }, componentWillUnmount: function() { - $('#user_settings1').off('hidden.bs.modal', this.handleClose); + $('#user_settings').off('hidden.bs.modal', this.handleClose); }, getInitialState: function() { var user = this.props.user; @@ -1093,7 +1100,7 @@ var AppearanceTab = React.createClass({ if (this.props.activeSection === "theme") { $(this.refs[this.state.theme].getDOMNode()).addClass('active-border'); } - $('#user_settings1').on('hidden.bs.modal', this.handleClose); + $('#user_settings').on('hidden.bs.modal', this.handleClose); }, componentDidUpdate: function() { if (this.props.activeSection === "theme") { @@ -1102,7 +1109,7 @@ var AppearanceTab = React.createClass({ } }, componentWillUnmount: function() { - $('#user_settings1').off('hidden.bs.modal', this.handleClose); + $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); }, getInitialState: function() { diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index 702e7ad7a..7181c4020 100644 --- a/web/react/components/user_settings_modal.jsx +++ b/web/react/components/user_settings_modal.jsx @@ -32,7 +32,7 @@ module.exports = React.createClass({ tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"}); return ( - <div className="modal fade" ref="modal" id="user_settings1" role="dialog" tabIndex="-1" aria-hidden="true"> + <div className="modal fade" ref="modal" id="user_settings" role="dialog" tabIndex="-1" aria-hidden="true"> <div className="modal-dialog settings-modal"> <div className="modal-content"> <div className="modal-header"> @@ -64,4 +64,3 @@ module.exports = React.createClass({ ); } }); - |