// Copyright (c) 2015 Mattermost, Inc. All Rights Reserved. // See License.txt for license information. const UserStore = require('../stores/user_store.jsx'); const Client = require('../utils/client.jsx'); const AsyncClient = require('../utils/async_client.jsx'); const Modal = ReactBootstrap.Modal; const LoadingScreen = require('./loading_screen.jsx'); const Utils = require('../utils/utils.jsx'); export default class ActivityLogModal extends React.Component { constructor(props) { super(props); this.submitRevoke = this.submitRevoke.bind(this); this.onListenerChange = this.onListenerChange.bind(this); this.handleMoreInfo = this.handleMoreInfo.bind(this); this.onHide = this.onHide.bind(this); this.onShow = this.onShow.bind(this); let state = this.getStateFromStores(); state.moreInfo = []; this.state = state; } getStateFromStores() { return { sessions: UserStore.getSessions(), serverError: null, clientError: null }; } submitRevoke(altId, e) { e.preventDefault(); var modalContent = $(e.target).closest('.modal-content'); modalContent.addClass('animation--highlight'); setTimeout(() => { modalContent.removeClass('animation--highlight'); }, 1500); Client.revokeSession(altId, function handleRevokeSuccess() { AsyncClient.getSessions(); }, function handleRevokeError(err) { let state = this.getStateFromStores(); state.serverError = err; this.setState(state); }.bind(this) ); } onShow() { AsyncClient.getSessions(); $(ReactDOM.findDOMNode(this.refs.modalBody)).css('max-height', $(window).height() - 300); if ($(window).width() > 768) { $(ReactDOM.findDOMNode(this.refs.modalBody)).perfectScrollbar(); } } onHide() { this.setState({moreInfo: []}); this.props.onModalDismissed(); } componentDidMount() { UserStore.addSessionsChangeListener(this.onListenerChange); } componentDidUpdate(prevProps) { if (this.props.show && !prevProps.show) { this.onShow(); } } componentWillUnmount() { UserStore.removeSessionsChangeListener(this.onListenerChange); } onListenerChange() { const newState = this.getStateFromStores(); if (!Utils.areObjectsEqual(newState.sessions, this.state.sessions)) { this.setState(newState); } } handleMoreInfo(index) { let newMoreInfo = this.state.moreInfo; newMoreInfo[index] = true; this.setState({moreInfo: newMoreInfo}); } render() { let activityList = []; for (let i = 0; i < this.state.sessions.length; i++) { const currentSession = this.state.sessions[i]; const lastAccessTime = new Date(currentSession.last_activity_at); const firstAccessTime = new Date(currentSession.create_at); let devicePlatform = currentSession.props.platform; let devicePicture = ''; 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 === 'Linux') { if (currentSession.props.os.indexOf('Android') >= 0) { devicePlatform = 'Android'; devicePicture = 'fa fa-android'; } else { devicePicture = 'fa fa-linux'; } } let moreInfo; if (this.state.moreInfo[i]) { moreInfo = (
{`First time active: ${firstAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}
{`OS: ${currentSession.props.os}`}
{`Browser: ${currentSession.props.browser}`}
{`Session ID: ${currentSession.id}`}
); } else { moreInfo = ( More info ); } activityList[i] = (
{devicePlatform}
{`Last activity: ${lastAccessTime.toDateString()}, ${lastAccessTime.toLocaleTimeString()}`}
{moreInfo}
); } let content; if (this.state.sessions.loading) { content = ; } else { content =
{activityList}
; } return ( {'Active Sessions'}

{'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.'}

{content}
); } } ActivityLogModal.propTypes = { show: React.PropTypes.bool.isRequired, onModalDismissed: React.PropTypes.func.isRequired };