forgot password page

admin-portal-frontend/src/app/components/admin-cards.tsx

@@ -73,7 +73,7 @@ const AdminCards: React.FC = () => {
   return (
     <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4 p-4">
       {admins.map((admin, index) => (
-        <div key={index} className="bg-white shadow-md rounded-lg p-5 pt-3">
+        <div key={index} className="bg-white shadow-md rounded-lg p-4 py-3">
             <button
               className="flex justify-end pt-1 w-full text-gray-500 hover:text-gray-900"
               onClick={() => deleteAdmin(admin.email)}

admin-portal-frontend/src/app/components/invite-admin.tsx

@@ -3,7 +3,7 @@
 import { doc, setDoc } from "firebase/firestore";
 import React, { ChangeEvent, FormEvent, useState } from "react";
 
-import { db } from "./firebase-config";
+import { db } from "../firebase-config";
 
 const InviteAdmin = () => {
   const [adminForm, setAdminForm] = useState({

admin-portal-frontend/src/app/forgot-password/page.tsx

@@ -0,0 +1,66 @@
+"use client";
+
+import React, { ChangeEvent, FormEvent, useState } from "react";
+import { sendPasswordResetEmail } from "firebase/auth";
+import { auth } from "../firebase-config";
+import { useRouter } from "next/navigation";
+
+export default function ForgotPassword() {
+  const [email, setEmail] = useState<string>("");
+  const [message, setMessage] = useState<string>("");
+  const [error, setError] = useState<string>("");
+  const router = useRouter();
+
+  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
+    setEmail(e.target.value);
+  };
+
+  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    try {
+      await sendPasswordResetEmail(auth, email);
+      setMessage("Password reset email sent. Please check your inbox.");
+      setError("");
+    } catch (err) {
+      setError("Failed to send password reset email. Please check the email address and try again.");
+      setMessage("");
+    }
+  };
+
+  return (
+    <div className="flex items-center justify-center min-h-screen">
+      <div className="w-full max-w-md bg-white shadow-xl rounded-lg p-8 flex flex-col items-center mx-4">
+        <h2 className="text-blue-950 text-lg sm:text-xl font-bold my-4">
+          Reset Your Password
+        </h2>
+        <form onSubmit={handleSubmit} className="w-full">
+          <div className="mb-4">
+            <label htmlFor="email" className="block text-sm sm:text-base font-medium mb-1">
+              Email
+            </label>
+            <input
+              className="mb-4 p-2 border w-full rounded border-black border-opacity-40"
+              type="email"
+              name="email"
+              id="email"
+              placeholder="Enter your email address"
+              onChange={handleInputChange}
+              required
+            />
+          </div>
+          <button
+            type="submit"
+            className="p-2 w-full text-white font-bold rounded bg-dfm-blue"
+          >
+            Send Reset Email
+          </button>
+          {message && <p className="text-green-600 text-sm mt-2">{message}</p>}
+          {error && <p className="text-red-600 text-sm mt-2">{error}</p>}
+        </form>
+        <a className="text-sm self-start text-sky-700 mt-4" href="/">
+          Back to Login
+        </a>
+      </div>
+    </div>
+  );
+}

admin-portal-frontend/src/app/home/page.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import InviteAdmin from '../components/invite-admin';
 import AdminCards from '../components/admin-cards';
 
-import InviteAdmin from "../invite-admin";
+
 
 export default function Home() {
   return (

admin-portal-frontend/src/app/layout.tsx

@@ -16,7 +16,7 @@ const roboto = Roboto({
 
 export default function RootLayout({ children }: { children: ReactNode }) {
   const location = usePathname();
-  const showNavbar = location !== "/" && location !== "/signup/";
+  const showNavbar = location !== "/" && location !== "/signup/" && location !== "/forgot-password/";
   const mainClass = `flex min-h-screen flex-col antialiased bg-sky-100/50 ${showNavbar ? "pt-16 pl-60" : ""}`;
 
   return (

admin-portal-frontend/src/app/signup/page.tsx

@@ -16,17 +16,28 @@ type SignUpForm = {
   password: string;
 };
 
-const formatFirebaseError = (error: FirebaseError): string => {
+const formatFirebaseError = (error: any): string => {
+  // Log the error to understand its structure
+  console.log("Firebase error:", error);
+
+  // Check if the error has a code property and it's a string
   if (error?.code && typeof error.code === "string") {
-    const errorCode = error.code.split("/")[1];
-    return errorCode
-      .split("-")
-      .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
-      .join(" ");
+    const errorParts = error.code.split("/");
+    if (errorParts.length > 1) {
+      const errorCode = errorParts[1];
+      return errorCode
+        .split("-")
+        .map((word: string) => word.charAt(0).toUpperCase() + word.slice(1))
+        .join(" ");
+    }
   }
+
+  // Fallback if error.code doesn't exist or isn't in the expected format
   return "An unexpected error occurred";
 };
 
+
+
 export default function SignUp() {
   const db = getFirestore();
   const [signUpForm, setSignUpForm] = useState<SignUpForm>({