From ddf6f1d848fb276f7b8dc426f32cf279209b0ee9 Mon Sep 17 00:00:00 2001
From: Sinan <muhammedsinan7749@gmail.com>
Date: Sat, 31 Aug 2024 15:09:12 +0530
Subject: [PATCH] forget password model added

---
 client/app/page.tsx                           | 20 +++--
 client/components/common/SubmitButton.tsx     | 20 +----
 .../components/forms/patient/SigninForm.tsx   | 14 ++-
 .../components/models/ForgetPasswordModel.tsx | 90 +++++++++++++++++++
 4 files changed, 113 insertions(+), 31 deletions(-)
 create mode 100644 client/components/models/ForgetPasswordModel.tsx

diff --git a/client/app/page.tsx b/client/app/page.tsx
index f7b187d9..4377bf00 100644
--- a/client/app/page.tsx
+++ b/client/app/page.tsx
@@ -1,24 +1,30 @@
-// import AboutAyurveda from "@/components/(patient)/home/AboutAyurveda";
-// import ImageSlider from "@/components/(patient)/home/ImageSlider";
-// import WhyUs from "@/components/(patient)/home/WhyUs";
+// import AboutAyurveda from "@/components/patient/home/AboutAyurveda";
+// import ImageSlider from "@/components/patient/home/ImageSlider";
+// import WhyUs from "@/components/patient/home/WhyUs";
 // import dynamic from "next/dynamic";
 // import Loader  from "@/components/common/Loader";
 
-// const  FeaturesList = dynamic(()=>import("@/components/(patient)/home/FeatureList"),{
+// const  FeaturesList = dynamic(()=>import("@/components/patient/home/FeatureList"),{
 //    loading:()=><Loader />,
 // })
 
 
-const Page = () => {
+const HomePage = () => {
    return (
       <section className="mx-auto ">
          {/* <ImageSlider />
          <AboutAyurveda />
          <WhyUs />
          <FeaturesList /> */}
-         Home Page is not available due to overload 💪💪💪💪
+          <div className="text-2xl font-bold text-center my-28 mb-64">
+            🚧 Hold your horses! 🐴
+            <br />
+            Iam currently working on some awesome animations and large items.
+            <br />
+            Check back soon for a breathtaking experience! 🌟
+         </div>
       </section>
    );
 };
 
-export default Page;
+export default HomePage;
diff --git a/client/components/common/SubmitButton.tsx b/client/components/common/SubmitButton.tsx
index 925c6cfb..2884efdb 100644
--- a/client/components/common/SubmitButton.tsx
+++ b/client/components/common/SubmitButton.tsx
@@ -6,26 +6,14 @@ interface SubmitButtonProps {
    isLoading: boolean;
    className?: string;
    children: React.ReactNode;
+   variant?: "default" | "outline" | "link" | "ghost" | "destructive" | "secondary" | null;
 }
-const SubmitButton = ({
-   isLoading,
-   className,
-   children,
-}: SubmitButtonProps) => {
+const SubmitButton = ({ isLoading, className, children, variant }: SubmitButtonProps) => {
    return (
-      <Button
-         type="submit"
-         disabled={isLoading}
-         className={className ?? "shad-primary-btn w-full"}
-      >
+      <Button type="submit" variant={variant} disabled={isLoading} className={className ?? "shad-primary-btn w-full"}>
          {isLoading ? (
             <div className="flex items-center gap-4">
-               <Image
-                  src="/assets/icons/loader.svg"
-                  alt="loader"
-                  width={27}
-                  height={27}
-               />
+               <Image src="/assets/icons/loader.svg" alt="loader" width={27} height={27} />
             </div>
          ) : (
             children
diff --git a/client/components/forms/patient/SigninForm.tsx b/client/components/forms/patient/SigninForm.tsx
index 51549a16..0e8a9770 100644
--- a/client/components/forms/patient/SigninForm.tsx
+++ b/client/components/forms/patient/SigninForm.tsx
@@ -14,7 +14,7 @@ import { useToast } from "@/components/ui/use-toast";
 import { useRouter } from "next/navigation";
 import { useSignInPatient } from "@/lib/hooks/usePatientAuth";
 import { useAuth } from "@/lib/hooks/useAuth";
-import { Button } from "@/components/ui/button";
+import ForgetPasswordModel from "@/components/models/ForgetPasswordModel";
 
 const LoginForm = () => {
    const [error, setError] = useState("");
@@ -22,6 +22,7 @@ const LoginForm = () => {
    const router = useRouter();
    const { mutate: signIn, isPending } = useSignInPatient();
    const { setCredentials } = useAuth();
+   const [isForgetPasswordOpen, setIsForgetPasswordOpen] = useState(false);
 
    const form = useForm<z.infer<typeof signinFormValidation>>({
       resolver: zodResolver(signinFormValidation),
@@ -56,10 +57,6 @@ const LoginForm = () => {
       );
    };
 
-   const handleForgetPassword = ()=>{
-
-   }
-
    return (
       <Form {...form}>
          <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6 flex-1">
@@ -91,14 +88,15 @@ const LoginForm = () => {
             />
 
             {error && <p className="text-red-500 text-sm mt-2">{error}</p>}
-            <p className="text-dark-700 text-sm mt-2 cursor-pointer" onClick={handleForgetPassword}>
+            <p
+               className="text-dark-700 text-sm mt-2 cursor-pointer"
+               onClick={() => setIsForgetPasswordOpen(!isForgetPasswordOpen)}>
                Forget Password?
             </p>
 
             <SubmitButton isLoading={isPending}>Sign In</SubmitButton>
-
-            
          </form>
+         <ForgetPasswordModel isOpen={isForgetPasswordOpen} setIsOpen={setIsForgetPasswordOpen} />
       </Form>
    );
 };
diff --git a/client/components/models/ForgetPasswordModel.tsx b/client/components/models/ForgetPasswordModel.tsx
new file mode 100644
index 00000000..459a30f3
--- /dev/null
+++ b/client/components/models/ForgetPasswordModel.tsx
@@ -0,0 +1,90 @@
+import { Dispatch, SetStateAction } from "react";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod";
+import * as z from "zod";
+import {
+  AlertDialog,
+  AlertDialogTitle,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogCancel,
+  AlertDialogAction,
+  AlertDialogHeader,
+} from "@/components/ui/alert-dialog";
+import { Button } from "@/components/ui/button";
+import { Form } from "@/components/ui/form";
+import SubmitButton from "../common/SubmitButton";
+import CustomFormField from "../common/CustomFormField";
+import { FormFieldType } from "@/types/fromTypes";
+
+type Props = {
+  isOpen: boolean;
+  setIsOpen: Dispatch<SetStateAction<boolean>>;
+};
+
+const formSchema = z.object({
+  email: z.string().email("Please enter a valid email address."),
+});
+
+type FormValues = z.infer<typeof formSchema>;
+
+const ForgotPasswordModal = ({ isOpen, setIsOpen }: Props) => {
+  const form = useForm<FormValues>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      email: "",
+    },
+  });
+
+  const { control, handleSubmit, formState: { isSubmitting } } = form;
+
+  const onSubmit = async (data: FormValues) => {
+    try {
+      await new Promise(resolve => setTimeout(resolve, 2000));
+      console.log("Password reset email sent to:", data.email);
+      setIsOpen(false);
+    } catch (error) {
+      console.error("Error sending password reset email:", error);
+    }
+  };
+
+  return (
+    <AlertDialog open={isOpen} onOpenChange={setIsOpen}>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Forgot Password</AlertDialogTitle>
+          <AlertDialogDescription>
+            Enter your email address and we'll send you instructions to reset your password.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <Form {...form}>
+          <form onSubmit={handleSubmit(onSubmit)} className="space-y-4">
+            <CustomFormField
+              fieldType={FormFieldType.INPUT}
+              control={control}
+              name="email"
+              label="Email Address *"
+              placeholder="johndoe@gmail.com"
+              iconSrc="/assets/icons/email.svg"
+            />
+            <AlertDialogFooter className="mt-6">
+              <AlertDialogCancel asChild>
+                <Button variant="ghost" onClick={() => setIsOpen(false)}>
+                  Cancel
+                </Button>
+              </AlertDialogCancel>
+              <AlertDialogAction asChild>
+                <SubmitButton isLoading={isSubmitting} variant="outline" className="bg-slate-500 bg-opacity-40"  >
+                  Send Reset Instructions
+                </SubmitButton>
+              </AlertDialogAction>
+            </AlertDialogFooter>
+          </form>
+        </Form>
+      </AlertDialogContent>
+    </AlertDialog>
+  );
+};
+
+export default ForgotPasswordModal;
\ No newline at end of file