diff options
Diffstat (limited to 'web/react/components/user_settings.jsx')
| -rw-r--r-- | web/react/components/user_settings.jsx | 172 |
1 files changed, 12 insertions, 160 deletions
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 59c97c309..ad890334e 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -5,6 +5,8 @@ var UserStore = require('../stores/user_store.jsx'); var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); var SettingPicture = require('./setting_picture.jsx'); +var AccessHistoryModal = require('./access_history_modal.jsx'); +var ActivityLogModal = require('./activity_log_modal.jsx'); var client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var utils = require('../utils/utils.jsx'); @@ -443,149 +445,6 @@ var NotificationsTab = React.createClass({ } }); -function getStateFromStoresForSessions() { - return { - sessions: UserStore.getSessions(), - server_error: null, - client_error: null - }; -} - -var SessionsTab = React.createClass({ - submitRevoke: function(altId) { - client.revokeSession(altId, - function(data) { - AsyncClient.getSessions(); - }.bind(this), - function(err) { - state = this.getStateFromStoresForSessions(); - state.server_error = err; - this.setState(state); - }.bind(this) - ); - }, - componentDidMount: function() { - UserStore.addSessionsChangeListener(this._onChange); - AsyncClient.getSessions(); - }, - componentWillUnmount: function() { - UserStore.removeSessionsChangeListener(this._onChange); - }, - _onChange: function() { - this.setState(getStateFromStoresForSessions()); - }, - getInitialState: function() { - return getStateFromStoresForSessions(); - }, - render: function() { - var server_error = this.state.server_error ? this.state.server_error : null; - - return ( - <div> - <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" ref="title"><i className="modal-back"></i>Sessions</h4> - </div> - <div className="user-settings"> - <h3 className="tab-header">Sessions</h3> - <div className="divider-dark first"/> - { server_error } - <div className="table-responsive" style={{ maxWidth: "560px", maxHeight: "300px" }}> - <table className="table-condensed small"> - <thead> - <tr><th>Id</th><th>Platform</th><th>OS</th><th>Browser</th><th>Created</th><th>Last Activity</th><th>Revoke</th></tr> - </thead> - <tbody> - { - this.state.sessions.map(function(value, index) { - return ( - <tr key={ "" + index }> - <td style={{ whiteSpace: "nowrap" }}>{ value.alt_id }</td> - <td style={{ whiteSpace: "nowrap" }}>{value.props.platform}</td> - <td style={{ whiteSpace: "nowrap" }}>{value.props.os}</td> - <td style={{ whiteSpace: "nowrap" }}>{value.props.browser}</td> - <td style={{ whiteSpace: "nowrap" }}>{ new Date(value.create_at).toLocaleString() }</td> - <td style={{ whiteSpace: "nowrap" }}>{ new Date(value.last_activity_at).toLocaleString() }</td> - <td><button onClick={this.submitRevoke.bind(this, value.alt_id)} className="pull-right btn btn-primary">Revoke</button></td> - </tr> - ); - }, this) - } - </tbody> - </table> - </div> - <div className="divider-dark"/> - </div> - </div> - ); - } -}); - -function getStateFromStoresForAudits() { - return { - audits: UserStore.getAudits() - }; -} - -var AuditTab = React.createClass({ - componentDidMount: function() { - UserStore.addAuditsChangeListener(this._onChange); - AsyncClient.getAudits(); - }, - componentWillUnmount: function() { - UserStore.removeAuditsChangeListener(this._onChange); - }, - _onChange: function() { - this.setState(getStateFromStoresForAudits()); - }, - getInitialState: function() { - return getStateFromStoresForAudits(); - }, - render: function() { - return ( - <div> - <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" ref="title"><i className="modal-back"></i>Activity Log</h4> - </div> - <div className="user-settings"> - <h3 className="tab-header">Activity Log</h3> - <div className="divider-dark first"/> - <div className="table-responsive"> - <table className="table-condensed small"> - <thead> - <tr> - <th>Time</th> - <th>Action</th> - <th>IP Address</th> - <th>Session</th> - <th>Other Info</th> - </tr> - </thead> - <tbody> - { - this.state.audits.map(function(value, index) { - return ( - <tr key={ "" + index }> - <td className="text-nowrap">{ new Date(value.create_at).toLocaleString() }</td> - <td className="text-nowrap">{ value.action.replace("/api/v1", "") }</td> - <td className="text-nowrap">{ value.ip_address }</td> - <td className="text-nowrap">{ value.session_id }</td> - <td className="text-nowrap">{ value.extra_info }</td> - </tr> - ); - }, this) - } - </tbody> - </table> - </div> - <div className="divider-dark"/> - </div> - </div> - ); - } -}); - var SecurityTab = React.createClass({ submitPassword: function(e) { e.preventDefault(); @@ -637,6 +496,12 @@ var SecurityTab = React.createClass({ updateConfirmPassword: function(e) { this.setState({ confirm_password: e.target.value }); }, + handleHistoryOpen: function() { + $("#user_settings1").modal('hide'); + }, + handleDevicesOpen: function() { + $("#user_settings1").modal('hide'); + }, getInitialState: function() { return { current_password: '', new_password: '', confirm_password: '' }; }, @@ -711,6 +576,10 @@ var SecurityTab = React.createClass({ <div className="divider-dark first"/> { passwordSection } <div className="divider-dark"/> + <br></br> + <a data-toggle="modal" className="security-links" data-target="#access-history" href="#" onClick={this.handleHistoryOpen}><i className="fa fa-clock-o"></i>View Access History</a> + <b> </b> + <a data-toggle="modal" className="security-links" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Devices</a> </div> </div> ); @@ -1225,23 +1094,6 @@ module.exports = React.createClass({ <NotificationsTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> </div> ); - - /* Temporarily removing sessions and activity_log tabs - - } else if (this.props.activeTab === 'sessions') { - return ( - <div> - <SessionsTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> - </div> - ); - } else if (this.props.activeTab === 'activity_log') { - return ( - <div> - <AuditTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> - </div> - ); - */ - } else if (this.props.activeTab === 'appearance') { return ( <div> |