1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
|
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
var UserStore = require('../stores/user_store.jsx');
var Client = require('../utils/client.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var LoadingScreen = require('./loading_screen.jsx');
var utils = require('../utils/utils.jsx');
function getStateFromStoresForSessions() {
return {
sessions: UserStore.getSessions(),
server_error: null,
client_error: null
};
}
module.exports = React.createClass({
submitRevoke: function(altId) {
var self = this;
Client.revokeSession(altId,
function(data) {
AsyncClient.getSessions();
}.bind(this),
function(err) {
state = getStateFromStoresForSessions();
state.server_error = err;
this.setState(state);
}.bind(this)
);
},
componentDidMount: function() {
UserStore.addSessionsChangeListener(this._onChange);
$(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: [] });
});
},
componentWillUnmount: function() {
UserStore.removeSessionsChangeListener(this._onChange);
},
_onChange: function() {
var newState = getStateFromStoresForSessions();
if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
this.setState(newState);
}
},
handleMoreInfo: function(index) {
var newMoreInfo = this.state.moreInfo;
newMoreInfo[index] = true;
this.setState({ moreInfo: newMoreInfo });
},
getInitialState: function() {
var initialState = getStateFromStoresForSessions();
initialState.moreInfo = [];
return initialState;
},
render: function() {
var activityList = [];
var server_error = this.state.server_error ? this.state.server_error : 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 = "";
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 === "Linux") {
devicePicture = "fa fa-linux";
}
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>
</div>
<div className="activity-log__action"><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className="btn btn-primary">Logout</button></div>
</div>
);
}
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>
<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 />
}
</div>
</div>
</div>
</div>
</div>
);
}
});
|
