mirror of
https://github.com/vercel/commerce.git
synced 2025-03-14 22:42:33 +00:00
Adding info for Login In
This commit is contained in:
parent
50c50b6d53
commit
1a3a683d6e
@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { FC, useEffect, useState, useCallback } from 'react'
|
||||
import { Logo, Modal, Button, Input } from '@components/ui'
|
||||
import useLogin from '@lib/bigcommerce/use-login'
|
||||
import { useUI } from '@components/ui/context'
|
||||
@ -39,7 +39,7 @@ const LoginView: FC<Props> = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleValidation = () => {
|
||||
const handleValidation = useCallback(() => {
|
||||
// Test for Alphanumeric password
|
||||
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
|
||||
|
||||
@ -47,11 +47,11 @@ const LoginView: FC<Props> = () => {
|
||||
if (dirty) {
|
||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
||||
}
|
||||
}
|
||||
}, [email, password, dirty])
|
||||
|
||||
useEffect(() => {
|
||||
handleValidation()
|
||||
}, [email, password, dirty])
|
||||
}, [handleValidation])
|
||||
|
||||
return (
|
||||
<div className="w-80 flex flex-col justify-between p-3">
|
||||
|
@ -1,8 +1,9 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { FC, useEffect, useState, useCallback } from 'react'
|
||||
import { validate } from 'email-validator'
|
||||
import { Info } from '@components/icon'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { Logo, Button, Input } from '@components/ui'
|
||||
import useSignup from '@lib/bigcommerce/use-signup'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { validate } from 'email-validator'
|
||||
|
||||
interface Props {}
|
||||
|
||||
@ -43,7 +44,7 @@ const SignUpView: FC<Props> = () => {
|
||||
}
|
||||
}
|
||||
|
||||
const handleValidation = () => {
|
||||
const handleValidation = useCallback(() => {
|
||||
// Test for Alphanumeric password
|
||||
const validPassword = /^(?=.*[a-zA-Z])(?=.*[0-9])/.test(password)
|
||||
|
||||
@ -51,18 +52,18 @@ const SignUpView: FC<Props> = () => {
|
||||
if (dirty) {
|
||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
||||
}
|
||||
}
|
||||
}, [email, password, dirty])
|
||||
|
||||
useEffect(() => {
|
||||
handleValidation()
|
||||
}, [email, password, dirty])
|
||||
}, [handleValidation])
|
||||
|
||||
return (
|
||||
<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="flex flex-col space-y-4">
|
||||
{message && (
|
||||
<div className="text-red border border-red p-3">{message}</div>
|
||||
)}
|
||||
@ -70,14 +71,26 @@ const SignUpView: FC<Props> = () => {
|
||||
<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="text-accents-8">
|
||||
<Info
|
||||
width="20"
|
||||
height="20"
|
||||
className="inline-block mr-1 text-accents-8"
|
||||
/>
|
||||
<strong>Info</strong>: Password must be longer than 7 chars and
|
||||
include numbers.
|
||||
</span>
|
||||
<div className="pt-2 w-full flex flex-col">
|
||||
<Button
|
||||
variant="slim"
|
||||
onClick={() => handleSignup()}
|
||||
loading={loading}
|
||||
disabled={disabled}
|
||||
>
|
||||
Sign Up
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<span className="pt-3 text-center text-sm">
|
||||
<span className="text-accents-7">Do you have an account?</span>
|
||||
{` `}
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { FC, useEffect, useState } from 'react'
|
||||
import { FC, useCallback, useEffect, useState } from 'react'
|
||||
import cn from 'classnames'
|
||||
import { useRouter } from 'next/router'
|
||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
||||
@ -10,7 +10,7 @@ import { LoginView, SignUpView } from '@components/auth'
|
||||
import { useUI } from '@components/ui/context'
|
||||
import { usePreventScroll } from '@react-aria/overlays'
|
||||
import s from './Layout.module.css'
|
||||
|
||||
import debounce from 'lodash.debounce'
|
||||
interface Props {
|
||||
pageProps: {
|
||||
pages?: Page[]
|
||||
@ -29,26 +29,26 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
||||
const [hasScrolled, setHasScrolled] = useState(false)
|
||||
const { locale = 'en-US' } = useRouter()
|
||||
|
||||
// TODO: Update code, add throttle and more.
|
||||
// TODO: Make sure to not do any unnecessary updates as it's doing right now
|
||||
useEffect(() => {
|
||||
const offset = 0
|
||||
function handleScroll() {
|
||||
const { scrollTop } = document.documentElement
|
||||
if (scrollTop > offset) setHasScrolled(true)
|
||||
else setHasScrolled(false)
|
||||
}
|
||||
document.addEventListener('scroll', handleScroll)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [])
|
||||
|
||||
usePreventScroll({
|
||||
isDisabled: !(displaySidebar || displayModal),
|
||||
})
|
||||
|
||||
const handleScroll = useCallback(() => {
|
||||
debounce(() => {
|
||||
const offset = 0
|
||||
const { scrollTop } = document.documentElement
|
||||
if (scrollTop > offset) setHasScrolled(true)
|
||||
else setHasScrolled(false)
|
||||
}, 1)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
document.addEventListener('scroll', handleScroll)
|
||||
return () => {
|
||||
document.removeEventListener('scroll', handleScroll)
|
||||
}
|
||||
}, [handleScroll])
|
||||
|
||||
return (
|
||||
<CommerceProvider locale={locale}>
|
||||
<div className={cn(s.root)}>
|
||||
|
22
components/icon/Info.tsx
Normal file
22
components/icon/Info.tsx
Normal file
@ -0,0 +1,22 @@
|
||||
const Info = ({ ...props }) => {
|
||||
return (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width="24"
|
||||
height="24"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
fill="none"
|
||||
shape-rendering="geometricPrecision"
|
||||
{...props}
|
||||
>
|
||||
<circle cx="12" cy="12" r="10" fill="transparent" />
|
||||
<path d="M12 8v4" stroke="currentColor" />
|
||||
<path d="M12 16h.01" stroke="currentColor" />
|
||||
</svg>
|
||||
)
|
||||
}
|
||||
|
||||
export default Info
|
@ -11,3 +11,4 @@ export { default as Moon } from './Moon'
|
||||
export { default as Github } from './Github'
|
||||
export { default as DoubleChevron } from './DoubleChevron'
|
||||
export { default as RightArrow } from './RightArrow'
|
||||
export { default as Info } from './Info'
|
||||
|
@ -19,7 +19,17 @@ const Input: React.FC<Props> = (props) => {
|
||||
return null
|
||||
}
|
||||
|
||||
return <input className={rootClassName} onChange={handleOnChange} {...rest} />
|
||||
return (
|
||||
<input
|
||||
className={rootClassName}
|
||||
onChange={handleOnChange}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck="false"
|
||||
{...rest}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export default Input
|
||||
|
@ -5435,6 +5435,11 @@ lodash.templatesettings@^4.0.0:
|
||||
dependencies:
|
||||
lodash._reinterpolate "^3.0.0"
|
||||
|
||||
lodash.throttle@^4.1.1:
|
||||
version "4.1.1"
|
||||
resolved "https://registry.yarnpkg.com/lodash.throttle/-/lodash.throttle-4.1.1.tgz#c23e91b710242ac70c37f1e1cda9274cc39bf2f4"
|
||||
integrity sha1-wj6RtxAkKscMN/HhzaknTMOb8vQ=
|
||||
|
||||
lodash.toarray@^4.4.0:
|
||||
version "4.4.0"
|
||||
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
||||
|
Loading…
x
Reference in New Issue
Block a user