summaryrefslogtreecommitdiffstats
path: root/web/react/components/user_settings_security.jsx
diff options
context:
space:
mode:
authorCorey Hulen <corey@hulen.com>2015-09-02 12:41:28 -0700
committerCorey Hulen <corey@hulen.com>2015-09-02 12:41:28 -0700
commitf9dd82253cb64b2508d2ac21821b5108354a3fb0 (patch)
tree48cd35a5b439d46821bde5e4534d467704b1bbbe /web/react/components/user_settings_security.jsx
parent833f6b7df123f25d5aa6bee6aee0c90c82b74c38 (diff)
parentb9e16f41f161c772e1701c4ac47ca5319c706912 (diff)
downloadchat-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.jsx180
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'>&times;</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'>&times;</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
+};