Feat/hng 2145 authentication forgot password

app/components/ForgotPasswordPage/ForgetPassword.test.tsx

@@ -0,0 +1,25 @@
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter as Router } from "react-router-dom";
+import { describe, expect, it } from "vitest";
+
+import ForgotPassword from "./ForgotPasswordPage";
+
+describe("ForgotPassword Component", () => {
+  it("renders Forgot Password page", () => {
+    render(
+      <Router>
+        <ForgotPassword />
+      </Router>,
+    );
+
+    expect(screen.getByText(/forgot password/i)).toBeInTheDocument();
+
+    expect(
+      screen.getByPlaceholderText(/enter your email/i),
+    ).toBeInTheDocument();
+
+    expect(screen.getByText(/send/i)).toBeInTheDocument();
+
+    expect(screen.getByText(/login/i)).toBeInTheDocument();
+  });
+});

app/components/ForgotPasswordPage/ForgotPasswordPage.tsx

@@ -0,0 +1,62 @@
+import { Link } from "@remix-run/react";
+
+import Navbar from "../static-navbar/static-navbar";
+import Footer from "../ui/footer";
+
+interface PlaceholderLinkProperties {
+  to: string;
+  text: string;
+}
+
+function PlaceholderLink({ to, text }: PlaceholderLinkProperties) {
+  return (
+    <Link
+      to={to}
+      className="text-sm font-semibold leading-6 text-orange-600 md:text-lg"
+    >
+      {text}
+    </Link>
+  );
+}
+
+export default function ForgotPassword() {
+  return (
+    <>
+      <Navbar />
+      <div className="mx-auto mb-52 mt-52 w-full max-w-lg rounded-lg p-8">
+        <h1 className="text-center text-2xl text-base font-semibold text-gray-900 sm:text-xl md:text-2xl">
+          Forgot Password
+        </h1>
+        <p className="mb-8 mt-4 text-center text-lg text-sm font-normal text-gray-600 md:text-base">
+          Enter the email address you used to create the account to receive
+          instructions on how to reset your password.
+        </p>
+        <form className="space-y-6">
+          <label className="block text-lg font-normal text-gray-700">
+            Email
+            <input
+              type="email"
+              name="email"
+              required
+              placeholder="Enter your email"
+              className="mt-2 block w-full rounded-lg border border-gray-300 px-4 py-3 outline-none focus:ring-2 focus:ring-orange-500"
+            />
+          </label>
+          <button
+            type="submit"
+            className="mt-4 w-full rounded-lg bg-orange-500 py-3 text-white hover:bg-orange-600 focus:outline-none focus:ring-2 focus:ring-orange-500"
+          >
+            Send
+          </button>
+        </form>
+        <div className="mt-6 flex items-center justify-center">
+          <p className="mr-2 text-sm font-normal text-gray-600 md:text-xs">
+            Remember your Password?
+          </p>
+          <PlaceholderLink to="/login" text="Login" />
+        </div>
+      </div>
+      <Footer />
+    </>
+  );
+}

app/routes/_index.tsx

@@ -1,11 +1,6 @@
 import type { MetaFunction } from "@remix-run/node";
-import { Link } from "@remix-run/react";
-import { useState } from "react";
 
-import { Button } from "~/components/ui/button";
-import CardPlatform from "~/components/ui/card/card-platform";
-import OtpAuth from "~/components/ui/otp/OtpAuth";
-import { Input } from "~/types/otpauth";
+import ForgotPassword from "~/components/ForgotPasswordPage/ForgotPasswordPage";
 
 export const meta: MetaFunction = () => {
   return [
@@ -14,16 +9,16 @@ export const meta: MetaFunction = () => {
   ];
 };
 
-const handleSubmit = (values: Input[]) => {
-  console.log({ values });
-};
+// const handleSubmit = (values: Input[]) => {
+//   console.log({ values });
+// };
 
 export default function Index() {
-  const [openModal, setOpenModal] = useState(false);
+  // const [openModal, setOpenModal] = useState(false);
 
   return (
     <div className="p-4 font-sans">
-      <h1 className="text-3xl">Welcome to Remix</h1>
+      {/* <h1 className="text-3xl">Welcome to Remix</h1>
       <ul className="mt-4 list-disc space-y-2 pl-6">
         <li>
           <a
@@ -83,7 +78,8 @@ export default function Index() {
           { name: "input6", value: "" },
         ]}
         handleSubmit={handleSubmit}
-      />
+      /> */}
+      <ForgotPassword></ForgotPassword>
     </div>
   );
 }

package.json

@@ -37,18 +37,24 @@
     "clsx": "^2.1.1",
     "isbot": "^4.4.0",
     "lucide-react": "^0.408.0",
+    "pretier": "^0.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-email": "^2.1.5",
     "react-hook-form": "^7.52.1",
+    "react-router-dom": "^6.25.1",
+    "remix": "^2.10.3",
     "swiper": "^11.1.5",
+    "tailwind": "^4.0.0",
     "tailwind-merge": "^2.4.0",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^4.3.1",
     "@remix-run/dev": "^2.10.3",
+    "@testing-library/jest-dom": "^6.4.6",
+    "@testing-library/react": "^16.0.0",
     "@types/react": "^18.2.20",
     "@types/react-dom": "^18.2.7",
     "@typescript-eslint/eslint-plugin": "^7.16.1",
@@ -65,13 +71,15 @@
     "eslint-plugin-react-refresh": "^0.4.8",
     "eslint-plugin-unicorn": "^54.0.0",
     "eslint-plugin-unused-imports": "^3.2.0",
+    "jsdom": "^24.1.1",
     "postcss": "^8.4.38",
     "prettier": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.5",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.1.6",
     "vite": "^5.1.0",
-    "vite-tsconfig-paths": "^4.2.1"
+    "vite-tsconfig-paths": "^4.2.1",
+    "vitest": "^2.0.3"
   },
   "engines": {
     "node": ">=20.0.0"