feat(loginForm): update content on submit

frontend/app/(auth)/login/components/MagicLinkLogin/hooks/useMagicLinkLogin.ts

@@ -1,38 +1,39 @@
-import { useState } from "react";
+import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { useToast } from "@/lib/hooks";
 
-type UseMagicLinkLoginProps = {
-  email: string;
-  setEmail: (email: string) => void;
-};
-
-export const useMagicLinkLogin = ({
-  email,
-  setEmail,
-}: UseMagicLinkLoginProps): {
-  handleMagicLinkLogin: () => Promise<void>;
-  isPending: boolean;
-} => {
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const useMagicLinkLogin = () => {
   const { supabase } = useSupabase();
-  const [isPending, setIsPending] = useState(false);
   const { t } = useTranslation("login");
   const { publish } = useToast();
 
-  const handleMagicLinkLogin = async () => {
+  const {
+    register,
+    watch,
+    setValue,
+    formState: { isSubmitSuccessful, isSubmitting },
+    handleSubmit,
+    reset,
+  } = useForm<{ email: string }>({
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const email = watch("email");
+
+  const handleMagicLinkLogin = handleSubmit(async (_, ev) => {
+    ev?.preventDefault();
     if (email === "") {
       publish({
         variant: "danger",
         text: t("errorMailMissed"),
       });
-
-      return;
     }
 
-    setIsPending(true);
-
     const { error } = await supabase.auth.signInWithOtp({
       email,
       options: {
@@ -45,16 +46,24 @@ export const useMagicLinkLogin = ({
         variant: "danger",
         text: error.message,
       });
-    } else {
-      publish({
-        variant: "success",
-        text: "Magic link sent successfully if email recognized",
-      });
 
-      setEmail("");
+      throw error; // this error is caught by react-hook-form
     }
-    setIsPending(false);
-  };
 
-  return { handleMagicLinkLogin, isPending };
+    publish({
+      variant: "success",
+      text: "Magic link sent successfully if email recognized",
+    });
+
+    setValue("email", "");
+  });
+
+  return {
+    handleMagicLinkLogin,
+    isSubmitting,
+    register,
+    handleSubmit,
+    isSubmitSuccessful,
+    reset,
+  };
 };

frontend/app/(auth)/login/components/MagicLinkLogin/index.tsx

@@ -3,32 +3,50 @@
 import { useTranslation } from "react-i18next";
 
 import Button from "@/lib/components/ui/Button";
+import Field from "@/lib/components/ui/Field";
+import { emailPattern } from "@/lib/config/patterns";
 
 import { useMagicLinkLogin } from "./hooks/useMagicLinkLogin";
 
-type MaginLinkLoginProps = {
-  email: string;
-  setEmail: (email: string) => void;
-};
+export const MagicLinkLogin = (): JSX.Element => {
+  const {
+    handleMagicLinkLogin,
+    isSubmitting,
+    register,
+    isSubmitSuccessful,
+    reset,
+  } = useMagicLinkLogin();
+  const { t } = useTranslation(["login", "translation"]);
 
-export const MagicLinkLogin = ({
-  email,
-  setEmail,
-}: MaginLinkLoginProps): JSX.Element => {
-  const { handleMagicLinkLogin, isPending } = useMagicLinkLogin({
-    email,
-    setEmail,
-  });
-  const { t } = useTranslation(["login"]);
+  if (isSubmitSuccessful) {
+    return (
+      <>
+        <p>{t("check_your_email", { ns: "login" })} </p>
+        <p>
+          {t("cant_find", { ns: "login" })}{" "}
+          <Button onClick={() => void reset()}>{t("try_again")}</Button>
+        </p>
+      </>
+    );
+  }
 
   return (
-    <Button
-      type="button"
-      onClick={() => void handleMagicLinkLogin()}
-      isLoading={isPending}
-      className="bg-black text-white py-2 font-normal"
-    >
-      {t("magicLink")}
-    </Button>
+    <form className="w-full" onSubmit={(e) => void handleMagicLinkLogin(e)}>
+      <Field
+        {...register("email", {
+          required: true,
+          pattern: emailPattern,
+        })}
+        placeholder={t("email", { ns: "login" })}
+        label={t("email", { ns: "translation" })}
+        inputClassName="py-1 mt-1 mb-3"
+      />
+      <Button
+        isLoading={isSubmitting}
+        className="bg-black text-white py-2 font-normal w-full"
+      >
+        {t("magicLink", { ns: "login" })}
+      </Button>
+    </form>
   );
 };

frontend/app/(auth)/login/hooks/useLogin.ts

@@ -1,13 +1,11 @@
-import { useEffect, useState } from "react";
+import { useEffect } from "react";
 
 import { useSupabase } from "@/lib/context/SupabaseProvider";
 import { redirectToPreviousPageOrChatPage } from "@/lib/helpers/redirectToPreviousPageOrChatPage";
 import { useEventTracking } from "@/services/analytics/june/useEventTracking";
 
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 export const useLogin = () => {
-  const [email, setEmail] = useState("");
-
   const { session } = useSupabase();
 
   const { track } = useEventTracking();
@@ -18,9 +16,4 @@ export const useLogin = () => {
       redirectToPreviousPageOrChatPage();
     }
   }, [session?.user]);
-
-  return {
-    setEmail,
-    email,
-  };
 };

frontend/app/(auth)/login/page.tsx

@@ -5,14 +5,14 @@ import { useTranslation } from "react-i18next";
 
 import { QuivrLogo } from "@/lib/assets/QuivrLogo";
 import { Divider } from "@/lib/components/ui/Divider";
-import Field from "@/lib/components/ui/Field";
 
 import { GoogleLoginButton } from "./components/GoogleLogin";
 import { MagicLinkLogin } from "./components/MagicLinkLogin";
 import { useLogin } from "./hooks/useLogin";
 
 const Main = (): JSX.Element => {
-  const { setEmail, email } = useLogin();
+  useLogin();
+
   const { t } = useTranslation(["translation", "login"]);
 
   return (
@@ -27,16 +27,7 @@ const Main = (): JSX.Element => {
             <span className="text-primary">Quivr</span>
           </p>
           <div className="mt-5 flex flex-col">
-            <Field
-              name="email"
-              type="email"
-              placeholder={t("email")}
-              onChange={(e) => setEmail(e.target.value)}
-              value={email}
-              label="Email"
-              inputClassName="py-1 mt-1 mb-3"
-            />
-            <MagicLinkLogin email={email} setEmail={setEmail} />
+            <MagicLinkLogin />
             <Divider text={t("or")} className="my-3 uppercase" />
             <GoogleLoginButton />
           </div>

frontend/app/contact/components/ContactForm.tsx

@@ -1,15 +1,13 @@
-import React from "react";
 import { SubmitHandler, useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import { LuChevronRight } from "react-icons/lu";
 
 import Button from "@/lib/components/ui/Button";
 import Spinner from "@/lib/components/ui/Spinner";
+import { emailPattern } from "@/lib/config/patterns";
 
 import { usePostContactSales } from "../hooks/usePostContactSales";
 
-const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-
 export const ContactForm = (): JSX.Element => {
   const { t } = useTranslation("contact", { keyPrefix: "form" });
 

frontend/lib/config/patterns.ts

@@ -0,0 +1 @@
+export const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

frontend/public/locales/en/login.json

@@ -4,5 +4,8 @@
     "errorMailMissed": "Please enter your email address",
     "talk_to": "Talk to",
     "restriction_message": "Unpaid users have access to a free and limited demo of Quivr",
-    "email":"Email address"
+    "email":"Email address",
+    "cant_find":"Can't find it ?",
+    "try_again":"Try again",
+    "check_your_email":"We just sent you a Magic link, check your emails and follow the steps."
 }