79 lines
2.3 KiB
TypeScript
Executable File
79 lines
2.3 KiB
TypeScript
Executable File
import {Link, useSearchParams} from 'react-router-dom';
|
|
import {useForm} from 'react-hook-form';
|
|
import {FormTextField} from '../../ui/forms/input-field/text-field/text-field';
|
|
import {Button} from '../../ui/buttons/button';
|
|
import {Form} from '../../ui/forms/form';
|
|
import {LinkStyle} from '../../ui/buttons/external-link';
|
|
import {AuthLayout} from './auth-layout/auth-layout';
|
|
import {
|
|
SendPasswordResetEmailPayload,
|
|
useSendPasswordResetEmail,
|
|
} from '../requests/send-reset-password-email';
|
|
import {Trans} from '../../i18n/trans';
|
|
import {StaticPageTitle} from '../../seo/static-page-title';
|
|
import {useSettings} from '../../core/settings/use-settings';
|
|
|
|
export function ForgotPasswordPage() {
|
|
const {registration} = useSettings();
|
|
|
|
const [searchParams] = useSearchParams();
|
|
const searchParamsEmail = searchParams.get('email') || undefined;
|
|
|
|
const form = useForm<SendPasswordResetEmailPayload>({
|
|
defaultValues: {email: searchParamsEmail},
|
|
});
|
|
const sendEmail = useSendPasswordResetEmail(form);
|
|
|
|
const message = !registration.disable && (
|
|
<Trans
|
|
values={{
|
|
a: parts => (
|
|
<Link className={LinkStyle} to="/register">
|
|
{parts}
|
|
</Link>
|
|
),
|
|
}}
|
|
message="Don't have an account? <a>Sign up.</a>"
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<AuthLayout message={message}>
|
|
<StaticPageTitle>
|
|
<Trans message="Forgot Password" />
|
|
</StaticPageTitle>
|
|
<Form
|
|
form={form}
|
|
onSubmit={payload => {
|
|
sendEmail.mutate(payload);
|
|
}}
|
|
>
|
|
<div className="mb-32 text-sm">
|
|
<Trans message="Enter your email address below and we will send you a link to reset or create your password." />
|
|
</div>
|
|
<FormTextField
|
|
disabled={!!searchParamsEmail}
|
|
className="mb-32"
|
|
name="email"
|
|
type="email"
|
|
autoComplete="off"
|
|
autoCorrect="off"
|
|
spellCheck="false"
|
|
label={<Trans message="Email" />}
|
|
required
|
|
/>
|
|
<Button
|
|
className="block w-full"
|
|
type="submit"
|
|
variant="flat"
|
|
color="primary"
|
|
size="md"
|
|
disabled={sendEmail.isPending}
|
|
>
|
|
<Trans message="Continue" />
|
|
</Button>
|
|
</Form>
|
|
</AuthLayout>
|
|
);
|
|
}
|