Merge pull request #545 from mattermost/mm-2066

MM-2066 Refactoring for style guide

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
+};