forked from crowetic/commerce
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 { Logo, Modal, Button, Input } from '@components/ui'
|
||||||
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'
|
||||||
@ -39,7 +39,7 @@ const LoginView: FC<Props> = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleValidation = () => {
|
const handleValidation = useCallback(() => {
|
||||||
// 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)
|
||||||
|
|
||||||
@ -47,11 +47,11 @@ const LoginView: FC<Props> = () => {
|
|||||||
if (dirty) {
|
if (dirty) {
|
||||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
||||||
}
|
}
|
||||||
}
|
}, [email, password, dirty])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleValidation()
|
handleValidation()
|
||||||
}, [email, password, dirty])
|
}, [handleValidation])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-80 flex flex-col justify-between p-3">
|
<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 { Logo, Button, Input } from '@components/ui'
|
||||||
import useSignup from '@lib/bigcommerce/use-signup'
|
import useSignup from '@lib/bigcommerce/use-signup'
|
||||||
import { useUI } from '@components/ui/context'
|
|
||||||
import { validate } from 'email-validator'
|
|
||||||
|
|
||||||
interface Props {}
|
interface Props {}
|
||||||
|
|
||||||
@ -43,7 +44,7 @@ const SignUpView: FC<Props> = () => {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleValidation = () => {
|
const handleValidation = useCallback(() => {
|
||||||
// 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)
|
||||||
|
|
||||||
@ -51,18 +52,18 @@ const SignUpView: FC<Props> = () => {
|
|||||||
if (dirty) {
|
if (dirty) {
|
||||||
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
setDisabled(!validate(email) || password.length < 7 || !validPassword)
|
||||||
}
|
}
|
||||||
}
|
}, [email, password, dirty])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
handleValidation()
|
handleValidation()
|
||||||
}, [email, password, dirty])
|
}, [handleValidation])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-80 flex flex-col justify-between p-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-4">
|
||||||
{message && (
|
{message && (
|
||||||
<div className="text-red border border-red p-3">{message}</div>
|
<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="Last Name" onChange={setLastName} />
|
||||||
<Input placeholder="Email" onChange={setEmail} />
|
<Input placeholder="Email" onChange={setEmail} />
|
||||||
<Input placeholder="Password" onChange={setPassword} />
|
<Input placeholder="Password" onChange={setPassword} />
|
||||||
<Button
|
<span className="text-accents-8">
|
||||||
variant="slim"
|
<Info
|
||||||
onClick={() => handleSignup()}
|
width="20"
|
||||||
loading={loading}
|
height="20"
|
||||||
disabled={disabled}
|
className="inline-block mr-1 text-accents-8"
|
||||||
>
|
/>
|
||||||
Sign Up
|
<strong>Info</strong>: Password must be longer than 7 chars and
|
||||||
</Button>
|
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="pt-3 text-center text-sm">
|
||||||
<span className="text-accents-7">Do you have an account?</span>
|
<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 cn from 'classnames'
|
||||||
import { useRouter } from 'next/router'
|
import { useRouter } from 'next/router'
|
||||||
import type { Page } from '@lib/bigcommerce/api/operations/get-all-pages'
|
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 { useUI } from '@components/ui/context'
|
||||||
import { usePreventScroll } from '@react-aria/overlays'
|
import { usePreventScroll } from '@react-aria/overlays'
|
||||||
import s from './Layout.module.css'
|
import s from './Layout.module.css'
|
||||||
|
import debounce from 'lodash.debounce'
|
||||||
interface Props {
|
interface Props {
|
||||||
pageProps: {
|
pageProps: {
|
||||||
pages?: Page[]
|
pages?: Page[]
|
||||||
@ -29,26 +29,26 @@ const Layout: FC<Props> = ({ children, pageProps }) => {
|
|||||||
const [hasScrolled, setHasScrolled] = useState(false)
|
const [hasScrolled, setHasScrolled] = useState(false)
|
||||||
const { locale = 'en-US' } = useRouter()
|
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({
|
usePreventScroll({
|
||||||
isDisabled: !(displaySidebar || displayModal),
|
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 (
|
return (
|
||||||
<CommerceProvider locale={locale}>
|
<CommerceProvider locale={locale}>
|
||||||
<div className={cn(s.root)}>
|
<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 Github } from './Github'
|
||||||
export { default as DoubleChevron } from './DoubleChevron'
|
export { default as DoubleChevron } from './DoubleChevron'
|
||||||
export { default as RightArrow } from './RightArrow'
|
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 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
|
export default Input
|
||||||
|
@ -5435,6 +5435,11 @@ lodash.templatesettings@^4.0.0:
|
|||||||
dependencies:
|
dependencies:
|
||||||
lodash._reinterpolate "^3.0.0"
|
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:
|
lodash.toarray@^4.4.0:
|
||||||
version "4.4.0"
|
version "4.4.0"
|
||||||
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
resolved "https://registry.yarnpkg.com/lodash.toarray/-/lodash.toarray-4.4.0.tgz#24c4bfcd6b2fba38bfd0594db1179d8e9b656561"
|
||||||
|
Loading…
x
Reference in New Issue
Block a user