Merge pull request #369 from nickago/MM-1703

MM 1703 Closing access history or activity log returns user to security menu

web/react/components/access_history_modal.jsx

@@ -13,21 +13,23 @@ function getStateFromStoresForAudits() {
 }
 
 module.exports = React.createClass({
+    displayName: 'AccessHistoryModal',
     componentDidMount: function() {
-        UserStore.addAuditsChangeListener(this._onChange);
+        UserStore.addAuditsChangeListener(this.onListenerChange);
-        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
+        $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function() {
             AsyncClient.getAudits();
         });
 
         var self = this;
-        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
+        $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function() {
+            $('#user_settings').modal('show');
             self.setState({moreInfo: []});
         });
     },
     componentWillUnmount: function() {
-        UserStore.removeAuditsChangeListener(this._onChange);
+        UserStore.removeAuditsChangeListener(this.onListenerChange);
     },
-    _onChange: function() {
+    onListenerChange: function() {
         var newState = getStateFromStoresForAudits();
         if (!utils.areStatesEqual(newState.audits, this.state.audits)) {
             this.setState(newState);
@@ -61,6 +63,21 @@ module.exports = React.createClass({
                 currentAudit.session_id = 'N/A (Login attempt)';
             }
 
+            var moreInfo = (<a href='#' className='theme' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>);
+            if (this.state.moreInfo[i]) {
+                moreInfo = (
+                    <div>
+                        <div>{'Session ID: ' + currentAudit.session_id}</div>
+                        <div>{'URL: ' + currentAudit.action.replace(/\/api\/v[1-9]/, '')}</div>
+                    </div>
+                );
+            }
+
+            var divider = null;
+            if (i < this.state.audits.length - 1) {
+                divider = (<div className='divider-light'></div>)
+            }
+
             accessList[i] = (
                 <div className='access-history__table'>
                     <div className='access__date'>{newDate}</div>
@@ -68,25 +85,21 @@ module.exports = React.createClass({
                         <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] ?
+                            {moreInfo}
-                            <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 ?
+                        {divider}
-                        <div className='divider-light'/>
-                        :
-                        null
-                        }
                     </div>
                 </div>
             );
         }
 
+        var content;
+        if (this.state.audits.loading) {
+            content = (<LoadingScreen />);
+        } else {
+            content = (<form role='form'>{accessList}</form>);
+        }
+
         return (
             <div>
                 <div className='modal fade' ref='modal' id='access-history' tabIndex='-1' role='dialog' aria-hidden='true'>
@@ -97,13 +110,7 @@ module.exports = React.createClass({
                                 <h4 className='modal-title' id='myModalLabel'>Access History</h4>
                             </div>
                             <div ref='modalBody' className='modal-body'>
-                                {!this.state.audits.loading ?
+                                {content}
-                                <form role='form'>
-                                {accessList}
-                                </form>
-                                :
-                                <LoadingScreen />
-                                }
                             </div>
                         </div>
                     </div>

web/react/components/activity_log_modal.jsx

@@ -10,40 +10,41 @@ var utils = require('../utils/utils.jsx');
 function getStateFromStoresForSessions() {
     return {
         sessions: UserStore.getSessions(),
-        server_error: null,
+        serverError: null,
-        client_error: null
+        clientError: null
     };
 }
 
 module.exports = React.createClass({
+    displayName: 'ActivityLogModal',
     submitRevoke: function(altId) {
-        var self = this;
         Client.revokeSession(altId,
             function(data) {
                 AsyncClient.getSessions();
             }.bind(this),
             function(err) {
-                state = getStateFromStoresForSessions();
+                var state = getStateFromStoresForSessions();
-                state.server_error = err;
+                state.serverError = err;
                 this.setState(state);
             }.bind(this)
         );
     },
     componentDidMount: function() {
-        UserStore.addSessionsChangeListener(this._onChange);
+        UserStore.addSessionsChangeListener(this.onListenerChange);
         $(this.refs.modal.getDOMNode()).on('shown.bs.modal', function (e) {
             AsyncClient.getSessions();
         });
 
         var self = this;
         $(this.refs.modal.getDOMNode()).on('hidden.bs.modal', function(e) {
-            self.setState({ moreInfo: [] });
+            $('#user_settings').modal('show');
+            self.setState({moreInfo: []});
         });
     },
     componentWillUnmount: function() {
-        UserStore.removeSessionsChangeListener(this._onChange);
+        UserStore.removeSessionsChangeListener(this.onListenerChange);
     },
-    _onChange: function() {
+    onListenerChange: function() {
         var newState = getStateFromStoresForSessions();
         if (!utils.areStatesEqual(newState.sessions, this.state.sessions)) {
             this.setState(newState);
@@ -52,7 +53,7 @@ module.exports = React.createClass({
     handleMoreInfo: function(index) {
         var newMoreInfo = this.state.moreInfo;
         newMoreInfo[index] = true;
-        this.setState({ moreInfo: newMoreInfo });
+        this.setState({moreInfo: newMoreInfo});
     },
     getInitialState: function() {
         var initialState = getStateFromStoresForSessions();
@@ -61,68 +62,76 @@ module.exports = React.createClass({
     },
     render: function() {
         var activityList = [];
-        var server_error = this.state.server_error ? this.state.server_error : null;
+        var serverError = this.state.serverError;
+
+        // Squash any false-y value for server error into null
+        if (!serverError) {
+            serverError = 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 = "";
+            var devicePicture = '';
 
-            if (currentSession.props.platform === "Windows") {
+            if (currentSession.props.platform === 'Windows') {
-                devicePicture = "fa fa-windows";
+                devicePicture = 'fa fa-windows';
             }
-            else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") {
+            else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') {
-                devicePicture = "fa fa-apple";
+                devicePicture = 'fa fa-apple';
             }
-            else if (currentSession.props.platform === "Linux") {
+            else if (currentSession.props.platform === 'Linux') {
-                devicePicture = "fa fa-linux";
+                devicePicture = 'fa fa-linux';
+            }
+
+            var moreInfo;
+            if (this.state.moreInfo[i]) {
+                moreInfo = (
+                    <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>
+                );
+            } else {
+                moreInfo = (<a className='theme' href='#' onClick={this.handleMoreInfo.bind(this, i)}>More info</a>);
             }
 
             activityList[i] = (
-                <div className="activity-log__table">
+                <div className='activity-log__table'>
-                    <div className="activity-log__report">
+                    <div className='activity-log__report'>
-                        <div className="report__platform"><i className={devicePicture} />{currentSession.props.platform}</div>
+                        <div className='report__platform'><i className={devicePicture} />{currentSession.props.platform}</div>
-                        <div className="report__info">
+                        <div className='report__info'>
-                            <div>{"Last activity: " + lastAccessTime.toDateString() + ", " + lastAccessTime.toLocaleTimeString()}</div>
+                            <div>{'Last activity: ' + lastAccessTime.toDateString() + ', ' + lastAccessTime.toLocaleTimeString()}</div>
-                            { this.state.moreInfo[i] ?
+                            {moreInfo}
-                            <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 className="theme" 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 className='activity-log__action'><button onClick={this.submitRevoke.bind(this, currentSession.alt_id)} className='btn btn-primary'>Logout</button></div>
                 </div>
             );
         }
 
+        var content;
+        if (this.state.sessions.loading) {
+            content = (<LoadingScreen />);
+        } else {
+            content = (<form role='form'>{activityList}</form>);
+        }
+
         return (
             <div>
-                <div className="modal fade" ref="modal" id="activity-log" tabIndex="-1" role="dialog" aria-hidden="true">
+                <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-dialog modal-lg'>
-                        <div className="modal-content">
+                        <div className='modal-content'>
-                            <div className="modal-header">
+                            <div className='modal-header'>
-                                <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
+                                <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 Sessions</h4>
+                                <h4 className='modal-title' id='myModalLabel'>Active Sessions</h4>
                             </div>
-                            <p className="session-help-text">Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the "Logout" button below to end a session.</p>
+                            <p className='session-help-text'>Sessions are created when you log in with your email and password to a new browser on a device. Sessions let you use Mattermost for up to 30 days without having to log in again. If you want to log out sooner, use the 'Logout' button below to end a session.</p>
-                            <div ref="modalBody" className="modal-body">
+                            <div ref='modalBody' className='modal-body'>
-                                { !this.state.sessions.loading ?
+                                {content}
-                                <div>
-                                <form role="form">
-                                { activityList }
-                                </form>
-                                { server_error }
-                                </div>
-                                :
-                                <LoadingScreen />
-                                }
                             </div>
                         </div>
                     </div>

web/react/components/sidebar_header.jsx

@@ -96,7 +96,7 @@ var NavbarDropdown = React.createClass({
                         <span className='dropdown__icon' dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} />
                     </a>
                     <ul className='dropdown-menu' role='menu'>
-                        <li><a href='#' data-toggle='modal' data-target='#user_settings1'>Account Settings</a></li>
+                        <li><a href='#' data-toggle='modal' data-target='#user_settings'>Account Settings</a></li>
                         {teamSettings}
                         {inviteLink}
                         {teamLink}

web/react/components/sidebar_right_menu.jsx

@@ -72,7 +72,7 @@ module.exports = React.createClass({
 
                 <div className='nav-pills__container'>
                     <ul className='nav nav-pills nav-stacked'>
-                        <li><a href='#' data-toggle='modal' data-target='#user_settings1'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
+                        <li><a href='#' data-toggle='modal' data-target='#user_settings'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li>
                         {teamSettingsLink}
                         {inviteLink}
                         {teamLink}

web/react/components/user_settings.jsx

@@ -105,11 +105,11 @@ var NotificationsTab = React.createClass({
     },
     componentDidMount: function() {
         UserStore.addChangeListener(this._onChange);
-        $('#user_settings1').on('hidden.bs.modal', this.handleClose);
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
     },
     componentWillUnmount: function() {
         UserStore.removeChangeListener(this._onChange);
-        $('#user_settings1').off('hidden.bs.modal', this.handleClose);
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
         this.props.updateSection('');
     },
     _onChange: function() {
@@ -513,27 +513,34 @@ var SecurityTab = React.createClass({
         this.setState({confirmPassword: e.target.value});
     },
     handleHistoryOpen: function() {
-        $('#user_settings1').modal('hide');
+        this.setState({willReturn: true});
+        $("#user_settings").modal('hide');
     },
     handleDevicesOpen: function() {
-        $('#user_settings1').modal('hide');
+        this.setState({willReturn: true});
+        $("#user_settings").modal('hide');
     },
     handleClose: function() {
         $(this.getDOMNode()).find('.form-control').each(function() {
             this.value = '';
         });
         this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null});
-        this.props.updateTab('general');
+
+        if (!this.state.willReturn) {
+            this.props.updateTab('general');
+        } else {
+            this.setState({willReturn: false});
+        }
     },
     componentDidMount: function() {
-        $('#user_settings1').on('hidden.bs.modal', this.handleClose);
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
     },
     componentWillUnmount: function() {
-        $('#user_settings1').off('hidden.bs.modal', this.handleClose);
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
         this.props.updateSection('');
     },
     getInitialState: function() {
-        return {currentPassword: '', newPassword: '', confirmPassword: ''};
+        return {currentPassword: '', newPassword: '', confirmPassword: '', willReturn: false};
     },
     render: function() {
         var serverError = this.state.serverError ? this.state.serverError : null;
@@ -811,10 +818,10 @@ var GeneralTab = React.createClass({
         this.props.updateSection('');
     },
     componentDidMount: function() {
-        $('#user_settings1').on('hidden.bs.modal', this.handleClose);
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
     },
     componentWillUnmount: function() {
-        $('#user_settings1').off('hidden.bs.modal', this.handleClose);
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
     },
     getInitialState: function() {
         var user = this.props.user;
@@ -1093,7 +1100,7 @@ var AppearanceTab = React.createClass({
         if (this.props.activeSection === "theme") {
             $(this.refs[this.state.theme].getDOMNode()).addClass('active-border');
         }
-        $('#user_settings1').on('hidden.bs.modal', this.handleClose);
+        $('#user_settings').on('hidden.bs.modal', this.handleClose);
     },
     componentDidUpdate: function() {
         if (this.props.activeSection === "theme") {
@@ -1102,7 +1109,7 @@ var AppearanceTab = React.createClass({
         }
     },
     componentWillUnmount: function() {
-        $('#user_settings1').off('hidden.bs.modal', this.handleClose);
+        $('#user_settings').off('hidden.bs.modal', this.handleClose);
         this.props.updateSection('');
     },
     getInitialState: function() {

web/react/components/user_settings_modal.jsx

@@ -32,7 +32,7 @@ module.exports = React.createClass({
         tabs.push({name: "appearance", ui_name: "Appearance", icon: "glyphicon glyphicon-wrench"});
 
         return (
-            <div className="modal fade" ref="modal" id="user_settings1" role="dialog" tabIndex="-1" aria-hidden="true">
+            <div className="modal fade" ref="modal" id="user_settings" role="dialog" tabIndex="-1" aria-hidden="true">
               <div className="modal-dialog settings-modal">
                 <div className="modal-content">
                   <div className="modal-header">
@@ -64,4 +64,3 @@ module.exports = React.createClass({
         );
     }
 });
-

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

@@ -431,9 +431,6 @@
             }
         }
     }
-    #user_settings {
-        border-right: none;
-    }
     body {
         &.white {
             .inner__wrap {

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

@@ -143,12 +143,6 @@
     }
 }
 
-#user_settings {
-    padding: 0 0.5em;
-    border-right: 1px solid #ddd;
-    max-width: 800px;
-}
-
 .channel-settings {
     padding: 0 10px;
 }