diff options
Diffstat (limited to 'web/react/components')
20 files changed, 515 insertions, 258 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">×</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">×</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}>×</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">×</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: '' }; }, @@ -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} |