Merge pull request #53 from kumaradarsh2/feature/resend-otp-button

Author: rahmlad-aramide

src/components/features/signup/resend-otp-button.tsx

@@ -1,24 +1,34 @@
 "use client";
 
+import { AxiosError } from "axios";
 import { useState, useEffect } from "react";
+import { toast } from "sonner";
+import { Loader2 } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
-
+import { axiosInstance } from "@/lib/axios";
 import { cn } from "@/lib/utils";
 
-export const ResendOTPButton = () => {
+// Define the props the component will accept
+interface ResendOTPButtonProps {
+  email: string;
+}
+
+export const ResendOTPButton = ({ email }: ResendOTPButtonProps) => {
   const [timer, setTimer] = useState(30);
-  const [isDisabled, setIsDisabled] = useState(true);
+  const [isCoolingDown, setIsCoolingDown] = useState(true);
+  const [isLoading, setIsLoading] = useState(false);
 
+  // This useEffect handles the countdown timer
   useEffect(() => {
     let interval: NodeJS.Timeout;
 
-    if (isDisabled) {
+    if (isCoolingDown) {
       interval = setInterval(() => {
         setTimer((prev) => {
           if (prev <= 1) {
             clearInterval(interval);
-            setIsDisabled(false);
+            setIsCoolingDown(false);
             return 0;
           }
           return prev - 1;
@@ -27,21 +37,52 @@ export const ResendOTPButton = () => {
     }
 
     return () => clearInterval(interval);
-  }, [isDisabled]);
+  }, [isCoolingDown]);
+
+  // This is the new function to handle the API call
+  const handleResend = async () => {
+    setIsLoading(true);
+    try {
+      // Make the POST request to the backend
+      await axiosInstance.post("/resend_otp", { email });
+
+      // On success, show a notification and restart the timer
+      toast.success("A new OTP has been sent to your email.");
+      setTimer(30);
+      setIsCoolingDown(true);
+    } catch (error) {
+      // On failure, show an error notification
+      let errorMessage = "Failed to resend OTP. Please try again.";
 
-  const handleResend = () => {
-    setTimer(30);
-    setIsDisabled(true);
+      // Check if the error is an Axios error
+      if (error instanceof AxiosError && error.response?.data?.message) {
+        errorMessage = error.response.data.message;
+      }
+
+      toast.error(errorMessage);
+    } finally {
+      setIsLoading(false);
+    }
   };
 
+  const isDisabled = isCoolingDown || isLoading;
+
   return (
     <Button
       variant="link"
       onClick={handleResend}
       disabled={isDisabled}
-      className={cn(isDisabled ? "cursor-not-allowed" : "cursor-pointer")}
+      className={cn(
+        "p-0 h-auto font-normal", // Styling to make it look like a simple link
+        isDisabled ? "cursor-not-allowed" : "cursor-pointer",
+      )}
     >
-      {isDisabled ? `Resend in ${timer}s` : "Resend OTP"}
+      {isLoading && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
+      {isLoading
+        ? "Sending..."
+        : isCoolingDown
+          ? `Resend OTP in ${timer}s`
+          : "Resend OTP"}
     </Button>
   );
 };

src/components/features/signup/verify-account-form.tsx

@@ -22,6 +22,7 @@ import {
   InputOTPGroup,
   InputOTPSlot,
 } from "@/components/ui/input-otp";
+import { ResendOTPButton } from "./resend-otp-button"; // Import the button
 
 import { REGEXP_ONLY_DIGITS } from "input-otp";
 
@@ -62,35 +63,15 @@ export const VerifyAccountForm = () => {
     },
   });
 
-  async function onSubmit(data: z.infer<typeof VerifyAccountFormSchema>) {
-    try {
-      setIsOtpIncorrect(false);
-
-      const response = await fetch(
-        "https://naija-nutri-hub.azurewebsites.net/verify",
-        {
-          method: "POST",
-          headers: { "Content-Type": "application/json" },
-          body: JSON.stringify({
-            email: email,
-            otp: data.code,
-          }),
-        },
-      );
-
-      const result = await response.json();
-
-      if (response.ok) {
-        toast.success("Account verified successfully!");
-        router.push("/login");
-      } else {
-        console.error(result);
-        setIsOtpIncorrect(true);
-        toast.error(result.message || "Invalid or expired OTP.");
-      }
-    } catch (error) {
-      console.error("Verification error:", error);
-      toast.error("Something went wrong. Please try again.");
+  function onSubmit(data: z.infer<typeof VerifyAccountFormSchema>) {
+    // This part should also be replaced with a real API call in a future task
+    const CORRECT_OTP = "123456";
+
+    if (data.code !== CORRECT_OTP) {
+      setIsOtpIncorrect(true);
+      // This resets the form after an incorrect attempt
+      form.reset({ code: "" });
+      return;
     }
   }
 
@@ -170,7 +151,11 @@ export const VerifyAccountForm = () => {
               <p>Security code doesn&apos;t match</p>
             </div>
           ) : (
-            <p className="text-sm">Resend code by Email</p>
+            // Replaced the static text with the ResendOTPButton component
+            <div className="text-sm text-muted-foreground flex items-center justify-center gap-1">
+              <span>Didn&apos;t receive code?</span>
+              <ResendOTPButton email={email} />
+            </div>
           )}
 
           <Button type="submit" className="w-full h-11 text-base">