useRequestForgotPasswordCodeByEmail()

import { useState } from 'react';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

import { HttpError } from '@locai1/iam-javascript';
import { useRequestForgotPasswordCodeByEmail } from '@locai1/iam-react';

import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form';
import { Input } from '@/components/ui/input';
import { Button } from '@/components/ui/button';

const formSchema = z.object({
  email: z.string().min(1),
});

type FormSchemaType = z.infer<typeof formSchema>;

type RequestCodeFormProps = {
  onComplete: (email: string) => void;
  onSignInClick: () => void;
  email?: string;
};

export const RequestCodeComponent = ({ onComplete, email = '' }: RequestCodeFormProps) => {
  const [error, setError] = useState<HttpError | Error>();

  const resetPasswordUrl = typeof window !== 'undefined' ?
    `${window.location.origin}/forgot-password?code={{code}}` :
    `/forgot-password?code={{code}}`;

  const form = useForm<FormSchemaType>({
    resolver: zodResolver(formSchema),
    defaultValues: {
      email,
    },
  });

  const { requestResetCodeByEmail } = useRequestForgotPasswordCodeByEmail({
    onError: setError,
    onSuccess: () => {
      onComplete(form.getValues().email);
    },
    resetPasswordUrl,
  });

  const handleSubmit = form.handleSubmit(async (values: FormSchemaType) => {
    setError(undefined);
    requestResetCodeByEmail(values.email);
  });

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit}>
        <FormField
          control={form.control}
          name="email"
          render={({ field }) => (
            <FormItem>
              <FormLabel>E-mail</FormLabel>
              <FormControl>
                <Input type="email" placeholder="example@locai.ae" required {...field} />
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {error?.message}
        <Button type="submit">Continue</Button>
      </form>
    </Form>
  );
};