added reset password func

context/AuthContext.js

@@ -2,6 +2,7 @@ import { auth } from "firebase.config";
 import {
     createUserWithEmailAndPassword,
     onAuthStateChanged,
+    sendPasswordResetEmail,
     signInWithEmailAndPassword,
     signOut,
 } from "firebase/auth";
@@ -46,9 +47,13 @@ export const AuthContextProvider = ({ children }) => {
         setUser(null);
         await signOut(auth);
     };
-
+    const resetPassword = (email) => {
+        return sendPasswordResetEmail(auth, email);
+    };
     return (
-        <AuthContext.Provider value={{ user, login, signup, logout }}>
+        <AuthContext.Provider
+            value={{ user, login, signup, logout, resetPassword }}
+        >
             {loading ? null : children}
         </AuthContext.Provider>
     );

data/products.json

@@ -595,7 +595,7 @@
             "condition": "New",
             "seller": {
                 "id": 88888888,
-                "displayName": "Umut Polat",
+                "displayName": "Nouh Rastanawi",
                 "email": "[email protected]",
                 "image": "https://www.random-name-generator.com/images/faces/male-white/37.jpg?ezimgfmt=rs:148x143/rscb1/ng:webp/ngcb1"
             },

src/components/EditProfile/EditProfile.jsx

@@ -5,16 +5,20 @@ import { updateProfile } from "firebase/auth";
 import { useRouter } from "next/router";
 import { useTranslation } from "next-i18next";
 import * as React from "react";
+import { useRef } from "react";
 import { toast, ToastContainer } from "react-toastify";
 import { injectStyle } from "react-toastify/dist/inject-style";
 
 import Button from "../button";
 import Input from "../input";
+import { useAuth } from "../../../context/AuthContext";
 if (typeof window !== "undefined") {
     injectStyle();
 }
 
 export default function EditProfile() {
+    const emailRef = useRef(null);
+    const { resetPassword } = useAuth();
     const { t } = useTranslation("profile");
     const router = useRouter();
 
@@ -34,6 +38,11 @@ export default function EditProfile() {
             .catch(() => {});
     };
 
+    const resetUserPassword = async () => {
+        await resetPassword(emailRef.current.value);
+        console.log("check your inbox for futher instructions");
+    };
+
     return (
         <div className='mt-4 flex flex-wrap justify-center self-center'>
             <div className='w-3/4'>
@@ -49,7 +58,18 @@ export default function EditProfile() {
                     placeholder={t("name")}
                     required
                 />
-                <Input type='email' placeholder='email' />
+                <input
+                    className=' inputtabfont my-3.5 block w-full rounded-lg
+                 border border-gray-300 bg-gray-50 p-2.5 
+                 text-center text-xl text-hadrisblue
+                  placeholder-hadrisblue focus:border-blue-500 focus:ring-purple'
+                    id='email'
+                    name='email'
+                    type='email'
+                    placeholder='Enter Email to Reset Your password'
+                    ref={emailRef}
+                />
+
                 <Input type='password' placeholder={t("password")} />
                 <Input
                     type='password'
@@ -68,6 +88,15 @@ export default function EditProfile() {
                         handleClick={updateInfo}
                     />
                 </a>
+
+                <a>
+                    <Button
+                        buttonStyle='saveChanges'
+                        type='button'
+                        text={t("reset password")}
+                        handleClick={resetUserPassword}
+                    />
+                </a>
                 <ToastContainer />
             </div>
         </div>

src/components/EditProfile/__test__/__snapshots__/EditProfile.test.jsx.snap

@@ -18,8 +18,8 @@ exports[`renders correctly 1`] = `
     <input
       className=" inputtabfont my-3.5 block w-full rounded-lg border border-gray-300 bg-gray-50 p-2.5 text-center text-xl text-hadrisblue placeholder-hadrisblue focus:border-blue-500 focus:ring-purple"
       id="email"
-      placeholder="email"
-      required={true}
+      name="email"
+      placeholder="Enter Email to Reset Your password"
       type="email"
     />
     <input
@@ -60,6 +60,15 @@ exports[`renders correctly 1`] = `
         save-changes
       </button>
     </a>
+    <a>
+      <button
+        className="h-12 w-56 lg:h-14 lg:w-64 m-1 p-1 px-2 hover:bg-purple hover:shadow-lg rounded-lg border-2 bg-pumpkin font-md text-[17px] text-white shadow-sm"
+        onClick={[Function]}
+        type="button"
+      >
+        reset password
+      </button>
+    </a>
     <div
       className="Toastify"
     />