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:
parent
9363dc9274
commit
3e42864eeb
3 changed files with 79 additions and 18 deletions
|
@ -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);
|
||||||
|
|
|
@ -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'>
|
||||||
|
|
|
@ -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)}>
|
||||||
|
|
Loading…
Add table
Reference in a new issue