diff options
Diffstat (limited to 'web/react')
| -rw-r--r-- | web/react/components/channel_header.jsx | 180 | ||||
| -rw-r--r-- | web/react/components/invite_member_modal.jsx | 270 | ||||
| -rw-r--r-- | web/react/components/sidebar.jsx | 233 | ||||
| -rw-r--r-- | web/react/components/user_settings.jsx | 17 | ||||
| -rw-r--r-- | web/react/components/user_settings_modal.jsx | 1 |
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> |