otp page updated

client/app/(patient)/signin/(.)otp-verification/page.tsx

@@ -0,0 +1,15 @@
+'use client'
+import { FormEvent } from "react";
+import OtpVerificationModel from "@/components/models/OtpVerificationModel";
+
+const OptInterceptor = () =>{
+  const handleVerify = (e:FormEvent)=>{
+    e.preventDefault();
+  };
+  const handleResend = ()=>{}
+  return  (
+    <OtpVerificationModel returnRoute="/signin" key={12} timer={30} handleResend={handleResend} handleVerify={handleVerify} />
+  );
+}
+
+export default OptInterceptor;

client/app/(patient)/signin/otp-verification/page.tsx

@@ -0,0 +1,9 @@
+import React from 'react'
+
+const OtpVerificationPage = () => {
+  return (
+    <div>OtpVerificationPage</div>
+  )
+}
+
+export default OtpVerificationPage

client/app/(patient)/signin/page.tsx

@@ -23,8 +23,8 @@ const SignIn = () => {
                   <p className="justify-items-end text-dark-600 xl:text-left">
                      © 2024 AVM Ayurveda&apos;s
                   </p>
-                  <Link href={"/staff/login"} className="text-green-500">
-                     Staff
+                  <Link href={"/signin/otp-verification"} className="text-green-500">
+                     OTP
                   </Link>
                </div>
             </div>

client/components/models/OtpVerificationModel.tsx

@@ -19,7 +19,7 @@ import {
 import { Otptimer } from "otp-timer-ts";
 import { OptModelProps } from "@/types/fromTypes";
 
-const OtpVerificationModel = ({ returnRoute }: OptModelProps) => {
+const OtpVerificationModel = ({ returnRoute,handleResend,handleVerify,timer }: OptModelProps) => {
    const router = useRouter();
    const [open, setOpen] = useState(true);
    const [otp, setOtp] = useState("");
@@ -30,16 +30,11 @@ const OtpVerificationModel = ({ returnRoute }: OptModelProps) => {
       router.push(returnRoute);
    };
 
-   const handleResend = () => {
-      setOpen(false);
-      setTimeout(() => {
-         setOpen(true);
-      }, 1000);
-   };
 
    return (
-      <AlertDialog open={open} onOpenChange={setOpen}>
-         <AlertDialogContent className="shad-alert-dialog">
+      <AlertDialog open={open} onOpenChange={setOpen} >
+        <form onSubmit={(e)=>handleVerify(e)}>
+        <AlertDialogContent className="shad-alert-dialog" >
             <AlertDialogHeader>
                <AlertDialogTitle className="flex items-start justify-between">
                   <p className="sub-header">OTP Verification</p>
@@ -78,14 +73,15 @@ const OtpVerificationModel = ({ returnRoute }: OptModelProps) => {
                )}
             </div>
             <div>
-               <Otptimer minutes={0} seconds={30} onResend={handleResend} />
+               <Otptimer seconds={timer} onResend={handleResend} />
             </div>
             <AlertDialogFooter>
-               <AlertDialogAction className="shad-primary-btn w-full">
+               <AlertDialogAction type="submit" className="shad-primary-btn w-full">
                   Verify OTP
                </AlertDialogAction>
             </AlertDialogFooter>
          </AlertDialogContent>
+        </form>
       </AlertDialog>
    );
 };

client/styles/globals.css

@@ -259,7 +259,7 @@
    }
 
    .shad-alert-dialog {
-      @apply space-y-5 bg-dark-400 border-dark-500 outline-none !important;
+      @apply space-y-5 bg-dark-400 border-dark-500 outline-none backdrop-opacity-10 !important;
    }
 
    .shad-sheet-content button {

client/types/fromTypes.ts

@@ -40,4 +40,7 @@ export interface OtpFromProps {
 
 export type OptModelProps = {
    returnRoute:string;
+   timer:number;
+   handleResend:()=>void;
+   handleVerify:(e:FormEvent)=>void;
 }