summaryrefslogtreecommitdiffstats
path: root/web/react
diff options
context:
space:
mode:
Diffstat (limited to 'web/react')
-rw-r--r--web/react/components/channel_header.jsx180
-rw-r--r--web/react/components/invite_member_modal.jsx270
-rw-r--r--web/react/components/sidebar.jsx233
-rw-r--r--web/react/components/user_settings.jsx17
-rw-r--r--web/react/components/user_settings_modal.jsx1
5 files changed, 388 insertions, 313 deletions
diff --git a/web/react/components/channel_header.jsx b/web/react/components/channel_header.jsx
index 76dbe370b..b6182cfa5 100644
--- a/web/react/components/channel_header.jsx
+++ b/web/react/components/channel_header.jsx
@@ -1,13 +1,11 @@
// Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
// See License.txt for license information.
-
var ChannelStore = require('../stores/channel_store.jsx');
var UserStore = require('../stores/user_store.jsx');
var PostStore = require('../stores/post_store.jsx');
-var SocketStore = require('../stores/socket_store.jsx')
-var UserProfile = require( './user_profile.jsx' );
-var NavbarSearchBox =require('./search_bar.jsx');
+var SocketStore = require('../stores/socket_store.jsx');
+var NavbarSearchBox = require('./search_bar.jsx');
var AsyncClient = require('../utils/async_client.jsx');
var Client = require('../utils/client.jsx');
var utils = require('../utils/utils.jsx');
@@ -21,23 +19,28 @@ var PopoverListMembers = React.createClass({
componentDidMount: function() {
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);
+ var selfObj;
+ if (obj instanceof this.constructor) {
+ selfObj = obj;
+ } else {
+ selfObj = $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type);
+ }
originalLeave.call(this, obj);
- if (obj.currentTarget && self.$tip) {
- self.$tip.one('mouseenter', function() {
- clearTimeout(self.timeout);
- self.$tip.one('mouseleave', function() {
- $.fn.popover.Constructor.prototype.leave.call(self, self);
+ if (obj.currentTarget && selfObj.$tip) {
+ selfObj.$tip.one('mouseenter', function() {
+ clearTimeout(selfObj.timeout);
+ selfObj.$tip.one('mouseleave', function() {
+ $.fn.popover.Constructor.prototype.leave.call(selfObj, selfObj);
});
- })
+ });
}
};
- $("#member_popover").popover({placement : 'bottom', trigger: 'click', html: true});
- $('body').on('click', function (e) {
- if ($(e.target.parentNode.parentNode)[0] !== $("#member_popover")[0] && $(e.target).parents('.popover.in').length === 0) {
- $("#member_popover").popover('hide');
+ $('#member_popover').popover({placement: 'bottom', trigger: 'click', html: true});
+ $('body').on('click', function(e) {
+ if ($(e.target.parentNode.parentNode)[0] !== $('#member_popover')[0] && $(e.target).parents('.popover.in').length === 0) {
+ $('#member_popover').popover('hide');
}
});
},
@@ -45,22 +48,27 @@ var PopoverListMembers = React.createClass({
render: function() {
var popoverHtml = '';
var members = this.props.members;
- var count = (members.length > 20) ? "20+" : (members.length || '-');
+ var count;
+ if (members.length > 20) {
+ count = '20+';
+ } else {
+ count = members.length || '-';
+ }
if (members) {
- members.sort(function(a,b) {
+ members.sort(function(a, b) {
return a.username.localeCompare(b.username);
});
members.forEach(function(m) {
- popoverHtml += "<div class='text--nowrap'>" + m.username + "</div>";
+ popoverHtml += "<div class='text--nowrap'>" + m.username + '</div>';
});
}
return (
- <div id="member_popover" data-toggle="popover" data-content={popoverHtml} data-original-title="Members" >
- <div id="member_tooltip" data-toggle="tooltip" title="View Channel Members">
- {count} <span className="glyphicon glyphicon-user" aria-hidden="true"></span>
+ <div id='member_popover' data-toggle='popover' data-content={popoverHtml} data-original-title='Members' >
+ <div id='member_tooltip' data-toggle='tooltip' title='View Channel Members'>
+ {count} <span className='glyphicon glyphicon-user' aria-hidden='true'></span>
</div>
</div>
);
@@ -68,53 +76,53 @@ var PopoverListMembers = React.createClass({
});
function getStateFromStores() {
- return {
- channel: ChannelStore.getCurrent(),
- memberChannel: ChannelStore.getCurrentMember(),
- memberTeam: UserStore.getCurrentUser(),
- users: ChannelStore.getCurrentExtraInfo().members,
- search_visible: PostStore.getSearchResults() != null
- };
+ return {
+ channel: ChannelStore.getCurrent(),
+ memberChannel: ChannelStore.getCurrentMember(),
+ memberTeam: UserStore.getCurrentUser(),
+ users: ChannelStore.getCurrentExtraInfo().members,
+ searchVisible: PostStore.getSearchResults() != null
+ };
}
module.exports = React.createClass({
displayName: 'ChannelHeader',
componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
- ChannelStore.addExtraInfoChangeListener(this._onChange);
- PostStore.addSearchChangeListener(this._onChange);
- UserStore.addChangeListener(this._onChange);
- SocketStore.addChangeListener(this._onSocketChange);
+ ChannelStore.addChangeListener(this.onListenerChange);
+ ChannelStore.addExtraInfoChangeListener(this.onListenerChange);
+ PostStore.addSearchChangeListener(this.onListenerChange);
+ UserStore.addChangeListener(this.onListenerChange);
+ SocketStore.addChangeListener(this.onSocketChange);
},
componentWillUnmount: function() {
- ChannelStore.removeChangeListener(this._onChange);
- ChannelStore.removeExtraInfoChangeListener(this._onChange);
- PostStore.removeSearchChangeListener(this._onChange);
- UserStore.addChangeListener(this._onChange);
+ ChannelStore.removeChangeListener(this.onListenerChange);
+ ChannelStore.removeExtraInfoChangeListener(this.onListenerChange);
+ PostStore.removeSearchChangeListener(this.onListenerChange);
+ UserStore.addChangeListener(this.onListenerChange);
},
- _onChange: function() {
+ onListenerChange: function() {
var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
- $(".channel-header__info .description").popover({placement : 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}});
+ $('.channel-header__info .description').popover({placement: 'bottom', trigger: 'hover', html: true, delay: {show: 500, hide: 500}});
},
- _onSocketChange: function(msg) {
- if (msg.action === "new_user") {
+ onSocketChange: function(msg) {
+ if (msg.action === 'new_user') {
AsyncClient.getChannelExtraInfo(true);
}
},
getInitialState: function() {
return getStateFromStores();
},
- handleLeave: function(e) {
+ handleLeave: function() {
Client.leaveChannel(this.state.channel.id,
- function(data) {
+ function() {
var townsquare = ChannelStore.getByName('town-square');
utils.switchChannel(townsquare);
},
function(err) {
- AsyncClient.dispatchError(err, "handleLeave");
+ AsyncClient.dispatchError(err, 'handleLeave');
}
);
},
@@ -123,9 +131,16 @@ module.exports = React.createClass({
var user = UserStore.getCurrentUser();
- var terms = "";
+ var terms = '';
if (user.notify_props && user.notify_props.mention_keys) {
- terms = UserStore.getCurrentMentionKeys().join(' ');
+ var termKeys = UserStore.getCurrentMentionKeys();
+ if (user.notify_props.all === 'true' && termKeys.indexOf('@all') !== -1) {
+ termKeys.splice(termKeys.indexOf('@all'), 1);
+ }
+ if (user.notify_props.channel === 'true' && termKeys.indexOf('@channel') !== -1) {
+ termKeys.splice(termKeys.indexOf('@channel'), 1);
+ }
+ terms = termKeys.join(' ');
}
AppDispatcher.handleServerAction({
@@ -135,81 +150,84 @@ module.exports = React.createClass({
is_mention_search: true
});
},
-
render: function() {
-
if (this.state.channel == null) {
return null;
}
var channel = this.state.channel;
- var description = utils.textToJsx(channel.description, {"singleline": true, "noMentionHighlight": true});
+ var description = utils.textToJsx(channel.description, {singleline: true, noMentionHighlight: true});
var popoverContent = React.renderToString(<MessageWrapper message={channel.description}/>);
var channelTitle = channel.display_name;
var currentId = UserStore.getCurrentId();
- var isAdmin = this.state.memberChannel.roles.indexOf("admin") > -1 || this.state.memberTeam.roles.indexOf("admin") > -1;
+ var isAdmin = this.state.memberChannel.roles.indexOf('admin') > -1 || this.state.memberTeam.roles.indexOf('admin') > -1;
var isDirect = (this.state.channel.type === 'D');
if (isDirect) {
if (this.state.users.length > 1) {
- var contact = this.state.users[((this.state.users[0].id === currentId) ? 1 : 0)];
+ var contact;
+ if (this.state.users[0].id === currentId) {
+ contact = this.state.users[1];
+ } else {
+ contact = this.state.users[0];
+ }
channelTitle = contact.nickname || contact.username;
}
}
return (
- <table className="channel-header alt">
+ <table className='channel-header alt'>
<tr>
<th>
- <div className="channel-header__info">
- <div className="dropdown">
- <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_dropdown" data-toggle="dropdown" aria-expanded="true">
- <strong className="heading">{channelTitle} </strong>
- <span className="glyphicon glyphicon-chevron-down header-dropdown__icon"></span>
+ <div className='channel-header__info'>
+ <div className='dropdown'>
+ <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_dropdown' data-toggle='dropdown' aria-expanded='true'>
+ <strong className='heading'>{channelTitle} </strong>
+ <span className='glyphicon glyphicon-chevron-down header-dropdown__icon'></span>
</a>
- { !isDirect ?
- <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={channel.id} href="#">View Info</a></li>
- { !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_invite" href="#">Add Members</a></li>
+ {!isDirect ?
+ <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={channel.id} href='#'>View Info</a></li>
+ {!ChannelStore.isDefault(channel) ?
+ <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_invite' href='#'>Add Members</a></li>
: null
}
- { isAdmin && !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" data-toggle="modal" data-target="#channel_members" href="#">Manage Members</a></li>
+ {isAdmin && !ChannelStore.isDefault(channel) ?
+ <li role='presentation'><a role='menuitem' data-toggle='modal' data-target='#channel_members' href='#'>Manage Members</a></li>
: null
}
- <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>
- <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#channel_notifications" data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>
- { isAdmin && !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#rename_channel" data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>
+ <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>
+ <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#channel_notifications' data-title={channel.display_name} data-channelid={channel.id}>Notification Preferences</a></li>
+ {isAdmin && !ChannelStore.isDefault(channel) ?
+ <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#rename_channel' data-display={channel.display_name} data-name={channel.name} data-channelid={channel.id}>Rename Channel...</a></li>
: null
}
- { isAdmin && !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#delete_channel" data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>
+ {isAdmin && !ChannelStore.isDefault(channel) ?
+ <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#delete_channel' data-title={channel.display_name} data-channelid={channel.id}>Delete Channel...</a></li>
: null
}
- { !ChannelStore.isDefault(channel) ?
- <li role="presentation"><a role="menuitem" href="#" onClick={this.handleLeave}>Leave Channel</a></li>
+ {!ChannelStore.isDefault(channel) ?
+ <li role='presentation'><a role='menuitem' href='#' onClick={this.handleLeave}>Leave Channel</a></li>
: null
}
</ul>
:
- <ul className="dropdown-menu" role="menu" aria-labelledby="channel_header_dropdown">
- <li role="presentation"><a role="menuitem" href="#" data-toggle="modal" data-target="#edit_channel" data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>
+ <ul className='dropdown-menu' role='menu' aria-labelledby='channel_header_dropdown'>
+ <li role='presentation'><a role='menuitem' href='#' data-toggle='modal' data-target='#edit_channel' data-desc={channel.description} data-title={channel.display_name} data-channelid={channel.id}>Set Channel Description...</a></li>
</ul>
}
</div>
- <div data-toggle="popover" data-content={popoverContent} className="description">{description}</div>
+ <div data-toggle='popover' data-content={popoverContent} className='description'>{description}</div>
</div>
</th>
<th><PopoverListMembers members={this.state.users} channelId={channel.id} /></th>
- <th className="search-bar__container"><NavbarSearchBox /></th>
+ <th className='search-bar__container'><NavbarSearchBox /></th>
<th>
- <div className="dropdown channel-header__links">
- <a href="#" className="dropdown-toggle theme" type="button" id="channel_header_right_dropdown" data-toggle="dropdown" aria-expanded="true">
- <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON }} /> </a>
- <ul className="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="channel_header_right_dropdown">
- <li role="presentation"><a role="menuitem" href="#" onClick={this.searchMentions}>Recent Mentions</a></li>
+ <div className='dropdown channel-header__links'>
+ <a href='#' className='dropdown-toggle theme' type='button' id='channel_header_right_dropdown' data-toggle='dropdown' aria-expanded='true'>
+ <span dangerouslySetInnerHTML={{__html: Constants.MENU_ICON}} /> </a>
+ <ul className='dropdown-menu dropdown-menu-right' role='menu' aria-labelledby='channel_header_right_dropdown'>
+ <li role='presentation'><a role='menuitem' href='#' onClick={this.searchMentions}>Recent Mentions</a></li>
</ul>
</div>
</th>
diff --git a/web/react/components/invite_member_modal.jsx b/web/react/components/invite_member_modal.jsx
index fed96b50a..3eca79bae 100644
--- a/web/react/components/invite_member_modal.jsx
+++ b/web/react/components/invite_member_modal.jsx
@@ -2,7 +2,7 @@
// See License.txt for license information.
var utils = require('../utils/utils.jsx');
-var Client =require('../utils/client.jsx');
+var Client = require('../utils/client.jsx');
var UserStore = require('../stores/user_store.jsx');
var ConfirmModal = require('./confirm_modal.jsx');
@@ -15,20 +15,19 @@ module.exports = React.createClass({
return;
}
- var not_empty = false;
- for (var i = 0; i < self.state.invite_ids.length; i++) {
- var index = self.state.invite_ids[i];
- if (self.refs["email"+index].getDOMNode().value.trim() !== '') {
- not_empty = true;
+ var notEmpty = false;
+ for (var i = 0; i < self.state.inviteIds.length; i++) {
+ var index = self.state.inviteIds[i];
+ if (self.refs['email' + index].getDOMNode().value.trim() !== '') {
+ notEmpty = true;
break;
}
}
- if (not_empty) {
+ if (notEmpty) {
$('#confirm_invite_modal').modal('show');
e.preventDefault();
}
-
});
$('#invite_member').on('hidden.bs.modal', function() {
@@ -36,52 +35,54 @@ module.exports = React.createClass({
});
},
handleSubmit: function(e) {
- var invite_ids = this.state.invite_ids;
- var count = invite_ids.length;
+ var inviteIds = this.state.inviteIds;
+ var count = inviteIds.length;
var invites = [];
- var email_errors = this.state.email_errors;
- var first_name_errors = this.state.first_name_errors;
- var last_name_errors = this.state.last_name_errors;
+ var emailErrors = this.state.emailErrors;
+ var firstNameErrors = this.state.firstNameErrors;
+ var lastNameErrors = this.state.lastNameErrors;
var valid = true;
for (var i = 0; i < count; i++) {
- var index = invite_ids[i];
+ var index = inviteIds[i];
var invite = {};
- invite.email = this.refs["email"+index].getDOMNode().value.trim();
+ invite.email = this.refs['email' + index].getDOMNode().value.trim();
if (!invite.email || !utils.isEmail(invite.email)) {
- email_errors[index] = "Please enter a valid email address";
+ emailErrors[index] = 'Please enter a valid email address';
valid = false;
} else {
- email_errors[index] = "";
+ emailErrors[index] = '';
}
if (config.AllowInviteNames) {
- invite.first_name = this.refs["first_name"+index].getDOMNode().value.trim();
- if (!invite.first_name && config.RequireInviteNames) {
- first_name_errors[index] = "This is a required field";
+ invite.firstName = this.refs['first_name' + index].getDOMNode().value.trim();
+ if (!invite.firstName && config.RequireInviteNames) {
+ firstNameErrors[index] = 'This is a required field';
valid = false;
} else {
- first_name_errors[index] = "";
+ firstNameErrors[index] = '';
}
- invite.last_name = this.refs["last_name"+index].getDOMNode().value.trim();
- if (!invite.last_name && config.RequireInviteNames) {
- last_name_errors[index] = "This is a required field";
+ invite.lastName = this.refs['last_name' + index].getDOMNode().value.trim();
+ if (!invite.lastName && config.RequireInviteNames) {
+ lastNameErrors[index] = 'This is a required field';
valid = false;
} else {
- last_name_errors[index] = "";
+ lastNameErrors[index] = '';
}
}
invites.push(invite);
}
- this.setState({ email_errors: email_errors, first_name_errors: first_name_errors, last_name_errors: last_name_errors });
+ this.setState({emailErrors: emailErrors, firstNameErrors: firstNameErrors, lastNameErrors: lastNameErrors});
- if (!valid || invites.length === 0) return;
+ if (!valid || invites.length === 0) {
+ return;
+ }
- var data = {}
- data["invites"] = invites;
+ var data = {};
+ data.invites = invites;
Client.inviteMembers(data,
function() {
@@ -89,146 +90,177 @@ module.exports = React.createClass({
$(this.refs.modal.getDOMNode()).modal('hide');
}.bind(this),
function(err) {
- if (err.message === "This person is already on your team") {
- email_errors[err.detailed_error] = err.message;
- this.setState({ email_errors: email_errors });
+ if (err.message === 'This person is already on your team') {
+ emailErrors[err.detailed_error] = err.message;
+ this.setState({emailErrors: emailErrors});
+ } else {
+ this.setState({serverError: err.message});
}
- else
- this.setState({ server_error: err.message});
}.bind(this)
);
-
},
componentDidUpdate: function() {
$(this.refs.modalBody.getDOMNode()).css('max-height', $(window).height() - 200);
$(this.refs.modalBody.getDOMNode()).css('overflow-y', 'scroll');
},
addInviteFields: function() {
- var count = this.state.id_count + 1;
- var invite_ids = this.state.invite_ids;
- invite_ids.push(count);
- this.setState({ invite_ids: invite_ids, id_count: count });
+ var count = this.state.idCount + 1;
+ var inviteIds = this.state.inviteIds;
+ inviteIds.push(count);
+ this.setState({inviteIds: inviteIds, idCount: count});
},
clearFields: function() {
- var invite_ids = this.state.invite_ids;
+ var inviteIds = this.state.inviteIds;
- for (var i = 0; i < invite_ids.length; i++) {
- var index = invite_ids[i];
- this.refs["email"+index].getDOMNode().value = "";
+ for (var i = 0; i < inviteIds.length; i++) {
+ var index = inviteIds[i];
+ this.refs['email' + index].getDOMNode().value = '';
if (config.AllowInviteNames) {
- this.refs["first_name"+index].getDOMNode().value = "";
- this.refs["last_name"+index].getDOMNode().value = "";
+ this.refs['first_name' + index].getDOMNode().value = '';
+ this.refs['last_name' + index].getDOMNode().value = '';
}
}
this.setState({
- invite_ids: [0],
- id_count: 0,
- email_errors: {},
- first_name_errors: {},
- last_name_errors: {}
+ inviteIds: [0],
+ idCount: 0,
+ emailErrors: {},
+ firstNameErrors: {},
+ lastNameErrors: {}
});
},
removeInviteFields: function(index) {
- var count = this.state.id_count;
- var invite_ids = this.state.invite_ids;
- var i = invite_ids.indexOf(index);
- 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 });
+ var count = this.state.idCount;
+ var inviteIds = this.state.inviteIds;
+ var i = inviteIds.indexOf(index);
+ if (i > -1) {
+ inviteIds.splice(i, 1);
+ }
+ if (!inviteIds.length) {
+ inviteIds.push(++count);
+ }
+ this.setState({inviteIds: inviteIds, idCount: count});
},
getInitialState: function() {
return {
- invite_ids: [0],
- id_count: 0,
- email_errors: {},
- first_name_errors: {},
- last_name_errors: {}
+ inviteIds: [0],
+ idCount: 0,
+ emailErrors: {},
+ firstNameErrors: {},
+ lastNameErrors: {}
};
},
render: function() {
- var currentUser = UserStore.getCurrentUser()
+ var currentUser = UserStore.getCurrentUser();
if (currentUser != null) {
- var invite_sections = [];
- var invite_ids = this.state.invite_ids;
- var self = this;
- for (var i = 0; i < invite_ids.length; i++) {
- var index = invite_ids[i];
- var email_error = this.state.email_errors[index] ? <label className='control-label'>{ this.state.email_errors[index] }</label> : null;
- var first_name_error = this.state.first_name_errors[index] ? <label className='control-label'>{ this.state.first_name_errors[index] }</label> : null;
- var last_name_error = this.state.last_name_errors[index] ? <label className='control-label'>{ this.state.last_name_errors[index] }</label> : null;
-
- invite_sections[index] = (
- <div key={"key" + index}>
- <div>
- <button type="button" className="btn btn-link remove__member" onClick={this.removeInviteFields.bind(this, index)}><span className="fa fa-trash"></span></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 }
- </div>
- <div className="row--invite">
- { config.AllowInviteNames ?
- <div className="col-sm-6">
- <div className={ first_name_error ? "form-group has-error" : "form-group" }>
- <input type="text" className="form-control" ref={"first_name"+index} placeholder="First name" maxLength="64" />
- { first_name_error }
- </div>
- </div>
- : "" }
- { config.AllowInviteNames ?
- <div className="col-sm-6">
- <div className={ last_name_error ? "form-group has-error" : "form-group" }>
- <input type="text" className="form-control" ref={"last_name"+index} placeholder="Last name" maxLength="64" />
- { last_name_error }
- </div>
- </div>
- : "" }
+ var inviteSections = [];
+ var inviteIds = this.state.inviteIds;
+ for (var i = 0; i < inviteIds.length; i++) {
+ var index = inviteIds[i];
+ var emailError = null;
+ if (this.state.emailErrors[index]) {
+ emailError = <label className='control-label'>{this.state.emailErrors[index]}</label>;
+ }
+ var firstNameError = null;
+ if (this.state.firstNameErrors[index]) {
+ firstNameError = <label className='control-label'>{this.state.firstNameErrors[index]}</label>;
+ }
+ var lastNameError = null;
+ if (this.state.lastNameErrors[index]) {
+ lastNameError = <label className='control-label'>{this.state.lastNameErrors[index]}</label>;
+ }
+
+ var removeButton = null;
+ if (index) {
+ removeButton = (<div>
+ <button type='button' className='btn btn-link remove__member' onClick={this.removeInviteFields.bind(this, index)}><span className='fa fa-trash'></span></button>
+ </div>);
+ }
+ var emailClass = 'form-group invite';
+ if (emailError) {
+ emailClass += ' has-error';
+ }
+
+ var nameFields = null;
+ if (config.AllowInviteNames) {
+ var firstNameClass = 'form-group';
+ if (firstNameError) {
+ firstNameClass += ' has-error';
+ }
+ var lastNameClass = 'form-group';
+ if (lastNameError) {
+ lastNameClass += ' has-error';
+ }
+ nameFields = (<div className='row--invite'>
+ <div className='col-sm-6'>
+ <div className={firstNameClass}>
+ <input type='text' className='form-control' ref={'first_name' + index} placeholder='First name' maxLength='64' />
+ {firstNameError}
+ </div>
+ </div>
+ <div className='col-sm-6'>
+ <div className={lastNameClass}>
+ <input type='text' className='form-control' ref={'last_name' + index} placeholder='Last name' maxLength='64' />
+ {lastNameError}
+ </div>
+ </div>
+ </div>);
+ }
+
+ inviteSections[index] = (
+ <div key={'key' + index}>
+ {removeButton}
+ <div className={emailClass}>
+ <input onKeyUp={this.displayNameKeyUp} type='text' ref={'email' + index} className='form-control' placeholder='email@domain.com' maxLength='64' />
+ {emailError}
</div>
+ {nameFields}
</div>
);
}
- 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 serverError = null;
+ if (this.state.serverError) {
+ serverError = <div className='form-group has-error'><label className='control-label'>{this.state.serverError}</label></div>;
+ }
return (
<div>
- <div className="modal fade" ref="modal" id="invite_member" tabIndex="-1" role="dialog" aria-hidden="true">
- <div className="modal-dialog">
- <div className="modal-content">
- <div className="modal-header">
- <button type="button" className="close" data-dismiss="modal" aria-label="Close" data-reactid=".5.0.0.0.0"><span aria-hidden="true" data-reactid=".5.0.0.0.0.0">×</span></button>
- <h4 className="modal-title" id="myModalLabel">Invite New Member</h4>
+ <div className='modal fade' ref='modal' id='invite_member' tabIndex='-1' role='dialog' aria-hidden='true'>
+ <div className='modal-dialog'>
+ <div className='modal-content'>
+ <div className='modal-header'>
+ <button type='button' className='close' data-dismiss='modal' aria-label='Close' data-reactid='.5.0.0.0.0'><span aria-hidden='true' data-reactid='.5.0.0.0.0.0'>×</span></button>
+ <h4 className='modal-title' id='myModalLabel'>Invite New Member</h4>
</div>
- <div ref="modalBody" className="modal-body">
- <form role="form">
- { invite_sections }
+ <div ref='modalBody' className='modal-body'>
+ <form role='form'>
+ {inviteSections}
</form>
- { server_error }
- <button type="button" className="btn btn-default" onClick={this.addInviteFields}>Add another</button>
+ {serverError}
+ <button type='button' className='btn btn-default' onClick={this.addInviteFields}>Add another</button>
<br/>
<br/>
<span>People invited automatically join Town Square channel.</span>
</div>
- <div className="modal-footer">
- <button type="button" className="btn btn-default" data-dismiss="modal">Cancel</button>
- <button onClick={this.handleSubmit} type="button" className="btn btn-primary">Send Invitations</button>
+ <div className='modal-footer'>
+ <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button>
+ <button onClick={this.handleSubmit} type='button' className='btn btn-primary'>Send Invitations</button>
</div>
</div>
</div>
</div>
<ConfirmModal
- id="confirm_invite_modal"
- parent_id="invite_member"
- title="Discard Invitations?"
- message="You have unsent invitations, are you sure you want to discard them?"
- confirm_button="Yes, Discard"
+ id='confirm_invite_modal'
+ parent_id='invite_member'
+ title='Discard Invitations?'
+ message='You have unsent invitations, are you sure you want to discard them?'
+ confirm_button='Yes, Discard/'
/>
</div>
);
- } else {
- return <div/>;
}
+ return <div/>;
}
});
diff --git a/web/react/components/sidebar.jsx b/web/react/components/sidebar.jsx
index 5b8d6c542..1d39f5f67 100644
--- a/web/react/components/sidebar.jsx
+++ b/web/react/components/sidebar.jsx
@@ -7,7 +7,7 @@ var AsyncClient = require('../utils/async_client.jsx');
var SocketStore = require('../stores/socket_store.jsx');
var UserStore = require('../stores/user_store.jsx');
var TeamStore = require('../stores/team_store.jsx');
-var BrowserStore = require('../stores/browser_store.jsx')
+var BrowserStore = require('../stores/browser_store.jsx');
var utils = require('../utils/utils.jsx');
var SidebarHeader = require('./sidebar_header.jsx');
var SearchBox = require('./search_bar.jsx');
@@ -17,13 +17,15 @@ var ActionTypes = Constants.ActionTypes;
function getStateFromStores() {
var members = ChannelStore.getAllMembers();
- var team_member_map = UserStore.getActiveOnlyProfiles();
- var current_id = ChannelStore.getCurrentId();
+ var teamMemberMap = UserStore.getActiveOnlyProfiles();
+ var currentId = ChannelStore.getCurrentId();
var teammates = [];
- for (var id in team_member_map) {
- if (id === UserStore.getCurrentId()) continue;
- teammates.push(team_member_map[id]);
+ for (var id in teamMemberMap) {
+ if (id === UserStore.getCurrentId()) {
+ continue;
+ }
+ teammates.push(teamMemberMap[id]);
}
// Create lists of all read and unread direct channels
@@ -32,11 +34,11 @@ function getStateFromStores() {
for (var i = 0; i < teammates.length; i++) {
var teammate = teammates[i];
- if (teammate.id == UserStore.getCurrentId()) {
+ if (teammate.id === UserStore.getCurrentId()) {
continue;
}
- var channelName = "";
+ var channelName = '';
if (teammate.id > UserStore.getCurrentId()) {
channelName = UserStore.getCurrentId() + '__' + teammate.id;
} else {
@@ -46,17 +48,17 @@ function getStateFromStores() {
var channel = ChannelStore.getByName(channelName);
if (channel != null) {
- channel.display_name = utils.getDisplayName(teammate);
+ channel.display_name = teammate.username;
channel.teammate_username = teammate.username;
channel.status = UserStore.getStatus(teammate.id);
var channelMember = members[channel.id];
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- if (msg_count > 0) {
- channel.unread = msg_count;
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ if (msgCount > 0) {
+ channel.unread = msgCount;
showDirectChannels.push(channel);
- } else if (current_id === channel.id) {
+ } else if (currentId === channel.id) {
showDirectChannels.push(channel);
} else {
readDirectChannels.push(channel);
@@ -74,13 +76,22 @@ function getStateFromStores() {
// If we don't have MAX_DMS unread channels, sort the read list by last_post_at
if (showDirectChannels.length < Constants.MAX_DMS) {
- readDirectChannels.sort(function(a,b) {
+ readDirectChannels.sort(function(a, b) {
// sort by last_post_at first
- if (a.last_post_at > b.last_post_at) return -1;
- if (a.last_post_at < b.last_post_at) return 1;
+ if (a.last_post_at > b.last_post_at) {
+ return -1;
+ }
+ if (a.last_post_at < b.last_post_at) {
+ return 1;
+ }
+
// if last_post_at is equal, sort by name
- if (a.display_name < b.display_name) return -1;
- if (a.display_name > b.display_name) return 1;
+ if (a.display_name < b.display_name) {
+ return -1;
+ }
+ if (a.display_name > b.display_name) {
+ return 1;
+ }
return 0;
});
@@ -91,15 +102,19 @@ function getStateFromStores() {
}
readDirectChannels = readDirectChannels.slice(index);
- showDirectChannels.sort(function(a,b) {
- if (a.display_name < b.display_name) return -1;
- if (a.display_name > b.display_name) return 1;
+ showDirectChannels.sort(function(a, b) {
+ if (a.display_name < b.display_name) {
+ return -1;
+ }
+ if (a.display_name > b.display_name) {
+ return 1;
+ }
return 0;
});
}
return {
- active_id: current_id,
+ active_id: currentId,
channels: ChannelStore.getAll(),
members: members,
showDirectChannels: showDirectChannels,
@@ -108,12 +123,13 @@ function getStateFromStores() {
}
module.exports = React.createClass({
+ displayName: 'Sidebar',
componentDidMount: function() {
- ChannelStore.addChangeListener(this._onChange);
- UserStore.addChangeListener(this._onChange);
- UserStore.addStatusesChangeListener(this._onChange);
- SocketStore.addChangeListener(this._onSocketChange);
- $(".nav-pills__container").perfectScrollbar();
+ ChannelStore.addChangeListener(this.onChange);
+ UserStore.addChangeListener(this.onChange);
+ UserStore.addStatusesChangeListener(this.onChange);
+ SocketStore.addChangeListener(this.onSocketChange);
+ $('.nav-pills__container').perfectScrollbar();
this.updateTitle();
},
@@ -121,93 +137,88 @@ module.exports = React.createClass({
this.updateTitle();
},
componentWillUnmount: function() {
- ChannelStore.removeChangeListener(this._onChange);
- UserStore.removeChangeListener(this._onChange);
- UserStore.removeStatusesChangeListener(this._onChange);
- SocketStore.removeChangeListener(this._onSocketChange);
+ ChannelStore.removeChangeListener(this.onChange);
+ UserStore.removeChangeListener(this.onChange);
+ UserStore.removeStatusesChangeListener(this.onChange);
+ SocketStore.removeChangeListener(this.onSocketChange);
},
- _onChange: function() {
+ onChange: function() {
var newState = getStateFromStores();
if (!utils.areStatesEqual(newState, this.state)) {
this.setState(newState);
}
},
- _onSocketChange: function(msg) {
- if (msg.action == "posted") {
+ onSocketChange: function(msg) {
+ if (msg.action === 'posted') {
if (ChannelStore.getCurrentId() === msg.channel_id) {
AsyncClient.getChannels(true, window.isActive);
} else {
AsyncClient.getChannels(true);
}
- if (UserStore.getCurrentId() != msg.user_id) {
-
+ if (UserStore.getCurrentId() !== msg.user_id) {
var mentions = msg.props.mentions ? JSON.parse(msg.props.mentions) : [];
var channel = ChannelStore.get(msg.channel_id);
var user = UserStore.getCurrentUser();
- if (user.notify_props && ((user.notify_props.desktop === "mention" && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === "none")) {
+ if (user.notify_props && ((user.notify_props.desktop === 'mention' && mentions.indexOf(user.id) === -1 && channel.type !== 'D') || user.notify_props.desktop === 'none')) {
return;
}
var member = ChannelStore.getMember(msg.channel_id);
- if ((member.notify_level === "mention" && mentions.indexOf(user.id) === -1) || member.notify_level === "none" || member.notify_level === "quiet") {
+ if ((member.notify_level === 'mention' && mentions.indexOf(user.id) === -1) || member.notify_level === 'none' || member.notify_level === 'quiet') {
return;
}
- var username = "Someone";
+ var username = 'Someone';
if (UserStore.hasProfile(msg.user_id)) {
username = UserStore.getProfile(msg.user_id).username;
}
- var title = channel ? channel.display_name : "Posted";
+ var title = channel ? channel.display_name : 'Posted';
- var repRegex = new RegExp("<br>", "g");
+ var repRegex = new RegExp('<br>', 'g');
var post = JSON.parse(msg.props.post);
var msgProps = msg.props;
- var msg = post.message.replace(repRegex, "\n").replace(/\n+/g, " ").replace("<mention>", "").replace("</mention>", "");
-
- if (msg.length > 50) {
- msg = msg.substring(0,49) + "...";
+ var notifyText = post.message.replace(repRegex, '\n').replace(/\n+/g, ' ').replace('<mention>', '').replace('</mention>', '');
+
+ if (notifyText.length > 50) {
+ notifyText = notifyText.substring(0, 49) + '...';
}
- if (msg.length === 0) {
+ if (notifyText.length === 0) {
if (msgProps.image) {
- utils.notifyMe(title, username + " uploaded an image", channel);
- }
- else if (msgProps.otherFile) {
- utils.notifyMe(title, username + " uploaded a file", channel);
+ utils.notifyMe(title, username + ' uploaded an image', channel);
+ } else if (msgProps.otherFile) {
+ utils.notifyMe(title, username + ' uploaded a file', channel);
+ } else {
+ utils.notifyMe(title, username + ' did something new', channel);
}
- else {
- utils.notifyMe(title, username + " did something new", channel);
- }
- }
- else {
- utils.notifyMe(title, username + " wrote: " + msg, channel);
+ } else {
+ utils.notifyMe(title, username + ' wrote: ' + notifyText, channel);
}
- if (!user.notify_props || user.notify_props.desktop_sound === "true") {
+ if (!user.notify_props || user.notify_props.desktop_sound === 'true') {
utils.ding();
}
}
-
- } else if (msg.action == "viewed") {
+ } else if (msg.action === 'viewed') {
if (ChannelStore.getCurrentId() != msg.channel_id) {
AsyncClient.getChannels(true);
}
- } else if (msg.action == "user_added") {
+ } else if (msg.action === 'user_added') {
if (UserStore.getCurrentId() === msg.user_id) {
AsyncClient.getChannels(true);
}
- } else if(msg.action === "user_removed") {
- if(msg.user_id === UserStore.getCurrentId()) {
+ } else if (msg.action === 'user_removed') {
+ if (msg.user_id === UserStore.getCurrentId()) {
AsyncClient.getChannels(true);
- if(msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
+ if (msg.props.channel_id === ChannelStore.getCurrentId() && $('#removed_from_channel').length > 0) {
var sentState = {};
sentState.channelName = ChannelStore.getCurrent().display_name;
sentState.remover = UserStore.getProfile(msg.props.remover).username;
- BrowserStore.setItem('channel-removed-state',sentState);
+ BrowserStore.setItem('channel-removed-state', sentState);
$('#removed_from_channel').modal('show');
}
}
@@ -217,10 +228,10 @@ module.exports = React.createClass({
var channel = ChannelStore.getCurrent();
if (channel) {
if (channel.type === 'D') {
- var teammate_username = utils.getDirectTeammate(channel.id).username
- document.title = teammate_username + " " + document.title.substring(document.title.lastIndexOf("-"));
+ var teammate_username = utils.getDirectTeammate(channel.id).username;
+ document.title = teammate_username + ' ' + document.title.substring(document.title.lastIndexOf('-'));
} else {
- document.title = channel.display_name + " " + document.title.substring(document.title.lastIndexOf("-"))
+ document.title = channel.display_name + ' ' + document.title.substring(document.title.lastIndexOf('-'));
}
}
},
@@ -229,92 +240,96 @@ module.exports = React.createClass({
},
render: function() {
var members = this.state.members;
- var newsActive = window.location.pathname === "/" ? "active" : "";
+ var newsActive = window.location.pathname === '/' ? 'active' : '';
var badgesActive = false;
var self = this;
var channelItems = this.state.channels.map(function(channel) {
if (channel.type != 'O') {
- return "";
+ return '';
}
var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- var titleClass = ""
- if (msg_count > 0 && channelMember.notify_level !== "quiet") {
- titleClass = "unread-title"
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ var titleClass = '';
+ if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
+ titleClass = 'unread-title';
}
- var badge = "";
+ var badge = '';
if (channelMember.mention_count > 0) {
- badge = <span className="badge pull-right small">{channelMember.mention_count}</span>;
+ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
}
return (
- <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+ <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
);
});
var privateChannelItems = this.state.channels.map(function(channel) {
- if (channel.type != 'P') {
- return "";
+ if (channel.type !== 'P') {
+ return '';
}
var channelMember = members[channel.id];
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
- var msg_count = channel.total_msg_count - channelMember.msg_count;
- var titleClass = ""
- if (msg_count > 0 && channelMember.notify_level !== "quiet") {
- titleClass = "unread-title"
+ var msgCount = channel.total_msg_count - channelMember.msg_count;
+ var titleClass = ''
+ if (msgCount > 0 && channelMember.notify_level !== 'quiet') {
+ titleClass = 'unread-title'
}
- var badge = "";
+ var badge = '';
if (channelMember.mention_count > 0) {
- badge = <span className="badge pull-right small">{channelMember.mention_count}</span>;
+ badge = <span className='badge pull-right small'>{channelMember.mention_count}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
}
return (
- <li key={channel.id} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
+ <li key={channel.id} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={function(e){e.preventDefault(); utils.switchChannel(channel);}}>{badge}{channel.display_name}</a></li>
);
});
var directMessageItems = this.state.showDirectChannels.map(function(channel) {
- var badge = "";
- var titleClass = "";
+ var badge = '';
+ var titleClass = '';
- var statusIcon = "";
- if (channel.status === "online") {
+ var statusIcon = '';
+ if (channel.status === 'online') {
statusIcon = Constants.ONLINE_ICON_SVG;
- } else if (channel.status === "away") {
+ } else if (channel.status === 'away') {
statusIcon = Constants.ONLINE_ICON_SVG;
} else {
statusIcon = Constants.OFFLINE_ICON_SVG;
}
if (!channel.fake) {
- var active = channel.id === self.state.active_id ? "active" : "";
+ var active = channel.id === self.state.active_id ? 'active' : '';
if (channel.unread) {
- badge = <span className="badge pull-right small">{channel.unread}</span>;
+ badge = <span className='badge pull-right small'>{channel.unread}</span>;
badgesActive = true;
- titleClass = "unread-title"
+ titleClass = 'unread-title';
+ }
+
+ function handleClick(e) {
+ e.preventDefault();
+ utils.switchChannel(channel, channel.teammate_username);
}
return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href="#" onClick={function(e){e.preventDefault(); utils.switchChannel(channel, channel.teammate_username);}}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href='#' onClick={handleClick}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
);
} else {
return (
- <li key={channel.name} className={active}><a className={"sidebar-channel " + titleClass} href={TeamStore.getCurrentTeamUrl() + "/channels/"+channel.name}><span className="status" dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
+ <li key={channel.name} className={active}><a className={'sidebar-channel ' + titleClass} href={TeamStore.getCurrentTeamUrl() + '/channels/' + channel.name}><span className='status' dangerouslySetInnerHTML={{__html: statusIcon}} /> {badge}{channel.display_name}</a></li>
);
}
-
});
var link = document.createElement('link');
@@ -345,23 +360,23 @@ module.exports = React.createClass({
<SidebarHeader teamDisplayName={this.props.teamDisplayName} teamType={this.props.teamType} />
<SearchBox />
- <div className="nav-pills__container">
- <ul className="nav nav-pills nav-stacked">
- <li><h4>Channels<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="O">+</a></h4></li>
+ <div className='nav-pills__container'>
+ <ul className='nav nav-pills nav-stacked'>
+ <li><h4>Channels<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='O'>+</a></h4></li>
{channelItems}
- <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_channels" data-channeltype="O">More...</a></li>
+ <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_channels' data-channeltype='O'>More...</a></li>
</ul>
- <ul className="nav nav-pills nav-stacked">
- <li><h4>Private Groups<a className="add-channel-btn" href="#" data-toggle="modal" data-target="#new_channel" data-channeltype="P">+</a></h4></li>
+ <ul className='nav nav-pills nav-stacked'>
+ <li><h4>Private Groups<a className='add-channel-btn' href='#' data-toggle='modal' data-target='#new_channel' data-channeltype='P'>+</a></h4></li>
{privateChannelItems}
</ul>
- <ul className="nav nav-pills nav-stacked">
+ <ul className='nav nav-pills nav-stacked'>
<li><h4>Private Messages</h4></li>
{directMessageItems}
{ this.state.hideDirectChannels.length > 0 ?
- <li><a href="#" data-toggle="modal" className="nav-more" data-target="#more_direct_channels" data-channels={JSON.stringify(this.state.hideDirectChannels)}>{"More ("+this.state.hideDirectChannels.length+")"}</a></li>
- : "" }
+ <li><a href='#' data-toggle='modal' className='nav-more' data-target='#more_direct_channels' data-channels={JSON.stringify(this.state.hideDirectChannels)}>{'More ('+this.state.hideDirectChannels.length+')'}</a></li>
+ : '' }
</ul>
</div>
</div>
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 95d1178d1..c574d2365 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -102,6 +102,8 @@ var NotificationsTab = React.createClass({
});
this.setState(assign({},getNotificationsStateFromStores(),{server_error: null}));
+
+ this.props.updateTab('general');
},
componentDidMount: function() {
UserStore.addChangeListener(this._onChange);
@@ -110,6 +112,7 @@ var NotificationsTab = React.createClass({
componentWillUnmount: function() {
UserStore.removeChangeListener(this._onChange);
$('#user_settings1').off('hidden.bs.modal', this.handleClose);
+ this.props.updateSection('');
},
_onChange: function() {
var newState = getNotificationsStateFromStores();
@@ -522,12 +525,14 @@ var SecurityTab = React.createClass({
this.value = "";
});
this.setState({current_password: '', new_password: '', confirm_password: '', server_error: null, password_error: null});
+ this.props.updateTab('general');
},
componentDidMount: function() {
$('#user_settings1').on('hidden.bs.modal', this.handleClose);
},
componentWillUnmount: function() {
$('#user_settings1').off('hidden.bs.modal', this.handleClose);
+ this.props.updateSection('');
},
getInitialState: function() {
return { current_password: '', new_password: '', confirm_password: '' };
@@ -794,6 +799,7 @@ var GeneralTab = React.createClass({
});
this.setState(assign({}, this.getInitialState(), {client_error: null, server_error: null, email_error: null}));
+ this.props.updateSection('');
},
componentDidMount: function() {
$('#user_settings1').on('hidden.bs.modal', this.handleClose);
@@ -1063,6 +1069,7 @@ var AppearanceTab = React.createClass({
},
handleClose: function() {
this.setState({server_error: null});
+ this.props.updateTab('general');
},
componentDidMount: function() {
if (this.props.activeSection === "theme") {
@@ -1078,6 +1085,7 @@ var AppearanceTab = React.createClass({
},
componentWillUnmount: function() {
$('#user_settings1').off('hidden.bs.modal', this.handleClose);
+ this.props.updateSection('');
},
getInitialState: function() {
var user = UserStore.getCurrentUser();
@@ -1146,10 +1154,11 @@ var AppearanceTab = React.createClass({
</div>
</div>
);
- }
+ }
});
module.exports = React.createClass({
+ displayName: 'UserSettings',
componentDidMount: function() {
UserStore.addChangeListener(this._onChange);
},
@@ -1175,19 +1184,19 @@ module.exports = React.createClass({
} else if (this.props.activeTab === 'security') {
return (
<div>
- <SecurityTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+ <SecurityTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
</div>
);
} else if (this.props.activeTab === 'notifications') {
return (
<div>
- <NotificationsTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+ <NotificationsTab user={this.state.user} activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
</div>
);
} else if (this.props.activeTab === 'appearance') {
return (
<div>
- <AppearanceTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} />
+ <AppearanceTab activeSection={this.props.activeSection} updateSection={this.props.updateSection} updateTab={this.props.updateTab} />
</div>
);
} else {
diff --git a/web/react/components/user_settings_modal.jsx b/web/react/components/user_settings_modal.jsx
index 421027244..d1aff74f2 100644
--- a/web/react/components/user_settings_modal.jsx
+++ b/web/react/components/user_settings_modal.jsx
@@ -53,6 +53,7 @@ module.exports = React.createClass({
activeTab={this.state.active_tab}
activeSection={this.state.active_section}
updateSection={this.updateSection}
+ updateTab={this.updateTab}
/>
</div>
</div>