4
0
forked from crowetic/commerce

Login and Signup views

This commit is contained in:
Belen Curcio 2020-10-25 19:43:06 -03:00
parent 8c81ee1ffd
commit 4f4ac89cd9
2 changed files with 66 additions and 57 deletions

View File

@ -1,74 +1,76 @@
import { FC, useEffect, useState } from 'react' import { FC, useEffect, useState } from 'react'
import { Logo, Modal, Button, Input } from '@components/ui' import { Logo, Modal, Button, Input } from '@components/ui'
import useSignup from '@lib/bigcommerce/use-signup'
import useLogin from '@lib/bigcommerce/use-login' import useLogin from '@lib/bigcommerce/use-login'
import { useUI } from '@components/ui/context' import { useUI } from '@components/ui/context'
import { validate } from 'email-validator'
interface Props {} interface Props {}
const LoginView: FC<Props> = () => { const LoginView: FC<Props> = () => {
// Form State
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
const [pass, setPass] = useState('') const [password, setPassword] = useState('')
const { setModalView } = useUI() const [loading, setLoading] = useState(false)
const [message, setMessage] = useState('')
const [dirty, setDirty] = useState(false)
const [disabled, setDisabled] = useState(false)
const { setModalView, closeModal } = useUI()
const signup = useSignup()
const login = useLogin() const login = useLogin()
// // Data about the currently logged in customer, it will update const handleLogin = async () => {
// // automatically after a signup/login/logout if (!dirty && !disabled) {
// const { data } = useCustomer() setDirty(true)
// TODO: use this method. It can take more than 5 seconds to do a signup handleValidation()
const handleSignup = async () => { }
// TODO: validate the password and email before calling the signup
// Passwords must be at least 7 characters and contain both alphabetic
// and numeric characters.
try { try {
await signup({ setLoading(true)
// This account already exists, so it will throw the "duplicated_email" error setMessage('')
email: 'luis@vercel.com', await login({
firstName: 'Luis', email,
lastName: 'Alvarez', password,
password: 'luis123',
}) })
} catch (error) { setLoading(false)
if (error.code === 'duplicated_email') { closeModal()
// TODO: handle duplicated email } catch ({ errors }) {
} setMessage(errors[0].message)
// Show a generic error saying that something bad happened, try again later setLoading(false)
} }
} }
const handleLogin = async () => { const handleValidation = () => {
// TODO: validate the password and email before calling the signup // Test for Alphanumeric password
// Passwords must be at least 7 characters and contain both alphabetic const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
// and numeric characters.
try { // Unable to send form unless fields are valid.
await login({ if (dirty) {
email: 'luis@vercel.com', setDisabled(!validate(email) || password.length < 7 || !validPassword)
// This is an invalid password so it will throw the "invalid_credentials" error
password: 'luis1234', // will work with `luis123`
})
} catch (error) {
if (error.code === 'invalid_credentials') {
// The email and password didn't match an existing account
}
// Show a generic error saying that something bad happened, try again later
} }
} }
useEffect(() => {
handleValidation()
}, [email, password, dirty])
return ( return (
<div className="h-80 w-80 flex flex-col justify-between py-3 px-3"> <div className="w-80 flex flex-col justify-between p-3">
<div className="flex justify-center pb-12 "> <div className="flex justify-center pb-12 ">
<Logo width="64px" height="64px" /> <Logo width="64px" height="64px" />
</div> </div>
<div className="flex flex-col space-y-3"> <div className="flex flex-col space-y-3">
<div className="border border-accents-3 text-accents-6"> {message && (
<Input placeholder="Email" onChange={setEmail} /> <div className="text-red border border-red p-3">{message}</div>
</div> )}
<div className="border border-accents-3 text-accents-6">
<Input placeholder="Password" onChange={setEmail} /> <Input placeholder="Email" onChange={setEmail} />
</div> <Input placeholder="Password" onChange={setPassword} />
<Button variant="slim" onClick={handleSignup}> <Button
variant="slim"
onClick={() => handleLogin()}
loading={loading}
disabled={disabled}
>
Log In Log In
</Button> </Button>
<span className="pt-3 text-center text-sm"> <span className="pt-3 text-center text-sm">

View File

@ -6,25 +6,26 @@ import { validate } from 'email-validator'
interface Props {} interface Props {}
interface Error { const SignUpView: FC<Props> = () => {
code: string
message: string
}
const LoginView: FC<Props> = () => {
// Form State // Form State
const [email, setEmail] = useState('') const [email, setEmail] = useState('')
const [password, setPassword] = useState('') const [password, setPassword] = useState('')
const [firstName, setFirstName] = useState('') const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('') const [lastName, setLastName] = useState('')
const [loading, setLoading] = useState(false) const [loading, setLoading] = useState(false)
const [disabled, setDisabled] = useState(true)
const [message, setMessage] = useState('') const [message, setMessage] = useState('')
const [dirty, setDirty] = useState(false)
const [disabled, setDisabled] = useState(false)
const signup = useSignup() const signup = useSignup()
const { setModalView, closeModal } = useUI() const { setModalView, closeModal } = useUI()
const handleSignup = async () => { const handleSignup = async () => {
if (!dirty && !disabled) {
setDirty(true)
handleValidation()
}
try { try {
setLoading(true) setLoading(true)
setMessage('') setMessage('')
@ -42,13 +43,19 @@ const LoginView: FC<Props> = () => {
} }
} }
useEffect(() => { const handleValidation = () => {
// Test for Alphanumeric password // Test for Alphanumeric password
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password) const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
// Unable to send form unless fields are valid. // Unable to send form unless fields are valid.
setDisabled(!validate(email) || password.length < 7 || !validPassword) if (dirty) {
}, [email, password]) setDisabled(!validate(email) || password.length < 7 || !validPassword)
}
}
useEffect(() => {
handleValidation()
}, [email, password, dirty])
return ( return (
<div className="w-80 flex flex-col justify-between p-3"> <div className="w-80 flex flex-col justify-between p-3">
@ -86,4 +93,4 @@ const LoginView: FC<Props> = () => {
) )
} }
export default LoginView export default SignUpView