From dca309c27da99abfbaddd62e34e14552bb1932f2 Mon Sep 17 00:00:00 2001 From: Victor Gonzalez Date: Fri, 25 Mar 2022 16:26:50 +0100 Subject: [PATCH] feat: add sign in method selector --- src/components/SignIn.js | 122 +++++++++++++++++++++++++++++++++++---- src/config/messages.js | 1 + src/config/selectors.js | 2 + src/utils/validation.js | 3 + 4 files changed, 117 insertions(+), 11 deletions(-) diff --git a/src/components/SignIn.js b/src/components/SignIn.js index 67c05cf4..eca89097 100644 --- a/src/components/SignIn.js +++ b/src/components/SignIn.js @@ -10,10 +10,16 @@ import Button from '@material-ui/core/Button'; import Divider from '@material-ui/core/Divider'; import { Link } from 'react-router-dom'; import FormControl from '@material-ui/core/FormControl'; +import { Box } from '@material-ui/core'; import { SIGN_UP_PATH } from '../config/paths'; import { getCurrentMember, signIn } from '../actions/authentication'; -import { emailValidator } from '../utils/validation'; -import { EMAIL_SIGN_IN_FIELD_ID, SIGN_IN_BUTTON_ID } from '../config/selectors'; +import { emailValidator, passwordValidator } from '../utils/validation'; +import { + EMAIL_SIGN_IN_FIELD_ID, + PASSWORD_SIGN_IN_BUTTON_ID, + PASSWORD_SIGN_IN_FIELD_ID, + SIGN_IN_BUTTON_ID, +} from '../config/selectors'; import { FORM_INPUT_MIN_WIDTH, GRAASP_COMPOSE_HOST } from '../config/constants'; import { SIGN_IN_ERROR } from '../types/member'; import notifier from '../utils/notifier'; @@ -59,9 +65,12 @@ class SignIn extends Component { state = { email: '', + password: '', isAuthenticated: false, emailError: '', + passwordError: '', error: false, + signInMethod: true, }; async componentDidMount() { @@ -107,6 +116,31 @@ class SignIn extends Component { } }; + handlePasswordSignIn = async () => { + const { email } = this.state; + const { password } = this.state; + const lowercaseEmail = email.toLowerCase(); + + const checkingEmail = emailValidator(lowercaseEmail); + const checkingPassword = passwordValidator(password); + if (checkingEmail || checkingPassword) { + if (checkingEmail) { + this.setState({ emailError: checkingEmail, error: true }); + } + if (checkingPassword) { + this.setState({ passwordError: checkingPassword, error: true }); + } + } else { + // await signIn({ email: lowercaseEmail }); + this.doSomething(); + } + }; + + doSomething = () => { + /* eslint-disable no-console */ + console.log('login with password'); + }; + handleOnChange = (e) => { const { error } = this.state; const email = e.target.value; @@ -116,6 +150,15 @@ class SignIn extends Component { } }; + handleOnChangePassword = (e) => { + const { error } = this.state; + const password = e.target.value; + this.setState({ password }); + if (error) { + this.setState({ passwordError: passwordValidator(password) }); + } + }; + handleKeypress = (e) => { // sign in by pressing the enter key if (e.key === 'Enter') { @@ -123,8 +166,19 @@ class SignIn extends Component { } }; + handleSignInMethod = () => { + const { signInMethod } = this.state; + if (signInMethod) { + this.setState({ signInMethod: false }); + } else { + this.setState({ signInMethod: true }); + } + }; + renderSignInForm = () => { const { email, emailError } = this.state; + const { password, passwordError } = this.state; + const { signInMethod } = this.state; const { classes, t } = this.props; return ( @@ -143,16 +197,42 @@ class SignIn extends Component { type="email" onKeyPress={this.handleKeypress} /> - + {signInMethod === false && ( + <> + + + + )} + {signInMethod === true && ( + + )} - {t('Not registered? Click here to register')} @@ -163,6 +243,7 @@ class SignIn extends Component { render() { const { classes, t } = this.props; + const { signInMethod } = this.state; return (
@@ -170,6 +251,25 @@ class SignIn extends Component { {t('Sign In')} {this.renderSignInForm()} + + + + +
); } diff --git a/src/config/messages.js b/src/config/messages.js index 4c6ffe7d..e667da43 100644 --- a/src/config/messages.js +++ b/src/config/messages.js @@ -10,6 +10,7 @@ export const SIGN_UP_DUPLICATE_MESSAGE = export const SIGN_UP_SUCCESS_MESSAGE = 'You successfully signed up. You will receive an email.'; export const EMAIL_ERROR = 'Please enter a valid email address'; +export const PASSWORD_ERROR = 'Please enter a valid password'; export const USERNAME_ERROR_MAXIMUM_MESSAGE = 'Please enter a username under 300 characters'; export const USERNAME_ERROR_MINIMUM_MESSAGE = diff --git a/src/config/selectors.js b/src/config/selectors.js index c98fd5a6..5c3ba06f 100644 --- a/src/config/selectors.js +++ b/src/config/selectors.js @@ -1,5 +1,7 @@ export const NAME_SIGN_UP_FIELD_ID = 'nameSignUpFieldId'; export const EMAIL_SIGN_UP_FIELD_ID = 'emailSignUpFieldId'; export const EMAIL_SIGN_IN_FIELD_ID = 'emailSignInFieldId'; +export const PASSWORD_SIGN_IN_FIELD_ID = 'passwordSignInFieldId'; +export const PASSWORD_SIGN_IN_BUTTON_ID = 'passwordSignInButtonId'; export const SIGN_IN_BUTTON_ID = 'signInButtonId'; export const SIGN_UP_BUTTON_ID = 'signUpButtonId'; diff --git a/src/utils/validation.js b/src/utils/validation.js index 1c330458..0204f987 100644 --- a/src/utils/validation.js +++ b/src/utils/validation.js @@ -1,6 +1,7 @@ import validator from 'validator'; import { EMAIL_ERROR, + PASSWORD_ERROR, USERNAME_ERROR_MAXIMUM_MESSAGE, USERNAME_ERROR_MINIMUM_MESSAGE, } from '../config/messages'; @@ -18,3 +19,5 @@ export const nameValidator = (name) => { export const emailValidator = (email) => validator.isEmail(email) ? null : EMAIL_ERROR; +export const passwordValidator = (password) => + validator.isAlpha(password) ? null : PASSWORD_ERROR;