// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See License.txt for license information. import LoadingScreen from 'components/loading_screen.jsx'; import UserStore from 'stores/user_store.jsx'; import * as Utils from 'utils/utils.jsx'; import $ from 'jquery'; import PropTypes from 'prop-types'; import React from 'react'; import {Modal} from 'react-bootstrap'; import {FormattedMessage, FormattedTime, FormattedDate} from 'react-intl'; export default class ActivityLogModal extends React.Component { static propTypes = { onHide: PropTypes.func.isRequired, actions: PropTypes.shape({ getSessions: PropTypes.func.isRequired, revokeSession: PropTypes.func.isRequired }).isRequired } 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); const state = this.getStateFromStores(); state.moreInfo = []; state.show = true; this.state = state; } getStateFromStores() { return { sessions: UserStore.getSessions(), clientError: null }; } submitRevoke(altId, e) { e.preventDefault(); var modalContent = $(e.target).closest('.modal-content'); modalContent.addClass('animation--highlight'); setTimeout(() => { modalContent.removeClass('animation--highlight'); }, 1500); this.props.actions.revokeSession(UserStore.getCurrentId(), altId).then(() => { this.props.actions.getSessions(UserStore.getCurrentId()); }); } onShow() { this.props.actions.getSessions(UserStore.getCurrentId()); if (!Utils.isMobile()) { $('.modal-body').perfectScrollbar(); } } onHide() { this.setState({show: false}); } componentDidMount() { UserStore.addSessionsChangeListener(this.onListenerChange); 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) { const newMoreInfo = this.state.moreInfo; newMoreInfo[index] = true; this.setState({moreInfo: newMoreInfo}); } render() { const 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.device_id && currentSession.device_id.indexOf('apple') === 0) { devicePicture = 'fa fa-apple'; devicePlatform = ( ); } else if (currentSession.device_id && currentSession.device_id.indexOf('android') === 0) { devicePlatform = ( ); devicePicture = 'fa fa-android'; } 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 = ( ); devicePicture = 'fa fa-android'; } else { devicePicture = 'fa fa-linux'; } } else if (currentSession.props.os.indexOf('Linux') !== -1) { devicePicture = 'fa fa-linux'; } if (currentSession.props.browser.indexOf('Desktop App') !== -1) { devicePlatform = ( ); } let moreInfo; if (this.state.moreInfo[i]) { moreInfo = (
), time: ( ) }} />
); } else { moreInfo = ( ); } activityList[i] = (
{devicePlatform}
), time: ( ) }} />
{moreInfo}
); } let content; if (this.state.sessions.loading) { content = ; } else { content =
{activityList}
; } return (

{content}
); } }