Merge pull request #369 from nickago/MM-1703

MM 1703 Closing access history or activity log returns user to security menu
Этот коммит содержится в:
Joram Wilander
2015-08-17 09:37:16 -04:00
родитель 2fbc92af10 156682e3de
Коммит 738e53af95
8 изменённых файлов: 115 добавлений и 102 удалений

Просмотреть файл

@@ -13,21 +13,23 @@ function getStateFromStoresForAudits() {
}
module.exports = React.createClass({
displayName: 'AccessHistoryModal',
componentDidMount: function() {
UserStore.addAuditsChangeListener(this._onChange);
$(this.refs.modal.getDOMNode()).on('shown.bs.modal', function(e) {
UserStore.addAuditsChangeListener(this.onListenerChange);
$(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] ?
<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>
}
{moreInfo}
</div>
{i < this.state.audits.length - 1 ?
<div className='divider-light'/>
:
null
}
{divider}
</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 ?
<form role='form'>
{accessList}
</form>
:
<LoadingScreen />
}
{content}
</div>
</div>
</div>

Просмотреть файл

@@ -10,40 +10,41 @@ var utils = require('../utils/utils.jsx');
function getStateFromStoresForSessions() {
return {
sessions: UserStore.getSessions(),
server_error: null,
client_error: null
serverError: 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();
state.server_error = err;
var state = getStateFromStoresForSessions();
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") {
devicePicture = "fa fa-windows";
if (currentSession.props.platform === 'Windows') {
devicePicture = 'fa fa-windows';
}
else if (currentSession.props.platform === "Macintosh" || currentSession.props.platform === "iPhone") {
devicePicture = "fa fa-apple";
else if (currentSession.props.platform === 'Macintosh' || currentSession.props.platform === 'iPhone') {
devicePicture = 'fa fa-apple';
}
else if (currentSession.props.platform === "Linux") {
devicePicture = "fa fa-linux";
else if (currentSession.props.platform === '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__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 className="theme" href="#" onClick={this.handleMoreInfo.bind(this, i)}>More info</a>
}
<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>
{moreInfo}
</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-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 Sessions</h4>
<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 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>
<div ref="modalBody" className="modal-body">
{ !this.state.sessions.loading ?
<div>
<form role="form">
{ activityList }
</form>
{ server_error }
</div>
:
<LoadingScreen />
}
<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'>
{content}
</div>
</div>
</div>

Просмотреть файл

@@ -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}

Просмотреть файл

@@ -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}

Просмотреть файл

@@ -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() {

Просмотреть файл

@@ -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({
);
}
});

Просмотреть файл

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

Просмотреть файл

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