forked from crowetic/commerce
WIP Forgot Password
This commit is contained in:
parent
4314c5270b
commit
35355e4b2b
89
components/auth/ForgotPassword.tsx
Normal file
89
components/auth/ForgotPassword.tsx
Normal file
@ -0,0 +1,89 @@
|
|||||||
|
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'
|
||||||
|
|
||||||
|
interface Props {}
|
||||||
|
|
||||||
|
const ForgotPassword: FC<Props> = () => {
|
||||||
|
// Form State
|
||||||
|
const [email, setEmail] = 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 () => {
|
||||||
|
if (!dirty && !disabled) {
|
||||||
|
setDirty(true)
|
||||||
|
handleValidation()
|
||||||
|
}
|
||||||
|
|
||||||
|
// try {
|
||||||
|
// setLoading(true)
|
||||||
|
// setMessage('')
|
||||||
|
// await signup({
|
||||||
|
// email,
|
||||||
|
// })
|
||||||
|
// setLoading(false)
|
||||||
|
// closeModal()
|
||||||
|
// } catch ({ errors }) {
|
||||||
|
// setMessage(errors[0].message)
|
||||||
|
// setLoading(false)
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
const handleValidation = useCallback(() => {
|
||||||
|
// Unable to send form unless fields are valid.
|
||||||
|
if (dirty) {
|
||||||
|
setDisabled(!validate(email))
|
||||||
|
}
|
||||||
|
}, [email, dirty])
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
handleValidation()
|
||||||
|
}, [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-4">
|
||||||
|
{message && (
|
||||||
|
<div className="text-red border border-red p-3">{message}</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
<Input placeholder="Email" onChange={setEmail} />
|
||||||
|
<div className="pt-2 w-full flex flex-col">
|
||||||
|
<Button
|
||||||
|
variant="slim"
|
||||||
|
onClick={() => handleSignup()}
|
||||||
|
loading={loading}
|
||||||
|
disabled={disabled}
|
||||||
|
>
|
||||||
|
Recover Password
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span className="pt-3 text-center text-sm">
|
||||||
|
<span className="text-accents-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>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default ForgotPassword
|
@ -1,33 +0,0 @@
|
|||||||
import { Layout } from '@components/core'
|
|
||||||
import { Logo, Modal, Button } from '@components/ui'
|
|
||||||
export default function ForgotPassword() {
|
|
||||||
return (
|
|
||||||
<div className="pb-20">
|
|
||||||
<Modal onClose={() => {}}>
|
|
||||||
<div className="h-80 w-80 flex flex-col justify-between py-3 px-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"
|
|
||||||
className="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"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<Button variant="slim">Recover Password</Button>
|
|
||||||
<span className="pt-3 text-center text-sm">
|
|
||||||
<span className="text-accents-7">Don't have an account?</span>
|
|
||||||
{` `}
|
|
||||||
<a className="text-accent-9 font-bold hover:underline cursor-pointer">
|
|
||||||
Sign Up
|
|
||||||
</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Modal>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
ForgotPassword.Layout = Layout
|
|
Loading…
x
Reference in New Issue
Block a user