mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Sign Up Working
This commit is contained in:
parent
d47fa2d29f
commit
8c81ee1ffd
@ -1,77 +1,78 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { Logo, Modal, Button, Input } from '@components/ui'
|
||||
import { Logo, Button, Input } from '@components/ui'
|
||||
import useSignup from '@lib/bigcommerce/use-signup'
|
||||
import useLogin from '@lib/bigcommerce/use-login'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { validate } from 'email-validator'
|
||||
|
||||
interface Props {}
|
||||
|
||||
interface Error {
|
||||
code: string
|
||||
message: string
|
||||
}
|
||||
|
||||
const LoginView: FC<Props> = () => {
|
||||
// Form State
|
||||
const [email, setEmail] = useState('')
|
||||
const [pass, setPass] = useState('')
|
||||
const [password, setPassword] = useState('')
|
||||
const [firstName, setFirstName] = useState('')
|
||||
const [lastName, setLastName] = useState('')
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [disabled, setDisabled] = useState(true)
|
||||
const [message, setMessage] = useState('')
|
||||
|
||||
const signup = useSignup()
|
||||
const login = useLogin()
|
||||
const { setModalView } = useUI()
|
||||
// // Data about the currently logged in customer, it will update
|
||||
// // automatically after a signup/login/logout
|
||||
// const { data } = useCustomer()
|
||||
// TODO: use this method. It can take more than 5 seconds to do a signup
|
||||
const { setModalView, closeModal } = useUI()
|
||||
|
||||
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 {
|
||||
setLoading(true)
|
||||
setMessage('')
|
||||
await signup({
|
||||
// This account already exists, so it will throw the "duplicated_email" error
|
||||
email: 'luis@vercel.com',
|
||||
firstName: 'Luis',
|
||||
lastName: 'Alvarez',
|
||||
password: 'luis123',
|
||||
email,
|
||||
firstName,
|
||||
lastName,
|
||||
password,
|
||||
})
|
||||
} catch (error) {
|
||||
if (error.code === 'duplicated_email') {
|
||||
// TODO: handle duplicated email
|
||||
}
|
||||
// Show a generic error saying that something bad happened, try again later
|
||||
setLoading(false)
|
||||
closeModal()
|
||||
} catch ({ errors }) {
|
||||
setMessage(errors[0].message)
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const handleLogin = 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 {
|
||||
await login({
|
||||
email: 'luis@vercel.com',
|
||||
// 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(() => {
|
||||
// Test for Alphanumeric password
|
||||
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
|
||||
|
||||
// Unable to send form unless fields are valid.
|
||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
||||
}, [email, password])
|
||||
|
||||
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 ">
|
||||
<Logo width="64px" height="64px" />
|
||||
</div>
|
||||
<div className="flex flex-col space-y-3">
|
||||
<div className="border border-accents-3 text-accents-6">
|
||||
<Input placeholder="Email" onChange={setEmail} />
|
||||
</div>
|
||||
<div className="border border-accents-3 text-accents-6">
|
||||
<Input placeholder="Password" onChange={setEmail} />
|
||||
</div>
|
||||
<Button variant="slim" onClick={handleSignup}>
|
||||
{message && (
|
||||
<div className="text-red border border-red p-3">{message}</div>
|
||||
)}
|
||||
<Input placeholder="First Name" onChange={setFirstName} />
|
||||
<Input placeholder="Last Name" onChange={setLastName} />
|
||||
<Input placeholder="Email" onChange={setEmail} />
|
||||
<Input placeholder="Password" onChange={setPassword} />
|
||||
<Button
|
||||
variant="slim"
|
||||
onClick={() => handleSignup()}
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
<span className="pt-3 text-center text-sm">
|
||||
<span className="text-accents-7">Don't have an account?</span>
|
||||
<span className="text-accents-7">Do you have an account?</span>
|
||||
{` `}
|
||||
<a
|
||||
className="text-accent-9 font-bold hover:underline cursor-pointer"
|
||||
|
@ -24,3 +24,12 @@
|
||||
.slim {
|
||||
@apply py-2 transform-none normal-case;
|
||||
}
|
||||
|
||||
.disabled,
|
||||
.disabled:hover {
|
||||
@apply text-accents-4 border-accents-2 bg-accents-1 cursor-not-allowed;
|
||||
filter: grayscale(1);
|
||||
-webkit-transform: translateZ(0);
|
||||
-webkit-perspective: 1000;
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
|
@ -19,6 +19,7 @@ export interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
|
||||
Component?: string | JSXElementConstructor<any>
|
||||
width?: string | number
|
||||
loading?: boolean
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||
@ -28,10 +29,10 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||
children,
|
||||
active,
|
||||
onClick,
|
||||
disabled,
|
||||
width,
|
||||
Component = 'button',
|
||||
loading = false,
|
||||
disabled = false,
|
||||
style = {},
|
||||
...rest
|
||||
} = props
|
||||
@ -52,6 +53,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||
{
|
||||
[s.slim]: variant === 'slim',
|
||||
[s.loading]: loading,
|
||||
[s.disabled]: disabled,
|
||||
},
|
||||
className
|
||||
)
|
||||
@ -64,6 +66,7 @@ const Button: React.FC<ButtonProps> = forwardRef((props, buttonRef) => {
|
||||
{...buttonProps}
|
||||
data-active={isPressed ? '' : undefined}
|
||||
className={rootClassName}
|
||||
disabled={disabled}
|
||||
style={{
|
||||
width,
|
||||
...style,
|
||||
|
@ -1,4 +1,5 @@
|
||||
.root {
|
||||
@apply focus:outline-none bg-primary focus:shadow-outline-gray border-none py-2
|
||||
px-6 w-full appearance-none transition duration-150 ease-in-out placeholder-accents-5 pr-10;
|
||||
@apply focus:outline-none bg-primary focus:shadow-outline-gray py-2
|
||||
px-6 w-full appearance-none transition duration-150 ease-in-out
|
||||
placeholder-accents-5 pr-10 border border-accents-3 text-accents-6;
|
||||
}
|
||||
|
@ -25,6 +25,7 @@
|
||||
"bowser": "^2.11.0",
|
||||
"classnames": "^2.2.6",
|
||||
"cookie": "^0.4.1",
|
||||
"email-validator": "^2.0.4",
|
||||
"intersection-observer": "^0.11.0",
|
||||
"js-cookie": "^2.2.1",
|
||||
"keen-slider": "^5.2.4",
|
||||
|
@ -3907,6 +3907,11 @@ elliptic@^6.5.3:
|
||||
minimalistic-assert "^1.0.0"
|
||||
minimalistic-crypto-utils "^1.0.0"
|
||||
|
||||
email-validator@^2.0.4:
|
||||
version "2.0.4"
|
||||
resolved "https://registry.yarnpkg.com/email-validator/-/email-validator-2.0.4.tgz#b8dfaa5d0dae28f1b03c95881d904d4e40bfe7ed"
|
||||
integrity sha512-gYCwo7kh5S3IDyZPLZf6hSS0MnZT8QmJFqYvbqlDZSbwdZlY6QZWxJ4i/6UhITOJ4XzyI647Bm2MXKCLqnJ4nQ==
|
||||
|
||||
emoji-regex@^8.0.0:
|
||||
version "8.0.0"
|
||||
resolved "https://registry.yarnpkg.com/emoji-regex/-/emoji-regex-8.0.0.tgz#e818fd69ce5ccfcb404594f842963bf53164cc37"
|
||||
|
Loading…
x
Reference in New Issue
Block a user