Merge pull request #233 from asaadmahmoodspin/mm-1616

Adding back Access History and Active Devices

web/react/components/access_history_modal.jsx

@@ -0,0 +1,100 @@
+// 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 Utils = require('../utils/utils.jsx');
+
+function getStateFromStoresForAudits() {
+    return {
+        audits: UserStore.getAudits()
+    };
+}
+
+module.exports = React.createClass({
+    componentDidMount: function() {
+        UserStore.addAuditsChangeListener(this._onChange);
+        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() {
+        this.setState(getStateFromStoresForAudits());
+    },
+    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="#" 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">&times;</span></button>
+                                <h4 className="modal-title" id="myModalLabel">Access History</h4>
+                            </div>
+                            <div ref="modalBody" className="modal-body">
+                                <form role="form">
+                                { accessList }
+                                </form>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

web/react/components/activity_log_modal.jsx

@@ -0,0 +1,116 @@
+// 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');
+
+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);
+        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() {
+        this.setState(getStateFromStoresForSessions());
+    },
+    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";
+            }
+
+            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 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">&times;</span></button>
+                                <h4 className="modal-title" id="myModalLabel">Active Devices</h4>
+                            </div>
+                            <div ref="modalBody" className="modal-body">
+                                <form role="form">
+                                { activityList }
+                                </form>
+                                { server_error }
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+});

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>

web/react/components/user_settings_modal.jsx

@@ -30,8 +30,6 @@ module.exports = React.createClass({
         tabs.push({name: "security", ui_name: "Security", icon: "glyphicon glyphicon-lock"});
         tabs.push({name: "notifications", ui_name: "Notifications", icon: "glyphicon glyphicon-exclamation-sign"});
         tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"});
-        //tabs.push({name: "sessions", ui_name: "Sessions", icon: "glyphicon glyphicon-globe"});
-        //tabs.push({name: "activity_log", ui_name: "Activity Log", icon: "glyphicon glyphicon-time"});
 
         return (
             <div className="modal fade" ref="modal" id="user_settings1" role="dialog" aria-hidden="true">

web/react/pages/channel.jsx

@@ -32,6 +32,8 @@ var ErrorBar = require('../components/error_bar.jsx')
 var ChannelLoader = require('../components/channel_loader.jsx');
 var MentionList = require('../components/mention_list.jsx');
 var ChannelInfoModal = require('../components/channel_info_modal.jsx');
+var AccessHistoryModal = require('../components/access_history_modal.jsx');
+var ActivityLogModal = require('../components/activity_log_modal.jsx');
 
 
 var Constants = require('../utils/constants.jsx');
@@ -205,4 +207,14 @@ global.window.setup_channel_page = function(team_name, team_type, team_id, chann
         document.getElementById('edit_mention_tab')
     );
 
+    React.render(
+        <AccessHistoryModal />,
+        document.getElementById('access_history_modal')
+    );
+
+    React.render(
+        <ActivityLogModal />,
+        document.getElementById('activity_log_modal')
+    );
+
 };

web/sass-files/sass/partials/_access-history.scss

@@ -0,0 +1,29 @@
+.access-history__table {
+    display: table;
+    width: 100%;
+    padding-top: 15px;
+    line-height: 1.6;
+    &:first-child {
+        padding: 0;
+    }
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+    .access__date {
+        font-weight: 600;
+        font-size: 16px;
+        width: 190px;
+    }
+    .access__report {
+        border-bottom: 1px solid #ddd;
+        padding-bottom: 15px;
+    }
+    .report__time {
+        font-weight: 600;
+        font-size: 16px;
+    }
+    .report__info {
+        color: #999;
+    }
+}

web/sass-files/sass/partials/_activity-log.scss

@@ -0,0 +1,31 @@
+.activity-log__table {
+    display: table;
+    width: 100%;
+    line-height: 1.8;
+    border-top: 1px solid #DDD;
+    padding: 15px 0;
+    &:first-child {
+        padding-top: 0;
+        border: none;
+    }
+    > div {
+        display: table-cell;
+        vertical-align: top;
+    }
+    .activity-log__report {
+        width: 80%;
+    }
+    .activity-log__action {
+        text-align: right;
+    }
+    .report__platform {
+        font-size: 16px;
+        font-weight: 600;
+        .fa {
+            margin-right: 6px;
+        }
+    }
+    .report__info {
+        color: #999;
+    }
+}

web/sass-files/sass/partials/_responsive.scss

@@ -214,6 +214,12 @@
     }
 }
 
+@media (min-width: 992px){
+    .modal-lg {
+        width: 700px;
+    }
+}
+
 @media screen and (min-width: 768px) {
     .second-bar {
         display: none;
@@ -252,11 +258,11 @@
                 }
             }
         }
-		.post-header .post-header-col.post-header__reply {
-			.dropdown-toggle:after {
-				content: '...';
-			}
-		}
+        .post-header .post-header-col.post-header__reply {
+            .dropdown-toggle:after {
+                content: '...';
+            }
+        }
     }
     .signup-team__container {
         padding: 30px 0;
@@ -640,6 +646,33 @@
         padding: 9px 21px 10px 10px !important;
     }
 }
+@media screen and (max-width: 640px) {
+    .access-history__table {
+        > div {
+            display: block;
+        }
+        .access__report {
+              margin: 0 0 15px 15px;
+        }
+        .access__date {
+            div {
+                margin-bottom: 15px;
+            }
+        }
+    }
+    .activity-log__table {
+        > div {
+            display: block;
+        }
+        .activity-log__report {
+            width: 100%;
+        }
+        .activity-log__action {
+            text-align: left;
+            margin-top: 10px;
+        }
+    }
+}
 @media screen and (max-width: 480px) {
     .modal {
         .modal-body {

web/sass-files/sass/partials/_settings.scss

@@ -1,3 +1,6 @@
+@import "access-history";
+@import "activity-log";
+
 .user-settings {
     background: #fff;
     min-height:300px;
@@ -32,6 +35,12 @@
             display: table-cell;
             vertical-align: top;
         }
+        .security-links {
+            margin-right: 20px;
+            .fa {
+                margin-right: 6px;
+            }
+        }
         .settings-links {
             width: 180px;
             background: #FAFAFA;
@@ -223,4 +232,4 @@
 
 .color-btn {
     margin:4px;
-}
+}

web/templates/channel.html

@@ -45,6 +45,8 @@
   <div id="team_members_modal"></div>
   <div id="direct_channel_modal"></div>
   <div id="channel_info_modal"></div>
+  <div id="access_history_modal"></div>
+  <div id="activity_log_modal"></div>
 <script>
 window.setup_channel_page('{{ .Props.TeamDisplayName }}', '{{ .Props.TeamType }}', '{{ .Props.TeamId }}', '{{ .Props.ChannelName }}', '{{ .Props.ChannelId }}');
 </script>