Forgot password

src/App.js

@@ -18,10 +18,12 @@ import Listing from "./pages/Listing";
 import NotFound from "./pages/NotFound";
 import SignIn from "./pages/SignIn";
 import SignUp from "./pages/SignUp";
+import ResetPassword from "./pages/ResetPassword";
 import Cart from "./pages/cart";
 import Wishlist from "./pages/wishList";
 import "./responsive.css";
 
+
 // import data from './data';
 import { collection, doc, getDocs } from "firebase/firestore";
 import MapComponent from "./components/map/ITEMmap";
@@ -272,6 +274,9 @@ function App() {
           {isLogin === null && (
             <Route exact={true} path="signIn" element={<SignIn />} />
           )}
+          {isLogin === null && (
+            <Route exact={true} path="resetpassword" element={<ResetPassword />} />
+          )}
           {isLogin === null && (
             <Route exact={true} path="signUp" element={<SignUp />} />
           )}

src/pages/ResetPassword/index.js

@@ -0,0 +1,212 @@
+import React, { useState, useContext } from "react";
+import { Link, useNavigate } from "react-router-dom";
+import "./style.css";
+import { collection, doc, setDoc ,getDocs} from "firebase/firestore"; 
+
+
+import Box from "@mui/material/Box";
+import TextField from "@mui/material/TextField";
+import VisibilityOutlinedIcon from "@mui/icons-material/VisibilityOutlined";
+import VisibilityOffOutlinedIcon from "@mui/icons-material/VisibilityOffOutlined";
+import { Button, Snackbar, Typography } from "@mui/material";
+import {
+  getAuth,
+
+  signInWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+  fetchSignInMethodsForEmail,
+  sendPasswordResetEmail,
+} from "firebase/auth";
+import { app,db } from "../../firebase";
+import Backdrop from "@mui/material/Backdrop";
+import CircularProgress from "@mui/material/CircularProgress";
+import { MyContext } from "../../App";
+import GoogleImg from "../../assets/images/google.png";
+import useLoggedInUserEmail from "../../Hooks/useLoggedInUserEmail";
+import { useDispatch } from "react-redux";
+import { logIn } from "../../Redux/auth-slice";
+const auth = getAuth(app);
+
+const googleProvider = new GoogleAuthProvider();
+
+const SignIn = () => {
+
+  const [showLoader, setShowLoader] = useState(false);
+  const [mssg, setmssg] = useState();
+  const [formFields, setFormFields] = useState({
+    email: "",
+    password: "",
+  });
+  const [error, setError] = useState("");
+  const context = useContext(MyContext);
+  const history = useNavigate();
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [loggedInUserEmail, setLoggedInUseEmail] = useLoggedInUserEmail(); //get_email hook
+  const [isDisabled, setIsDisabled] = useState(true);
+
+  const [inputErrors, setInputErrors] = useState({
+    email: "",
+
+  });
+
+
+
+
+  const dispatch = useDispatch()
+
+
+  function replaceSpecialCharacters(inputString) {
+    // Use a regular expression to replace special characters with underscore _
+    const replacedString = inputString.replace(/[#$\[\].]/g, "_");
+
+    return replacedString;
+  }
+
+  // Email validation function
+  const validateEmail = (email) => {
+    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
+  };
+
+  // Password validation function
+
+  const onChangeField = (e) => {
+    const name = e.target.name;
+    const value = e.target.value;
+
+
+    setFormFields((prevFormFields) => ({
+      ...prevFormFields,
+      [name]: value,
+    }));
+
+    let errors = { ...inputErrors };
+
+    // Validate email
+
+      errors.email = "";
+setInputErrors(errors)
+  };
+
+
+
+  const forgotPassword = async (e) => {
+    e.preventDefault();
+    let errors = { ...inputErrors };
+
+    // Validate email
+      console.log(formFields.email)
+      errors.email = !validateEmail(formFields.email) ? "Invalid email address" : "";
+      setInputErrors(errors)
+      if(!validateEmail(formFields.email)){
+
+        setmssg("Invalid email address")
+       return;
+      }
+
+      let signInMethods = await fetchSignInMethodsForEmail(auth, formFields.email);
+      console.log(signInMethods,"count")
+
+    try{
+        const email = formFields.email;
+      const res=await  sendPasswordResetEmail( auth,email);
+      console.log(res)
+      setSnackbarOpen(true);
+      formFields.email=""
+
+        setmssg("Password reset mail has been sent!")
+
+
+        }
+          catch{(error) => {
+            console.log(error)
+            setmssg("some error has occured!")
+
+            setError(error.message);
+          }}
+}
+
+
+  const handleCloseSnackbar = () => {
+    setSnackbarOpen(false);
+  };
+
+  return (
+    <>
+      <section className="signIn mb-5">
+        <div className="breadcrumbWrapper">
+          <div className="container-fluid">
+            <ul className="breadcrumb breadcrumb2 mb-0">
+              <li>
+                <Link to="/">Home</Link>
+              </li>
+              <li>Forgot Password</li>
+            </ul>
+          </div>
+        </div>
+
+        <div className="loginWrapper">
+          <div className="card shadow">
+            <Backdrop
+              sx={{ color: "#000", zIndex: (theme) => theme.zIndex.drawer + 1 }}
+              open={showLoader}
+              className="formLoader"
+            >
+              <CircularProgress color="inherit" />
+            </Backdrop>
+
+            <h3 className="text-center">Forget Password</h3>
+            <form className="mt-4">
+              <div className="form-group mb-4 w-100">
+                <TextField
+                  id="email"
+                  type="email"
+                  name="email"
+                  placeholder="Email"
+                  className="w-100 text-zinc-800"
+                  onChange={onChangeField}
+                  value={formFields.email}
+                  autoComplete="email"
+                  error={inputErrors.email}
+                />
+                {inputErrors.email && (
+                  <Typography
+                    variant="caption"
+                    sx={{ color: "red", padding: "5px" }}
+                  >
+                    {inputErrors.email}
+                  </Typography>
+                )}
+              </div>
+
+
+
+              <div className="form-group mt-5 mb-4 w-100">
+                <Button
+
+                  className="btn btn-g btn-lg w-100"
+                  onClick={forgotPassword}
+                >
+                  send Email
+                </Button>
+              </div>
+
+
+
+
+
+            </form>
+          </div>
+        </div>
+      </section>
+      <Snackbar
+        open={snackbarOpen}
+        autoHideDuration={6000}
+        onClose={handleCloseSnackbar}
+        message={mssg}
+      />
+    </>
+  );
+};
+
+export default SignIn;

src/pages/ResetPassword/style.css

@@ -0,0 +1,82 @@
+*{
+  box-sizing: border-box;
+}
+.loginWrapper {
+  padding: 75px 0px;
+  background: #f1f1f1;
+  height: auto;
+}
+.loginWrapper .card {
+  width: 650px;
+  margin: auto;
+  padding: 40px;
+  border: 0px !important;
+  height: auto;
+}
+.loginWrapper .card h3 {
+  font-weight: 500;
+  font-size: 35px;
+}
+.loginWrapper .card input {
+  height: 40px !important;
+  font-size: 18px !important;
+  color: #000 !important;
+}
+.loginWrapper .card fieldset {
+  border-radius: 10px !important;
+}
+.loginWrapper .card .MuiFormLabel-root {
+  line-height: 43px !important;
+  color: #000 !important;
+  font-size: 18px !important;
+}
+
+.loginWrapper .card .icon {
+  position: absolute;
+  top: 10px;
+  right: 20px;
+  z-index: 100;
+  min-width: 50px !important;
+  height: 50px !important;
+  width: 50px !important;
+  color: #ccc !important;
+  border-radius: 100% !important;
+}
+.loginWrapper .card .icon svg {
+  color: #000 !important;
+  opacity: 0.8;
+}
+
+.loginWrapper .card button {
+  padding: 15px 25px !important;
+}
+.signInOr button {
+  padding: 15px 25px !important;
+  color: #000 !important;
+  font-size: 18px !important;
+}
+.signInOr button img {
+  width: 40px;
+  margin-right: 15px;
+}
+
+.formLoader {
+  position: absolute !important;
+  background: rgba(255, 255, 255, 0.5) !important;
+}
+
+@media (max-width: 586px) {
+    .loginWrapper {
+        padding: 75px 0px;
+        background: #f1f1f1;
+        height: auto;
+      }
+      .loginWrapper .card {
+        width: 650px;
+        margin: auto;
+        height: auto;
+        padding: 40px;
+        border: 0px !important;
+        height: auto;
+      }
+}

src/pages/SignIn/index.js

@@ -26,6 +26,7 @@ const googleProvider = new GoogleAuthProvider();
 
 const SignIn = () => {
   const [showPassword, setShowPassword] = useState(false);
+  const [mssg, setmssg] = useState();
   const [showLoader, setShowLoader] = useState(false);
   const [formFields, setFormFields] = useState({
     email: "",
@@ -147,15 +148,8 @@ const SignIn = () => {
       });
   };
 
-  const forgotPassword = () => {
-    const email = formFields.email;
-    sendPasswordResetEmail(auth, email)
-      .then(() => {
-        setSnackbarOpen(true);
-      })
-      .catch((error) => {
-        setError(error.message);
-      });
+  const forgotPassword = async () => {
+  history("/resetpassword")
   };
   const handleCloseSnackbar = () => {
     setSnackbarOpen(false);
@@ -248,6 +242,12 @@ const SignIn = () => {
                 </div>
               )}
 
+              <div className="form-group mt-3 mb-4 w-100 d-flex justify-content-end">
+              <Button className="btn btn-link float-end" onClick={forgotPassword}>
+                Forgot Password?
+              </Button>
+            </div>
+
               <div className="form-group mt-5 mb-4 w-100">
                 <Button
                   disabled={isDisabled}
@@ -269,11 +269,7 @@ const SignIn = () => {
                 </Button>
               </div>
 
-              <div className="form-group mt-3 mb-4 w-100">
-                <Button className="btn btn-link" onClick={forgotPassword}>
-                  Forgot Password?
-                </Button>
-              </div>
+
 
               <p className="text-center">
                 Don't have an account?{" "}
@@ -289,7 +285,7 @@ const SignIn = () => {
         open={snackbarOpen}
         autoHideDuration={6000}
         onClose={handleCloseSnackbar}
-        message="Password reset email sent!"
+        message={mssg}
       />
     </>
   );