feat: resend login magic code (#291)

* feat: resend login code on signing page after 30 seconds

* feat: handling error on code send

* refractor: isResendDisabled varible for resend button

* dev: timer count-down hook

* refractor: using new timer hook in sign in page

apps/app/components/account/email-code-form.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import { useForm } from "react-hook-form";
 // ui
 import { CheckCircleIcon } from "@heroicons/react/20/solid";
@@ -6,6 +6,7 @@ import { Button, Input } from "components/ui";
 // services
 import authenticationService from "services/authentication.service";
 import useToast from "hooks/use-toast";
+import useTimer from "hooks/use-timer";
 // icons
 
 // types
@@ -17,12 +18,19 @@ type EmailCodeFormValues = {
 
 export const EmailCodeForm = ({ onSuccess }: any) => {
   const [codeSent, setCodeSent] = useState(false);
+  const [codeResent, setCodeResent] = useState(false);
+  const [isCodeResending, setIsCodeResending] = useState(false);
+  const [errorResendingCode, setErrorResendingCode] = useState(false);
+
   const { setToastAlert } = useToast();
+  const { timer: resendCodeTimer, setTimer: setResendCodeTimer } = useTimer();
+
   const {
     register,
     handleSubmit,
     setError,
     setValue,
+    getValues,
     formState: { errors, isSubmitting, isValid, isDirty },
   } = useForm<EmailCodeFormValues>({
     defaultValues: {
@@ -34,7 +42,11 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
     reValidateMode: "onChange",
   });
 
+  const isResendDisabled =
+    resendCodeTimer > 0 || isCodeResending || isSubmitting || errorResendingCode;
+
   const onSubmit = async ({ email }: EmailCodeFormValues) => {
+    setErrorResendingCode(false);
     await authenticationService
       .emailCode({ email })
       .then((res) => {
@@ -42,7 +54,12 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
         setCodeSent(true);
       })
       .catch((err) => {
-        console.log(err);
+        setErrorResendingCode(true);
+        setToastAlert({
+          title: "Oops!",
+          type: "error",
+          message: err?.error,
+        });
       });
   };
 
@@ -66,10 +83,16 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
       });
   };
 
+  const emailOld = getValues("email");
+
+  useEffect(() => {
+    setErrorResendingCode(false);
+  }, [emailOld]);
+
   return (
     <>
       <form className="mt-5 space-y-5">
-        {codeSent && (
+        {(codeSent || codeResent) && (
           <div className="rounded-md bg-green-50 p-4">
             <div className="flex">
               <div className="flex-shrink-0">
@@ -77,7 +100,9 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               </div>
               <div className="ml-3">
                 <p className="text-sm font-medium text-green-800">
-                  Please check your mail for code.
+                  {codeResent
+                    ? "Please check your mail for new code."
+                    : "Please check your mail for code."}
                 </p>
               </div>
             </div>
@@ -114,15 +139,33 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
               error={errors.token}
               placeholder="Enter code"
             />
-            {/* <button
+            <button
               type="button"
-              className="text-xs outline-none hover:text-theme cursor-pointer"
+              className={`text-xs mt-5 w-full flex justify-end outline-none hover:text-theme cursor-pointer ${
+                resendCodeTimer > 0 ? "text-gray-400" : "text-theme"
+              } `}
               onClick={() => {
-                handleSubmit(onSubmit);
+                setIsCodeResending(true);
+                onSubmit({ email: getValues("email") }).then(() => {
+                  setCodeResent(true);
+                  setIsCodeResending(false);
+                  setResendCodeTimer(30);
+                });
               }}
+              disabled={isResendDisabled}
             >
-              Resend code
+              {resendCodeTimer > 0 ? (
-            </button> */}
+                <p className="text-right">
+                  Didn{"'"}t receive code? Get new code in {resendCodeTimer} seconds.
+                </p>
+              ) : isCodeResending ? (
+                "Sending code..."
+              ) : errorResendingCode ? (
+                "Please try again later"
+              ) : (
+                "Resend code"
+              )}
+            </button>
           </div>
         )}
         <div>
@@ -139,7 +182,11 @@ export const EmailCodeForm = ({ onSuccess }: any) => {
             <Button
               type="submit"
               className="w-full text-center"
-              onClick={handleSubmit(onSubmit)}
+              onClick={() => {
+                handleSubmit(onSubmit)().then(() => {
+                  setResendCodeTimer(30);
+                });
+              }}
               disabled={isSubmitting || (!isValid && isDirty)}
             >
               {isSubmitting ? "Sending code..." : "Send code"}

apps/app/hooks/use-timer.tsx

@@ -0,0 +1,19 @@
+import { useState, useEffect } from "react";
+
+const TIMER = 30;
+
+const useTimer = (initialValue: number = TIMER) => {
+  const [timer, setTimer] = useState(initialValue);
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      setTimer((prev) => prev - 1);
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return { timer, setTimer };
+};
+
+export default useTimer;