57 lines
1.6 KiB
TypeScript
57 lines
1.6 KiB
TypeScript
|
import { useQuery } from '@tanstack/react-query'
|
||
|
|
import { Alert, Button } from '@/components/ui'
|
||
|
|
import { useNavigate, useParams } from 'react-router-dom'
|
||
|
|
import useAccount from '@/utils/hooks/useAccount'
|
||
|
|
import { useLocalization } from '@/utils/hooks/useLocalization'
|
||
|
|
import { Helmet } from 'react-helmet'
|
||
|
|
import { ROUTES_ENUM } from '@/routes/route.constant'
|
||
|
|
import { APP_NAME } from '@/constants/app.constant'
|
||
|
|
|
||
|
|
const VerifyConfirmationCode = () => {
|
||
|
|
const { userId, token } = useParams()
|
||
|
|
const { message, error, verifyConfirmationCode } = useAccount()
|
||
|
|
const navigate = useNavigate()
|
||
|
|
const { translate } = useLocalization()
|
||
|
|
|
||
|
|
useQuery({
|
||
|
|
queryKey: ['verifyConfirmationCode', userId, token],
|
||
|
|
queryFn: () => verifyConfirmationCode(userId!, token!),
|
||
|
|
retry: false,
|
||
|
|
refetchOnWindowFocus: false,
|
||
|
|
})
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Helmet
|
||
|
|
titleTemplate={`%s | ${APP_NAME}`}
|
||
|
|
title={translate('::' + 'Abp.Account.VerifyConfirmationCode')}
|
||
|
|
defaultTitle={APP_NAME}
|
||
|
|
></Helmet>
|
||
|
|
|
||
|
|
<div>
|
||
|
|
{message && (
|
||
|
|
<Alert showIcon className="mb-4" type="success">
|
||
|
|
{message}
|
||
|
|
</Alert>
|
||
|
|
)}
|
||
|
|
{error && (
|
||
|
|
<div>
|
||
|
|
<Alert showIcon className="mb-4" type="danger">
|
||
|
|
{error}
|
||
|
|
</Alert>
|
||
|
|
<Button
|
||
|
|
block
|
||
|
|
variant="solid"
|
||
|
|
onClick={() => navigate(ROUTES_ENUM.authenticated.sendConfirmationCode)}
|
||
|
|
>
|
||
|
|
{translate('::Abp.Account.VerifyConfirmationCode')}
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default VerifyConfirmationCode
|