From 7aa8848fe821120b64d6f7dd140d2fa0a2760a95 Mon Sep 17 00:00:00 2001 From: Robbie Antenesse Date: Sat, 13 Jan 2018 11:57:14 -0700 Subject: [PATCH] Create LoginForm for displaying on AccountManager --- .../management/AccountManager/LoginForm.jsx | 269 ++++++++++++++++++ .../management/AccountManager/index.jsx | 8 +- 2 files changed, 271 insertions(+), 6 deletions(-) create mode 100644 src/components/management/AccountManager/LoginForm.jsx diff --git a/src/components/management/AccountManager/LoginForm.jsx b/src/components/management/AccountManager/LoginForm.jsx new file mode 100644 index 0000000..20f6ba5 --- /dev/null +++ b/src/components/management/AccountManager/LoginForm.jsx @@ -0,0 +1,269 @@ +import Inferno from 'inferno'; +import Component from 'inferno-component'; +import PropTypes from 'prop-types'; +import marked from 'marked'; +import store from 'store'; + +import { Modal } from '../../structure/Modal'; +import { SearchBox } from '../../management/SearchBox'; + +import helpMarkdown from '../../../assets/text/help.md'; + +export class LoginForm extends Component { + constructor (props) { + super(props); + + PropTypes.checkPropTypes({ + logIn: PropTypes.func.isRequired, + signUp: PropTypes.func.isRequired, + }, props, 'prop', 'LoginForm'); + + this.state = { + visibleTab: 'login', + loginEmail: '', + loginPassword: '', + loginEmailError: '', + loginPasswordError: '', + signupEmail: '', + signupUsername: '', + signupPublicName: '', + signupPassword: '', + signupConfirm: '', + signupAllowEmail: true, + signupEmailError: '', + signupUsernameError: '', + signupPasswordError: '', + signupConfirmError: '', + signupEmailChecking: false, + signupUsernameChecking: false, + takenUsernames: [], + }; + } + + changeTab (tab) { + this.setState({ visibleTab: tab }); + } + + updateField (field, event) { + const requiredFields = ['loginEmail', 'loginPassword', 'signupEmail', 'signupPassword', 'signupConfirm']; + const {value, checked} = event.target; + const fieldUpdate = {}; + let isValid = true; + if (requiredFields.includes(field)) { + const errorFieldName = `${field}Error`; + if (value === '') { + isValid = false; + fieldUpdate[errorFieldName] = 'This field must not be blank'; + } else if (field.includes('Email') && !/.+@.+/g.test(value)) { + isValid = false; + fieldUpdate[errorFieldName] = 'The email address you entered looks wrong'; + } else if (field === 'signupPassword' && value.length < 6) { + isValid = false; + fieldUpdate[errorFieldName] = 'Please make your password at least 6 characters long'; + } else if ((field === 'signupPassword' && value !== this.state.signupConfirm) + || (field === 'signupConfirm' && value !== this.state.signupPassword)) { + isValid = false; + fieldUpdate[errorFieldName] = 'Your passwords must match'; + } + } + + if (isValid) { + fieldUpdate[field] = (field === 'signupAllowEmail') ? checked : value; + } + this.setState(fieldUpdate); + } + + checkFieldUnique (field, event) { + const uniqueFields = ['signupEmail', 'signupUsername']; + const {value} = event.target; + const fieldUpdate = {}; + let isUnique = true; + if (uniqueFields.includes(field)) { + const errorFieldName = `${field}Error`; + + const request = new Request('./api/', { + method: 'POST', + mode: 'cors', + redirect: 'follow', + headers: new Headers({ + 'Content-Type': 'application/json' + }), + body: JSON.stringify({ + action: 'login', + email, + password, + }), + }); + return fetch(request).then(response => response.json()).then(responseJSON => { + const { data, error } = responseJSON; + if (error) { + console.error(data); + } else { + store.set('LexicongaToken', data); + this.setState({ isLoggedIn: true }, () => { + this.props.updater.sync(); + }); + } + }); + if (value === '') { + isUnique = false; + fieldUpdate[errorFieldName] = 'This field must not be blank'; + } else if (field.includes('Email') && !/.+@.+/g.test(value)) { + isUnique = false; + fieldUpdate[errorFieldName] = 'The email address you entered looks wrong'; + } else if (field === 'signupPassword' && value.length < 6) { + isUnique = false; + fieldUpdate[errorFieldName] = 'Please make your password at least 6 characters long'; + } else if ((field === 'signupPassword' && value !== this.state.signupConfirm) + || (field === 'signupConfirm' && value !== this.state.signupPassword)) { + isUnique = false; + fieldUpdate[errorFieldName] = 'Your passwords must match'; + } + } + + if (field === 'signupUsername' && value !== '') { + if (this.state.takenUsernames.length < 1) { + fetch() + } + } + + this.setState(fieldUpdate); + } + + render () { + return ( +
+
+
+ +
+ {this.state.visibleTab === 'login' + ? ( +
+

+ Log In +

+
+ +
+ +
+
+
+ +
+ +
+
+
+ ) : ( +
+

+ Create a New Account +

+
+
+
+

+ Creating an account allows you to save and switch between as many dictionaries as you need + and access them from any device for free! If you have a dictionary you've been working on + loaded already, it will automatically be uploaded to your account when you log in for the + first time. +

+

+ Plus if you allow us to send you emails, 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. +

+

+ By creating an account, you are indicating that you agree to the Terms of Service and + that you understand Lexiconga's Privacy Policy. +

+
+
+
+
+ +
+ this.updateField('signupEmail', event)} /> +
+
+
+ +
+ This is your unique identifier that appears in the URL if you ever decide to share your dictionaries publicly. +
+
+ this.updateField('signupUsername', event)} /> +
+
+
+ +
+ This is the name we greet you with and what we display if you ever decide to share your dictionaries publicly. +
+
+ this.updateField('signupPublicName', event)} /> +
+
+
+ +
+ this.updateField('signupPassword', event)} /> +
+
+
+ +
+ this.updateField('signupConfirm', event)} /> +
+
+
+
+ +
+
+
+
+
+ ) + } +
+
+ ); + } +} diff --git a/src/components/management/AccountManager/index.jsx b/src/components/management/AccountManager/index.jsx index e6f477a..eb06ba1 100644 --- a/src/components/management/AccountManager/index.jsx +++ b/src/components/management/AccountManager/index.jsx @@ -5,7 +5,7 @@ import marked from 'marked'; import store from 'store'; import { Modal } from '../../structure/Modal'; -import { SearchBox } from '../../management/SearchBox'; +import { LoginForm } from './LoginForm'; import helpMarkdown from '../../../assets/text/help.md'; @@ -73,11 +73,7 @@ export class AccountManager extends Component { } return ( -
- this.logIn('test1@robbie.com', 'password')}> - Test that login! - -
+ {}} /> ); }