1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-07-01 13:14:17 +02:00

Enable saving changed Account Details

This commit is contained in:
Robbie Antenesse 2018-06-24 22:06:03 -06:00
parent 9363dc9274
commit 3e42864eeb
3 changed files with 79 additions and 18 deletions

View file

@ -81,12 +81,12 @@ VALUES (?, ?, ?, ?, ?, ?)';
public function setUserData ($token, $user_data) { public function setUserData ($token, $user_data) {
$token_data = $this->token->decode($token); $token_data = $this->token->decode($token);
if ($token_data !== false) { 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( $properties = array(
$user_data['email'], $user_data['email'],
$user_data['publicName'], $user_data['publicName'],
$user_data['username'], $user_data['allowEmails'],
$user_data['allowEmail'],
$user_id, $user_id,
); );
$update_success = $this->db->execute($query, $properties); $update_success = $this->db->execute($query, $properties);

View file

@ -2,27 +2,69 @@ import Inferno from 'inferno';
import { Component } from 'inferno'; import { Component } from 'inferno';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { request } from '../../../Helpers';
export class MyAccount extends Component { export class MyAccount extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
email: PropTypes.string.isRequired, email: PropTypes.string.isRequired,
// username: PropTypes.string.isRequired,
publicName: PropTypes.string.isRequired, publicName: PropTypes.string.isRequired,
allowEmails: PropTypes.bool.isRequired, allowEmails: PropTypes.bool.isRequired,
userDictionaries: PropTypes.array.isRequired, userDictionaries: PropTypes.array.isRequired,
updateUserData: PropTypes.func, sendUserData: PropTypes.func,
changeDictionary: PropTypes.func, changeDictionary: PropTypes.func,
}, props, 'prop', 'MyAccount'); }, props, 'prop', 'MyAccount');
this.state = { this.state = {
email: this.props.email, email: this.props.email,
username: this.props.username, emailError: '',
publicName: this.props.publicName, publicName: this.props.publicName,
allowEmails: this.props.allowEmails, allowEmails: this.props.allowEmails,
userDictionaries: this.props.userDictionaries, 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() { render() {
@ -38,7 +80,8 @@ export class MyAccount extends Component {
</label> </label>
<div className='control'> <div className='control'>
<input className='input' type='text' value={this.state.email} <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'> <div className='help'>
<strong>Note:</strong> If you change your email address, you will need to use your new email address to log in. <strong>Note:</strong> If you change your email address, you will need to use your new email address to log in.
</div> </div>
@ -50,7 +93,8 @@ export class MyAccount extends Component {
</label> </label>
<div className='control'> <div className='control'>
<input className='input' type='text' value={this.state.publicName} <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'> <div className='help'>
This is the name we greet you with. It's also the name displayed if you ever decide to share This is the name we greet you with. It's also the name displayed if you ever decide to share
any of your dictionaries. any of your dictionaries.
@ -65,7 +109,9 @@ export class MyAccount extends Component {
<div className='control'> <div className='control'>
<input className='is-checkradio is-rtl' type='checkbox' id='allowEmails' <input className='is-checkradio is-rtl' type='checkbox' id='allowEmails'
checked={this.state.allowEmails ? 'checked' : false} 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'> <label className='label is-unselectable' htmlFor='allowEmails'>
Allow Emails Allow Emails
</label> </label>
@ -79,6 +125,15 @@ export class MyAccount extends Component {
</div> </div>
</div> </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>
<div className='column'> <div className='column'>

View file

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