2018-03-10 00:31:27 +01:00
|
|
|
|
import Inferno from 'inferno';
|
|
|
|
|
import { Component } from 'inferno';
|
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
|
|
2018-03-10 18:42:12 +01:00
|
|
|
|
export class MyAccount extends Component {
|
2018-03-10 00:31:27 +01:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
|
|
|
|
PropTypes.checkPropTypes({
|
|
|
|
|
email: PropTypes.string.isRequired,
|
|
|
|
|
publicName: PropTypes.string.isRequired,
|
|
|
|
|
allowEmails: PropTypes.bool.isRequired,
|
|
|
|
|
userDictionaries: PropTypes.array.isRequired,
|
2018-07-02 00:08:01 +02:00
|
|
|
|
dictionary: PropTypes.object,
|
2018-06-25 06:06:03 +02:00
|
|
|
|
sendUserData: PropTypes.func,
|
2018-03-10 00:31:27 +01:00
|
|
|
|
changeDictionary: PropTypes.func,
|
2018-06-23 21:30:04 +02:00
|
|
|
|
}, props, 'prop', 'MyAccount');
|
2018-03-10 00:31:27 +01:00
|
|
|
|
|
|
|
|
|
this.state = {
|
|
|
|
|
email: this.props.email,
|
2018-06-25 06:06:03 +02:00
|
|
|
|
emailError: '',
|
2018-03-10 00:31:27 +01:00
|
|
|
|
publicName: this.props.publicName,
|
|
|
|
|
allowEmails: this.props.allowEmails,
|
|
|
|
|
userDictionaries: this.props.userDictionaries,
|
2018-06-25 06:06:03 +02:00
|
|
|
|
hasChanged: false,
|
|
|
|
|
canSend: false,
|
2018-03-10 00:31:27 +01:00
|
|
|
|
};
|
2018-06-25 06:06:03 +02:00
|
|
|
|
|
|
|
|
|
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);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
2018-03-10 00:31:27 +01:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render() {
|
|
|
|
|
return (
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<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.
|
2018-06-23 21:30:04 +02:00
|
|
|
|
</div>
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
</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.
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<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!
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
</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.
|
2018-06-25 06:06:03 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-23 21:30:04 +02:00
|
|
|
|
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<div className='field'>
|
|
|
|
|
<div className='control'>
|
|
|
|
|
<button className='button' Disabled={ !this.state.canSend ? 'disabled' : null }
|
|
|
|
|
onClick={ () => this.saveChanges() }>
|
|
|
|
|
Save Changes
|
|
|
|
|
</button>
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
<div className='column'>
|
|
|
|
|
<h2 className='title'>Account Actions</h2>
|
2018-06-23 21:30:04 +02:00
|
|
|
|
|
2018-07-02 00:08:01 +02:00
|
|
|
|
<div className='field'>
|
|
|
|
|
<div className='control'>
|
|
|
|
|
<button class="button" onClick={ () => this.props.dictionary.createNew() }>
|
|
|
|
|
Create New Dictionary
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<div className='field'>
|
|
|
|
|
<label className='label is-unselectable'>
|
|
|
|
|
<span>Change Dictionary</span>
|
|
|
|
|
</label>
|
|
|
|
|
<div className='control'>
|
|
|
|
|
<div className='select'>
|
2018-07-02 00:08:01 +02:00
|
|
|
|
<select value={ this.props.dictionary.id }>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
{this.props.userDictionaries.map(item => {
|
2018-07-02 00:08:01 +02:00
|
|
|
|
return <option value={item.id}>{item.name}{item.id === this.props.dictionary.id && ' (Current)'}</option>;
|
2018-06-25 07:03:37 +02:00
|
|
|
|
})}
|
|
|
|
|
</select>
|
2018-06-23 21:30:04 +02:00
|
|
|
|
</div>
|
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
</div>
|
2018-06-23 21:30:04 +02:00
|
|
|
|
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<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.
|
2018-06-23 21:30:04 +02:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
<div className='control'>
|
|
|
|
|
<a className='button'>Reset Password</a>
|
2018-06-23 21:30:04 +02:00
|
|
|
|
</div>
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
|
|
|
|
|
<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>
|
2018-03-10 18:42:12 +01:00
|
|
|
|
</div>
|
2018-06-25 07:03:37 +02:00
|
|
|
|
|
2018-03-10 00:31:27 +01:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
}
|