forked from crowetic/commerce
Login and Signup views
This commit is contained in:
parent
8c81ee1ffd
commit
4f4ac89cd9
@ -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">
|
||||||
|
@ -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
|
||||||
|
Loading…
x
Reference in New Issue
Block a user