summaryrefslogtreecommitdiffstats
path: root/web/react/components/activity_log_modal.jsx
diff options
context:
space:
mode:
Diffstat (limited to 'web/react/components/activity_log_modal.jsx')
-rw-r--r--web/react/components/activity_log_modal.jsx112
1 files changed, 60 insertions, 52 deletions
diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx
index 64f93ca71..6d466f976 100644
--- a/web/react/components/activity_log_modal.jsx
+++ b/web/react/components/activity_log_modal.jsx
@@ -10,27 +10,27 @@ 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();
});
@@ -38,13 +38,13 @@ module.exports = React.createClass({
var self = this;
$(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
$('#user_settings1').modal('show');
- self.setState({ moreInfo: [] });
+ 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);
@@ -53,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();
@@ -62,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">&times;</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'>&times;</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>