Adding back Access History and Active Devices

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">&times;</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">&times;</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>