From 3e42864eebdd5ca50886895451afd7f3856770c4 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Sun, 24 Jun 2018 22:06:03 -0600 Subject: [PATCH] Enable saving changed Account Details --- public/api/User.php | 6 +- .../management/AccountManager/MyAccount.jsx | 67 +++++++++++++++++-- .../management/AccountManager/index.jsx | 24 ++++--- 3 files changed, 79 insertions(+), 18 deletions(-) diff --git a/public/api/User.php b/public/api/User.php index c14a9a2..0c1208f 100644 --- a/public/api/User.php +++ b/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); diff --git a/src/components/management/AccountManager/MyAccount.jsx b/src/components/management/AccountManager/MyAccount.jsx index 9b39576..4fca010 100644 --- a/src/components/management/AccountManager/MyAccount.jsx +++ b/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 {
{ this.setState({ email: event.target.value }) }} /> + onInput={ event => this.setState({ email: event.target.value }) } + onChange={ () => this.checkFields() } />
Note: If you change your email address, you will need to use your new email address to log in.
@@ -50,7 +93,8 @@ export class MyAccount extends Component {
{this.setState({publicName: event.target.value})}} /> + onInput={ event => this.setState({ publicName: event.target.value }) } + onChange={ () => this.checkFields() } />
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 {
{ this.setState({ allowEmails: !this.state.allowEmails }) }} /> + onChange={(event) => { + this.setState({ allowEmails: !this.state.allowEmails }, () => this.checkFields()); + }} /> @@ -79,6 +125,15 @@ export class MyAccount extends Component {
+ +
+
+ +
+
diff --git a/src/components/management/AccountManager/index.jsx b/src/components/management/AccountManager/index.jsx index 075efb7..e2bbb94 100644 --- a/src/components/management/AccountManager/index.jsx +++ b/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={ () => {} } />