108 lines
3.5 KiB
TypeScript
108 lines
3.5 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 '@/routes/route.constant'
|
|
import { store } from '@/store'
|
|
import Captcha from '@/components/shared/Captcha'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import { Helmet } from 'react-helmet'
|
|
|
|
type FormSchema = {
|
|
email: string
|
|
captchaResponse: string
|
|
}
|
|
|
|
const validationSchema = Yup.object().shape({
|
|
email: Yup.string().required(),
|
|
captchaResponse: Yup.string().required(),
|
|
})
|
|
|
|
const SendConfirmationCode = () => {
|
|
const { userName } = store.getState().auth.user
|
|
const { translate } = useLocalization()
|
|
|
|
const { message, error, sendConfirmationCode } = useAccount()
|
|
|
|
const onSubmit = async (values: FormSchema, setSubmitting: (isSubmitting: boolean) => void) => {
|
|
setSubmitting(true)
|
|
|
|
await sendConfirmationCode(values)
|
|
|
|
setSubmitting(false)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Helmet
|
|
titleTemplate="%s | Erp Platform"
|
|
title={translate('::' + 'Abp.Account.SendConfirmationCode')}
|
|
defaultTitle="Erp Platform"
|
|
></Helmet>
|
|
|
|
<div className="mb-8">
|
|
<h3 className="mb-1">{translate('::Abp.Account.SendConfirmationCode')}</h3>
|
|
<p>{translate('::Abp.Account.SendConfirmationCode.Message')}</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={translate('::Abp.Account.EmailAddress')}
|
|
invalid={errors.email && touched.email}
|
|
errorMessage={errors.email}
|
|
>
|
|
<Field
|
|
type="email"
|
|
autoComplete="off"
|
|
name="email"
|
|
placeholder={translate('::Abp.Account.EmailAddress')}
|
|
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>{translate('::Abp.Account.Backto')} </span>
|
|
<ActionLink to={ROUTES_ENUM.authenticated.login}>
|
|
{translate('::Abp.Account.SignIn')}
|
|
</ActionLink>
|
|
</div>
|
|
</FormContainer>
|
|
</Form>
|
|
)}
|
|
</Formik>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default SendConfirmationCode
|