Viewing File: /home/markqprx/iniasli.pro/client/auth/ui/forgot-password-page.tsx

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>
  );
}