diff options
Diffstat (limited to 'web/react/components')
24 files changed, 562 insertions, 185 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx index 006c168ba..428d3ed81 100644 --- a/web/react/components/channel_header.jsx +++ b/web/react/components/channel_header.jsx @@ -15,17 +15,8 @@ var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); var Constants = require('../utils/constants.jsx'); var ActionTypes = Constants.ActionTypes; -function getExtraInfoStateFromStores() { - return { - extra_info: ChannelStore.getCurrentExtraInfo() - }; -} - var ExtraMembers = React.createClass({ componentDidMount: function() { - ChannelStore.addExtraInfoChangeListener(this._onChange); - ChannelStore.addChangeListener(this._onChange); - var originalLeave = $.fn.popover.Constructor.prototype.leave; $.fn.popover.Constructor.prototype.leave = function(obj) { var self = obj instanceof this.constructor ? obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type); @@ -49,25 +40,12 @@ var ExtraMembers = React.createClass({ }); }, - componentWillUnmount: function() { - ChannelStore.removeExtraInfoChangeListener(this._onChange); - ChannelStore.removeChangeListener(this._onChange); - }, - _onChange: function() { - var newState = getExtraInfoStateFromStores(); - if (!utils.areStatesEqual(newState, this.state)) { - this.setState(newState); - } - }, - getInitialState: function() { - return getExtraInfoStateFromStores(); - }, render: function() { - var count = this.state.extra_info.members.length == 0 ? "-" : this.state.extra_info.members.length; - count = this.state.extra_info.members.length > 19 ? "20+" : count; + var count = this.props.members.length == 0 ? "-" : this.props.members.length; + count = this.props.members.length > 19 ? "20+" : count; var data_content = ""; - this.state.extra_info.members.forEach(function(m) { + this.props.members.forEach(function(m) { data_content += "<div style='white-space: nowrap'>" + m.username + "</div>"; }); @@ -201,7 +179,7 @@ module.exports = React.createClass({ </a> <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_info" data-channelid={this.state.channel.id} href="#">View Info</a></li> - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Invite Members</a></li> + <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> { isAdmin ? <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> : "" @@ -228,7 +206,7 @@ module.exports = React.createClass({ <a href="#"><strong className="heading">{channelTitle}</strong></a> } </th> - <th><ExtraMembers channelId={this.state.channel.id} /></th> + <th><ExtraMembers members={this.state.users} channelId={this.state.channel.id} /></th> { searchForm } <th> <div className="dropdown" style={{"marginLeft":"5px", "marginRight":"10px"}}> diff --git a/web/react/components/channel_info_modal.jsx b/web/react/components/channel_info_modal.jsx index 191297ce4..18addb52f 100644 --- a/web/react/components/channel_info_modal.jsx +++ b/web/react/components/channel_info_modal.jsx @@ -35,9 +35,18 @@ module.exports = React.createClass({ <h4 className="modal-title" id="myModalLabel">{channel.display_name}</h4> </div> <div className="modal-body"> - <p><strong>Channel Name: </strong>{channel.display_name}</p> - <p><strong>Channel Handle: </strong>{channel.name}</p> - <p><strong>Channel ID: </strong>{channel.id}</p> + <div className="row form-group"> + <div className="col-sm-3 info__label">Channel Name: </div> + <div className="col-sm-9">{channel.display_name}</div> + </div> + <div className="row form-group"> + <div className="col-sm-3 info__label">Channel Handle:</div> + <div className="col-sm-9">{channel.name}</div> + </div> + <div className="row"> + <div className="col-sm-3 info__label">Channel ID:</div> + <div className="col-sm-9">{channel.id}</div> + </div> </div> <div className="modal-footer"> <button type="button" className="btn btn-default" data-dismiss="modal">Close</button> diff --git a/web/react/components/channel_loader.jsx b/web/react/components/channel_loader.jsx index 5252f275c..537a41d03 100644 --- a/web/react/components/channel_loader.jsx +++ b/web/react/components/channel_loader.jsx @@ -18,6 +18,7 @@ module.exports = React.createClass({ AsyncClient.getChannelExtraInfo(true); AsyncClient.findTeams(); AsyncClient.getStatuses(); + AsyncClient.getMyTeam(); /* End of async loads */ diff --git a/web/react/components/channel_notifications.jsx b/web/react/components/channel_notifications.jsx index 085536a0a..fa9ab42ae 100644 --- a/web/react/components/channel_notifications.jsx +++ b/web/react/components/channel_notifications.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var SettingItemMin = require('./setting_item_min.jsx'); +var SettingItemMax = require('./setting_item_max.jsx'); var utils = require('../utils/utils.jsx'); var client = require('../utils/client.jsx'); @@ -9,26 +11,50 @@ var ChannelStore = require('../stores/channel_store.jsx'); module.exports = React.createClass({ componentDidMount: function() { + ChannelStore.addChangeListener(this._onChange); + var self = this; $(this.refs.modal.getDOMNode()).on('show.bs.modal', function(e) { var button = e.relatedTarget; var channel_id = button.dataset.channelid; var notifyLevel = ChannelStore.getMember(channel_id).notify_level; - self.setState({ notify_level: notifyLevel, title: button.dataset.title, channel_id: channel_id }); + var quietMode = false; + if (notifyLevel === "quiet") quietMode = true; + self.setState({ notify_level: notifyLevel, quiet_mode: quietMode, title: button.dataset.title, channel_id: channel_id }); }); }, + componentWillUnmount: function() { + ChannelStore.removeChangeListener(this._onChange); + }, + _onChange: function() { + if (!this.state.channel_id) return; + var notifyLevel = ChannelStore.getMember(this.state.channel_id).notify_level; + var quietMode = false; + if (notifyLevel === "quiet") quietMode = true; + + var newState = this.state; + newState.notify_level = notifyLevel; + newState.quiet_mode = quietMode; + + if (!utils.areStatesEqual(this.state, newState)) { + this.setState(newState); + } + }, + updateSection: function(section) { + this.setState({ activeSection: section }); + }, getInitialState: function() { - return { notify_level: "", title: "", channel_id: "" }; + return { notify_level: "", title: "", channel_id: "", activeSection: "" }; }, - handleUpdate: function(e) { + handleUpdate: function() { var channel_id = this.state.channel_id; - var notify_level = this.state.notify_level; + var notify_level = this.state.quiet_mode ? "quiet" : this.state.notify_level; var data = {}; data["channel_id"] = channel_id; data["user_id"] = UserStore.getCurrentId(); - data["notify_level"] = this.state.notify_level; + data["notify_level"] = notify_level; if (!data["notify_level"] || data["notify_level"].length === 0) return; @@ -37,7 +63,7 @@ module.exports = React.createClass({ var member = ChannelStore.getMember(channel_id); member.notify_level = notify_level; ChannelStore.setChannelMember(member); - $(this.refs.modal.getDOMNode()).modal('hide'); + this.updateSection(""); }.bind(this), function(err) { this.setState({ server_error: err.message }); @@ -45,42 +71,138 @@ module.exports = React.createClass({ ); }, handleRadioClick: function(notifyLevel) { - this.setState({ notify_level: notifyLevel }); + this.setState({ notify_level: notifyLevel, quiet_mode: false }); this.refs.modal.getDOMNode().focus(); }, - handleQuietToggle: function() { - if (this.state.notify_level === "quiet") { - this.setState({ notify_level: "none" }); - this.refs.modal.getDOMNode().focus(); - } else { - this.setState({ notify_level: "quiet" }); - this.refs.modal.getDOMNode().focus(); - } + handleQuietToggle: function(quietMode) { + this.setState({ notify_level: "none", quiet_mode: quietMode }); + this.refs.modal.getDOMNode().focus(); }, render: function() { var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; - var allActive = ""; - var mentionActive = ""; - var noneActive = ""; - var quietActive = ""; - var desktopHidden = ""; - - if (this.state.notify_level === "quiet") { - desktopHidden = "hidden"; - quietActive = "active"; - } else if (this.state.notify_level === "mention") { - mentionActive = "active"; - } else if (this.state.notify_level === "none") { - noneActive = "active"; + var self = this; + + var desktopSection; + if (this.state.activeSection === 'desktop') { + var notifyActive = [false, false, false]; + if (this.state.notify_level === "mention") { + notifyActive[1] = true; + } else if (this.state.notify_level === "all") { + notifyActive[0] = true; + } else { + notifyActive[2] = true; + } + + var inputs = []; + + inputs.push( + <div className="col-sm-12"> + <div className="radio"> + <label> + <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleRadioClick("all")}}>For all activity</input> + </label> + <br/> + </div> + <div className="radio"> + <label> + <input type="radio" checked={notifyActive[1]} onClick={function(){self.handleRadioClick("mention")}}>Only for mentions</input> + </label> + <br/> + </div> + <div className="radio"> + <label> + <input type="radio" checked={notifyActive[2]} onClick={function(){self.handleRadioClick("none")}}>Never</input> + </label> + </div> + </div> + ); + + desktopSection = ( + <SettingItemMax + title="Send desktop notifications" + inputs={inputs} + submit={this.handleUpdate} + server_error={server_error} + updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}} + /> + ); + } else { + var describe = ""; + if (this.state.notify_level === "mention") { + describe = "Only for mentions"; + } else if (this.state.notify_level === "all") { + describe = "For all activity"; + } else { + describe = "Never"; + } + + desktopSection = ( + <SettingItemMin + title="Send desktop notifications" + describe={describe} + updateSection={function(e){self.updateSection("desktop");e.preventDefault();}} + /> + ); + } + + var quietSection; + if (this.state.activeSection === 'quiet') { + var quietActive = ["",""]; + if (this.state.quiet_mode) { + quietActive[0] = "active"; + } else { + quietActive[1] = "active"; + } + + var inputs = []; + + inputs.push( + <div className="col-sm-12"> + <div className="btn-group" data-toggle="buttons-radio"> + <button className={"btn btn-default "+quietActive[0]} onClick={function(){self.handleQuietToggle(true)}}>On</button> + <button className={"btn btn-default "+quietActive[1]} onClick={function(){self.handleQuietToggle(false)}}>Off</button> + </div> + </div> + ); + + inputs.push( + <div className="col-sm-12"> + <br/> + Enabling quiet mode will turn off desktop notifications and only mark the channel as unread if you have been mentioned. + </div> + ); + + quietSection = ( + <SettingItemMax + title="Quiet mode" + inputs={inputs} + submit={this.handleUpdate} + server_error={server_error} + updateSection={function(e){self.updateSection("");self._onChange();e.preventDefault();}} + /> + ); } else { - allActive = "active"; + var describe = ""; + if (this.state.quiet_mode) { + describe = "On"; + } else { + describe = "Off"; + } + + quietSection = ( + <SettingItemMin + title="Quiet mode" + describe={describe} + updateSection={function(e){self.updateSection("quiet");e.preventDefault();}} + /> + ); } var self = this; return ( <div className="modal fade" id="channel_notifications" ref="modal" tabIndex="-1" role="dialog" aria-hidden="true"> - <div className="modal-dialog"> + <div className="modal-dialog settings-modal"> <div className="modal-content"> <div className="modal-header"> <button type="button" className="close" data-dismiss="modal"> @@ -90,31 +212,23 @@ module.exports = React.createClass({ <h4 className="modal-title">{"Notification Preferences for " + this.state.title}</h4> </div> <div className="modal-body"> - <div className={desktopHidden}> - <span>Desktop Notifications</span> - <br/> - <div className="btn-group" data-toggle="buttons-radio"> - <button className={"btn btn-default "+allActive} onClick={function(){self.handleRadioClick("all")}}>Any activity (default)</button> - <button className={"btn btn-default "+mentionActive} onClick={function(){self.handleRadioClick("mention")}}>Mentions of my name</button> - <button className={"btn btn-default "+noneActive} onClick={function(){self.handleRadioClick("none")}}>Nothing</button> + <div className="settings-table"> + <div className="settings-content"> + <div ref="wrapper" className="user-settings"> + <br/> + <div className="divider-dark first"/> + {desktopSection} + <div className="divider-light"/> + {quietSection} + <div className="divider-dark"/> </div> - <br/> - <br/> </div> - <span>Quiet Mode</span> - <br/> - <div className="btn-group" data-toggle="buttons-checkbox"> - <button className={"btn btn-default "+quietActive} onClick={this.handleQuietToggle}>Quiet Mode</button> </div> { server_error } </div> - <div className="modal-footer"> - <button type="button" className="btn btn-primary" onClick={this.handleUpdate}>Done</button> - </div> </div> </div> </div> - ); } }); diff --git a/web/react/components/create_comment.jsx b/web/react/components/create_comment.jsx index cb7aa371c..9e3feb25c 100644 --- a/web/react/components/create_comment.jsx +++ b/web/react/components/create_comment.jsx @@ -112,13 +112,28 @@ module.exports = React.createClass({ return { messageText: '', uploadsInProgress: 0, previews: [], submitting: false }; }, setUploads: function(val) { - var num = this.state.uploadsInProgress + val; - this.setState({uploadsInProgress: num}); + var oldInProgress = this.state.uploadsInProgress + var newInProgress = oldInProgress + val; + + if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) { + newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length; + this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional comments for more files."}); + } else { + this.setState({limit_error: null}); + } + + var numToUpload = newInProgress - oldInProgress; + if (numToUpload <= 0) return 0; + + this.setState({uploadsInProgress: newInProgress}); + + return numToUpload; }, render: function() { var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null; + var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null; var preview = <div/>; if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { @@ -129,13 +144,6 @@ module.exports = React.createClass({ uploadsInProgress={this.state.uploadsInProgress} /> ); } - var limit_previews = "" - if (this.state.previews.length > 5) { - limit_previews = <div className='has-error'><label className='control-label'>{ "Note: While all files will be available, only first five will show thumbnails." }</label></div> - } - if (this.state.previews.length > 20) { - limit_previews = <div className='has-error'><label className='control-label'>{ "Note: Uploads limited to 20 files maximum. Please use additional posts for more files." }</label></div> - } return ( <form onSubmit={this.handleSubmit}> @@ -159,7 +167,7 @@ module.exports = React.createClass({ <input type="button" className="btn btn-primary comment-btn pull-right" value="Add Comment" onClick={this.handleSubmit} /> { post_error } { server_error } - { limit_previews } + { limit_error } </div> </div> { preview } diff --git a/web/react/components/create_post.jsx b/web/react/components/create_post.jsx index 5a0b6f85f..0c23dcfac 100644 --- a/web/react/components/create_post.jsx +++ b/web/react/components/create_post.jsx @@ -51,7 +51,7 @@ module.exports = React.createClass({ false, function(data) { PostStore.storeDraft(data.channel_id, user_id, null); - this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null }); + this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); if (data.goto_location.length > 0) { window.location.href = data.goto_location; @@ -71,7 +71,7 @@ module.exports = React.createClass({ client.createPost(post, ChannelStore.getCurrent(), function(data) { PostStore.storeDraft(data.channel_id, data.user_id, null); - this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null }); + this.setState({ messageText: '', submitting: false, post_error: null, previews: [], server_error: null, limit_error: null }); this.resizePostHolder(); AsyncClient.getPosts(true); @@ -207,21 +207,36 @@ module.exports = React.createClass({ return { channel_id: ChannelStore.getCurrentId(), messageText: messageText, uploadsInProgress: 0, previews: previews, submitting: false, initialText: messageText }; }, setUploads: function(val) { - var num = this.state.uploadsInProgress + val; + var oldInProgress = this.state.uploadsInProgress + var newInProgress = oldInProgress + val; + + if (newInProgress + this.state.previews.length > Constants.MAX_UPLOAD_FILES) { + newInProgress = Constants.MAX_UPLOAD_FILES - this.state.previews.length; + this.setState({limit_error: "Uploads limited to " + Constants.MAX_UPLOAD_FILES + " files maximum. Please use additional posts for more files."}); + } else { + this.setState({limit_error: null}); + } + + var numToUpload = newInProgress - oldInProgress; + if (numToUpload <= 0) return 0; + var draft = PostStore.getCurrentDraft(); if (!draft) { draft = {} draft['message'] = ''; draft['previews'] = []; } - draft['uploadsInProgress'] = num; + draft['uploadsInProgress'] = newInProgress; PostStore.storeCurrentDraft(draft); - this.setState({uploadsInProgress: num}); + this.setState({uploadsInProgress: newInProgress}); + + return numToUpload; }, render: function() { var server_error = this.state.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.state.server_error }</label></div> : null; var post_error = this.state.post_error ? <label className='control-label'>{this.state.post_error}</label> : null; + var limit_error = this.state.limit_error ? <div className='has-error'><label className='control-label'>{this.state.limit_error}</label></div> : null; var preview = <div/>; if (this.state.previews.length > 0 || this.state.uploadsInProgress > 0) { @@ -232,13 +247,6 @@ module.exports = React.createClass({ uploadsInProgress={this.state.uploadsInProgress} /> ); } - var limit_previews = "" - if (this.state.previews.length > 5) { - limit_previews = <div className='has-error'><label className='control-label'>{ "Note: While all files will be available, only first five will show thumbnails." }</label></div> - } - if (this.state.previews.length > 20) { - limit_previews = <div className='has-error'><label className='control-label'>{ "Note: Uploads limited to 20 files maximum. Please use additional posts for more files." }</label></div> - } return ( <form id="create_post" ref="topDiv" role="form" onSubmit={this.handleSubmit}> @@ -260,7 +268,7 @@ module.exports = React.createClass({ <div className={post_error ? 'post-create-footer has-error' : 'post-create-footer'}> { post_error } { server_error } - { limit_previews } + { limit_error } { preview } <MsgTyping channelId={this.state.channel_id} parentId=""/> </div> diff --git a/web/react/components/file_upload.jsx b/web/react/components/file_upload.jsx index c03a61c63..f2429f17e 100644 --- a/web/react/components/file_upload.jsx +++ b/web/react/components/file_upload.jsx @@ -12,18 +12,18 @@ module.exports = React.createClass({ this.props.onUploadError(null); - //This looks redundant, but must be done this way due to - //setState being an asynchronous call + // This looks redundant, but must be done this way due to + // setState being an asynchronous call var numFiles = 0; - for(var i = 0; i < files.length && i <= 20 ; i++) { + for(var i = 0; i < files.length && i < Constants.MAX_UPLOAD_FILES; i++) { if (files[i].size <= Constants.MAX_FILE_SIZE) { numFiles++; } } - this.props.setUploads(numFiles); + var numToUpload = this.props.setUploads(numFiles); - for (var i = 0; i < files.length && i <= 20; i++) { + for (var i = 0; i < files.length && i < numToUpload; i++) { if (files[i].size > Constants.MAX_FILE_SIZE) { this.props.onUploadError("Files must be no more than " + Constants.MAX_FILE_SIZE/1000000 + " MB"); continue; @@ -70,8 +70,8 @@ module.exports = React.createClass({ self.props.onUploadError(null); - //This looks redundant, but must be done this way due to - //setState being an asynchronous call + // This looks redundant, but must be done this way due to + // setState being an asynchronous call var items = e.clipboardData.items; var numItems = 0; if (items) { @@ -87,9 +87,9 @@ module.exports = React.createClass({ } } - self.props.setUploads(numItems); + var numToUpload = self.props.setUploads(numItems); - for (var i = 0; i < items.length; i++) { + for (var i = 0; i < items.length && i < numToUpload; i++) { if (items[i].type.indexOf("image") !== -1) { var file = items[i].getAsFile(); diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx index 5980664de..d1672126d 100644 --- a/web/react/components/invite_member_modal.jsx +++ b/web/react/components/invite_member_modal.jsx @@ -57,7 +57,7 @@ module.exports = React.createClass({ if (config.AllowInviteNames) { invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim(); - if (!invite.first_name ) { + if (!invite.first_name && config.RequireInviteNames) { first_name_errors[index] = "This is a required field"; valid = false; } else { @@ -65,7 +65,7 @@ module.exports = React.createClass({ } invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim(); - if (!invite.last_name ) { + if (!invite.last_name && config.RequireInviteNames) { last_name_errors[index] = "This is a required field"; valid = false; } else { @@ -125,10 +125,12 @@ module.exports = React.createClass({ }); }, removeInviteFields: function(index) { + var count = this.state.id_count; var invite_ids = this.state.invite_ids; var i = invite_ids.indexOf(index); - if (index > -1) invite_ids.splice(i, 1); - this.setState({ invite_ids: invite_ids }); + if (i > -1) invite_ids.splice(i, 1); + if (!invite_ids.length) invite_ids.push(++count); + this.setState({ invite_ids: invite_ids, id_count: count }); }, getInitialState: function() { return { @@ -154,11 +156,9 @@ module.exports = React.createClass({ invite_sections[index] = ( <div key={"key" + index}> - { i ? <div> - <button type="button" className="btn remove__member" onClick={function(){self.removeInviteFields(index);}}>×</button> + <button type="button" className="btn remove__member" onClick={this.removeInviteFields.bind(this, index)}>×</button> </div> - : ""} <div className={ email_error ? "form-group invite has-error" : "form-group invite" }> <input onKeyUp={this.displayNameKeyUp} type="text" ref={"email"+index} className="form-control" placeholder="email@domain.com" maxLength="64" /> { email_error } diff --git a/web/react/components/login.jsx b/web/react/components/login.jsx index 65f1da1f8..3b6f96c2d 100644 --- a/web/react/components/login.jsx +++ b/web/react/components/login.jsx @@ -21,6 +21,12 @@ var FindTeamDomain = React.createClass({ return; } + if (!utils.isLocalStorageSupported()) { + state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing."; + this.setState(state); + return; + } + state.server_error = ""; this.setState(state); @@ -31,7 +37,7 @@ var FindTeamDomain = React.createClass({ window.location.href = window.location.protocol + "//" + domain + "." + utils.getDomainWithOutSub(); } else { - this.state.server_error = "We couldn't find your " + strings.TeamPlural + "."; + this.state.server_error = "We couldn't find your " + strings.Team + "."; this.setState(this.state); } }.bind(this), @@ -94,7 +100,7 @@ module.exports = React.createClass({ return; } - var email = this.refs.email.getDOMNode().value.trim(); + var email = this.refs.email.getDOMNode().value.trim(); if (!email) { state.server_error = "An email is required" this.setState(state); @@ -108,6 +114,12 @@ module.exports = React.createClass({ return; } + if (!utils.isLocalStorageSupported()) { + state.server_error = "This service requires local storage to be enabled. Please enable it or exit private browsing."; + this.setState(state); + return; + } + state.server_error = ""; this.setState(state); diff --git a/web/react/components/mention.jsx b/web/react/components/mention.jsx index ba758688b..86a423138 100644 --- a/web/react/components/mention.jsx +++ b/web/react/components/mention.jsx @@ -8,8 +8,8 @@ module.exports = React.createClass({ render: function() { return ( <div className="mentions-name" onClick={this.handleClick}> - <img className="pull-left mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/> - <span>@{this.props.username}</span><span style={{'color':'grey', 'marginLeft':'10px'}}>{this.props.name}</span> + <img className="mention-img" src={"/api/v1/users/" + this.props.id + "/image"}/> + <span>@{this.props.username}</span><span className="mention-fullname">{this.props.name}</span> </div> ); } diff --git a/web/react/components/navbar.jsx b/web/react/components/navbar.jsx index 3821c2772..35f7d9044 100644 --- a/web/react/components/navbar.jsx +++ b/web/react/components/navbar.jsx @@ -301,7 +301,7 @@ module.exports = React.createClass({ <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span> </a> <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown"> - <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Invite Members</a></li> + <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li> { isAdmin ? <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li> : "" diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index 65247b705..37e3faef2 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -125,12 +125,12 @@ module.exports = React.createClass({ $('body').on('mouseenter mouseleave', '.post', function(ev){ if(ev.type === 'mouseenter'){ - $(this).parent('div').prev('.date-seperator').addClass('hovered--after'); - $(this).parent('div').next('.date-seperator').addClass('hovered--before'); + $(this).parent('div').prev('.date-separator, .new-separator').addClass('hovered--after'); + $(this).parent('div').next('.date-separator, .new-separator').addClass('hovered--before'); } else { - $(this).parent('div').prev('.date-seperator').removeClass('hovered--after'); - $(this).parent('div').next('.date-seperator').removeClass('hovered--before'); + $(this).parent('div').prev('.date-separator, .new-separator').removeClass('hovered--after'); + $(this).parent('div').next('.date-separator, .new-separator').removeClass('hovered--before'); } }); @@ -389,7 +389,7 @@ module.exports = React.createClass({ <div className="channel-intro"> <h4 className="channel-intro-title">Welcome</h4> <p> - { creator_name != "" ? "This is the start of the " + ui_name + " " + ui_type + ", created by " + creator_name + " on " + utils.displayDate(channel.create_at) + "." + { 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/> @@ -434,9 +434,9 @@ module.exports = React.createClass({ currentPostDay = utils.getDateForUnixTicks(post.create_at); if(currentPostDay.getDate() !== previousPostDay.getDate() || currentPostDay.getMonth() !== previousPostDay.getMonth() || currentPostDay.getFullYear() !== previousPostDay.getFullYear()) { postCtls.push( - <div className="date-seperator"> - <hr className="date-seperator__hr" /> - <div className="date-seperator__text">{currentPostDay.toDateString()}</div> + <div className="date-separator"> + <hr className="separator__hr" /> + <div className="separator__text">{currentPostDay.toDateString()}</div> </div> ); } @@ -444,17 +444,13 @@ module.exports = React.createClass({ if (post.create_at > last_viewed && !rendered_last_viewed) { rendered_last_viewed = true; postCtls.push( - <div> - <div className="new-seperator"> - <hr id="new_message" className="new-seperator__hr" /> - <div className="new-seperator__text">New Messages</div> - </div> - {postCtl} - </div> + <div className="new-separator"> + <hr id="new_message" className="separator__hr" /> + <div className="separator__text">New Messages</div> + </div> ); - } else { - postCtls.push(postCtl); } + postCtls.push(postCtl); previousPostDay = utils.getDateForUnixTicks(post.create_at); } diff --git a/web/react/components/setting_item_max.jsx b/web/react/components/setting_item_max.jsx index 03f05b0cf..b8b667e1a 100644 --- a/web/react/components/setting_item_max.jsx +++ b/web/react/components/setting_item_max.jsx @@ -13,7 +13,7 @@ module.exports = React.createClass({ <li className="col-sm-12 section-title">{this.props.title}</li> <li className="col-sm-9 col-sm-offset-3"> <ul className="setting-list"> - <li className="row setting-list-item form-group"> + <li className="setting-list-item"> {inputs} </li> <li className="setting-list-item"> diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index a1546890f..ae8510cf2 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -1,6 +1,8 @@ // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. // See License.txt for license information. +var utils = require('../utils/utils.jsx'); + module.exports = React.createClass({ updateTab: function(tab) { this.props.updateTab(tab); @@ -11,16 +13,11 @@ module.exports = React.createClass({ return ( <div className=""> <ul className="nav nav-pills nav-stacked"> - <li className={this.props.activeTab == 'general' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("general");}}><i className="glyphicon glyphicon-cog"></i>General</a></li> - <li className={this.props.activeTab == 'security' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("security");}}><i className="glyphicon glyphicon-lock"></i>Security</a></li> - <li className={this.props.activeTab == 'notifications' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("notifications");}}><i className="glyphicon glyphicon-exclamation-sign"></i>Notifications</a></li> - <li className={this.props.activeTab == 'appearance' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("appearance");}}><i className="glyphicon glyphicon-wrench"></i>Appearance</a></li> + {this.props.tabs.map(function(tab) { + return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li> + })} </ul> </div> ); - /* Temporarily removing sessions and activity logs - <li className={this.props.activeTab == 'sessions' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("sessions");}}><i className="glyphicon glyphicon-globe"></i>Sessions</a></li> - <li className={this.props.activeTab == 'activity_log' ? 'active' : ''}><a href="#" onClick={function(){self.updateTab("activity_log");}}><i className="glyphicon glyphicon-time"></i>Activity Log</a></li> - */ } }); diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index 5a872b7a0..0b59d2036 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -94,7 +94,8 @@ var NavbarDropdown = React.createClass({ <i className="dropdown__icon"></i> </a> <ul className="dropdown-menu" role="menu"> - <li><a href="#" data-toggle="modal" data-target="#settings_modal">Account Settings</a></li> + <li><a href="#" data-toggle="modal" data-target="#user_settings1">Account Settings</a></li> + { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings">Team Settings</a></li> : "" } { invite_link } { team_link } { manage_link } diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index d0c139d1a..22d1d9ad2 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -59,7 +59,8 @@ module.exports = React.createClass({ <div className="nav-pills__container"> <ul className="nav nav-pills nav-stacked"> - <li><a href="#" data-toggle="modal" data-target="#settings_modal"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li> + <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li> + { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings"><i className="glyphicon glyphicon-globe"></i>Team Settings</a></li> : "" } { invite_link } { team_link } { manage_link } diff --git a/web/react/components/signup_team_complete.jsx b/web/react/components/signup_team_complete.jsx index b038679e6..30fe92af5 100644 --- a/web/react/components/signup_team_complete.jsx +++ b/web/react/components/signup_team_complete.jsx @@ -9,6 +9,10 @@ var constants = require('../utils/constants.jsx') WelcomePage = React.createClass({ submitNext: function (e) { + if (!utils.isLocalStorageSupported()) { + this.setState({ storage_error: "This service requires local storage to be enabled. Please enable it or exit private browsing."} ); + return; + } e.preventDefault(); this.props.state.wizard = "team_name"; this.props.updateParent(this.props.state); @@ -26,6 +30,12 @@ WelcomePage = React.createClass({ if (!email || !utils.isEmail(email)) { state.email_error = "Please enter a valid email address"; this.setState(state); + return; + } + else if (!utils.isLocalStorageSupported()) { + state.email_error = "This service requires local storage to be enabled. Please enable it or exit private browsing."; + this.setState(state); + return; } else { state.email_error = ""; @@ -50,6 +60,7 @@ WelcomePage = React.createClass({ client.track('signup', 'signup_team_01_welcome'); + var storage_error = this.state.storage_error ? <label className="control-label">{ this.state.storage_error }</label> : null; var email_error = this.state.email_error ? <label className="control-label">{ this.state.email_error }</label> : null; var server_error = this.state.server_error ? <div className={ "form-group has-error" }><label className="control-label">{ this.state.server_error }</label></div> : null; @@ -66,6 +77,7 @@ WelcomePage = React.createClass({ </p> <div className="form-group"> <button className="btn-primary btn form-group" onClick={this.submitNext}><i className="glyphicon glyphicon-ok"></i>Yes, this address is correct</button> + { storage_error } </div> <hr /> <p>If this is not correct, you can switch to a different email. We'll send you a new invite right away.</p> @@ -312,7 +324,7 @@ EmailItem = React.createClass({ getValue: function() { return this.refs.email.getDOMNode().value.trim() }, - validate: function() { + validate: function(teamEmail) { var email = this.refs.email.getDOMNode().value.trim().toLowerCase(); if (!email) { @@ -324,6 +336,11 @@ EmailItem = React.createClass({ this.setState(this.state); return false; } + else if (email === teamEmail) { + this.state.email_error = "Please use an a different email than the one used at signup"; + this.setState(this.state); + return false; + } else { this.state.email_error = ""; this.setState(this.state); @@ -363,7 +380,7 @@ SendInivtesPage = React.createClass({ var emails = []; for (var i = 0; i < this.props.state.invites.length; i++) { - if (!this.refs['email_' + i].validate()) { + if (!this.refs['email_' + i].validate(this.props.state.team.email)) { valid = false; } else { emails.push(this.refs['email_' + i].getValue()); @@ -491,6 +508,7 @@ PasswordPage = React.createClass({ return; } + this.setState({name_error: ""}); $('#finish-button').button('loading'); var teamSignup = JSON.parse(JSON.stringify(this.props.state)); teamSignup.user.password = password; diff --git a/web/react/components/signup_user_complete.jsx b/web/react/components/signup_user_complete.jsx index 146419cf5..b9f32f0bc 100644 --- a/web/react/components/signup_user_complete.jsx +++ b/web/react/components/signup_user_complete.jsx @@ -13,16 +13,16 @@ module.exports = React.createClass({ this.state.user.username = this.refs.name.getDOMNode().value.trim(); if (!this.state.user.username) { - this.setState({name_error: "This field is required", email_error: "", password_error: ""}); + this.setState({name_error: "This field is required", email_error: "", password_error: "", server_error: ""}); return; } var username_error = utils.isValidUsername(this.state.user.username) if (username_error === "Cannot use a reserved word as a username.") { - this.setState({name_error: "This username is reserved, please choose a new one." }); + this.setState({name_error: "This username is reserved, please choose a new one.", email_error: "", password_error: "", server_error: ""}); return; } else if (username_error) { - this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." }); + this.setState({name_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'.", email_error: "", password_error: "", server_error: ""}); return; } @@ -34,10 +34,12 @@ module.exports = React.createClass({ this.state.user.password = this.refs.password.getDOMNode().value.trim(); if (!this.state.user.password || this.state.user.password .length < 5) { - this.setState({name_error: "", email_error: "", password_error: "Please enter at least 5 characters"}); + this.setState({name_error: "", email_error: "", password_error: "Please enter at least 5 characters", server_error: ""}); return; } + this.setState({name_error: "", email_error: "", password_error: "", server_error: ""}); + this.state.user.allow_marketing = this.refs.email_service.getDOMNode().checked; client.createUser(this.state.user, this.state.data, this.state.hash, diff --git a/web/react/components/team_settings.jsx b/web/react/components/team_settings.jsx new file mode 100644 index 000000000..a43e5d2f0 --- /dev/null +++ b/web/react/components/team_settings.jsx @@ -0,0 +1,161 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var UserStore = require('../stores/user_store.jsx'); +var TeamStore = require('../stores/team_store.jsx'); +var SettingItemMin = require('./setting_item_min.jsx'); +var SettingItemMax = require('./setting_item_max.jsx'); +var SettingPicture = require('./setting_picture.jsx'); +var utils = require('../utils/utils.jsx'); + +var client = require('../utils/client.jsx'); +var AsyncClient = require('../utils/async_client.jsx'); +var Constants = require('../utils/constants.jsx'); + +var FeatureTab = React.createClass({ + submitValetFeature: function() { + data = {}; + data['allow_valet'] = this.state.allow_valet; + + client.updateValetFeature(data, + function(data) { + this.props.updateSection(""); + AsyncClient.getMyTeam(); + }.bind(this), + function(err) { + state = this.getInitialState(); + state.server_error = err; + this.setState(state); + }.bind(this) + ); + }, + handleValetRadio: function(val) { + this.setState({ allow_valet: val }); + this.refs.wrapper.getDOMNode().focus(); + }, + componentWillReceiveProps: function(newProps) { + var team = newProps.team; + + var allow_valet = "false"; + if (team && team.allow_valet) { + allow_valet = "true"; + } + + this.setState({ allow_valet: allow_valet }); + }, + getInitialState: function() { + var team = this.props.team; + + var allow_valet = "false"; + if (team && team.allow_valet) { + allow_valet = "true"; + } + + return { allow_valet: allow_valet }; + }, + render: function() { + var team = this.props.team; + + var client_error = this.state.client_error ? this.state.client_error : null; + var server_error = this.state.server_error ? this.state.server_error : null; + + var valetSection; + var self = this; + + if (this.props.activeSection === 'valet') { + var valetActive = ["",""]; + if (this.state.allow_valet === "false") { + valetActive[1] = "active"; + } else { + valetActive[0] = "active"; + } + + var inputs = []; + + inputs.push( + <div className="col-sm-12"> + <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/>Warning: Turning on the Valet feature and using it with any third party software increases the risk of a security breach.</div> + </div> + ); + + valetSection = ( + <SettingItemMax + title="Valet" + inputs={inputs} + submit={this.submitValetFeature} + server_error={server_error} + client_error={client_error} + updateSection={function(e){self.props.updateSection("");e.preventDefault();}} + /> + ); + } else { + var describe = ""; + if (this.state.allow_valet === "false") { + describe = "Off"; + } else { + describe = "On"; + } + + valetSection = ( + <SettingItemMin + title="Valet" + describe={describe} + updateSection={function(){self.props.updateSection("valet");}} + /> + ); + } + + 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>Feature Settings</h4> + </div> + <div ref="wrapper" className="user-settings"> + <h3 className="tab-header">Feature Settings</h3> + <div className="divider-dark first"/> + {valetSection} + <div className="divider-dark"/> + </div> + </div> + ); + } +}); + +module.exports = React.createClass({ + componentDidMount: function() { + TeamStore.addChangeListener(this._onChange); + }, + componentWillUnmount: function() { + TeamStore.removeChangeListener(this._onChange); + }, + _onChange: function () { + var team = TeamStore.getCurrent(); + if (!utils.areStatesEqual(this.state.team, team)) { + this.setState({ team: team }); + } + }, + getInitialState: function() { + return { team: TeamStore.getCurrent() }; + }, + render: function() { + if (this.props.activeTab === 'general') { + return ( + <div> + </div> + ); + } else if (this.props.activeTab === 'feature') { + return ( + <div> + <FeatureTab team={this.state.team} activeSection={this.props.activeSection} updateSection={this.props.updateSection} /> + </div> + ); + } else { + return <div/>; + } + } +}); diff --git a/web/react/components/settings_modal.jsx b/web/react/components/team_settings_modal.jsx index 57a869f93..e50378b7f 100644 --- a/web/react/components/settings_modal.jsx +++ b/web/react/components/team_settings_modal.jsx @@ -2,7 +2,7 @@ // See License.txt for license information. var SettingsSidebar = require('./settings_sidebar.jsx'); -var UserSettings = require('./user_settings.jsx'); +var TeamSettings = require('./team_settings.jsx'); module.exports = React.createClass({ componentDidMount: function() { @@ -22,27 +22,31 @@ module.exports = React.createClass({ this.setState({ active_section: section }); }, getInitialState: function() { - return { active_tab: "general", active_section: "" }; + return { active_tab: "feature", active_section: "" }; }, render: function() { + var tabs = []; + tabs.push({name: "feature", ui_name: "Features", icon: "glyphicon glyphicon-wrench"}); + return ( - <div className="modal fade" ref="modal" id="settings_modal" role="dialog" aria-hidden="true"> + <div className="modal fade" ref="modal" id="team_settings" role="dialog" aria-hidden="true"> <div className="modal-dialog settings-modal"> <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" ref="title">Account Settings</h4> + <h4 className="modal-title" ref="title">Team Settings</h4> </div> <div className="modal-body"> <div className="settings-table"> <div className="settings-links"> <SettingsSidebar + tabs={tabs} activeTab={this.state.active_tab} updateTab={this.updateTab} /> </div> - <div className="settings-content"> - <UserSettings + <div className="settings-content minimize-settings"> + <TeamSettings activeTab={this.state.active_tab} activeSection={this.state.active_section} updateSection={this.updateSection} diff --git a/web/react/components/user_profile.jsx b/web/react/components/user_profile.jsx index 8ffad737d..648960471 100644 --- a/web/react/components/user_profile.jsx +++ b/web/react/components/user_profile.jsx @@ -10,8 +10,7 @@ function getStateFromStores(userId) { if (profile == null) { return { profile: { id: "0", username: "..."} }; - } - else { + } else { return { profile: profile }; } } @@ -54,12 +53,11 @@ module.exports = React.createClass({ var name = this.props.overwriteName ? this.props.overwriteName : this.state.profile.username; - var data_content = "" - data_content += "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />" + var data_content = "<img style='margin: 10px' src='/api/v1/users/" + this.state.profile.id + "/image' height='128' width='128' />"; if (!config.ShowEmail) { - data_content += "<div><span style='white-space:nowrap;'>Email not shared</span></div>"; + data_content += "<div class='text-nowrap'>Email not shared</div>"; } else { - data_content += "<div><a href='mailto:'" + this.state.profile.email + "'' style='white-space:nowrap;text-transform:lowercase;'>" + this.state.profile.email + "</a></div>"; + data_content += "<div><a href='mailto:" + this.state.profile.email + "' class='text-nowrap text-lowercase'>" + this.state.profile.email + "</a></div>"; } return ( diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index 110634b50..147973fb7 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -155,7 +155,7 @@ var NotificationsTab = React.createClass({ var inputs = []; inputs.push( - <div className="col-sm-12"> + <div> <div className="radio"> <label> <input type="radio" checked={notifyActive[0]} onClick={function(){self.handleNotifyRadio("all")}}>For all activity</input> @@ -216,7 +216,7 @@ var NotificationsTab = 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 "+soundActive[0]} onClick={function(){self.handleSoundRadio("true")}}>On</button> <button className={"btn btn-default "+soundActive[1]} onClick={function(){self.handleSoundRadio("false")}}>Off</button> @@ -262,7 +262,7 @@ var NotificationsTab = 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 "+emailActive[0]} onClick={function(){self.handleEmailRadio("true")}}>On</button> <button className={"btn btn-default "+emailActive[1]} onClick={function(){self.handleEmailRadio("false")}}>Off</button> @@ -309,7 +309,7 @@ var NotificationsTab = React.createClass({ if (first_name != "") { inputs.push( - <div className="col-sm-12"> + <div> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.first_name_key} onChange={function(e){self.updateFirstNameKey(e.target.checked);}}>{'Your case sensitive first name "' + first_name + '"'}</input> @@ -320,7 +320,7 @@ var NotificationsTab = React.createClass({ } inputs.push( - <div className="col-sm-12"> + <div> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.username_key} onChange={function(e){self.updateUsernameKey(e.target.checked);}}>{'Your non-case sensitive username "' + user.username + '"'}</input> @@ -330,7 +330,7 @@ var NotificationsTab = React.createClass({ ); inputs.push( - <div className="col-sm-12"> + <div> <div className="checkbox"> <label> <input type="checkbox" checked={this.state.mention_key} onChange={function(e){self.updateMentionKey(e.target.checked);}}>{'Your username mentioned "@' + user.username + '"'}</input> @@ -340,7 +340,7 @@ var NotificationsTab = React.createClass({ ); inputs.push( - <div className="col-sm-12"> + <div> <div className="checkbox"> <label> <input ref="customcheck" type="checkbox" checked={this.state.custom_keys_checked} onChange={this.updateCustomMentionKeys}>{'Other non-case sensitive words, separated by commas:'}</input> @@ -622,7 +622,7 @@ var SecurityTab = React.createClass({ var inputs = []; inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">Current Password</label> <div className="col-sm-7"> <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/> @@ -630,7 +630,7 @@ var SecurityTab = React.createClass({ </div> ); inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">New Password</label> <div className="col-sm-7"> <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/> @@ -638,7 +638,7 @@ var SecurityTab = React.createClass({ </div> ); inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">Retype New Password</label> <div className="col-sm-7"> <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/> @@ -658,9 +658,10 @@ var SecurityTab = React.createClass({ ); } else { var d = new Date(this.props.user.last_password_update); - var hour = d.getHours() < 10 ? "0" + d.getHours() : String(d.getHours()); + var hour = d.getHours() % 12 ? String(d.getHours() % 12) : "12"; var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); - var dateStr = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min; + var timeOfDay = d.getHours() >= 12 ? " pm" : " am"; + var dateStr = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min + timeOfDay; passwordSection = ( <SettingItemMin @@ -836,7 +837,7 @@ var GeneralTab = React.createClass({ var inputs = []; inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">First Name</label> <div className="col-sm-7"> <input className="form-control" type="text" onChange={this.updateFirstName} value={this.state.first_name}/> @@ -845,7 +846,7 @@ var GeneralTab = React.createClass({ ); inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">Last Name</label> <div className="col-sm-7"> <input className="form-control" type="text" onChange={this.updateLastName} value={this.state.last_name}/> @@ -878,7 +879,7 @@ var GeneralTab = React.createClass({ var inputs = []; inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">{utils.isMobile() ? "": "Username"}</label> <div className="col-sm-7"> <input className="form-control" type="text" onChange={this.updateUsername} value={this.state.username}/> @@ -910,7 +911,7 @@ var GeneralTab = React.createClass({ var inputs = []; inputs.push( - <div> + <div className="form-group"> <label className="col-sm-5 control-label">Primary Email</label> <div className="col-sm-7"> <input className="form-control" type="text" onChange={this.updateEmail} value={this.state.email}/> @@ -1047,7 +1048,7 @@ var AppearanceTab = React.createClass({ var inputs = []; inputs.push( - <li className="row setting-list-item form-group"> + <li className="setting-list-item"> <div className="btn-group" data-toggle="buttons-radio"> { theme_buttons } </div> diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx new file mode 100644 index 000000000..1761e575a --- /dev/null +++ b/web/react/components/user_settings_modal.jsx @@ -0,0 +1,68 @@ +// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved. +// See License.txt for license information. + +var SettingsSidebar = require('./settings_sidebar.jsx'); +var UserSettings = require('./user_settings.jsx'); + +module.exports = React.createClass({ + componentDidMount: function() { + $('body').on('click', '.modal-back', function(){ + $(this).closest('.modal-dialog').removeClass('display--content'); + }); + $('body').on('click', '.modal-header .close', function(){ + setTimeout(function() { + $('.modal-dialog.display--content').removeClass('display--content'); + }, 500); + }); + }, + updateTab: function(tab) { + this.setState({ active_tab: tab }); + }, + updateSection: function(section) { + this.setState({ active_section: section }); + }, + getInitialState: function() { + return { active_tab: "general", active_section: "" }; + }, + render: function() { + var tabs = []; + tabs.push({name: "general", ui_name: "General", icon: "glyphicon glyphicon-cog"}); + 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"> + <div className="modal-dialog settings-modal"> + <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" ref="title">Account Settings</h4> + </div> + <div className="modal-body"> + <div className="settings-table"> + <div className="settings-links"> + <SettingsSidebar + tabs={tabs} + activeTab={this.state.active_tab} + updateTab={this.updateTab} + /> + </div> + <div className="settings-content minimize-settings"> + <UserSettings + activeTab={this.state.active_tab} + activeSection={this.state.active_section} + updateSection={this.updateSection} + /> + </div> + </div> + </div> + </div> + </div> + </div> + ); + } +}); + diff --git a/web/react/components/view_image.jsx b/web/react/components/view_image.jsx index 4cb30e1d3..c573e9dbb 100644 --- a/web/react/components/view_image.jsx +++ b/web/react/components/view_image.jsx @@ -124,7 +124,7 @@ module.exports = React.createClass({ <div key={name+"_loading"}> <img ref="placeholder" className="loader-image" src="/static/images/load.gif" /> { percentage > 0 ? - <span className="loader-percent" >{"Downloading " + percentage + "%"}</span> + <span className="loader-percent" >{"Previewing " + percentage + "%"}</span> : ""} </div> ); |