I97 edit profile reset password

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

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,20 @@ export default function EditProfile() {
             .catch(() => {});
     };
 
+    const resetUserPassword = async (event) => {
+        event.preventDefault();
+
+        await resetPassword(emailRef.current.value)
+            .then(() => {
+                toast.success(
+                    t(
+                        "Check your inbox we Sent you a link to reset your password"
+                    ) + "!"
+                );
+            })
+            .catch(() => {});
+    };
+
     return (
         <div className='mt-4 flex flex-wrap justify-center self-center'>
             <div className='w-3/4'>
@@ -49,12 +67,18 @@ export default function EditProfile() {
                     placeholder={t("name")}
                     required
                 />
-                <Input type='email' placeholder='email' />
-                <Input type='password' placeholder={t("password")} />
-                <Input
-                    type='password'
-                    placeholder={t("confirm-new-password")}
+                <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}
                 />
+
                 <div className='flex h-48 items-stretch'>
                     <Input type='text' placeholder={t("address")} />
                 </div>
@@ -68,6 +92,15 @@ export default function EditProfile() {
                         handleClick={updateInfo}
                     />
                 </a>
+
+                <a>
+                    <Button
+                        buttonStyle='saveChanges'
+                        type='button'
+                        text='reset password'
+                        handleClick={resetUserPassword}
+                    />
+                </a>
                 <ToastContainer />
             </div>
         </div>

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

@@ -18,24 +18,10 @@ 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
-      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="password"
-      placeholder="password"
-      required={true}
-      type="password"
-    />
-    <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="password"
-      placeholder="confirm-new-password"
-      required={true}
-      type="password"
-    />
     <div
       className="flex h-48 items-stretch"
     >
@@ -60,6 +46,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"
     />