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
|
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
var UserStore = require('../stores/user_store.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var LoadingScreen = require('./loading_screen.jsx');
var utils = require('../utils/utils.jsx');
function getStateFromStoresForAudits() {
return {
audits: UserStore.getAudits()
};
}
module.exports = React.createClass({
componentDidMount: function() {
UserStore.addAuditsChangeListener(this._onChange);
$(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
AsyncClient.getAudits();
});
var self = this;
$(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
self.setState({moreInfo: []});
});
},
componentWillUnmount: function() {
UserStore.removeAuditsChangeListener(this._onChange);
},
_onChange: function() {
var newState = getStateFromStoresForAudits();
if (!utils.areStatesEqual(newState.audits, this.state.audits)) {
this.setState(newState);
}
},
handleMoreInfo: function(index) {
var newMoreInfo = this.state.moreInfo;
newMoreInfo[index] = true;
this.setState({moreInfo: newMoreInfo});
},
getInitialState: function() {
var initialState = getStateFromStoresForAudits();
initialState.moreInfo = [];
return initialState;
},
render: function() {
var accessList = [];
var currentHistoryDate = null;
for (var i = 0; i < this.state.audits.length; i++) {
var currentAudit = this.state.audits[i];
var newHistoryDate = new Date(currentAudit.create_at);
var newDate = null;
if (!currentHistoryDate || currentHistoryDate.toLocaleDateString() !== newHistoryDate.toLocaleDateString()) {
currentHistoryDate = newHistoryDate;
newDate = (<div> {currentHistoryDate.toDateString()} </div>);
}
if (!currentAudit.session_id && currentAudit.action.search('/users/login') !== -1) {
currentAudit.session_id = 'N/A (Login attempt)';
}
accessList[i] = (
<div className='access-history__table'>
<div className='access__date'>{newDate}</div>
<div className='access__report'>
<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>
}
</div>
{i < this.state.audits.length - 1 ?
<div className='divider-light'/>
:
null
}
</div>
</div>
);
}
return (
<div>
<div className='modal fade' ref='modal' id='access-history' 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'>Access History</h4>
</div>
<div ref='modalBody' className='modal-body'>
{!this.state.audits.loading ?
<form role='form'>
{accessList}
</form>
:
<LoadingScreen />
}
</div>
</div>
</div>
</div>
</div>
);
}
});
|
