diff options
Diffstat (limited to 'web/react')
-rw-r--r-- | web/react/components/access_history_modal.jsx | 100 | ||||
-rw-r--r-- | web/react/components/activity_log_modal.jsx | 116 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 18 | ||||
-rw-r--r-- | web/react/components/post_right.jsx | 1 | ||||
-rw-r--r-- | web/react/components/sidebar_header.jsx | 4 | ||||
-rw-r--r-- | web/react/components/user_settings.jsx | 172 | ||||
-rw-r--r-- | web/react/components/user_settings_modal.jsx | 2 | ||||
-rw-r--r-- | web/react/pages/channel.jsx | 12 |
8 files changed, 254 insertions, 171 deletions
diff --git a/web/react/components/access_history_modal.jsx b/web/react/components/access_history_modal.jsx new file mode 100644 index 000000000..b23b3213f --- /dev/null +++ b/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">×</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> + ); + } +}); diff --git a/web/react/components/activity_log_modal.jsx b/web/react/components/activity_log_modal.jsx new file mode 100644 index 000000000..d6f8f40eb --- /dev/null +++ b/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">×</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> + ); + } +}); diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index a2b2ae03f..7c5d36593 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -348,8 +348,8 @@ module.exports = React.createClass({ if (ChannelStore.isDefault(channel)) { more_messages = ( <div className="channel-intro"> - <h4 className="channel-intro-title">Welcome</h4> - <p> + <h4 className="channel-intro__title">Beginning of {ui_name}</h4> + <p className="channel-intro__content"> Welcome to {ui_name}! <br/><br/> {"This is the first channel " + strings.Team + "mates see when they"} @@ -366,27 +366,27 @@ module.exports = React.createClass({ } else if (channel.name === Constants.OFFTOPIC_CHANNEL) { more_messages = ( <div className="channel-intro"> - <h4 className="channel-intro-title">Welcome</h4> - <p> + <h4 className="channel-intro__title">Beginning of {ui_name}</h4> + <p className="channel-intro__content"> {"This is the start of " + ui_name + ", a channel for conversations you’d prefer out of more focused channels."} <br/> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> </p> + <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={ui_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> </div> ); } else { var ui_type = channel.type === 'P' ? "private group" : "channel"; more_messages = ( <div className="channel-intro"> - <h4 className="channel-intro-title">Welcome</h4> - <p> + <h4 className="channel-intro__title">Beginning of {ui_name}</h4> + <p className="channel-intro__content"> { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." : "This is the start of the " + ui_name + " " + ui_type + ", created on "+ utils.displayDate(channel.create_at) + "." } { channel.type === 'P' ? " Only invited members can see this private group." : " Any member can join and read this channel." } <br/> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> - <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a> </p> + <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}><i className="fa fa-pencil"></i>Set a description</a> + <a className="intro-links" href="#" style={userStyle} data-toggle="modal" data-target="#channel_invite"><i className="fa fa-user-plus"></i>Invite others to this {ui_type}</a> </div> ); } diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx index 7315266e6..3a5be4e08 100644 --- a/web/react/components/post_right.jsx +++ b/web/react/components/post_right.jsx @@ -351,6 +351,7 @@ module.exports = React.createClass({ $(".post-right__scroll").css("height", height + "px"); $(".post-right__scroll").scrollTop(100000); $(".post-right__scroll").perfectScrollbar(); + $(".post-right__scroll").perfectScrollbar('update'); }, render: function() { diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index bab2897b6..7a7e92854 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -115,7 +115,11 @@ module.exports = React.createClass({ return ( <div className="team__header theme"> <a className="settings_link" href="#" data-toggle="modal" data-target="#user_settings1"> + { me.last_picture_update ? <img className="user__picture" src={"/api/v1/users/" + me.id + "/image?time=" + me.update_at} /> + : + <div /> + } <div className="header__info"> <div className="user__name">{ '@' + me.username}</div> <div className="team__name">{ teamDisplayName }</div> diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 59c97c309..ad890334e 100644 --- a/web/react/components/user_settings.jsx +++ b/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">×</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">×</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> diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx index 1761e575a..421027244 100644 --- a/web/react/components/user_settings_modal.jsx +++ b/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"> diff --git a/web/react/pages/channel.jsx b/web/react/pages/channel.jsx index f70d60e3a..cc78df120 100644 --- a/web/react/pages/channel.jsx +++ b/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') + ); + }; |