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
|
// 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>);
}
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/v1", "")}</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>
);
}
});
|
