208 lines
8.1 KiB
JavaScript
208 lines
8.1 KiB
JavaScript
import Inferno from 'inferno';
|
||
import { Component } from 'inferno';
|
||
import PropTypes from 'prop-types';
|
||
|
||
export class MyAccount extends Component {
|
||
constructor(props) {
|
||
super(props);
|
||
|
||
PropTypes.checkPropTypes({
|
||
email: PropTypes.string.isRequired,
|
||
publicName: PropTypes.string.isRequired,
|
||
allowEmails: PropTypes.bool.isRequired,
|
||
userDictionaries: PropTypes.array.isRequired,
|
||
dictionary: PropTypes.object,
|
||
sendUserData: PropTypes.func,
|
||
changeDictionary: PropTypes.func,
|
||
}, props, 'prop', 'MyAccount');
|
||
|
||
this.state = {
|
||
email: this.props.email,
|
||
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() {
|
||
return (
|
||
<div className='columns has-text-left'>
|
||
|
||
<div className='column'>
|
||
<h2 className='title'>Account Details</h2>
|
||
<div className='field'>
|
||
<label className='label'>
|
||
<span>Email:</span>
|
||
</label>
|
||
<div className='control'>
|
||
<input className='input' type='text' value={this.state.email}
|
||
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>
|
||
</div>
|
||
</div>
|
||
<div className='field'>
|
||
<label className='label'>
|
||
<span>Public Name:</span>
|
||
</label>
|
||
<div className='control'>
|
||
<input className='input' type='text' value={this.state.publicName}
|
||
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.
|
||
</div>
|
||
<div className='help'>
|
||
<strong>Note:</strong> This is <em>not a username</em>, and is therefore not guaranteed to be unique.
|
||
Use something people will recognize you as to differentiate from other people who might use the same name!
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className='field'>
|
||
<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 }, () => this.checkFields());
|
||
}} />
|
||
<label className='label is-unselectable' htmlFor='allowEmails'>
|
||
Allow Emails
|
||
</label>
|
||
<div className='help'>
|
||
We'll make sure that you're the first to hear about any new features that get added or if any of our policies
|
||
change for any reason. We'll never spam you or sell your information, but you may need to mark emails from
|
||
lexicon.ga as not spam to receive them.
|
||
</div>
|
||
<div className='help'>
|
||
<strong>Note:</strong> Password reset emails will be sent regardless of your choice here.
|
||
</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'>
|
||
<h2 className='title'>Account Actions</h2>
|
||
|
||
<div className='field'>
|
||
<div className='control'>
|
||
<button class="button" onClick={ () => this.props.dictionary.createNew() }>
|
||
Create New Dictionary
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='field'>
|
||
<label className='label is-unselectable'>
|
||
<span>Change Dictionary</span>
|
||
</label>
|
||
<div className='control'>
|
||
<div className='select'>
|
||
<select value={ this.props.dictionary.id }>
|
||
{this.props.userDictionaries.map(item => {
|
||
return <option value={item.id}>{item.name}{item.id === this.props.dictionary.id && ' (Current)'}</option>;
|
||
})}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='field'>
|
||
<label className='label is-unselectable'>
|
||
<span>Reset Your Password</span>
|
||
</label>
|
||
<div className='help'>
|
||
Click the button below to reload the page and show the Reset Password form. Filling out this
|
||
form will instantly change your password, and you will need to log in using the new password
|
||
from that point forward.
|
||
</div>
|
||
<div className='control'>
|
||
<a className='button'>Reset Password</a>
|
||
</div>
|
||
</div>
|
||
|
||
<div className='content is-small'>
|
||
<h4><strong>Request Your Data</strong></h4>
|
||
<p>
|
||
Per your <a href='https://www.eugdpr.org/' target='_blank'>GDPR</a> rights in Articles 13–15 and 20,
|
||
we allow you to request any and all data we have stored about you. The only data we have about
|
||
you personally is your email address and your Public Name, if you decided to set one. All other
|
||
data (your Dictionary data) is visible and accessible via the Export button under your Dictionary's
|
||
Settings. Send an email to help@lexicon.ga to request your information.
|
||
</p>
|
||
</div>
|
||
|
||
<div className='content is-small'>
|
||
<h4><strong>Delete Your Account</strong></h4>
|
||
<p>
|
||
Per your <a href='https://www.eugdpr.org/' target='_blank'>GDPR</a> rights in Article 17, if you wish
|
||
for your account to be deleted, please contact us at help@lexicon.ga, and we will delete your account
|
||
and all associated dictionaries and words as quickly as possible. Note that you can delete dictionaries
|
||
yourself via your Dictionary's Settings.
|
||
</p>
|
||
<p>
|
||
Anything that is deleted from our system is permanently and irretrievably removed from our system and
|
||
cannot be restored, though search engines or internet archives may retain a cached version of your content
|
||
(there is nothing we can do about this, and you will need to seek out removal of that information by directly
|
||
contacting the services that are caching your data).
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
);
|
||
}
|
||
} |