Minor cosmetic refactoring to the General Tab of user settings

2 files changed, 77 insertions, 57 deletions

diff --git a/web/react/components/setting_picture.jsx b/web/react/components/setting_picture.jsx
index 136421fa7..e97b67706 100644
--- a/web/react/components/setting_picture.jsx
+++ b/web/react/components/setting_picture.jsx
@@ -20,8 +20,14 @@ module.exports = React.createClass({
         }
     },
     render: function() {
-        var client_error = this.props.client_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.client_error }</label></div> : null;
-        var server_error = this.props.server_error ? <div className='form-group has-error'><label className='control-label'>{ this.props.server_error }</label></div> : null;
+        var clientError = null;
+        if (this.props.client_error) {
+            clientError = <div className='form-group has-error'><label className='control-label'>{this.props.client_error}</label></div>;
+        }
+        var serverError = null;
+        if (this.props.server_error) {
+            serverError = <div className='form-group has-error'><label className='control-label'>{this.props.server_error}</label></div>;
+        }
 
         var img = null;
         if (this.props.picture) {
@@ -30,8 +36,20 @@ module.exports = React.createClass({
             img = (<img ref='image' className='profile-img' src={this.props.src}/>);
         }
 
-        var self = this;
+        var confirmButton;
+        if (this.props.loadingPicture) {
+            confirmButton = <img className='spinner' src='/static/images/load.gif'/>;
+        } else {
+            var confirmButtonClass = 'btn btn-sm';
+            if (this.props.submitActive) {
+                confirmButtonClass += ' btn-primary';
+            } else {
+                confirmButtonClass += ' btn-inactive disabled';
+            }
+            confirmButton = <a className={confirmButtonClass} onClick={this.props.submit}>Save</a>;
+        }
 
+        var self = this;
         return (
             <ul className='section-max'>
                 <li className='col-xs-12 section-title'>{this.props.title}</li>
@@ -41,14 +59,10 @@ module.exports = React.createClass({
                             {img}
                         </li>
                         <li className='setting-list-item'>
-                            {server_error}
-                            {client_error}
+                            {serverError}
+                            {clientError}
                             <span className='btn btn-sm btn-primary btn-file sel-btn'>Select<input ref='input' accept='.jpg,.png,.bmp' type='file' onChange={this.props.pictureChange}/></span>
-                            {!this.props.loadingPicture ?
-                            <a className={this.props.submitActive ? 'btn btn-sm btn-primary' : 'btn btn-sm btn-inactive disabled'} onClick={this.props.submit}>Save</a>
-                            :
-                            <img className="spinner" src="/static/images/load.gif"/>
-                            }
+                            {confirmButton}
                             <a className='btn btn-sm theme' href='#' onClick={self.props.updateSection}>Cancel</a>
                         </li>
                     </ul>
diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index 136f81ad3..e224f2a87 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -5,8 +5,6 @@ var UserStore = require('../stores/user_store.jsx');
 var SettingItemMin = require('./setting_item_min.jsx');
 var SettingItemMax = require('./setting_item_max.jsx');
 var SettingPicture = require('./setting_picture.jsx');
-var AccessHistoryModal = require('./access_history_modal.jsx');
-var ActivityLogModal = require('./activity_log_modal.jsx');
 var client = require('../utils/client.jsx');
 var AsyncClient = require('../utils/async_client.jsx');
 var utils = require('../utils/utils.jsx');
@@ -642,17 +640,17 @@ var GeneralTab = React.createClass({
         var user = this.props.user;
         var username = this.state.username.trim();
 
-        var username_error = utils.isValidUsername(username);
-        if (username_error === 'Cannot use a reserved word as a username.') {
-            this.setState({client_error: 'This username is reserved, please choose a new one.' });
+        var usernameError = utils.isValidUsername(username);
+        if (usernameError === 'Cannot use a reserved word as a username.') {
+            this.setState({clientError: 'This username is reserved, please choose a new one.'});
             return;
-        } else if (username_error) {
-            this.setState({client_error: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'." });
+        } else if (usernameError) {
+            this.setState({clientError: "Username must begin with a letter, and contain between 3 to 15 lowercase characters made up of numbers, letters, and the symbols '.', '-' and '_'."});
             return;
         }
 
         if (user.username === username) {
-            this.setState({client_error: 'You must submit a new username'});
+            this.setState({clientError: 'You must submit a new username'});
             return;
         }
 
@@ -667,7 +665,7 @@ var GeneralTab = React.createClass({
         var nickname = this.state.nickname.trim();
 
         if (user.nickname === nickname) {
-            this.setState({client_error: 'You must submit a new nickname'})
+            this.setState({clientError: 'You must submit a new nickname'});
             return;
         }
 
@@ -679,11 +677,11 @@ var GeneralTab = React.createClass({
         e.preventDefault();
 
         var user = UserStore.getCurrentUser();
-        var firstName = this.state.first_name.trim();
-        var lastName = this.state.last_name.trim();
+        var firstName = this.state.firstName.trim();
+        var lastName = this.state.lastName.trim();
 
         if (user.first_name === firstName && user.last_name === lastName) {
-            this.setState({client_error: 'You must submit a new first or last name'})
+            this.setState({clientError: 'You must submit a new first or last name'});
             return;
         }
 
@@ -703,7 +701,7 @@ var GeneralTab = React.createClass({
         }
 
         if (email === '' || !utils.isEmail(email)) {
-            this.setState({ email_error: 'Please enter a valid email address' });
+            this.setState({emailError: 'Please enter a valid email address'});
             return;
         }
 
@@ -718,11 +716,11 @@ var GeneralTab = React.createClass({
                 AsyncClient.getMe();
             }.bind(this),
             function(err) {
-                state = this.getInitialState();
+                var state = this.getInitialState();
                 if (err.message) {
-                    state.server_error = err.message;
+                    state.serverError = err.message;
                 } else {
-                    state.server_error = err;
+                    state.serverError = err;
                 }
                 this.setState(state);
             }.bind(this)
@@ -742,7 +740,7 @@ var GeneralTab = React.createClass({
         var picture = this.state.picture;
 
         if (picture.type !== 'image/jpeg' && picture.type !== 'image/png') {
-            this.setState({client_error: 'Only JPG or PNG images may be used for profile pictures'});
+            this.setState({clientError: 'Only JPG or PNG images may be used for profile pictures'});
             return;
         }
 
@@ -757,8 +755,8 @@ var GeneralTab = React.createClass({
                 window.location.reload();
             }.bind(this),
             function(err) {
-                state = this.getInitialState();
-                state.server_error = err;
+                var state = this.getInitialState();
+                state.serverError = err;
                 this.setState(state);
             }.bind(this)
         );
@@ -767,10 +765,10 @@ var GeneralTab = React.createClass({
         this.setState({username: e.target.value});
     },
     updateFirstName: function(e) {
-        this.setState({first_name: e.target.value});
+        this.setState({firstName: e.target.value});
     },
     updateLastName: function(e) {
-        this.setState({last_name: e.target.value});
+        this.setState({lastName: e.target.value});
     },
     updateNickname: function(e) {
         this.setState({nickname: e.target.value});
@@ -783,13 +781,13 @@ var GeneralTab = React.createClass({
             this.setState({picture: e.target.files[0]});
 
             this.submitActive = true;
-            this.setState({client_error: null});
+            this.setState({clientError: null});
         } else {
             this.setState({picture: null});
         }
     },
     updateSection: function(section) {
-        this.setState({client_error:''});
+        this.setState({clientError: ''});
         this.submitActive = false;
         this.props.updateSection(section);
     },
@@ -798,7 +796,7 @@ var GeneralTab = React.createClass({
             this.value = '';
         });
 
-        this.setState(assign({}, this.getInitialState(), {client_error: null, server_error: null, email_error: null}));
+        this.setState(assign({}, this.getInitialState(), {clientError: null, serverError: null, emailError: null}));
         this.props.updateSection('');
     },
     componentDidMount: function() {
@@ -810,15 +808,24 @@ var GeneralTab = React.createClass({
     getInitialState: function() {
         var user = this.props.user;
 
-        return {username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
+        return {username: user.username, firstName: user.first_name, lastName: user.last_name, nickname: user.nickname,
                  email: user.email, picture: null, loadingPicture: false};
     },
     render: function() {
         var user = this.props.user;
 
-        var client_error = this.state.client_error ? this.state.client_error : null;
-        var server_error = this.state.server_error ? this.state.server_error : null;
-        var email_error = this.state.email_error ? this.state.email_error : null;
+        var clientError = null;
+        if (this.state.clientError) {
+            clientError = this.state.clientError;
+        }
+        var serverError = null;
+        if (this.state.serverError) {
+            serverError = this.state.serverError;
+        }
+        var emailError = null;
+        if (this.state.emailError) {
+            emailError = this.state.emailError;
+        }
 
         var nameSection;
         var self = this;
@@ -829,7 +836,7 @@ var GeneralTab = React.createClass({
                 <div className='form-group'>
                     <label className='col-sm-5 control-label'>First Name</label>
                     <div className='col-sm-7'>
-                        <input className='form-control' type='text' onChange={this.updateFirstName} value={this.state.first_name}/>
+                        <input className='form-control' type='text' onChange={this.updateFirstName} value={this.state.firstName}/>
                     </div>
                 </div>
             );
@@ -838,7 +845,7 @@ var GeneralTab = React.createClass({
                 <div className='form-group'>
                     <label className='col-sm-5 control-label'>Last Name</label>
                     <div className='col-sm-7'>
-                        <input className='form-control' type='text' onChange={this.updateLastName} value={this.state.last_name}/>
+                        <input className='form-control' type='text' onChange={this.updateLastName} value={this.state.lastName}/>
                     </div>
                 </div>
             );
@@ -848,8 +855,8 @@ var GeneralTab = React.createClass({
                     title='Full Name'
                     inputs={inputs}
                     submit={this.submitName}
-                    server_error={server_error}
-                    client_error={client_error}
+                    server_error={serverError}
+                    client_error={clientError}
                     updateSection={function(e) {
                         self.updateSection('');
                         e.preventDefault();
@@ -857,20 +864,20 @@ var GeneralTab = React.createClass({
                 />
             );
         } else {
-            var full_name = '';
+            var fullName = '';
 
             if (user.first_name && user.last_name) {
-                full_name = user.first_name + ' ' + user.last_name;
+                fullName = user.first_name + ' ' + user.last_name;
             } else if (user.first_name) {
-                full_name = user.first_name;
+                fullName = user.first_name;
             } else if (user.last_name) {
-                full_name = user.last_name;
+                fullName = user.last_name;
             }
 
             nameSection = (
                 <SettingItemMin
                     title='Full Name'
-                    describe={full_name}
+                    describe={fullName}
                     updateSection={function() {
                         self.updateSection('name');
                     }}
@@ -880,7 +887,6 @@ var GeneralTab = React.createClass({
 
         var nicknameSection;
         if (this.props.activeSection === 'nickname') {
-
             inputs.push(
                 <div className='form-group'>
                     <label className='col-sm-5 control-label'>{utils.isMobile() ? '' : 'Nickname'}</label>
@@ -895,8 +901,8 @@ var GeneralTab = React.createClass({
                     title='Nickname'
                     inputs={inputs}
                     submit={this.submitNickname}
-                    server_error={server_error}
-                    client_error={client_error}
+                    server_error={serverError}
+                    client_error={clientError}
                     updateSection={function(e) {
                         self.updateSection('');
                         e.preventDefault();
@@ -919,7 +925,7 @@ var GeneralTab = React.createClass({
         if (this.props.activeSection === 'username') {
             inputs.push(
                 <div className='form-group'>
-                    <label className='col-sm-5 control-label'>{utils.isMobile() ? '': 'Username'}</label>
+                    <label className='col-sm-5 control-label'>{utils.isMobile() ? '' : 'Username'}</label>
                     <div className='col-sm-7'>
                         <input className='form-control' type='text' onChange={this.updateUsername} value={this.state.username}/>
                     </div>
@@ -931,8 +937,8 @@ var GeneralTab = React.createClass({
                     title='Username'
                     inputs={inputs}
                     submit={this.submitUsername}
-                    server_error={server_error}
-                    client_error={client_error}
+                    server_error={serverError}
+                    client_error={clientError}
                     updateSection={function(e) {
                         self.updateSection('');
                         e.preventDefault();
@@ -966,8 +972,8 @@ var GeneralTab = React.createClass({
                     title='Email'
                     inputs={inputs}
                     submit={this.submitEmail}
-                    server_error={server_error}
-                    client_error={email_error}
+                    server_error={serverError}
+                    client_error={emailError}
                     updateSection={function(e) {
                         self.updateSection('');
                         e.preventDefault();
@@ -993,8 +999,8 @@ var GeneralTab = React.createClass({
                     title='Profile Picture'
                     submit={this.submitPicture}
                     src={'/api/v1/users/' + user.id + '/image?time=' + user.last_picture_update}
-                    server_error={server_error}
-                    client_error={client_error}
+                    server_error={serverError}
+                    client_error={clientError}
                     updateSection={function(e) {
                         self.updateSection('');
                         e.preventDefault();