From 344ab9813907e1b3f7d9dceee84978f832813bef Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Fri, 31 Jul 2015 14:06:00 -0700
Subject: Added spinner animation to replace save button when uploading a new
 profile picture

---
 web/react/components/user_settings.jsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

(limited to 'web/react/components/user_settings.jsx')

diff --git a/web/react/components/user_settings.jsx b/web/react/components/user_settings.jsx
index c574d2365..136f81ad3 100644
--- a/web/react/components/user_settings.jsx
+++ b/web/react/components/user_settings.jsx
@@ -748,6 +748,7 @@ var GeneralTab = React.createClass({
 
         var formData = new FormData();
         formData.append('image', picture, picture.name);
+        this.setState({loadingPicture: true});
 
         client.uploadProfileImage(formData,
             function() {
@@ -779,11 +780,10 @@ var GeneralTab = React.createClass({
     },
     updatePicture: function(e) {
         if (e.target.files && e.target.files[0]) {
-            this.setState({ picture: e.target.files[0] });
+            this.setState({picture: e.target.files[0]});
 
             this.submitActive = true;
             this.setState({client_error: null});
-
         } else {
             this.setState({picture: null});
         }
@@ -810,8 +810,8 @@ 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,
-                 email: user.email, picture: null };
+        return {username: user.username, first_name: user.first_name, last_name: user.last_name, nickname: user.nickname,
+                 email: user.email, picture: null, loadingPicture: false};
     },
     render: function() {
         var user = this.props.user;
@@ -1002,6 +1002,7 @@ var GeneralTab = React.createClass({
                     picture={this.state.picture}
                     pictureChange={this.updatePicture}
                     submitActive={this.submitActive}
+                    loadingPicture={this.state.loadingPicture}
                 />
             );
         } else {
-- 
cgit v1.2.3-1-g7c22


From 3cd0c3b73b5df0d59e7c12044ddc4948a42b071c Mon Sep 17 00:00:00 2001
From: Reed Garmsen <rgarmsen2295@gmail.com>
Date: Mon, 3 Aug 2015 13:52:24 -0700
Subject: Minor cosmetic refactoring to the General Tab of user settings

---
 web/react/components/user_settings.jsx | 100 +++++++++++++++++----------------
 1 file changed, 53 insertions(+), 47 deletions(-)

(limited to 'web/react/components/user_settings.jsx')

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();
-- 
cgit v1.2.3-1-g7c22

