327df0c
import { MailCheck } from 'lucide-react'
import { useNavigate } from 'react-router-dom'
import { ResetSentActions, useResendResetEmail } from '@/features/request-password-reset'
import { routes } from '@/shared/config'
import { t } from '@/shared/i18n'
import { Button, FlowRequired, Heading, Link } from '@/shared/ui'
import { AuthPanel } from '@/widgets/auth-panel'
export function ResetSentPage() {
const navigate = useNavigate()
const model = useResendResetEmail()
if (!model.email)
return (
<FlowRequired
icon={MailCheck}
title={t('resetSent.guardTitle')}
description={t('resetSent.guardDescription')}
actionLabel={t('resetSent.guardAction')}
actionTo={routes.forgotPassword}
replace
/>
)
return (
<AuthPanel
heading={<Heading title={t('resetSent.title')} description={t('resetSent.description')} icon={MailCheck} />}
notice={model.task.notice}
footer={
<div className="mt-6 flex items-center justify-center gap-1 text-xs">
<span className="text-muted">{t('resetSent.wrongEmail')}</span>
<Link to={routes.forgotPassword}>{t('resetSent.changeEmail')}</Link>
</div>
}
>
<p className="mb-6 text-center font-latin text-sm font-medium wrap-anywhere">{model.email}</p>
<p className="text-center text-xs leading-[1.65] text-muted">{t('resetSent.hint')}</p>
<div className="mt-6">
<Button type="button" onClick={() => navigate(routes.login)}>
{t('common.backToLogin')}
</Button>
</div>
<ResetSentActions model={model} />
</AuthPanel>
)
}