1
0
mirror of https://github.com/vercel/commerce.git synced 2025-07-24 02:31:24 +00:00
Files
.vscode
assets
components
auth
ForgotPassword.tsx
LoginView.tsx
SignUpView.tsx
index.ts
cart
checkout
common
icons
product
ui
wishlist
search.tsx
config
framework
lib
pages
public
.editorconfig
.env.template
.eslintrc
.gitignore
.prettierignore
.prettierrc
README.md
codegen.bigcommerce.json
codegen.json
commerce.config.json
global.d.ts
license.md
next-env.d.ts
next.config.js
package-lock.json
package.json
postcss.config.js
swell-js.d.ts
tailwind.config.js
tsconfig.json
commerce/components/auth/SignUpView.tsx
B 78cc378a72 New Release ()
* Custom Checkout Progress

* Updates to Checkout

* Custom Checkout Progress

* Adding tabs

* Adding Collapse

* Adding Collapse

* Improving Sidebar Scroll

* Modif footer

* Changes

* More design updates

* sidebar cart

* More design updates

* More design updates

* More design updates

* More design updates

* Types

* Types

* Design Updates

* More changes

* More changes

* More changes

* Changes

* Changes

* Changes

* New tailwind required changes

* Sidebar Styling issues with Mobile

* Latest changes - Normalizing cart

* Styling Fixes

* New changes

* Changes

* latest

* Refactor and Renaming some UI Props

* Adding Quantity Component

* Adding Rating Component

* Rating Component

* More updates

* User Select disabled, plus hidding horizontal scroll bars

* Changes

* Adding ProductOptions Component and more helpers

* Styling updates

* Styling updates

* Fix for slim tags

* Missmatch with RightArrow

* Footer updates and some styles

* Latest Updates

* Latest Updates

* Latest Updates

* Removing Portal, since it's not needed. We might add it later I'd rather not to.

* Removing Portal, since it's not needed. We might add it later I'd rather not to.

* Sam backdrop filter

* General UI Improvements

* General UI Improvements

* Search now with Geist Colors

* Now with Geist Colors

* Changes

* Scroll for Mobile on IOs devises

* LoadingDots Working (:

* Changes

* More Changes

* Perf changes

* More perf changes

* Fade to the Nametags in the ProductCard

* changes

* Search issue ui

* Search issue ui

* Make sure to only refresh navbar and modals when required

* Index revalidate

* Fixed image issue

* hide album scroll on windows

* Fix scrollbar

* Changing

* Adding 404 with Layout

* Removing Toast

* Adding Assets

* Adding Assets

* Progress with LocalProvider

* New productTag

* Only images for the drop

* changes

* Empty SWRhooks

* Adding Local Provider

* Working local

* Working view of a LocalProvider

* More updates

* Changes

* Removed react-ticker

* default to local if no env available

* default to local if no env available

* add missing `@` to css import

* rewrite search rewrites to multiple pages

* allow requests in getStaticProps to execute in parallel

* make type import explicit

* add a tsconfig.js file

* use local provider in tsconfig.js

* avoid a circular dependency

* Saleor was not in the providers list

* avoid circular dependency in bigcommerce

* Adding more to the Local Provider ()

* Adding more data

* Adding more data

* optimize assets ()

* Optimize assets ()

* optimize assets

* remove assets

* remove assets

* cart enabled

* Adding saleor

* Changes with Webpack

* Changes

Co-authored-by: Luis Alvarez <luis@vercel.com>
Co-authored-by: Tobias Koppers <tobias.koppers@googlemail.com>
Co-authored-by: Shu Ding <g@shud.in>
2021-06-15 20:23:17 -03:00

115 lines
3.3 KiB
TypeScript

import { FC, useEffect, useState, useCallback } from 'react'
import { validate } from 'email-validator'
import { Info } from '@components/icons'
import { useUI } from '@components/ui/context'
import { Logo, Button, Input } from '@components/ui'
import useSignup from '@framework/auth/use-signup'
interface Props {}
const SignUpView: FC<Props> = () => {
// Form State
const [email, setEmail] = useState('')
const [password, setPassword] = useState('')
const [firstName, setFirstName] = useState('')
const [lastName, setLastName] = useState('')
const [loading, setLoading] = useState(false)
const [message, setMessage] = useState('')
const [dirty, setDirty] = useState(false)
const [disabled, setDisabled] = useState(false)
const signup = useSignup()
const { setModalView, closeModal } = useUI()
const handleSignup = async (e: React.SyntheticEvent<EventTarget>) => {
e.preventDefault()
if (!dirty && !disabled) {
setDirty(true)
handleValidation()
}
try {
setLoading(true)
setMessage('')
await signup({
email,
firstName,
lastName,
password,
})
setLoading(false)
closeModal()
} catch ({ errors }) {
setMessage(errors[0].message)
setLoading(false)
}
}
const handleValidation = useCallback(() => {
// Test for Alphanumeric password
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
// Unable to send form unless fields are valid.
if (dirty) {
setDisabled(!validate(email) || password.length < 7 || !validPassword)
}
}, [email, password, dirty])
useEffect(() => {
handleValidation()
}, [handleValidation])
return (
<form
onSubmit={handleSignup}
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-4">
{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 type="email" placeholder="Email" onChange={setEmail} />
<Input type="password" placeholder="Password" onChange={setPassword} />
<span className="text-accent-8">
<span className="inline-block align-middle ">
<Info width="15" height="15" />
</span>{' '}
<span className="leading-6 text-sm">
<strong>Info</strong>: Passwords must be longer than 7 chars and
include numbers.{' '}
</span>
</span>
<div className="pt-2 w-full flex flex-col">
<Button
variant="slim"
type="submit"
loading={loading}
disabled={disabled}
>
Sign Up
</Button>
</div>
<span className="pt-1 text-center text-sm">
<span className="text-accent-7">Do you have an account?</span>
{` `}
<a
className="text-accent-9 font-bold hover:underline cursor-pointer"
onClick={() => setModalView('LOGIN_VIEW')}
>
Log In
</a>
</span>
</div>
</form>
)
}
export default SignUpView