Enable saving changed Account Details

public/api/User.php

@@ -81,12 +81,12 @@ VALUES (?, ?, ?, ?, ?, ?)';
   public function setUserData ($token, $user_data) {
     $token_data = $this->token->decode($token);
     if ($token_data !== false) {
-      $query = 'UPDATE users SET email=?, public_name=?, username=?, allow_email=? WHERE id=?';
+      $user_id = $token_data->id;
+      $query = 'UPDATE users SET email=?, public_name=?, allow_email=? WHERE id=?';
       $properties = array(
         $user_data['email'],
         $user_data['publicName'],
-        $user_data['username'],
-        $user_data['allowEmail'],
+        $user_data['allowEmails'],
         $user_id,
       );
       $update_success = $this->db->execute($query, $properties);

src/components/management/AccountManager/MyAccount.jsx

@@ -2,27 +2,69 @@ import Inferno from 'inferno';
 import { Component } from 'inferno';
 import PropTypes from 'prop-types';
 
+import { request } from '../../../Helpers';
+
 export class MyAccount extends Component {
   constructor(props) {
     super(props);
 
     PropTypes.checkPropTypes({
       email: PropTypes.string.isRequired,
-      // username: PropTypes.string.isRequired,
       publicName: PropTypes.string.isRequired,
       allowEmails: PropTypes.bool.isRequired,
       userDictionaries: PropTypes.array.isRequired,
-      updateUserData: PropTypes.func,
+      sendUserData: PropTypes.func,
       changeDictionary: PropTypes.func,
     }, props, 'prop', 'MyAccount');
 
     this.state = {
       email: this.props.email,
-      username: this.props.username,
+      emailError: '',
       publicName: this.props.publicName,
       allowEmails: this.props.allowEmails,
       userDictionaries: this.props.userDictionaries,
+      hasChanged: false,
+      canSend: false,
     };
+    
+    this.originalState = Object.assign({}, this.state);
+  }
+
+  get hasChanged () {
+    for (const property in this.state) {
+      if (['email', 'publicName', 'allowEmails'].includes(property)) {
+        if (this.state[property] !== this.originalState[property]) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+
+  checkFields () {
+    const emailError = /^.+@.+$/.test(this.state.email) ? '' : 'This doesn\'t look like an email address. Please make sure it\'s correct.';
+    this.setState({
+      emailError,
+      hasChanged: this.hasChanged,
+      canSend: emailError === '' && this.hasChanged,
+    });
+  }
+
+  saveChanges () {
+    if (this.state.canSend) {
+      this.props.sendUserData({
+        email: this.state.email,
+        publicName: this.state.publicName,
+        allowEmails: this.state.allowEmails,
+      }, () => {
+        this.setState({
+          hasChanged: false,
+          canSend: false,
+        }, () => {
+          this.originalState = Object.assign({}, this.state);
+        });
+      });
+    }
   }
   
   render() {
@@ -38,7 +80,8 @@ export class MyAccount extends Component {
               </label>
               <div className='control'>
                 <input className='input' type='text' value={this.state.email}
-                  onInput={(event) => { this.setState({ email: event.target.value }) }} />
+                  onInput={ event => this.setState({ email: event.target.value }) }
+                  onChange={ () => this.checkFields() } />
                 <div className='help'>
                   <strong>Note:</strong> If you change your email address, you will need to use your new email address to log in.
                 </div>
@@ -50,7 +93,8 @@ export class MyAccount extends Component {
               </label>
               <div className='control'>
                 <input className='input' type='text' value={this.state.publicName}
-                  onInput={(event) => {this.setState({publicName: event.target.value})}} />
+                  onInput={ event => this.setState({ publicName: event.target.value }) }
+                  onChange={ () => this.checkFields() } />
                 <div className='help'>
                   This is the name we greet you with. It's also the name displayed if you ever decide to share 
                   any of your dictionaries.
@@ -65,7 +109,9 @@ export class MyAccount extends Component {
               <div className='control'>
                 <input className='is-checkradio is-rtl' type='checkbox' id='allowEmails'
                   checked={this.state.allowEmails ? 'checked' : false}
-                  onChange={(event) => { this.setState({ allowEmails: !this.state.allowEmails }) }} />
+                  onChange={(event) => {
+                    this.setState({ allowEmails: !this.state.allowEmails }, () => this.checkFields());
+                  }} />
                 <label className='label is-unselectable' htmlFor='allowEmails'>
                   Allow Emails
                 </label>
@@ -79,6 +125,15 @@ export class MyAccount extends Component {
                 </div>
               </div>
             </div>
+
+            <div className='field'>
+              <div className='control'>
+                <button className='button' Disabled={ !this.state.canSend ? 'disabled' : null }
+                  onClick={ () => this.saveChanges() }>
+                  Save Changes
+                </button>
+              </div>
+            </div>
           </div>
           
           <div className='column'>

src/components/management/AccountManager/index.jsx

@@ -25,7 +25,6 @@ export class AccountManager extends Component {
       isLoggedIn: false,
       userData: {
         email: userData && userData.hasOwnProperty('email') ? userData.email : DEFAULT_USER_DATA.email,
-        username: userData && userData.hasOwnProperty('username') ? userData.username : DEFAULT_USER_DATA.username,
         publicName: userData && userData.hasOwnProperty('publicName') ? userData.publicName : DEFAULT_USER_DATA.publicName,
         allowEmails: userData && userData.hasOwnProperty('allowEmails') ? userData.allowEmails : DEFAULT_USER_DATA.allowEmails,
       },
@@ -57,24 +56,30 @@ export class AccountManager extends Component {
     }, this.handleResponse.bind(this));
   }
 
+  updateUserData (token, userData, callback = () => {}) {
+    store.set('LexicongaToken', token);
+    store.set('LexicongaUserData', userData);
+    this.setState({
+      isLoggedIn: true,
+      userData,
+    }, () => {
+      callback();
+    });
+  }
+
   handleResponse (response) {
     const { data, error } = response;
     if (error) {
       console.error(data);
     } else {
-      store.set('LexicongaToken', data.token);
-      store.set('LexicongaUserData', data.user);
-      this.setState({
-        isLoggedIn: true,
-        userData: data.user,
-      }, () => {
+      this.updateUserData(data.token, data.user, () => {
         this.getDictionaryNames();
         this.props.updater.sync();
       });
     }
   }
 
-  updateUserData (newUserData) {
+  sendUserData (newUserData, callback = () => {}) {
     const token = store.get('LexicongaToken');
 
     if (token) {
@@ -86,6 +91,7 @@ export class AccountManager extends Component {
             console.error(data);
           } else {
             console.log(data);
+            this.updateUserData(data.token, data.userData, callback);
           }
         })
       });
@@ -122,7 +128,7 @@ export class AccountManager extends Component {
               publicName={ userData.publicName }
               allowEmails={ userData.allowEmails }
               userDictionaries={ this.state.userDictionaries }
-              updateUserData={ this.updateUserData.bind(this) }
+              sendUserData={ this.sendUserData.bind(this) }
               changeDictionary={ () => {} } />
           </Modal>
           <a className='button' onClick={this.logOut.bind(this)}>