diff options
Diffstat (limited to 'web/react/components')
-rw-r--r-- | web/react/components/mention_list.jsx | 17 | ||||
-rw-r--r-- | web/react/components/new_channel.jsx | 2 | ||||
-rw-r--r-- | web/react/components/post_list.jsx | 4 | ||||
-rw-r--r-- | web/react/components/settings_sidebar.jsx | 3 | ||||
-rw-r--r-- | web/react/components/sidebar_header.jsx | 4 | ||||
-rw-r--r-- | web/react/components/sidebar_right_menu.jsx | 75 | ||||
-rw-r--r-- | web/react/components/textbox.jsx | 161 | ||||
-rw-r--r-- | web/react/components/user_settings.jsx | 133 |
8 files changed, 180 insertions, 219 deletions
diff --git a/web/react/components/mention_list.jsx b/web/react/components/mention_list.jsx index 5f1bb6d0e..f562cfb29 100644 --- a/web/react/components/mention_list.jsx +++ b/web/react/components/mention_list.jsx @@ -81,7 +81,7 @@ module.exports = React.createClass({ this.setState({selectedMention: 0, selectedUsername: ''}); } }, - onListenerChange: function(id, mentionText, excludeList) { + onListenerChange: function(id, mentionText) { if (id !== this.props.id) { return; } @@ -90,9 +90,6 @@ module.exports = React.createClass({ if (mentionText != null) { newState.mentionText = mentionText; } - if (excludeList != null) { - newState.excludeUsers = excludeList; - } this.setState(newState); }, @@ -149,15 +146,6 @@ module.exports = React.createClass({ scrollTop: scrollAmount }, 75); }, - alreadyMentioned: function(username) { - var excludeUsers = this.state.excludeUsers; - for (var i = 0; i < excludeUsers.length; i++) { - if (excludeUsers[i] === username) { - return true; - } - } - return false; - }, getInitialState: function() { return {excludeUsers: [], mentionText: '-1', selectedMention: 0, selectedUsername: ''}; }, @@ -201,9 +189,6 @@ module.exports = React.createClass({ var index = 0; for (var i = 0; i < users.length && index < MAX_ITEMS_IN_LIST; i++) { - if (this.alreadyMentioned(users[i].username)) { - continue; - } if ((users[i].first_name && users[i].first_name.lastIndexOf(mentionText, 0) === 0) || (users[i].last_name && users[i].last_name.lastIndexOf(mentionText, 0) === 0) || users[i].username.lastIndexOf(mentionText, 0) === 0) { diff --git a/web/react/components/new_channel.jsx b/web/react/components/new_channel.jsx index ffcbfd32d..c22147022 100644 --- a/web/react/components/new_channel.jsx +++ b/web/react/components/new_channel.jsx @@ -143,7 +143,7 @@ module.exports = React.createClass({ </div> <div className='modal-footer'> <button type='button' className='btn btn-default' data-dismiss='modal'>Cancel</button> - <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New Channel</button> + <button onClick={this.handleSubmit} type='submit' className='btn btn-primary'>Create New {channelTerm}</button> </div> </form> </div> diff --git a/web/react/components/post_list.jsx b/web/react/components/post_list.jsx index bb1b1704c..83f806b79 100644 --- a/web/react/components/post_list.jsx +++ b/web/react/components/post_list.jsx @@ -439,7 +439,7 @@ module.exports = React.createClass({ currentPostDay = utils.getDateForUnixTicks(post.create_at); if (currentPostDay.toDateString() != previousPostDay.toDateString()) { postCtls.push( - <div className="date-separator"> + <div key={currentPostDay.toDateString()} className="date-separator"> <hr className="separator__hr" /> <div className="separator__text">{currentPostDay.toDateString()}</div> </div> @@ -449,7 +449,7 @@ module.exports = React.createClass({ if (post.create_at > last_viewed && !rendered_last_viewed) { rendered_last_viewed = true; postCtls.push( - <div className="new-separator"> + <div key="unviewed" className="new-separator"> <hr id="new_message" className="separator__hr" /> <div className="separator__text">New Messages</div> </div> diff --git a/web/react/components/settings_sidebar.jsx b/web/react/components/settings_sidebar.jsx index ae8510cf2..b4d291622 100644 --- a/web/react/components/settings_sidebar.jsx +++ b/web/react/components/settings_sidebar.jsx @@ -4,6 +4,7 @@ var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ + displayName:'SettingsSidebar', updateTab: function(tab) { this.props.updateTab(tab); $('.settings-modal').addClass('display--content'); @@ -14,7 +15,7 @@ module.exports = React.createClass({ <div className=""> <ul className="nav nav-pills nav-stacked"> {this.props.tabs.map(function(tab) { - return <li className={self.props.activeTab == tab.name ? 'active' : ''}><a href="#" onClick={function(){self.updateTab(tab.name);}}><i className={tab.icon}></i>{tab.ui_name}</a></li> + return <li key={tab.name+'_li'} className={self.props.activeTab == tab.name ? 'active' : ''}><a key={tab.name + '_a'} href="#" onClick={function(){self.updateTab(tab.name);}}><i key={tab.name+'_i'} className={tab.icon}></i>{tab.ui_name}</a></li> })} </ul> </div> diff --git a/web/react/components/sidebar_header.jsx b/web/react/components/sidebar_header.jsx index ba8f9bacd..cc3f255ee 100644 --- a/web/react/components/sidebar_header.jsx +++ b/web/react/components/sidebar_header.jsx @@ -64,7 +64,7 @@ var NavbarDropdown = React.createClass({ if (this.props.teamType === 'O') { teamLink = ( <li> - <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={location.origin + '/signup_user_complete/?id=' + currentUser.team_id}>Get Team Invite Link</a> + <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={utils.getWindowLocationOrigin() + '/signup_user_complete/?id=' + currentUser.team_id}>Get Team Invite Link</a> </li> ); } @@ -87,7 +87,7 @@ var NavbarDropdown = React.createClass({ } }); } - teams.push(<li><a href={utils.getWindowLocationOrigin() + '/signup_team'}>Create a New Team</a></li>); + teams.push(<li key='newTeam_li'><a key='newTeam_a' href={utils.getWindowLocationOrigin() + '/signup_team' }>Create a New Team</a></li>); return ( <ul className='nav navbar-nav navbar-right'> diff --git a/web/react/components/sidebar_right_menu.jsx b/web/react/components/sidebar_right_menu.jsx index 15306a499..2439719a1 100644 --- a/web/react/components/sidebar_right_menu.jsx +++ b/web/react/components/sidebar_right_menu.jsx @@ -3,6 +3,7 @@ var UserStore = require('../stores/user_store.jsx'); var client = require('../utils/client.jsx'); +var utils = require('../utils/utils.jsx'); module.exports = React.createClass({ handleLogoutClick: function(e) { @@ -10,65 +11,77 @@ module.exports = React.createClass({ client.logout(); }, render: function() { - var team_link = ""; - var invite_link = ""; - var manage_link = ""; - var rename_link = ""; - var currentUser = UserStore.getCurrentUser() + var teamLink = ''; + var inviteLink = ''; + var teamSettingsLink = ''; + var manageLink = ''; + var renameLink = ''; + var currentUser = UserStore.getCurrentUser(); var isAdmin = false; if (currentUser != null) { - isAdmin = currentUser.roles.indexOf("admin") > -1; + isAdmin = currentUser.roles.indexOf('admin') > -1; - invite_link = ( + inviteLink = ( <li> - <a href="#" data-toggle="modal" data-target="#invite_member"><i className="glyphicon glyphicon-user"></i>Invite New Member</a> + <a href='#' data-toggle='modal' data-target='#invite_member'><i className='glyphicon glyphicon-user'></i>Invite New Member</a> </li> ); - if (this.props.teamType == "O") { - team_link = ( + if (this.props.teamType === 'O') { + teamLink = ( <li> - <a href="#" data-toggle="modal" data-target="#get_link" data-title="Team Invite" data-value={location.origin+"/signup_user_complete/?id="+currentUser.team_id}><i className="glyphicon glyphicon-link"></i>Get Team Invite Link</a> + <a href='#' data-toggle='modal' data-target='#get_link' data-title='Team Invite' data-value={utils.getWindowLocationOrigin()+'/signup_user_complete/?id='+currentUser.team_id}><i className='glyphicon glyphicon-link'></i>Get Team Invite Link</a> </li> ); } } if (isAdmin) { - manage_link = ( + teamSettingsLink = ( <li> - <a href="#" data-toggle="modal" data-target="#team_members"><i className="glyphicon glyphicon-wrench"></i>Manage Team</a> + <a href='#' data-toggle='modal' data-target='#team_settings'><i className='glyphicon glyphicon-globe'></i>Team Settings</a> </li> ); - rename_link = ( + manageLink = ( <li> - <a href="#" data-toggle="modal" data-target="#rename_team_link"><i className="glyphicon glyphicon-pencil"></i>Rename</a> + <a href='#' data-toggle='modal' data-target='#team_members'><i className='glyphicon glyphicon-wrench'></i>Manage Team</a> + </li> + ); + renameLink = ( + <li> + <a href='#' data-toggle='modal' data-target='#rename_team_link'><i className='glyphicon glyphicon-pencil'></i>Rename</a> </li> ); } - var siteName = config.SiteName != null ? config.SiteName : ""; - var teamDisplayName = this.props.teamDisplayName ? this.props.teamDisplayName : siteName; + var siteName = ''; + if (config.SiteName != null) { + siteName = config.SiteName; + } + var teamDisplayName = siteName; + if (this.props.teamDisplayName) { + teamDisplayName = this.props.teamDisplayName; + } return ( <div> - <div className="team__header theme"> - <a className="team__name" href="/channels/town-square">{ teamDisplayName }</a> + <div className='team__header theme'> + <a className='team__name' href='/channels/town-square'>{teamDisplayName}</a> </div> - <div className="nav-pills__container"> - <ul className="nav nav-pills nav-stacked"> - <li><a href="#" data-toggle="modal" data-target="#user_settings1"><i className="glyphicon glyphicon-cog"></i>Account Settings</a></li> - { isAdmin ? <li><a href="#" data-toggle="modal" data-target="#team_settings"><i className="glyphicon glyphicon-globe"></i>Team Settings</a></li> : "" } - { invite_link } - { team_link } - { manage_link } - { rename_link } - <li><a href="#" onClick={this.handleLogoutClick}><i className="glyphicon glyphicon-log-out"></i>Logout</a></li> - <li className="divider"></li> - <li><a target="_blank" href="/static/help/configure_links.html"><i className="glyphicon glyphicon-question-sign"></i>Help</a></li> - <li><a target="_blank" href="/static/help/configure_links.html"><i className="glyphicon glyphicon-earphone"></i>Report a Problem</a></li> + <div className='nav-pills__container'> + <ul className='nav nav-pills nav-stacked'> + <li><a href='#' data-toggle='modal' data-target='#user_settings1'><i className='glyphicon glyphicon-cog'></i>Account Settings</a></li> + {teamSettingsLink} + {inviteLink} + {teamLink} + {manageLink} + {renameLink} + <li><a href='#' onClick={this.handleLogoutClick}><i className='glyphicon glyphicon-log-out'></i>Logout</a></li> + <li className='divider'></li> + <li><a target='_blank' href='/static/help/configure_links.html'><i className='glyphicon glyphicon-question-sign'></i>Help</a></li> + <li><a target='_blank' href='/static/help/configure_links.html'><i className='glyphicon glyphicon-earphone'></i>Report a Problem</a></li> </ul> </div> </div> diff --git a/web/react/components/textbox.jsx b/web/react/components/textbox.jsx index bbd1f84b6..b5c5cc564 100644 --- a/web/react/components/textbox.jsx +++ b/web/react/components/textbox.jsx @@ -2,11 +2,7 @@ // See License.txt for license information. var AppDispatcher = require('../dispatcher/app_dispatcher.jsx'); -var UserStore = require('../stores/user_store.jsx'); var PostStore = require('../stores/post_store.jsx'); -var SocketStore = require('../stores/socket_store.jsx'); -var MsgTyping = require('./msg_typing.jsx'); -var MentionList = require('./mention_list.jsx'); var CommandList = require('./command_list.jsx'); var ErrorStore = require('../stores/error_store.jsx'); var AsyncClient = require('../utils/async_client.jsx'); @@ -19,53 +15,53 @@ function getStateFromStores() { var error = ErrorStore.getLastError(); if (error) { - return { message: error.message }; - } else { - return { message: null }; + return {message: error.message}; } + return {message: null}; } module.exports = React.createClass({ + displayName: 'Textbox', caret: -1, addedMention: false, doProcessMentions: false, mentions: [], componentDidMount: function() { - PostStore.addAddMentionListener(this._onChange); - ErrorStore.addChangeListener(this._onError); + PostStore.addAddMentionListener(this.onListenerChange); + ErrorStore.addChangeListener(this.onRecievedError); this.resize(); - this.processMentions(); + this.updateMentionTab(null); }, componentWillUnmount: function() { - PostStore.removeAddMentionListener(this._onChange); - ErrorStore.removeChangeListener(this._onError); + PostStore.removeAddMentionListener(this.onListenerChange); + ErrorStore.removeChangeListener(this.onRecievedError); }, - _onChange: function(id, username) { - if (id !== this.props.id) return; - this.addMention(username); + onListenerChange: function(id, username) { + if (id === this.props.id) { + this.addMention(username); + } }, - _onError: function() { + onRecievedError: function() { var errorState = getStateFromStores(); if (this.state.timerInterrupt != null) { window.clearInterval(this.state.timerInterrupt); - this.setState({ timerInterrupt: null }); + this.setState({timerInterrupt: null}); } - if (errorState.message === "There appears to be a problem with your internet connection") { - this.setState({ connection: "bad-connection" }); - var timerInterrupt = window.setInterval(this._onTimerInterrupt, 5000); - this.setState({ timerInterrupt: timerInterrupt }); - } - else { - this.setState({ connection: "" }); + if (errorState.message === 'There appears to be a problem with your internet connection') { + this.setState({connection: 'bad-connection'}); + var timerInterrupt = window.setInterval(this.onTimerInterrupt, 5000); + this.setState({timerInterrupt: timerInterrupt}); + } else { + this.setState({connection: ''}); } }, - _onTimerInterrupt: function() { + onTimerInterrupt: function() { //Since these should only happen when you have no connection and slightly briefly after any //performance hit should not matter - if (this.state.connection === "bad-connection") { + if (this.state.connection === 'bad-connection') { AppDispatcher.handleServerAction({ type: ActionTypes.RECIEVED_ERROR, err: null @@ -75,15 +71,15 @@ module.exports = React.createClass({ } window.clearInterval(this.state.timerInterrupt); - this.setState({ timerInterrupt: null }); + this.setState({timerInterrupt: null}); }, componentDidUpdate: function() { if (this.caret >= 0) { - utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret) + utils.setCaretPosition(this.refs.message.getDOMNode(), this.caret); this.caret = -1; } if (this.doProcessMentions) { - this.processMentions(); + this.updateMentionTab(null); this.doProcessMentions = false; } this.resize(); @@ -93,7 +89,7 @@ module.exports = React.createClass({ this.checkForNewMention(nextProps.messageText); } var text = this.refs.message.getDOMNode().value; - if (nextProps.channelId != this.props.channelId || nextProps.messageText !== text) { + if (nextProps.channelId !== this.props.channelId || nextProps.messageText !== text) { this.doProcessMentions = true; } this.addedMention = false; @@ -101,17 +97,17 @@ module.exports = React.createClass({ this.resize(); }, getInitialState: function() { - return { mentionText: '-1', mentions: [], connection: "", timerInterrupt: null }; + return {mentionText: '-1', mentions: [], connection: '', timerInterrupt: null}; }, - updateMentionTab: function(mentionText, excludeList) { + updateMentionTab: function(mentionText) { var self = this; + // using setTimeout so dispatch isn't called during an in progress dispatch setTimeout(function() { AppDispatcher.handleViewAction({ type: ActionTypes.RECIEVED_MENTION_DATA, id: self.props.id, - mention_text: mentionText, - exclude_list: excludeList + mention_text: mentionText }); }, 1); }, @@ -122,13 +118,13 @@ module.exports = React.createClass({ handleKeyPress: function(e) { var text = this.refs.message.getDOMNode().value; - if (!this.refs.commands.isEmpty() && text.indexOf("/") == 0 && e.which==13) { + if (!this.refs.commands.isEmpty() && text.indexOf('/') === 0 && e.which === 13) { this.refs.commands.addFirstCommand(); e.preventDefault(); return; } - if ( !this.doProcessMentions) { + if (!this.doProcessMentions) { var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); var preText = text.substring(0, caret); var lastSpace = preText.lastIndexOf(' '); @@ -150,13 +146,15 @@ module.exports = React.createClass({ this.handleBackspace(e); } }, - handleBackspace: function(e) { + handleBackspace: function() { var text = this.refs.message.getDOMNode().value; - if (text.indexOf("/") == 0) { - this.refs.commands.getSuggestedCommands(text.substring(0, text.length-1)); + if (text.indexOf('/') === 0) { + this.refs.commands.getSuggestedCommands(text.substring(0, text.length - 1)); } - if (this.doProcessMentions) return; + if (this.doProcessMentions) { + return; + } var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); var preText = text.substring(0, caret); @@ -167,57 +165,6 @@ module.exports = React.createClass({ this.doProcessMentions = true; } }, - processMentions: function() { - /* First, find all the possible mentions and add - them all to a list of mentions */ - var text = utils.insertHtmlEntities(this.refs.message.getDOMNode().value); - - var profileMap = UserStore.getProfilesUsernameMap(); - - var re1 = /@([a-z0-9_]+)( |$|\n)/gi; - - var matches = text.match(re1); - - if (!matches) { - this.updateMentionTab(null, []); - return; - } - - var mentions = []; - for (var i = 0; i < matches.length; i++) { - var m = matches[i].substring(1,matches[i].length).trim(); - if ((m in profileMap && mentions.indexOf(m) === -1) || Constants.SPECIAL_MENTIONS.indexOf(m) !== -1) { - mentions.push(m); - } - } - - /* Figure out what the user is currently typing. If it's a mention then we don't - want to add it to the mention list yet, so we remove it if - there is only one occurence of that mention so far. */ - var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); - - var text = this.props.messageText; - - var preText = text.substring(0, caret); - - var atIndex = preText.lastIndexOf('@'); - var spaceIndex = preText.lastIndexOf(' '); - var newLineIndex = preText.lastIndexOf('\n'); - - var typingMention = ""; - if (atIndex > spaceIndex && atIndex > newLineIndex) { - - typingMention = text.substring(atIndex+1, caret); - } - - var re2 = new RegExp('@' + typingMention + '( |$|\n)', 'g'); - - if ((text.match(re2) || []).length === 1 && mentions.indexOf(typingMention) !== -1) { - mentions.splice(mentions.indexOf(typingMention), 1); - } - - this.updateMentionTab(null, mentions); - }, checkForNewMention: function(text) { var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); @@ -227,7 +174,7 @@ module.exports = React.createClass({ // The @ character not typed, so nothing to do. if (atIndex === -1) { - this.updateMentionTab('-1', null); + this.updateMentionTab('-1'); return; } @@ -236,13 +183,13 @@ module.exports = React.createClass({ // If there is a space after the last @, nothing to do. if (lastSpace > atIndex || lastCharSpace > atIndex) { - this.updateMentionTab('-1', null); + this.updateMentionTab('-1'); return; } // Get the name typed so far. - var name = preText.substring(atIndex+1, preText.length).toLowerCase(); - this.updateMentionTab(name, null); + var name = preText.substring(atIndex + 1, preText.length).toLowerCase(); + this.updateMentionTab(name); }, addMention: function(name) { var caret = utils.getCaretPosition(this.refs.message.getDOMNode()); @@ -264,7 +211,7 @@ module.exports = React.createClass({ this.addedMention = true; this.doProcessMentions = true; - this.props.onUserInput(prefix + "@" + name + " " + suffix); + this.props.onUserInput(prefix + '@' + name + ' ' + suffix); }, addCommand: function(cmd) { var elm = this.refs.message.getDOMNode(); @@ -275,22 +222,26 @@ module.exports = React.createClass({ var e = this.refs.message.getDOMNode(); var w = this.refs.wrapper.getDOMNode(); - var lht = parseInt($(e).css('lineHeight'),10); + var lht = parseInt($(e).css('lineHeight'), 10); var lines = e.scrollHeight / lht; - var mod = lines < 2.5 || this.props.messageText === "" ? 30 : 15; + var mod = 15; + + if (lines < 2.5 || this.props.messageText === '') { + mod = 30; + } if (e.scrollHeight - mod < 167) { - $(e).css({'height':'auto','overflow-y':'hidden'}).height(e.scrollHeight - mod); - $(w).css({'height':'auto'}).height(e.scrollHeight+2); + $(e).css({height: 'auto', 'overflow-y': 'hidden'}).height(e.scrollHeight - mod); + $(w).css({height: 'auto'}).height(e.scrollHeight + 2); } else { - $(e).css({'height':'auto','overflow-y':'scroll'}).height(167); - $(w).css({'height':'auto'}).height(167); + $(e).css({height: 'auto', 'overflow-y': 'scroll'}).height(167); + $(w).css({height: 'auto'}).height(167); } }, handleFocus: function() { var elm = this.refs.message.getDOMNode(); if (elm.title === elm.value) { - elm.value = ""; + elm.value = ''; } }, handleBlur: function() { @@ -304,9 +255,9 @@ module.exports = React.createClass({ }, render: function() { return ( - <div ref="wrapper" className="textarea-wrapper"> + <div ref='wrapper' className='textarea-wrapper'> <CommandList ref='commands' addCommand={this.addCommand} channelId={this.props.channelId} /> - <textarea id={this.props.id} ref="message" className={"form-control custom-textarea " + this.state.connection} spellCheck="true" autoComplete="off" autoCorrect="off" rows="1" placeholder={this.props.createMessage} value={this.props.messageText} onInput={this.handleChange} onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} /> + <textarea id={this.props.id} ref='message' className={'form-control custom-textarea ' + this.state.connection} spellCheck='true' autoComplete='off' autoCorrect='off' rows='1' placeholder={this.props.createMessage} value={this.props.messageText} onInput={this.handleChange} onChange={this.handleChange} onKeyPress={this.handleKeyPress} onKeyDown={this.handleKeyDown} onFocus={this.handleFocus} onBlur={this.handleBlur} onPaste={this.handlePaste} /> </div> ); } diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx index e224f2a87..1a0c313d3 100644 --- a/web/react/components/user_settings.jsx +++ b/web/react/components/user_settings.jsx @@ -461,22 +461,22 @@ var SecurityTab = React.createClass({ e.preventDefault(); var user = this.props.user; - var currentPassword = this.state.current_password; - var newPassword = this.state.new_password; - var confirmPassword = this.state.confirm_password; + var currentPassword = this.state.currentPassword; + var newPassword = this.state.newPassword; + var confirmPassword = this.state.confirmPassword; if (currentPassword === '') { - this.setState({password_error: 'Please enter your current password', server_error: ''}); + this.setState({passwordError: 'Please enter your current password', serverError: ''}); return; } if (newPassword.length < 5) { - this.setState({password_error: 'New passwords must be at least 5 characters', server_error: ''}); + this.setState({passwordError: 'New passwords must be at least 5 characters', serverError: ''}); return; } if (newPassword !== confirmPassword) { - this.setState({password_error: 'The new passwords you entered do not match', server_error: ''}); + this.setState({passwordError: 'The new passwords you entered do not match', serverError: ''}); return; } @@ -486,43 +486,43 @@ var SecurityTab = React.createClass({ data.new_password = newPassword; client.updatePassword(data, - function(data) { - this.props.updateSection(""); + function() { + this.props.updateSection(''); AsyncClient.getMe(); - this.setState({current_password: '', new_password: '', confirm_password: ''}); + this.setState({currentPassword: '', newPassword: '', confirmPassword: ''}); }.bind(this), function(err) { var state = this.getInitialState(); if (err.message) { - state.server_error = err.message; + state.serverError = err.message; } else { - state.server_error = err; + state.serverError = err; } - state.password_error = ''; + state.passwordError = ''; this.setState(state); }.bind(this) ); }, updateCurrentPassword: function(e) { - this.setState({ current_password: e.target.value }); + this.setState({currentPassword: e.target.value}); }, updateNewPassword: function(e) { - this.setState({ new_password: e.target.value }); + this.setState({newPassword: e.target.value}); }, updateConfirmPassword: function(e) { - this.setState({ confirm_password: e.target.value }); + this.setState({confirmPassword: e.target.value}); }, handleHistoryOpen: function() { - $("#user_settings1").modal('hide'); + $('#user_settings1').modal('hide'); }, handleDevicesOpen: function() { - $("#user_settings1").modal('hide'); + $('#user_settings1').modal('hide'); }, handleClose: function() { - $(this.getDOMNode()).find(".form-control").each(function() { - this.value = ""; + $(this.getDOMNode()).find('.form-control').each(function() { + this.value = ''; }); - this.setState({current_password: '', new_password: '', confirm_password: '', server_error: null, password_error: null}); + this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); this.props.updateTab('general'); }, componentDidMount: function() { @@ -533,40 +533,41 @@ var SecurityTab = React.createClass({ this.props.updateSection(''); }, getInitialState: function() { - return { current_password: '', new_password: '', confirm_password: '' }; + return {currentPassword: '', newPassword: '', confirmPassword: ''}; }, render: function() { - var server_error = this.state.server_error ? this.state.server_error : null; - var password_error = this.state.password_error ? this.state.password_error : null; + var serverError = this.state.serverError ? this.state.serverError : null; + var passwordError = this.state.passwordError ? this.state.passwordError : null; + var updateSectionStatus; var passwordSection; var self = this; if (this.props.activeSection === 'password') { var inputs = []; var submit = null; - if (this.props.user.auth_service === "") { + if (this.props.user.auth_service === '') { inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">Current Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateCurrentPassword} value={this.state.current_password}/> + <div className='form-group'> + <label className='col-sm-5 control-label'>Current Password</label> + <div className='col-sm-7'> + <input className='form-control' type='password' onChange={this.updateCurrentPassword} value={this.state.currentPassword}/> </div> </div> ); inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">New Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateNewPassword} value={this.state.new_password}/> + <div className='form-group'> + <label className='col-sm-5 control-label'>New Password</label> + <div className='col-sm-7'> + <input className='form-control' type='password' onChange={this.updateNewPassword} value={this.state.newPassword}/> </div> </div> ); inputs.push( - <div className="form-group"> - <label className="col-sm-5 control-label">Retype New Password</label> - <div className="col-sm-7"> - <input className="form-control" type="password" onChange={this.updateConfirmPassword} value={this.state.confirm_password}/> + <div className='form-group'> + <label className='col-sm-5 control-label'>Retype New Password</label> + <div className='col-sm-7'> + <input className='form-control' type='password' onChange={this.updateConfirmPassword} value={this.state.confirmPassword}/> </div> </div> ); @@ -574,58 +575,68 @@ var SecurityTab = React.createClass({ submit = this.submitPassword; } else { inputs.push( - <div className="form-group"> - <label className="col-sm-12">Log in occurs through GitLab. Please see your GitLab account settings page to update your password.</label> + <div className='form-group'> + <label className='col-sm-12'>Log in occurs through GitLab. Please see your GitLab account settings page to update your password.</label> </div> ); } + updateSectionStatus = function(e) { + self.props.updateSection(''); + self.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); + e.preventDefault(); + }; + passwordSection = ( <SettingItemMax - title="Password" + title='Password' inputs={inputs} submit={submit} - server_error={server_error} - client_error={password_error} - updateSection={function(e){self.props.updateSection("");e.preventDefault();}} + server_error={serverError} + client_error={passwordError} + updateSection={updateSectionStatus} /> ); } else { var describe; - if (this.props.user.auth_service === "") { + if (this.props.user.auth_service === '') { var d = new Date(this.props.user.last_password_update); - var hour = d.getHours() % 12 ? String(d.getHours() % 12) : "12"; - var min = d.getMinutes() < 10 ? "0" + d.getMinutes() : String(d.getMinutes()); - var timeOfDay = d.getHours() >= 12 ? " pm" : " am"; - describe = "Last updated " + Constants.MONTHS[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + hour + ":" + min + timeOfDay; + var hour = d.getHours() % 12 ? String(d.getHours() % 12) : '12'; + var min = d.getMinutes() < 10 ? '0' + d.getMinutes() : String(d.getMinutes()); + var timeOfDay = d.getHours() >= 12 ? ' pm' : ' am'; + describe = 'Last updated ' + Constants.MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + hour + ':' + min + timeOfDay; } else { - describe = "Log in done through GitLab" + describe = 'Log in done through GitLab'; } + updateSectionStatus = function() { + self.props.updateSection('password'); + }; + passwordSection = ( <SettingItemMin - title="Password" + title='Password' describe={describe} - updateSection={function(){self.props.updateSection("password");}} + updateSection={updateSectionStatus} /> ); } return ( <div> - <div className="modal-header"> - <button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> - <h4 className="modal-title" ref="title"><i className="modal-back"></i>Security Settings</h4> + <div className='modal-header'> + <button type='button' className='close' data-dismiss='modal' aria-label='Close'><span aria-hidden='true'>×</span></button> + <h4 className='modal-title' ref='title'><i className='modal-back'></i>Security Settings</h4> </div> - <div className="user-settings"> - <h3 className="tab-header">Security Settings</h3> - <div className="divider-dark first"/> - { passwordSection } - <div className="divider-dark"/> + <div className='user-settings'> + <h3 className='tab-header'>Security Settings</h3> + <div className='divider-dark first'/> + {passwordSection} + <div className='divider-dark'/> <br></br> - <a data-toggle="modal" className="security-links theme" data-target="#access-history" href="#" onClick={this.handleHistoryOpen}><i className="fa fa-clock-o"></i>View Access History</a> - <b> </b> - <a data-toggle="modal" className="security-links theme" data-target="#activity-log" href="#" onClick={this.handleDevicesOpen}><i className="fa fa-globe"></i>View and Logout of Active Sessions</a> + <a data-toggle='modal' className='security-links theme' data-target='#access-history' href='#' onClick={this.handleHistoryOpen}><i className='fa fa-clock-o'></i>View Access History</a> + <b> </b> + <a data-toggle='modal' className='security-links theme' data-target='#activity-log' href='#' onClick={this.handleDevicesOpen}><i className='fa fa-globe'></i>View and Logout of Active Sessions</a> </div> </div> ); |