98 lines
3 KiB
TypeScript
98 lines
3 KiB
TypeScript
|
import useAccount from '@/utils/hooks/useAccount'
|
||
|
|
import { Alert, Button, FormContainer, FormItem, Input } from '@/components/ui'
|
||
|
|
import { Field, Form, Formik } from 'formik'
|
||
|
|
import * as Yup from 'yup'
|
||
|
|
import { ActionLink } from '@/components/shared'
|
||
|
|
import { ROUTES_ENUM } from '@/constants/route.constant'
|
||
|
|
import { store } from '@/store'
|
||
|
|
import Captcha from '@/components/shared/Captcha'
|
||
|
|
|
||
|
|
type FormSchema = {
|
||
|
|
email: string
|
||
|
|
captchaResponse: string
|
||
|
|
}
|
||
|
|
|
||
|
|
const validationSchema = Yup.object().shape({
|
||
|
|
email: Yup.string().required('Please enter your user email'),
|
||
|
|
captchaResponse: Yup.string().required(),
|
||
|
|
})
|
||
|
|
|
||
|
|
const SendConfirmationCode = () => {
|
||
|
|
const { userName } = store.getState().auth.user
|
||
|
|
|
||
|
|
const { message, error, sendConfirmationCode } = useAccount()
|
||
|
|
|
||
|
|
const onSubmit = async (values: FormSchema, setSubmitting: (isSubmitting: boolean) => void) => {
|
||
|
|
setSubmitting(true)
|
||
|
|
|
||
|
|
await sendConfirmationCode(values)
|
||
|
|
|
||
|
|
setSubmitting(false)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<div className="mb-8">
|
||
|
|
<h3 className="mb-1">Confirm Email</h3>
|
||
|
|
<p>Please enter your email to receive new confirmation code</p>
|
||
|
|
</div>
|
||
|
|
<div>
|
||
|
|
{message && (
|
||
|
|
<Alert showIcon className="mb-4" type="success">
|
||
|
|
{message}
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
{error && (
|
||
|
|
<Alert showIcon className="mb-4" type="danger">
|
||
|
|
{error}
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
<Formik
|
||
|
|
initialValues={{
|
||
|
|
email: userName,
|
||
|
|
captchaResponse: '',
|
||
|
|
}}
|
||
|
|
validationSchema={validationSchema}
|
||
|
|
onSubmit={(values, { setSubmitting }) => {
|
||
|
|
onSubmit(values, setSubmitting)
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{({ touched, errors, isSubmitting, setFieldValue }) => (
|
||
|
|
<Form>
|
||
|
|
<FormContainer>
|
||
|
|
<FormItem
|
||
|
|
label="Email"
|
||
|
|
invalid={errors.email && touched.email}
|
||
|
|
errorMessage={errors.email}
|
||
|
|
>
|
||
|
|
<Field
|
||
|
|
type="email"
|
||
|
|
autoComplete="off"
|
||
|
|
name="email"
|
||
|
|
placeholder="Email"
|
||
|
|
component={Input}
|
||
|
|
/>
|
||
|
|
</FormItem>
|
||
|
|
<Captcha
|
||
|
|
onError={() => setFieldValue('captchaResponse', '')}
|
||
|
|
onExpire={() => setFieldValue('captchaResponse', '')}
|
||
|
|
onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
|
||
|
|
/>
|
||
|
|
<Button block loading={isSubmitting} variant="solid" type="submit">
|
||
|
|
{isSubmitting ? 'Sending code...' : 'Send Code'}
|
||
|
|
</Button>
|
||
|
|
<div className="mt-4 text-center">
|
||
|
|
<span>Back to </span>
|
||
|
|
<ActionLink to={ROUTES_ENUM.account.login}>Login</ActionLink>
|
||
|
|
</div>
|
||
|
|
</FormContainer>
|
||
|
|
</Form>
|
||
|
|
)}
|
||
|
|
</Formik>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SendConfirmationCode
|