useVerifyUserEmail()

import { useState } from 'react';

import { Form, FormControl, FormField, FormItem, FormMessage } from '@/components/ui/form';
import { InputOTP, InputOTPGroup, InputOTPSlot } from '@/components/ui/input-otp';
import { REGEXP_ONLY_DIGITS_AND_CHARS } from 'input-otp';
import { Button } from '@/components/ui/button';
import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';

import { HttpError } from '@locai1/iam-javascript';
import { useVerifyUserEmail, useSession } from '@locai1/iam-react';

const formSchema = z.object({
  code: z.string().min(6, {
    message: "Your one-time password must be 6 characters.",
  }),
})

type FormSchemaType = z.infer<typeof formSchema>;

type VerifyFormProps = {
  onComplete: () => void;
  email: string;
};

export const VerifyEmailComponent = ({ onComplete, email }: VerifyFormProps) => {
  const { session } = useSession();
  const [error, setError] = useState<HttpError>();

  const { verifyUserEmail } = useVerifyUserEmail({
    onError: setError,
    onSuccess: onComplete,
  });

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

  const handleSubmit = form.handleSubmit(async (values: FormSchemaType) => {
    if (!session) {
      return;
    }
    verifyUserEmail({
      userId: session.userId,
      verificationCode: values.code,
    });
  });

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit}>
        <FormField
          control={form.control}
          name="code"
          render={({ field }) => (
            <FormItem>
              <FormControl>
                <InputOTP
                  maxLength={6}
                  pattern={REGEXP_ONLY_DIGITS_AND_CHARS}
                  {...field}
                >
                  <InputOTPGroup>
                    <InputOTPSlot index={0} />
                    <InputOTPSlot index={1} />
                    <InputOTPSlot index={2} />
                    <InputOTPSlot index={3} />
                    <InputOTPSlot index={4} />
                    <InputOTPSlot index={5} />
                  </InputOTPGroup>
                </InputOTP>
              </FormControl>
              <FormMessage />
            </FormItem>
          )}
        />
        {error?.message}
        <Button type="submit">
          Create an account
        </Button>
      </form>
    </Form>
  );
};