From 9e709d7f90ddd7d40093749293a9c086f5eee450 Mon Sep 17 00:00:00 2001
From: Sinan <muhammedsinan7749@gmail.com>
Date: Sun, 25 Aug 2024 23:10:54 +0530
Subject: [PATCH] otp page updated

---
 .../signin/(.)otp-verification/page.tsx        | 15 +++++++++++++++
 .../(patient)/signin/otp-verification/page.tsx |  9 +++++++++
 client/app/(patient)/signin/page.tsx           |  4 ++--
 .../components/models/OtpVerificationModel.tsx | 18 +++++++-----------
 client/styles/globals.css                      |  2 +-
 client/types/fromTypes.ts                      |  3 +++
 6 files changed, 37 insertions(+), 14 deletions(-)
 create mode 100644 client/app/(patient)/signin/(.)otp-verification/page.tsx
 create mode 100644 client/app/(patient)/signin/otp-verification/page.tsx

diff --git a/client/app/(patient)/signin/(.)otp-verification/page.tsx b/client/app/(patient)/signin/(.)otp-verification/page.tsx
new file mode 100644
index 00000000..37b30d22
--- /dev/null
+++ b/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;
diff --git a/client/app/(patient)/signin/otp-verification/page.tsx b/client/app/(patient)/signin/otp-verification/page.tsx
new file mode 100644
index 00000000..e21bd5d6
--- /dev/null
+++ b/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
\ No newline at end of file
diff --git a/client/app/(patient)/signin/page.tsx b/client/app/(patient)/signin/page.tsx
index 613bdaf1..6a34e448 100644
--- a/client/app/(patient)/signin/page.tsx
+++ b/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>
diff --git a/client/components/models/OtpVerificationModel.tsx b/client/components/models/OtpVerificationModel.tsx
index cc0461fc..f906d513 100644
--- a/client/components/models/OtpVerificationModel.tsx
+++ b/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>
    );
 };
diff --git a/client/styles/globals.css b/client/styles/globals.css
index fc77e3bd..c9b641d4 100644
--- a/client/styles/globals.css
+++ b/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 {
diff --git a/client/types/fromTypes.ts b/client/types/fromTypes.ts
index 76416fca..958b16a4 100644
--- a/client/types/fromTypes.ts
+++ b/client/types/fromTypes.ts
@@ -40,4 +40,7 @@ export interface OtpFromProps {
 
 export type OptModelProps = {
    returnRoute:string;
+   timer:number;
+   handleResend:()=>void;
+   handleVerify:(e:FormEvent)=>void;
 }
\ No newline at end of file