142 lines
4.8 KiB
TypeScript
142 lines
4.8 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 { TenantSelector } from '@/components/shared'
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
|
import { store, useStoreActions } from '@/store'
|
|
import Captcha from '@/components/shared/Captcha'
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
|
import PageTitle from '@/components/shared/PageTitle'
|
|
import { TurnstileInstance } from '@marsidev/react-turnstile'
|
|
import { useEffect, useRef, useState } from 'react'
|
|
import ActionLink from '@/components/shared/ActionLink'
|
|
|
|
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 { setWarning } = useStoreActions((actions) => actions.base.messages)
|
|
const captchaRef = useRef<TurnstileInstance>(null)
|
|
const [captchaKey, setCaptchaKey] = useState(0)
|
|
|
|
useEffect(() => {
|
|
setWarning('')
|
|
}, [setWarning])
|
|
|
|
const onSubmit = async (
|
|
values: FormSchema,
|
|
setSubmitting: (isSubmitting: boolean) => void,
|
|
setFieldValue: (field: string, value: string) => void,
|
|
) => {
|
|
setSubmitting(true)
|
|
|
|
try {
|
|
const result = await sendConfirmationCode(values)
|
|
if (result?.status !== 'failed') {
|
|
setWarning('')
|
|
}
|
|
} finally {
|
|
setFieldValue('captchaResponse', '')
|
|
captchaRef.current?.reset()
|
|
setCaptchaKey((key) => key + 1)
|
|
setSubmitting(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<PageTitle title={translate('::' + 'Abp.Account.SendConfirmationCode')} />
|
|
|
|
{!message && (
|
|
<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>
|
|
)}
|
|
{message ? (
|
|
<div className="mt-4 text-center">
|
|
<span>{translate('::Abp.Account.Backto')} </span>
|
|
<ActionLink to={ROUTES_ENUM.authenticated.login}>
|
|
{translate('::Abp.Account.SignIn')}
|
|
</ActionLink>
|
|
</div>
|
|
) : (
|
|
<>
|
|
<TenantSelector />
|
|
<Formik
|
|
initialValues={{
|
|
email: userName,
|
|
captchaResponse: '',
|
|
}}
|
|
validationSchema={validationSchema}
|
|
onSubmit={(values, { setSubmitting, setFieldValue }) => {
|
|
onSubmit(values, setSubmitting, setFieldValue)
|
|
}}
|
|
>
|
|
{({ 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
|
|
key={captchaKey}
|
|
ref={captchaRef}
|
|
onError={() => setFieldValue('captchaResponse', '')}
|
|
onExpire={() => setFieldValue('captchaResponse', '')}
|
|
onSuccess={(token: string) => setFieldValue('captchaResponse', token)}
|
|
/>
|
|
<Button block loading={isSubmitting} variant="solid" type="submit">
|
|
{isSubmitting ? translate('::SendingCode') : translate('::SendCode')}
|
|
</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
|