diff options
author | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:28 -0700 |
---|---|---|
committer | Corey Hulen <corey@hulen.com> | 2015-09-02 12:41:28 -0700 |
commit | f9dd82253cb64b2508d2ac21821b5108354a3fb0 (patch) | |
tree | 48cd35a5b439d46821bde5e4534d467704b1bbbe /web/react/components/user_settings_security.jsx | |
parent | 833f6b7df123f25d5aa6bee6aee0c90c82b74c38 (diff) | |
parent | b9e16f41f161c772e1701c4ac47ca5319c706912 (diff) | |
download | chat-f9dd82253cb64b2508d2ac21821b5108354a3fb0.tar.gz chat-f9dd82253cb64b2508d2ac21821b5108354a3fb0.tar.bz2 chat-f9dd82253cb64b2508d2ac21821b5108354a3fb0.zip |
Merge pull request #545 from mattermost/mm-2066
MM-2066 Refactoring for style guide
Diffstat (limited to 'web/react/components/user_settings_security.jsx')
-rw-r--r-- | web/react/components/user_settings_security.jsx | 180 |
1 files changed, 128 insertions, 52 deletions
diff --git a/web/react/components/user_settings_security.jsx b/web/react/components/user_settings_security.jsx index ae8a5f0bc..a9f62097a 100644 --- a/web/react/components/user_settings_security.jsx +++ b/web/react/components/user_settings_security.jsx @@ -3,13 +3,23 @@ var SettingItemMin = require('./setting_item_min.jsx'); var SettingItemMax = require('./setting_item_max.jsx'); -var client = require('../utils/client.jsx'); +var Client = require('../utils/client.jsx'); var AsyncClient = require('../utils/async_client.jsx'); var Constants = require('../utils/constants.jsx'); -module.exports = React.createClass({ - displayName: 'SecurityTab', - submitPassword: function(e) { +export default class SecurityTab extends React.Component { + constructor(props) { + super(props); + + this.submitPassword = this.submitPassword.bind(this); + this.updateCurrentPassword = this.updateCurrentPassword.bind(this); + this.updateNewPassword = this.updateNewPassword.bind(this); + this.updateConfirmPassword = this.updateConfirmPassword.bind(this); + this.handleClose = this.handleClose.bind(this); + + this.state = {currentPassword: '', newPassword: '', confirmPassword: ''}; + } + submitPassword(e) { e.preventDefault(); var user = this.props.user; @@ -37,13 +47,13 @@ module.exports = React.createClass({ data.current_password = currentPassword; data.new_password = newPassword; - client.updatePassword(data, - function() { + Client.updatePassword(data, + function success() { this.props.updateSection(''); AsyncClient.getMe(); this.setState({currentPassword: '', newPassword: '', confirmPassword: ''}); }.bind(this), - function(err) { + function fail(err) { var state = this.getInitialState(); if (err.message) { state.serverError = err.message; @@ -54,47 +64,49 @@ module.exports = React.createClass({ this.setState(state); }.bind(this) ); - }, - updateCurrentPassword: function(e) { + } + updateCurrentPassword(e) { this.setState({currentPassword: e.target.value}); - }, - updateNewPassword: function(e) { + } + updateNewPassword(e) { this.setState({newPassword: e.target.value}); - }, - updateConfirmPassword: function(e) { + } + updateConfirmPassword(e) { this.setState({confirmPassword: e.target.value}); - }, - handleHistoryOpen: function() { - $("#user_settings").modal('hide'); - }, - handleDevicesOpen: function() { - $("#user_settings").modal('hide'); - }, - handleClose: function() { - $(this.getDOMNode()).find('.form-control').each(function() { + } + handleHistoryOpen() { + $('#user_settings').modal('hide'); + } + handleDevicesOpen() { + $('#user_settings').modal('hide'); + } + handleClose() { + $(React.findDOMNode(this)).find('.form-control').each(function resetValue() { this.value = ''; }); this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); this.props.updateTab('general'); - }, - componentDidMount: function() { + } + componentDidMount() { $('#user_settings').on('hidden.bs.modal', this.handleClose); - }, - componentWillUnmount: function() { + } + componentWillUnmount() { $('#user_settings').off('hidden.bs.modal', this.handleClose); this.props.updateSection(''); - }, - getInitialState: function() { - return {currentPassword: '', newPassword: '', confirmPassword: ''}; - }, - render: function() { - var serverError = this.state.serverError ? this.state.serverError : null; - var passwordError = this.state.passwordError ? this.state.passwordError : null; + } + render() { + var serverError; + if (this.state.serverError) { + serverError = this.state.serverError; + } + var passwordError; + if (this.state.passwordError) { + passwordError = this.state.passwordError; + } var updateSectionStatus; var passwordSection; - var self = this; if (this.props.activeSection === 'password') { var inputs = []; var submit = null; @@ -104,7 +116,12 @@ module.exports = React.createClass({ <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}/> + <input + className='form-control' + type='password' + onChange={this.updateCurrentPassword} + value={this.state.currentPassword} + /> </div> </div> ); @@ -112,7 +129,12 @@ module.exports = React.createClass({ <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}/> + <input + className='form-control' + type='password' + onChange={this.updateNewPassword} + value={this.state.newPassword} + /> </div> </div> ); @@ -120,7 +142,12 @@ module.exports = React.createClass({ <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}/> + <input + className='form-control' + type='password' + onChange={this.updateConfirmPassword} + value={this.state.confirmPassword} + /> </div> </div> ); @@ -134,11 +161,11 @@ module.exports = React.createClass({ ); } - updateSectionStatus = function(e) { - self.props.updateSection(''); - self.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); + updateSectionStatus = function resetSection(e) { + this.props.updateSection(''); + this.setState({currentPassword: '', newPassword: '', confirmPassword: '', serverError: null, passwordError: null}); e.preventDefault(); - }; + }.bind(this); passwordSection = ( <SettingItemMax @@ -154,17 +181,27 @@ module.exports = React.createClass({ var describe; 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'; + var hour = '12'; + if (d.getHours() % 12) { + hour = String(d.getHours() % 12); + } + var min = String(d.getMinutes()); + if (d.getMinutes() < 10) { + min = '0' + d.getMinutes(); + } + var timeOfDay = ' am'; + if (d.getHours() >= 12) { + timeOfDay = ' pm'; + } + describe = 'Last updated ' + Constants.MONTHS[d.getMonth()] + ' ' + d.getDate() + ', ' + d.getFullYear() + ' at ' + hour + ':' + min + timeOfDay; } else { describe = 'Log in done through GitLab'; } - updateSectionStatus = function() { - self.props.updateSection('password'); - }; + updateSectionStatus = function updateSection() { + this.props.updateSection('password'); + }.bind(this); passwordSection = ( <SettingItemMin @@ -178,8 +215,20 @@ module.exports = React.createClass({ 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> + <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> @@ -187,11 +236,38 @@ module.exports = React.createClass({ {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> + <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='#activity-log' + href='#' + onClick={this.handleDevicesOpen} + > + <i className='fa fa-globe'></i>View and Logout of Active Sessions + </a> </div> </div> ); } -}); +} + +SecurityTab.defaultProps = { + user: {}, + activeSection: '' +}; +SecurityTab.propTypes = { + user: React.PropTypes.object, + activeSection: React.PropTypes.string, + updateSection: React.PropTypes.func, + updateTab: React.PropTypes.func +}; |