summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/access_history_modal.jsx100
-rw-r--r--web/react/components/activity_log_modal.jsx119
-rw-r--r--web/react/components/command_list.jsx17
-rw-r--r--web/react/components/create_comment.jsx65
-rw-r--r--web/react/components/create_post.jsx101
-rw-r--r--web/react/components/edit_channel_modal.jsx18
-rw-r--r--web/react/components/error_bar.jsx42
-rw-r--r--web/react/components/file_preview.jsx5
-rw-r--r--web/react/components/navbar.jsx2
-rw-r--r--web/react/components/post.jsx2
-rw-r--r--web/react/components/post_list.jsx36
-rw-r--r--web/react/components/post_right.jsx52
-rw-r--r--web/react/components/setting_picture.jsx6
-rw-r--r--web/react/components/sidebar_header.jsx12
-rw-r--r--web/react/components/signup_team.jsx4
-rw-r--r--web/react/components/signup_team_complete.jsx2
-rw-r--r--web/react/components/team_settings.jsx3
-rw-r--r--web/react/components/user_settings.jsx172
-rw-r--r--web/react/components/user_settings_modal.jsx2
-rw-r--r--web/react/components/view_image.jsx13
-rw-r--r--web/react/pages/channel.jsx12
-rw-r--r--web/react/stores/post_store.jsx44
-rw-r--r--web/react/stores/user_store.jsx4
-rw-r--r--web/react/utils/constants.jsx1
24 files changed, 567 insertions, 267 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..462f046f6
--- /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="#" className="theme" 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">&times;</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..7cce807a9
--- /dev/null
+++ b/web/react/components/activity_log_modal.jsx
@@ -0,0 +1,119 @@
+// 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";
+ }
+ else if (currentSession.props.platform === "Linux") {
+ devicePicture = "fa fa-linux";
+ }
+
+ 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>
+ </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">&times;</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/command_list.jsx b/web/react/components/command_list.jsx
index 023f5f760..5efe98dc6 100644
--- a/web/react/components/command_list.jsx
+++ b/web/react/components/command_list.jsx
@@ -20,12 +20,7 @@ module.exports = React.createClass({
},
getSuggestedCommands: function(cmd) {
- if (cmd == "") {
- this.setState({ suggestions: [ ], cmd: "" });
- return;
- }
-
- if (cmd.indexOf("/") != 0) {
+ if (!cmd || cmd.charAt(0) != '/') {
this.setState({ suggestions: [ ], cmd: "" });
return;
}
@@ -35,17 +30,19 @@ module.exports = React.createClass({
cmd,
true,
function(data) {
- if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) data.suggestions = [];
+ if (data.suggestions.length === 1 && data.suggestions[0].suggestion === cmd) {
+ data.suggestions = [];
+ }
this.setState({ suggestions: data.suggestions, cmd: cmd });
}.bind(this),
function(err){
- }.bind(this)
+ }
);
},
render: function() {
if (this.state.suggestions.length == 0) return (<div/>);
- var suggestions = []
+ var suggestions = [];
for (var i = 0; i < this.state.suggestions.length; i++) {
if (this.state.suggestions[i].suggestion != this.state.cmd) {
@@ -59,7 +56,7 @@ module.exports = React.createClass({
}
return (
- <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions*37)+2}}>
+ <div ref="mentionlist" className="command-box" style={{height:(this.state.suggestions.length*37)+2}}>
{ suggestions }
</div>
);
diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx
index 6ed0f0b34..3f8e9ed2e 100644
--- a/web/react/components/create_comment.jsx
+++ b/web/react/components/create_comment.jsx
@@ -5,6 +5,7 @@ var client = require('../utils/client.jsx');
var AsyncClient =require('../utils/async_client.jsx');
var SocketStore = require('../stores/socket_store.jsx');
var ChannelStore = require('../stores/channel_store.jsx');
+var PostStore = require('../stores/post_store.jsx');
var Textbox = require('./textbox.jsx');
var MsgTyping = require('./msg_typing.jsx');
var FileUpload = require('./file_upload.jsx');
@@ -43,6 +44,7 @@ module.exports = React.createClass({
client.createPost(post, ChannelStore.getCurrent(),
function(data) {
+ PostStore.storeCommentDraft(this.props.rootId, null);
this.setState({ messageText: '', submitting: false, post_error: null, server_error: null });
this.clearPreviews();
AsyncClient.getPosts(true, this.props.channelId);
@@ -82,16 +84,33 @@ module.exports = React.createClass({
}
},
handleUserInput: function(messageText) {
+ var draft = PostStore.getCommentDraft(this.props.rootId);
+ if (!draft) {
+ draft = { previews: [], uploadsInProgress: 0};
+ }
+ draft.message = messageText;
+ PostStore.storeCommentDraft(this.props.rootId, draft);
+
$(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
$(".post-right__scroll").perfectScrollbar('update');
this.setState({messageText: messageText});
},
handleFileUpload: function(newPreviews) {
+ var draft = PostStore.getCommentDraft(this.props.rootId);
+ if (!draft) {
+ draft = { message: '', uploadsInProgress: 0, previews: []}
+ }
+
$(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
$(".post-right__scroll").perfectScrollbar('update');
- var oldPreviews = this.state.previews;
+ var previews = this.state.previews.concat(newPreviews);
var num = this.state.uploadsInProgress;
- this.setState({previews: oldPreviews.concat(newPreviews), uploadsInProgress:num-1});
+
+ draft.previews = previews;
+ draft.uploadsInProgress = num-1;
+ PostStore.storeCommentDraft(this.props.rootId, draft);
+
+ this.setState({previews: previews, uploadsInProgress: num-1});
},
handleUploadError: function(err) {
this.setState({ server_error: err });
@@ -107,10 +126,43 @@ module.exports = React.createClass({
break;
}
}
+
+ var draft = PostStore.getCommentDraft();
+ if (!draft) {
+ draft = { message: '', uploadsInProgress: 0};
+ }
+ draft.previews = previews;
+ PostStore.storeCommentDraft(draft);
+
this.setState({previews: previews});
},
getInitialState: function() {
- return { messageText: '', uploadsInProgress: 0, previews: [], submitting: false };
+ PostStore.clearCommentDraftUploads();
+
+ var draft = PostStore.getCommentDraft(this.props.rootId);
+ messageText = '';
+ uploadsInProgress = 0;
+ previews = [];
+ if (draft) {
+ messageText = draft.message;
+ uploadsInProgress = draft.uploadsInProgress;
+ previews = draft.previews
+ }
+ return { messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews, submitting: false };
+ },
+ componentWillReceiveProps: function(newProps) {
+ if(newProps.rootId !== this.props.rootId) {
+ var draft = PostStore.getCommentDraft(newProps.rootId);
+ messageText = '';
+ uploadsInProgress = 0;
+ previews = [];
+ if (draft) {
+ messageText = draft.message;
+ uploadsInProgress = draft.uploadsInProgress;
+ previews = draft.previews
+ }
+ this.setState({ messageText: messageText, uploadsInProgress: uploadsInProgress, previews: previews });
+ }
},
setUploads: function(val) {
var oldInProgress = this.state.uploadsInProgress
@@ -126,6 +178,13 @@ module.exports = React.createClass({
var numToUpload = newInProgress - oldInProgress;
if (numToUpload <= 0) return 0;
+ var draft = PostStore.getCommentDraft(this.props.rootId);
+ if (!draft) {
+ draft = { message: '', previews: []};
+ }
+ draft.uploadsInProgress = newInProgress;
+ PostStore.storeCommentDraft(this.props.rootId, draft);
+
this.setState({uploadsInProgress: newInProgress});
return numToUpload;
diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx
index d38a6798f..91d070958 100644
--- a/web/react/components/create_post.jsx
+++ b/web/react/components/create_post.jsx
@@ -31,6 +31,11 @@ module.exports = React.createClass({
post.message = this.state.messageText;
+ // if this is a reply, trim off any carets from the beginning of a message
+ if (this.state.rootId && post.message.startsWith("^")) {
+ post.message = post.message.replace(/^\^+\s*/g, "");
+ }
+
if (post.message.trim().length === 0 && this.state.previews.length === 0) {
return;
}
@@ -50,7 +55,7 @@ module.exports = React.createClass({
post.message,
false,
function(data) {
- PostStore.storeDraft(data.channel_id, user_id, null);
+ PostStore.storeDraft(data.channel_id, null);
this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
if (data.goto_location.length > 0) {
@@ -68,9 +73,12 @@ module.exports = React.createClass({
post.channel_id = this.state.channel_id;
post.filenames = this.state.previews;
+ post.root_id = this.state.rootId;
+ post.parent_id = this.state.parentId;
+
client.createPost(post, ChannelStore.getCurrent(),
function(data) {
- PostStore.storeDraft(data.channel_id, data.user_id, null);
+ PostStore.storeDraft(data.channel_id, null);
this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null });
this.resizePostHolder();
AsyncClient.getPosts(true);
@@ -84,7 +92,13 @@ module.exports = React.createClass({
}.bind(this),
function(err) {
var state = {}
- state.server_error = err.message;
+
+ if (err.message === "Invalid RootId parameter") {
+ if ($('#post_deleted').length > 0) $('#post_deleted').modal('show');
+ } else {
+ state.server_error = err.message;
+ }
+
state.submitting = false;
this.setState(state);
}.bind(this)
@@ -92,6 +106,17 @@ module.exports = React.createClass({
}
$(".post-list-holder-by-time").perfectScrollbar('update');
+
+ if (this.state.rootId || this.state.parentId) {
+ this.setState({rootId: "", parentId: "", caretCount: 0});
+
+ // clear the active thread since we've now sent our message
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.RECEIVED_ACTIVE_THREAD_CHANGED,
+ root_id: "",
+ parent_id: ""
+ });
+ }
},
componentDidUpdate: function() {
this.resizePostHolder();
@@ -112,6 +137,63 @@ module.exports = React.createClass({
handleUserInput: function(messageText) {
this.resizePostHolder();
this.setState({messageText: messageText});
+
+ // look to see if the message begins with any carets to indicate that it's a reply
+ var replyMatch = messageText.match(/^\^+/g);
+ if (replyMatch) {
+ // the number of carets indicates how many message threads back we're replying to
+ var caretCount = replyMatch[0].length;
+
+ // note that if someone else replies to this thread while a user is typing a reply, the message to which they're replying
+ // won't change unless they change the number of carets. this is probably the desired behaviour since we don't want the
+ // active message thread to change without the user noticing
+ if (caretCount != this.state.caretCount) {
+ this.setState({caretCount: caretCount});
+
+ var posts = PostStore.getCurrentPosts();
+
+ var rootId = "";
+
+ // find the nth most recent post that isn't a comment on another (ie it has no parent) where n is caretCount
+ for (var i = 0; i < posts.order.length; i++) {
+ var postId = posts.order[i];
+
+ if (posts.posts[postId].parent_id === "") {
+ caretCount -= 1;
+
+ if (caretCount < 1) {
+ rootId = postId;
+ break;
+ }
+ }
+ }
+
+ // only dispatch an event if something changed
+ if (rootId != this.state.rootId) {
+ // set the parent id to match the root id so that we're replying to the first post in the thread
+ var parentId = rootId;
+
+ // alert the post list so that it can display the active thread
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.RECEIVED_ACTIVE_THREAD_CHANGED,
+ root_id: rootId,
+ parent_id: parentId
+ });
+ }
+ }
+ } else {
+ if (this.state.caretCount > 0) {
+ this.setState({caretCount: 0});
+
+ // clear the active thread since there no longer is one
+ AppDispatcher.handleViewAction({
+ type: ActionTypes.RECEIVED_ACTIVE_THREAD_CHANGED,
+ root_id: "",
+ parent_id: ""
+ });
+ }
+ }
+
var draft = PostStore.getCurrentDraft();
if (!draft) {
draft = {}
@@ -127,7 +209,7 @@ module.exports = React.createClass({
$(window).trigger('resize');
},
handleFileUpload: function(newPreviews, channel_id) {
- var draft = PostStore.getDraft(channel_id, UserStore.getCurrentId());
+ var draft = PostStore.getDraft(channel_id);
if (!draft) {
draft = {}
draft['message'] = '';
@@ -148,7 +230,7 @@ module.exports = React.createClass({
} else {
draft['previews'] = draft['previews'].concat(newPreviews);
draft['uploadsInProgress'] = draft['uploadsInProgress'] > 0 ? draft['uploadsInProgress'] - 1 : 0;
- PostStore.storeDraft(channel_id, UserStore.getCurrentId(), draft);
+ PostStore.storeDraft(channel_id, draft);
}
},
handleUploadError: function(err) {
@@ -174,10 +256,12 @@ module.exports = React.createClass({
},
componentDidMount: function() {
ChannelStore.addChangeListener(this._onChange);
+ PostStore.addActiveThreadChangedListener(this._onActiveThreadChanged);
this.resizePostHolder();
},
componentWillUnmount: function() {
ChannelStore.removeChangeListener(this._onChange);
+ PostStore.removeActiveThreadChangedListener(this._onActiveThreadChanged);
},
_onChange: function() {
var channel_id = ChannelStore.getCurrentId();
@@ -194,6 +278,11 @@ module.exports = React.createClass({
this.setState({ channel_id: channel_id, messageText: messageText, initialText: messageText, submitting: false, post_error: null, previews: previews, uploadsInProgress: uploadsInProgress });
}
},
+ _onActiveThreadChanged: function(rootId, parentId) {
+ // note that we register for our own events and set the state from there so we don't need to manually set
+ // our state and dispatch an event each time the active thread changes
+ this.setState({"rootId": rootId, "parentId": parentId});
+ },
getInitialState: function() {
PostStore.clearDraftUploads();
@@ -204,7 +293,7 @@ module.exports = React.createClass({
previews = draft['previews'];
messageText = draft['message'];
}
- return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText };
+ return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText, caretCount: 0 };
},
setUploads: function(val) {
var oldInProgress = this.state.uploadsInProgress
diff --git a/web/react/components/edit_channel_modal.jsx b/web/react/components/edit_channel_modal.jsx
index c0818959a..d055feacd 100644
--- a/web/react/components/edit_channel_modal.jsx
+++ b/web/react/components/edit_channel_modal.jsx
@@ -6,17 +6,24 @@ var AsyncClient = require('../utils/async_client.jsx');
module.exports = React.createClass({
handleEdit: function(e) {
- var data = {}
+ var data = {};
data["channel_id"] = this.state.channel_id;
if (data["channel_id"].length !== 26) return;
data["channel_description"] = this.state.description.trim();
Client.updateChannelDesc(data,
function(data) {
+ this.setState({ server_error: "" });
AsyncClient.getChannels(true);
+ $(this.refs.modal.getDOMNode()).modal('hide');
}.bind(this),
function(err) {
- AsyncClient.dispatchError(err, "updateChannelDesc");
+ if (err.message === "Invalid channel_description parameter") {
+ this.setState({ server_error: "This description is too long, please enter a shorter one" });
+ }
+ else {
+ this.setState({ server_error: err.message });
+ }
}.bind(this)
);
},
@@ -27,13 +34,15 @@ module.exports = React.createClass({
var self = this;
$(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) {
var button = e.relatedTarget;
- self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid') });
+ self.setState({ description: $(button).attr('data-desc'), title: $(button).attr('data-title'), channel_id: $(button).attr('data-channelid'), server_error: "" });
});
},
getInitialState: function() {
return { description: "", title: "", channel_id: "" };
},
render: function() {
+ var server_error = this.state.server_error ? <div className='form-group has-error'><br/><label className='control-label'>{ this.state.server_error }</label></div> : null;
+
return (
<div className="modal fade" ref="modal" id="edit_channel" role="dialog" aria-hidden="true">
<div className="modal-dialog">
@@ -44,10 +53,11 @@ module.exports = React.createClass({
</div>
<div className="modal-body">
<textarea className="form-control no-resize" rows="6" ref="channelDesc" maxLength="1024" value={this.state.description} onChange={this.handleUserInput}></textarea>
+ { server_error }
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
- <button type="button" className="btn btn-primary" data-dismiss="modal" onClick={this.handleEdit}>Save</button>
+ <button type="button" className="btn btn-primary" onClick={this.handleEdit}>Save</button>
</div>
</div>
</div>
diff --git a/web/react/components/error_bar.jsx b/web/react/components/error_bar.jsx
index d9d91ef51..f7514a009 100644
--- a/web/react/components/error_bar.jsx
+++ b/web/react/components/error_bar.jsx
@@ -8,21 +8,25 @@ var Constants = require('../utils/constants.jsx');
var ActionTypes = Constants.ActionTypes;
function getStateFromStores() {
- var error = ErrorStore.getLastError();
- if (error && error.message !== "There appears to be a problem with your internet connection") {
- return { message: error.message };
- } else {
- return { message: null };
- }
+ var error = ErrorStore.getLastError();
+ if (error && error.message !== "There appears to be a problem with your internet connection") {
+ return { message: error.message };
+ } else {
+ return { message: null };
+ }
}
module.exports = React.createClass({
+ displayName: 'ErrorBar',
+
componentDidMount: function() {
ErrorStore.addChangeListener(this._onChange);
- $('body').css('padding-top', $('#error_bar').outerHeight());
- $(window).resize(function(){
- $('body').css('padding-top', $('#error_bar').outerHeight());
- });
+ $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+ $(window).resize(function() {
+ if (this.state.message) {
+ $('body').css('padding-top', $(React.findDOMNode(this)).outerHeight());
+ }
+ }.bind(this));
},
componentWillUnmount: function() {
ErrorStore.removeChangeListener(this._onChange);
@@ -31,39 +35,39 @@ module.exports = React.createClass({
var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
if (newState.message) {
- var self = this;
- setTimeout(function(){self.handleClose();}, 10000);
+ setTimeout(this.handleClose, 10000);
}
+
this.setState(newState);
}
},
handleClose: function(e) {
if (e) e.preventDefault();
+
AppDispatcher.handleServerAction({
type: ActionTypes.RECIEVED_ERROR,
err: null
});
+
$('body').css('padding-top', '0');
},
getInitialState: function() {
var state = getStateFromStores();
if (state.message) {
- var self = this;
- setTimeout(function(){self.handleClose();}, 10000);
+ setTimeout(this.handleClose, 10000);
}
return state;
},
render: function() {
- var message = this.state.message;
- if (message) {
+ if (this.state.message) {
return (
<div className="error-bar">
- <span className="error-text">{message}</span>
- <a href="#" className="error-close pull-right" onClick={this.handleClose}>×</a>
+ <span>{this.state.message}</span>
+ <a href="#" className="error-bar__close" onClick={this.handleClose}>&times;</a>
</div>
);
} else {
return <div/>;
}
}
-});
+}); \ No newline at end of file
diff --git a/web/react/components/file_preview.jsx b/web/react/components/file_preview.jsx
index e69607206..fdd12feec 100644
--- a/web/react/components/file_preview.jsx
+++ b/web/react/components/file_preview.jsx
@@ -16,6 +16,7 @@ module.exports = React.createClass({
var previews = [];
this.props.files.forEach(function(filename) {
+ var originalFilename = filename;
var filenameSplit = filename.split('.');
var ext = filenameSplit[filenameSplit.length-1];
var type = utils.getFileType(ext);
@@ -27,14 +28,14 @@ module.exports = React.createClass({
if (type === "image") {
previews.push(
- <div key={filename} className="preview-div" data-filename={filename}>
+ <div key={filename} className="preview-div" data-filename={originalFilename}>
<img className="preview-img" src={filename}/>
<a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
</div>
);
} else {
previews.push(
- <div key={filename} className="preview-div custom-file" data-filename={filename}>
+ <div key={filename} className="preview-div custom-file" data-filename={originalFilename}>
<div className={"file-icon "+utils.getIconClassName(type)}/>
<a className="remove-preview" onClick={this.handleRemove}><i className="glyphicon glyphicon-remove"/></a>
</div>
diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx
index 34c65c34f..500fabb0e 100644
--- a/web/react/components/navbar.jsx
+++ b/web/react/components/navbar.jsx
@@ -28,7 +28,7 @@ function getCountsStateFromStores() {
} else {
if (channelMember.mention_count > 0) {
count += channelMember.mention_count;
- } else if (channel.total_msg_count - channelMember.msg_count > 0) {
+ } else if (channelMember.notify_level !== "quiet" && channel.total_msg_count - channelMember.msg_count > 0) {
count += 1;
}
}
diff --git a/web/react/components/post.jsx b/web/react/components/post.jsx
index e72a2d001..e3586ecde 100644
--- a/web/react/components/post.jsx
+++ b/web/react/components/post.jsx
@@ -83,7 +83,7 @@ module.exports = React.createClass({
<img className="post-profile-img" src={"/api/v1/users/" + post.user_id + "/image?time=" + timestamp} height="36" width="36" />
</div>
: null }
- <div className="post__content">
+ <div className={"post__content" + (this.props.isActiveThread ? " active-thread__content" : "")}>
<PostHeader ref="header" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} isLastComment={this.props.isLastComment} />
<PostBody post={post} sameRoot={this.props.sameRoot} parentPost={parentPost} posts={posts} handleCommentClick={this.handleCommentClick} />
<PostInfo ref="info" post={post} sameRoot={this.props.sameRoot} commentCount={commentCount} handleCommentClick={this.handleCommentClick} allowReply="true" />
diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx
index c058455ba..8dc5013ca 100644
--- a/web/react/components/post_list.jsx
+++ b/web/react/components/post_list.jsx
@@ -22,7 +22,8 @@ function getStateFromStores() {
return {
post_list: PostStore.getCurrentPosts(),
- channel: channel
+ channel: channel,
+ activeThreadRootId: ""
};
}
@@ -51,6 +52,7 @@ module.exports = React.createClass({
ChannelStore.addChangeListener(this._onChange);
UserStore.addStatusesChangeListener(this._onTimeChange);
SocketStore.addChangeListener(this._onSocketChange);
+ PostStore.addActiveThreadChangedListener(this._onActiveThreadChanged);
$(".post-list-holder-by-time").perfectScrollbar();
@@ -131,6 +133,7 @@ module.exports = React.createClass({
ChannelStore.removeChangeListener(this._onChange);
UserStore.removeStatusesChangeListener(this._onTimeChange);
SocketStore.removeChangeListener(this._onSocketChange);
+ PostStore.removeActiveThreadChangedListener(this._onActiveThreadChanged);
$('body').off('click.userpopover');
},
resize: function() {
@@ -223,11 +226,15 @@ module.exports = React.createClass({
}
},
_onTimeChange: function() {
+ if (!this.state.post_list) return;
for (var id in this.state.post_list.posts) {
if (!this.refs[id]) continue;
this.refs[id].forceUpdateInfo();
}
},
+ _onActiveThreadChanged: function(rootId, parentId) {
+ this.setState({"activeThreadRootId": rootId});
+ },
getMorePosts: function(e) {
e.preventDefault();
@@ -347,8 +354,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"}
@@ -365,27 +372,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>
);
}
@@ -419,7 +426,14 @@ module.exports = React.createClass({
// it is the last comment if it is last post in the channel or the next post has a different root post
var isLastComment = utils.isComment(post) && (i === 0 || posts[order[i-1]].root_id != post.root_id);
- var postCtl = <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id} posts={posts} hideProfilePic={hideProfilePic} isLastComment={isLastComment} />;
+ // check if this is part of the thread that we're currently replying to
+ var isActiveThread = this.state.activeThreadRootId && (post.id === this.state.activeThreadRootId || post.root_id === this.state.activeThreadRootId);
+
+ var postCtl = (
+ <Post ref={post.id} sameUser={sameUser} sameRoot={sameRoot} post={post} parentPost={parentPost} key={post.id}
+ posts={posts} hideProfilePic={hideProfilePic} isLastComment={isLastComment} isActiveThread={isActiveThread}
+ />
+ );
currentPostDay = utils.getDateForUnixTicks(post.create_at);
if (currentPostDay.toDateString() != previousPostDay.toDateString()) {
diff --git a/web/react/components/post_right.jsx b/web/react/components/post_right.jsx
index 581a1abe9..93f5d91b0 100644
--- a/web/react/components/post_right.jsx
+++ b/web/react/components/post_right.jsx
@@ -91,28 +91,27 @@ RootPost = React.createClass({
var re2 = new RegExp('\\(', 'g');
var re3 = new RegExp('\\)', 'g');
for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
- var fileSplit = filenames[i].split('.');
- if (fileSplit.length < 2) continue;
+ var fileInfo = utils.splitFileLocation(filenames[i]);
+ var ftype = utils.getFileType(fileInfo.ext);
- var ext = fileSplit[fileSplit.length-1];
- fileSplit.splice(fileSplit.length-1,1);
- var filePath = fileSplit.join('.');
- var filename = filePath.split('/')[filePath.split('/').length-1];
-
- var ftype = utils.getFileType(ext);
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+ fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+ }
+ fileInfo.path = window.location.origin + "/api/v1/files/get" + fileInfo.path;
if (ftype === "image") {
- var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+ var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
postFiles.push(
- <div className="post-image__column" key={filePath}>
- <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filePath} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
+ <div className="post-image__column" key={fileInfo.path}>
+ <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
</div>
);
images.push(filenames[i]);
} else {
postFiles.push(
- <div className="post-image__column custom-file" key={filePath}>
- <a href={filePath+"."+ext} download={filename+"."+ext}>
+ <div className="post-image__column custom-file" key={fileInfo.path}>
+ <a href={fileInfo.path+"."+ext} download={fileInfo.name+"."+ext}>
<div className={"file-icon "+utils.getIconClassName(ftype)}/>
</a>
</div>
@@ -201,28 +200,28 @@ CommentPost = React.createClass({
var re2 = new RegExp('\\(', 'g');
var re3 = new RegExp('\\)', 'g');
for (var i = 0; i < filenames.length && i < Constants.MAX_DISPLAY_FILES; i++) {
- var fileSplit = filenames[i].split('.');
- if (fileSplit.length < 2) continue;
- var ext = fileSplit[fileSplit.length-1];
- fileSplit.splice(fileSplit.length-1,1)
- var filePath = fileSplit.join('.');
- var filename = filePath.split('/')[filePath.split('/').length-1];
+ var fileInfo = utils.splitFileLocation(filenames[i]);
+ var type = utils.getFileType(fileInfo.ext);
- var type = utils.getFileType(ext);
+ // This is a temporary patch to fix issue with old files using absolute paths
+ if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+ fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
+ }
+ fileInfo.path = window.location.origin + "/api/v1/files/get" + fileInfo.path;
if (type === "image") {
- var url = filePath.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
+ var url = fileInfo.path.replace(re1, '%20').replace(re2, '%28').replace(re3, '%29');
postFiles.push(
- <div className="post-image__column" key={filename}>
- <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={filename} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
+ <div className="post-image__column" key={fileInfo.path}>
+ <a href="#" onClick={this.handleImageClick} data-img-id={images.length.toString()} data-toggle="modal" data-target={"#" + postImageModalId }><div ref={fileInfo.path} className="post__image" style={{backgroundImage: 'url(' + url + '_thumb.jpg)'}}></div></a>
</div>
);
images.push(filenames[i]);
} else {
postFiles.push(
- <div className="post-image__column custom-file" key={filename}>
- <a href={filePath+"."+ext} download={filename+"."+ext}>
+ <div className="post-image__column custom-file" key={fileInfo.path}>
+ <a href={fileInfo.path+"."+fileInfo.ext} download={fileInfo.name+"."+fileInfo.ext}>
<div className={"file-icon "+utils.getIconClassName(type)}/>
</a>
</div>
@@ -294,6 +293,8 @@ module.exports = React.createClass({
});
},
componentDidUpdate: function() {
+ $(".post-right__scroll").scrollTop($(".post-right__scroll")[0].scrollHeight);
+ $(".post-right__scroll").perfectScrollbar('update');
this.resize();
},
componentWillUnmount: function() {
@@ -352,6 +353,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/setting_picture.jsx b/web/react/components/setting_picture.jsx
index 62c889b7f..6cfb74d60 100644
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -25,9 +25,9 @@ module.exports = React.createClass({
var img = null;
if (this.props.picture) {
- img = (<img ref="image" className="col-xs-5 profile-img" src=""/>);
+ img = (<img ref="image" className="profile-img" src=""/>);
} else {
- img = (<img ref="image" className="col-xs-5 profile-img" src={this.props.src}/>);
+ img = (<img ref="image" className="profile-img" src={this.props.src}/>);
}
var self = this;
@@ -37,7 +37,7 @@ module.exports = React.createClass({
<li className="col-xs-12 section-title">{this.props.title}</li>
<li className="col-xs-offset-3 col-xs-8">
<ul className="setting-list">
- <li className="row setting-list-item">
+ <li className="setting-list-item">
{img}
</li>
<li className="setting-list-item">
diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx
index bab2897b6..859e425a6 100644
--- a/web/react/components/sidebar_header.jsx
+++ b/web/react/components/sidebar_header.jsx
@@ -101,13 +101,13 @@ module.exports = React.createClass({
getDefaultProps: function() {
return {
- teamName: config.SiteName
+ teamDisplayName: config.SiteName
};
},
render: function() {
- var teamDisplayName = this.props.teamDisplayName ? this.props.teamDisplayName : config.SiteName;
- var me = UserStore.getCurrentUser()
+ var me = UserStore.getCurrentUser();
+
if (!me) {
return null;
}
@@ -115,10 +115,14 @@ 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} />
+ :
+ null
+ }
<div className="header__info">
<div className="user__name">{ '@' + me.username}</div>
- <div className="team__name">{ teamDisplayName }</div>
+ <div className="team__name">{ this.props.teamDisplayName }</div>
</div>
</a>
<NavbarDropdown teamType={this.props.teamType} />
diff --git a/web/react/components/signup_team.jsx b/web/react/components/signup_team.jsx
index cf982cc1e..362f79163 100644
--- a/web/react/components/signup_team.jsx
+++ b/web/react/components/signup_team.jsx
@@ -69,7 +69,9 @@ module.exports = React.createClass({
{ name_error }
</div>
{ server_error }
- <button className="btn btn-md btn-primary" type="submit">Sign up for Free</button>
+ <div className="form-group">
+ <button className="btn btn-md btn-primary" type="submit">Sign up for Free</button>
+ </div>
<div className="form-group form-group--small">
<span><a href="/find_team">{"Find my " + strings.Team}</a></span>
</div>
diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx
index 9ceeb6324..3e8a57308 100644
--- a/web/react/components/signup_team_complete.jsx
+++ b/web/react/components/signup_team_complete.jsx
@@ -246,7 +246,7 @@ TeamURLPage = React.createClass({
<h2>{utils.toTitleCase(strings.Team) + " URL"}</h2>
<div className={ name_error ? "form-group has-error" : "form-group" }>
<div className="row">
- <div className="col-sm-9">
+ <div className="col-sm-11">
<div className="input-group">
<span className="input-group-addon">{ window.location.origin + "/" }</span>
<input type="text" ref="name" className="form-control" placeholder="" maxLength="128" defaultValue={this.props.state.team.name} autoFocus={true} onFocus={this.handleFocus}/>
diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx
index 166b1f38b..3bbb5e892 100644
--- a/web/react/components/team_settings.jsx
+++ b/web/react/components/team_settings.jsx
@@ -73,13 +73,12 @@ var FeatureTab = React.createClass({
var inputs = [];
inputs.push(
- <div className="col-sm-12">
+ <div>
<div className="btn-group" data-toggle="buttons-radio">
<button className={"btn btn-default "+valetActive[0]} onClick={function(){self.handleValetRadio("true")}}>On</button>
<button className={"btn btn-default "+valetActive[1]} onClick={function(){self.handleValetRadio("false")}}>Off</button>
</div>
<div><br/>Valet is a preview feature for enabling a non-user account limited to basic member permissions that can be manipulated by 3rd parties.<br/><br/>IMPORTANT: The preview version of Valet should not be used without a secure connection and a trusted 3rd party, since user credentials are used to connect. OAuth2 will be used in the final release.</div>
- <br></br>
</div>
);
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 0d3349dbc..298f5ee70 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">&times;</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">&times;</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: '' };
},
@@ -727,6 +592,10 @@ var SecurityTab = React.createClass({
<div className="divider-dark first"/>
{ passwordSection }
<div className="divider-dark"/>
+ <br></br>
+ <a data-toggle="modal" className="security-links theme" 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 theme" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Devices</a>
</div>
</div>
);
@@ -1241,23 +1110,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/components/view_image.jsx b/web/react/components/view_image.jsx
index ac0ecf299..c107de4d7 100644
--- a/web/react/components/view_image.jsx
+++ b/web/react/components/view_image.jsx
@@ -37,7 +37,7 @@ module.exports = React.createClass({
} else {
var fileInfo = utils.splitFileLocation(this.props.filenames[id]);
// This is a temporary patch to fix issue with old files using absolute paths
- if (fileInfo.path.indexOf("/api/v1/files/get") != -1) {
+ if (fileInfo.path.indexOf("/api/v1/files/get") !== -1) {
fileInfo.path = fileInfo.path.split("/api/v1/files/get")[1];
}
fileInfo.path = window.location.origin + "/api/v1/files/get" + fileInfo.path;
@@ -145,7 +145,7 @@ module.exports = React.createClass({
preview_filename = this.props.filenames[this.state.imgId];
} else {
// This is a temporary patch to fix issue with old files using absolute paths
- if (info.path.indexOf("/api/v1/files/get") != -1) {
+ if (info.path.indexOf("/api/v1/files/get") !== -1) {
info.path = info.path.split("/api/v1/files/get")[1];
}
info.path = window.location.origin + "/api/v1/files/get" + info.path;
@@ -161,6 +161,13 @@ module.exports = React.createClass({
var imgFragment = React.addons.createFragment(img);
+ // This is a temporary patch to fix issue with old files using absolute paths
+ var download_link = this.props.filenames[this.state.imgId];
+ if (download_link.indexOf("/api/v1/files/get") !== -1) {
+ download_link = download_link.split("/api/v1/files/get")[1];
+ }
+ download_link = window.location.origin + "/api/v1/files/get" + download_link;
+
return (
<div className="modal fade image_modal" ref="modal" id={this.props.modalId} tabIndex="-1" role="dialog" aria-hidden="true">
<div className="modal-dialog modal-image">
@@ -178,7 +185,7 @@ module.exports = React.createClass({
<span className="text"> | </span>
</div>
: "" }
- <a href={this.props.filenames[id]} download={decodeURIComponent(name)} className="text">Download</a>
+ <a href={download_link} download={decodeURIComponent(name)} className="text">Download</a>
</div>
</div>
{loading}
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')
+ );
+
};
diff --git a/web/react/stores/post_store.jsx b/web/react/stores/post_store.jsx
index 5280bfe08..0745fcdc3 100644
--- a/web/react/stores/post_store.jsx
+++ b/web/react/stores/post_store.jsx
@@ -18,6 +18,7 @@ var SEARCH_TERM_CHANGE_EVENT = 'search_term_change';
var SELECTED_POST_CHANGE_EVENT = 'selected_post_change';
var MENTION_DATA_CHANGE_EVENT = 'mention_data_change';
var ADD_MENTION_EVENT = 'add_mention';
+var ACTIVE_THREAD_CHANGED_EVENT = 'active_thread_changed';
var PostStore = assign({}, EventEmitter.prototype, {
@@ -93,6 +94,18 @@ var PostStore = assign({}, EventEmitter.prototype, {
this.removeListener(ADD_MENTION_EVENT, callback);
},
+ emitActiveThreadChanged: function(rootId, parentId) {
+ this.emit(ACTIVE_THREAD_CHANGED_EVENT, rootId, parentId);
+ },
+
+ addActiveThreadChangedListener: function(callback) {
+ this.on(ACTIVE_THREAD_CHANGED_EVENT, callback);
+ },
+
+ removeActiveThreadChangedListener: function(callback) {
+ this.removeListener(ACTIVE_THREAD_CHANGED_EVENT, callback);
+ },
+
getCurrentPosts: function() {
var currentId = ChannelStore.getCurrentId();
@@ -136,19 +149,23 @@ var PostStore = assign({}, EventEmitter.prototype, {
},
storeCurrentDraft: function(draft) {
var channel_id = ChannelStore.getCurrentId();
- var user_id = UserStore.getCurrentId();
- BrowserStore.setItem("draft_" + channel_id + "_" + user_id, draft);
+ BrowserStore.setItem("draft_" + channel_id, draft);
},
getCurrentDraft: function() {
var channel_id = ChannelStore.getCurrentId();
- var user_id = UserStore.getCurrentId();
- return BrowserStore.getItem("draft_" + channel_id + "_" + user_id);
+ return BrowserStore.getItem("draft_" + channel_id);
+ },
+ storeDraft: function(channel_id, draft) {
+ BrowserStore.setItem("draft_" + channel_id, draft);
+ },
+ getDraft: function(channel_id) {
+ return BrowserStore.getItem("draft_" + channel_id);
},
- storeDraft: function(channel_id, user_id, draft) {
- BrowserStore.setItem("draft_" + channel_id + "_" + user_id, draft);
+ storeCommentDraft: function(parent_post_id, draft) {
+ BrowserStore.setItem("comment_draft_" + parent_post_id, draft);
},
- getDraft: function(channel_id, user_id) {
- return BrowserStore.getItem("draft_" + channel_id + "_" + user_id);
+ getCommentDraft: function(parent_post_id) {
+ return BrowserStore.getItem("comment_draft_" + parent_post_id);
},
clearDraftUploads: function() {
BrowserStore.actionOnItemsWithPrefix("draft_", function (key, value) {
@@ -157,6 +174,14 @@ var PostStore = assign({}, EventEmitter.prototype, {
BrowserStore.setItem(key, value);
}
});
+ },
+ clearCommentDraftUploads: function() {
+ BrowserStore.actionOnItemsWithPrefix("comment_draft_", function (key, value) {
+ if (value) {
+ value.uploadsInProgress = 0;
+ BrowserStore.setItem(key, value);
+ }
+ });
}
});
@@ -186,6 +211,9 @@ PostStore.dispatchToken = AppDispatcher.register(function(payload) {
case ActionTypes.RECIEVED_ADD_MENTION:
PostStore.emitAddMention(action.id, action.username);
break;
+ case ActionTypes.RECEIVED_ACTIVE_THREAD_CHANGED:
+ PostStore.emitActiveThreadChanged(action.root_id, action.parent_id);
+ break;
default:
}
diff --git a/web/react/stores/user_store.jsx b/web/react/stores/user_store.jsx
index d03016c5d..001162f47 100644
--- a/web/react/stores/user_store.jsx
+++ b/web/react/stores/user_store.jsx
@@ -183,6 +183,9 @@ var UserStore = assign({}, EventEmitter.prototype, {
var keys = [];
+ if (!user)
+ return keys;
+
if (user.notify_props && user.notify_props.mention_keys) keys = keys.concat(user.notify_props.mention_keys.split(','));
if (user.first_name && user.notify_props.first_name === "true") keys.push(user.first_name);
if (user.notify_props.all === "true") keys.push('@all');
@@ -258,4 +261,3 @@ UserStore.dispatchToken = AppDispatcher.register(function(payload) {
UserStore.setMaxListeners(0);
global.window.UserStore = UserStore;
module.exports = UserStore;
-
diff --git a/web/react/utils/constants.jsx b/web/react/utils/constants.jsx
index 187e3c4a3..2249da0d3 100644
--- a/web/react/utils/constants.jsx
+++ b/web/react/utils/constants.jsx
@@ -18,6 +18,7 @@ module.exports = {
RECIEVED_POST_SELECTED: null,
RECIEVED_MENTION_DATA: null,
RECIEVED_ADD_MENTION: null,
+ RECEIVED_ACTIVE_THREAD_CHANGED: null,
RECIEVED_PROFILES: null,
RECIEVED_ME: null,