Alamantus/Lexiconga
1
0
Fork 0
mirror of https://github.com/Alamantus/Lexiconga.git synced 2025-06-19 15:46:39 +02:00
Code Issues Releases Activity

Create separate preferences localStorage item; remove username

Browse source
This commit is contained in:
Robbie Antenesse 2018-06-23 13:30:04 -06:00
parent c6abce8cc6
commit a3755d4ee7
7 changed files with 137 additions and 62 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/Constants.js
View file

@ -5,6 +5,9 @@ export const DEFAULT_USER_DATA = {
username: '', username: '',
publicName: '', publicName: '',
allowEmails: true, allowEmails: true,
};
export const DEFAULT_PREFERENCES = {
useIPAPronunciation: true, useIPAPronunciation: true,
itemsPerPage: 30, itemsPerPage: 30,
}; };

6
src/components/MainDisplay.jsx
View file

@ -10,7 +10,7 @@ import { Pagination } from './structure/Pagination';
import { WordForm } from './management/WordForm'; import { WordForm } from './management/WordForm';
import { DictionaryDetails } from './display/DictionaryDetails'; import { DictionaryDetails } from './display/DictionaryDetails';
import { WordsList } from './display/WordsList'; import { WordsList } from './display/WordsList';
import { DEFAULT_USER_DATA } from '../Constants'; import { DEFAULT_PREFERENCES } from '../Constants';
export class MainDisplay extends Component { export class MainDisplay extends Component {
constructor (props) { constructor (props) {
@ -56,8 +56,8 @@ export class MainDisplay extends Component {
} }
render () { render () {
const userData = store.get('LexicongaUserData'); const preferences = store.get('LexicongaPreferences');
const itemsPerPage = userData && userData.hasOwnProperty('itemsPerPage') ? userData.itemsPerPage : DEFAULT_USER_DATA.itemsPerPage; const itemsPerPage = preferences && preferences.hasOwnProperty('itemsPerPage') ? preferences.itemsPerPage : DEFAULT_PREFERENCES.itemsPerPage;
const { const {
dictionaryInfo, dictionaryInfo,
isLoadingWords, isLoadingWords,

84
src/components/management/AccountManager/LoginForm.jsx
View file

@ -26,19 +26,19 @@ export class LoginForm extends Component {
loginPasswordError: '', loginPasswordError: '',
loginFormIsValid: true, loginFormIsValid: true,
signupEmail: '', signupEmail: '',
signupUsername: '', // signupUsername: '',
signupPublicName: '', signupPublicName: '',
signupPassword: '', signupPassword: '',
signupConfirm: '', signupConfirm: '',
signupAllowEmail: true, signupAllowEmail: true,
signupEmailError: '', signupEmailError: '',
signupUsernameError: '', // signupUsernameError: '',
signupPasswordError: '', signupPasswordError: '',
signupConfirmError: '', signupConfirmError: '',
signupEmailChecking: false, signupEmailChecking: false,
signupUsernameChecking: false, // signupUsernameChecking: false,
signupEmailIsUnique: true, signupEmailIsUnique: true,
signupUsernameIsUnique: true, // signupUsernameIsUnique: true,
signupFormIsValid: true, signupFormIsValid: true,
}; };
} }
@ -56,15 +56,15 @@ export class LoginForm extends Component {
signupEmailError, signupEmailError,
signupEmailChecking, signupEmailChecking,
signupEmailIsUnique, signupEmailIsUnique,
signupUsernameError, // signupUsernameError,
signupUsernameChecking, // signupUsernameChecking,
signupUsernameIsUnique, // signupUsernameIsUnique,
signupPasswordError, signupPasswordError,
signupConfirmError, signupConfirmError,
} = this.state; } = this.state;
return !signupEmailChecking && !signupUsernameChecking return !signupEmailChecking && !signupUsernameChecking
&& signupEmailIsUnique && signupUsernameIsUnique && signupEmailIsUnique && signupEmailError === ''
&& signupEmailError === '' && signupUsernameError === '' // && signupUsernameIsUnique && signupUsernameError === ''
&& signupPasswordError === '' && signupConfirmError === ''; && signupPasswordError === '' && signupConfirmError === '';
} }
@ -101,12 +101,12 @@ export class LoginForm extends Component {
} }
} }
if (field === 'signupUsername') { // if (field === 'signupUsername') {
if (value !== '' && /[^a-zA-Z0-9]+/g.test(value)) { // if (value !== '' && /[^a-zA-Z0-9]+/g.test(value)) {
isValid = false; // isValid = false;
fieldErrors[errorFieldName] = 'Please use only letters and numbers'; // fieldErrors[errorFieldName] = 'Please use only letters and numbers';
} // }
} // }
if (isValid) { if (isValid) {
fieldErrors[errorFieldName] = ''; fieldErrors[errorFieldName] = '';
@ -118,17 +118,22 @@ export class LoginForm extends Component {
const { const {
signupEmailChecking, signupEmailChecking,
signupEmailIsUnique, signupEmailIsUnique,
signupUsernameChecking, // signupUsernameChecking,
signupUsernameIsUnique, // signupUsernameIsUnique,
} = this.state; } = this.state;
const fields = ['signupEmail', 'signupUsername', 'signupPassword', 'signupConfirm']; const fields = [
'signupEmail',
// 'signupUsername',
'signupPassword',
'signupConfirm'
];
let errors = {}; let errors = {};
fields.forEach(field => { fields.forEach(field => {
const fieldErrors = this.validateField(field, this.state[field]); const fieldErrors = this.validateField(field, this.state[field]);
errors = Object.assign(errors, fieldErrors); errors = Object.assign(errors, fieldErrors);
}); });
errors.signupFormIsValid = !signupEmailChecking && !signupUsernameChecking errors.signupFormIsValid = !signupEmailChecking && signupEmailIsUnique
&& signupEmailIsUnique && signupUsernameIsUnique // && !signupUsernameChecking && signupUsernameIsUnique
&& Object.keys(errors).every(field => errors[field] === ''); && Object.keys(errors).every(field => errors[field] === '');
this.setState(errors, callback); this.setState(errors, callback);
} }
@ -163,21 +168,22 @@ export class LoginForm extends Component {
this.setState(fieldUpdate); this.setState(fieldUpdate);
}); });
}); });
} else if (field === 'signupUsername') {
this.setState({ signupUsernameChecking: true }, () => {
request('check-username', { username: value }, (response) => {
const { data, error } = response;
fieldUpdate['signupUsernameChecking'] = false;
if (error) {
console.error(data);
} else {
fieldUpdate['signupUsernameIsUnique'] = !data;
}
}).then(() => {
this.setState(fieldUpdate);
});
});
} }
// else if (field === 'signupUsername') {
// this.setState({ signupUsernameChecking: true }, () => {
// request('check-username', { username: value }, (response) => {
// const { data, error } = response;
// fieldUpdate['signupUsernameChecking'] = false;
// if (error) {
// console.error(data);
// } else {
// fieldUpdate['signupUsernameIsUnique'] = !data;
// }
// }).then(() => {
// this.setState(fieldUpdate);
// });
// });
// }
} }
logIn () { logIn () {
@ -194,13 +200,13 @@ export class LoginForm extends Component {
if (this.signupFormIsValid) { if (this.signupFormIsValid) {
const { const {
signupEmail, signupEmail,
signupUsername, // signupUsername,
signupPublicName, signupPublicName,
signupPassword, signupPassword,
signupAllowEmail signupAllowEmail
} = this.state; } = this.state;
this.props.signUp(signupEmail, signupPassword, { this.props.signUp(signupEmail, signupPassword, {
username: signupUsername, // username: signupUsername,
publicName: signupPublicName, publicName: signupPublicName,
allowEmail: signupAllowEmail, allowEmail: signupAllowEmail,
}); });
@ -234,7 +240,7 @@ export class LoginForm extends Component {
</h3> </h3>
<div className='field'> <div className='field'>
<label className='label'> <label className='label'>
Email/Username Email
</label> </label>
<div className='control'> <div className='control'>
<input className={`input ${this.state.loginEmailError !== '' && 'is-danger'}`} <input className={`input ${this.state.loginEmailError !== '' && 'is-danger'}`}
@ -320,7 +326,7 @@ export class LoginForm extends Component {
} }
</div> </div>
</div> </div>
<div className='field'> {/* <div className='field'>
<label className='label'> <label className='label'>
Username Username
</label> </label>
@ -342,7 +348,7 @@ export class LoginForm extends Component {
) : null ) : null
} }
</div> </div>
</div> </div> */}
<div className='field'> <div className='field'>
<label className='label'> <label className='label'>
Public Name Public Name

74
src/components/management/AccountManager/MyAccount.jsx
View file

@ -8,13 +8,13 @@ export class MyAccount extends Component {
PropTypes.checkPropTypes({ PropTypes.checkPropTypes({
email: PropTypes.string.isRequired, email: PropTypes.string.isRequired,
username: 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, updateUserData: PropTypes.func,
changeDictionary: PropTypes.func, changeDictionary: PropTypes.func,
}, props, 'prop', 'LoginForm'); }, props, 'prop', 'MyAccount');
this.state = { this.state = {
email: this.props.email, email: this.props.email,
@ -32,11 +32,17 @@ export class MyAccount extends Component {
<div className='column'> <div className='column'>
<h2 className='title'>Account Details</h2> <h2 className='title'>Account Details</h2>
<div className='field'>
<label className='label'>
<span>Email:</span>
</label>
<div className='control'> <div className='control'>
<strong>Email:</strong> <span>{this.state.email}</span> <input className='input' type='text' value={this.state.email}
onInput={(event) => { this.setState({ email: event.target.value }) }} />
<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='control'>
<strong>Username:</strong> <span>{this.state.username}</span>
</div> </div>
<div className='field'> <div className='field'>
<label className='label'> <label className='label'>
@ -45,6 +51,14 @@ export class MyAccount extends Component {
<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})}} />
<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> </div>
<div className='field'> <div className='field'>
@ -55,12 +69,21 @@ export class MyAccount extends Component {
<label className='label is-unselectable' htmlFor='allowEmails'> <label className='label is-unselectable' htmlFor='allowEmails'>
Allow Emails Allow Emails
</label> </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> </div>
</div> </div>
<div className='column'> <div className='column'>
<h2 className='title'>Account Actions</h2> <h2 className='title'>Account Actions</h2>
<div className='field'> <div className='field'>
<label className='label is-unselectable'> <label className='label is-unselectable'>
<span>Change Dictionary</span> <span>Change Dictionary</span>
@ -75,6 +98,47 @@ export class MyAccount extends Component {
</div> </div>
</div> </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>
</div> </div>

3
src/components/management/AccountManager/index.jsx
View file

@ -28,7 +28,6 @@ export class AccountManager extends Component {
username: userData && userData.hasOwnProperty('username') ? userData.username : DEFAULT_USER_DATA.username, 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,
itemsPerPage: userData && userData.hasOwnProperty('itemsPerPage') ? userData.itemsPerPage : DEFAULT_USER_DATA.itemsPerPage,
}, },
userDictionaries: [], userDictionaries: [],
}; };
@ -119,7 +118,7 @@ export class AccountManager extends Component {
<Modal buttonText='Account' title='My Account' onShow={ this.getDictionaryNames.bind(this) }> <Modal buttonText='Account' title='My Account' onShow={ this.getDictionaryNames.bind(this) }>
<MyAccount <MyAccount
email={ userData.email } email={ userData.email }
username={ userData.username } // username={ userData.username }
publicName={ userData.publicName } publicName={ userData.publicName }
allowEmails={ userData.allowEmails } allowEmails={ userData.allowEmails }
userDictionaries={ this.state.userDictionaries } userDictionaries={ this.state.userDictionaries }

19
src/components/management/IPAField.jsx
View file

@ -3,7 +3,7 @@ import { Component } from 'inferno';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import store from 'store'; import store from 'store';
import { DEFAULT_USER_DATA } from '../../Constants'; import { DEFAULT_PREFERENCES } from '../../Constants';
const phondueUsage = require('../../../vendor/KeyboardFire/phondue/usage.html'); const phondueUsage = require('../../../vendor/KeyboardFire/phondue/usage.html');
const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json'); const digraphs = require('../../../vendor/KeyboardFire/phondue/digraphs.json');
@ -48,18 +48,21 @@ export class IPAField extends Component {
get useIPA() { get useIPA() {
if (this.props.useIPASetting) { if (this.props.useIPASetting) {
const userData = store.get('LexicongaUserData'); const preferences = store.get('LexicongaPreferences');
return userData && userData.hasOwnProperty('useIPAPronunciation') return preferences && preferences.hasOwnProperty('useIPAPronunciation')
? userData.useIPAPronunciation : DEFAULT_USER_DATA.useIPAPronunciation; ? preferences.useIPAPronunciation : DEFAULT_PREFERENCES.useIPAPronunciation;
} }
return true; return true;
} }
toggleIPA () { toggleIPA () {
const userData = store.get('LexicongaUserData'); let preferences = store.get('LexicongaPreferences');
userData.useIPAPronunciation = !this.useIPA; if (!preferences) {
this.setState({ useIPA: userData.useIPAPronunciation }, () => { preferences = Object.assign({}, DEFAULT_PREFERENCES);
store.set('LexicongaUserData', userData); }
preferences.useIPAPronunciation = !this.useIPA;
this.setState({ useIPA: preferences.useIPAPronunciation }, () => {
store.set('LexicongaPreferences', preferences);
}); });
} }

6
src/index.jsx
View file

@ -6,7 +6,7 @@ import { Component, render } from 'inferno';
import store from 'store'; import store from 'store';
import removeDiacritics from '../vendor/StackOverflow/removeDiacritics'; import removeDiacritics from '../vendor/StackOverflow/removeDiacritics';
import { DEFAULT_USER_DATA } from './Constants'; import { DEFAULT_PREFERENCES } from './Constants';
import { addHelpfulPrototypes, getWordsStats } from './Helpers'; import { addHelpfulPrototypes, getWordsStats } from './Helpers';
addHelpfulPrototypes(); addHelpfulPrototypes();
@ -95,8 +95,8 @@ class App extends Component {
updateDisplayedWords (callback = () => {}) { updateDisplayedWords (callback = () => {}) {
dictionary.wordsPromise.then(words => { dictionary.wordsPromise.then(words => {
const userData = store.get('LexicongaUserData'); const preferences = store.get('LexicongaPreferences');
const itemsPerPage = userData && userData.hasOwnProperty('itemsPerPage') ? userData.itemsPerPage : DEFAULT_USER_DATA.itemsPerPage; const itemsPerPage = preferences && preferences.hasOwnProperty('itemsPerPage') ? preferences.itemsPerPage : DEFAULT_PREFERENCES.itemsPerPage;
const { searchConfig, partsOfSpeech, currentPage } = this.state; const { searchConfig, partsOfSpeech, currentPage } = this.state;
const partsOfSpeechForFilter = [...partsOfSpeech, 'Uncategorized']; const partsOfSpeechForFilter = [...partsOfSpeech, 'Uncategorized'];
const pageStart = currentPage * itemsPerPage; const pageStart = currentPage * itemsPerPage;