added-authentication

src/Components/Forgot_password/ForgotPassword.js

@@ -1,5 +1,7 @@
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";
+import { toast } from "react-toastify";
+import { sendPasswordResetEmail } from "firebase/auth";
 import {
   NewContainer,
   FormContainer,
@@ -14,43 +16,57 @@ import {
 } from "./ForgotPasswordelements";
 import ForgotImg from "../../images/Forgotpassword.webp";
 import Footer from "../Footer";
+import { auth } from "../../firebase-config"; // Import your Firebase authentication instance
 
 const GetMail = () => {
   const navigate = useNavigate();
   const [email, setEmail] = useState();
-  const handleContinue = () => {
-    if (!email) alert("enter email");
-    else navigate("/signin/otpverification");
+
+  const handleContinue = async () => {
+    try {
+      if (!email) {
+        // alert("Please enter your email.");
+        let errorMessage = "Please enter your email";
+        toast.error(errorMessage, {
+          position: "top-right",
+          autoClose: 5000,
+          hideProgressBar: false,
+          closeOnClick: true,
+          pauseOnHover: true,
+          draggable: true,
+        });
+        return;
+      }
+
+      // Send a password reset email
+      await sendPasswordResetEmail(auth, email);
+
+      // After sending the email, navigate to the OTP verification page
+      navigate("/signin/otpverification");
+    } catch (error) {
+      let errorMessage = "Error sending password reset email. Please try again.";
+      // console.error("Error sending password reset email", error);
+      // alert("Error sending password reset email. Please try again.");
+      toast.error(errorMessage, {
+        position: "top-right",
+        autoClose: 5000,
+        hideProgressBar: false,
+        closeOnClick: true,
+        pauseOnHover: true,
+        draggable: true,
+      });
+    }
   };
+
   return (
-    // <>
-    //   <FormWrap className="email-form">
-    //     <FormContent>
-    //       <Form>
-    //         <FormLabel htmlFor="email">Email</FormLabel>
-    //         <FormInput
-    //           onChange={(e) => setEmail(e.target.value)}
-    //           placeholder="[email protected]"
-    //           type="email"
-    //           id="email"
-    //           require
-    //         />
-    //         <FormButton onClick={handleContinue}>Continue</FormButton>
-    //         <br />
-    //         <FormButton onClick={() => navigate("/signin")}>Cancel</FormButton>
-    //       </Form>
-    //     </FormContent>
-    //   </FormWrap>
-    //   <Footer />
-    // </>
     <>
       <NewContainer>
         <FormContainer>
           <FPForm>
             <FPimg src={ForgotImg} alt="Forgot Password graphic" />
             <FPheading>Forgot Password?</FPheading>
             <FPpara>
-              Don't worry, Enter your email to receive the OTP for verification
+              Don't worry, enter your email to receive the OTP for verification
               and regain access to your account.
             </FPpara>
             <FPinput

src/Components/Forgot_password/OTPVerfication.js

@@ -62,9 +62,9 @@ function Verify() {
         <FormContainer>
           <FPForm>
             <OTPimg src={OTPImg} alt="OTP image" />
-            <FPheading>OTP Verification</FPheading>
-            <FPpara>Enter the code sent to your registered E-mail ID</FPpara>
-            <OTPBoxContainer>
+            <FPheading>Check Your Inbox</FPheading>
+            <FPpara>We have sent you a mail for resetting your password.</FPpara>
+            {/* <OTPBoxContainer>
               {Otp.map((data, index) => (
                 <OtpInput
                   type="text"
@@ -81,7 +81,7 @@ function Verify() {
             <TimerContainer>
               <ResendPara>Resend OTP in 00 : {counter}</ResendPara>
               <ResendLink onClick={handleRetry}>Resend OTP?</ResendLink>
-            </TimerContainer>
+            </TimerContainer> */}
           </FPForm>
         </FormContainer>
       </NewContainer>

src/Components/Navbar/index.js

@@ -1,13 +1,7 @@
 import React, { useEffect, useState } from "react";
+import { auth } from "../../firebase-config";
 import {
-  FaAcquisitionsIncorporated,
   FaBars,
-  FaBox,
-  FaClosedCaptioning,
-  FaCross,
-  FaCrow,
-  FaExclamationTriangle,
-  FaMicrophoneSlash,
   FaRegWindowClose,
 } from "react-icons/fa";
 import DarkMode from "../DarkMode/DarkMode";
@@ -40,7 +34,17 @@ const glassStyle = {
 const Navbar = ({ toggle }) => {
   const [isOpen, setIsOpen] = useState(false);
   const [navbarBg, setNavbarBg] = useState(glassStyle);
+  const [user, setUser] = useState(null);
 
+  useEffect(() => {
+    // Add an observer to check for user authentication state changes
+    const unsubscribe = auth.onAuthStateChanged((user) => {
+      setUser(user);
+    });
+
+    // Clean up the observer on component unmount
+    return () => unsubscribe();
+  }, []);
   useEffect(() => {
     const handleScroll = () => {
       const scrolled = window.scrollY;
@@ -147,19 +151,21 @@ const Navbar = ({ toggle }) => {
           </Navitem>
 
           <NavBtnMobile>
-            <NavBtnLink onClick={handleToggle} to="/signin">
-              Sign In
-            </NavBtnLink>
             <NavBtnLink onClick={handleToggle} to="/signup">
-              Sign Up
+              Register
             </NavBtnLink>
           </NavBtnMobile>
         </NavMenu>
         <NavBtn>
-          <NavBtnLink to="/signin">Sign In</NavBtnLink>
-          <NavBtnLink to="/signup">Sign Up</NavBtnLink>
-          <DarkMode toggle={toggle} />
-        </NavBtn>
+      {user ? (
+        // Display user profile/account button when authenticated
+        <NavBtnLink to="/user-profile">Account</NavBtnLink>
+      ) : (
+        // Display register button when not authenticated
+        <NavBtnLink to="/signup">Register</NavBtnLink>
+      )}
+      <DarkMode toggle={toggle} />
+    </NavBtn>
       </NavbarContainer>
     </Nav>
   );

src/Components/Signin/SigninElements.js

@@ -134,7 +134,7 @@ export const Text = styled.span`
 //////////////////////// NEW UI ELEMENTS ///////////////////////
 
 export const NewContainer = styled.div`
-  width: 100%;
+  /* width: 100%;
   height: fit-content;
   display: flex;
   flex-direction: column;
@@ -146,22 +146,21 @@ export const NewContainer = styled.div`
   top: 0;
   z-index: 0;
   overflow: hidden;
-  background: var(--bg-clr);
+  background: var(--bg-clr); */
 `;
 
 export const FormContainer = styled.div`
-  background-color: #fff;
-  box-shadow: 0 0 20px #01bf71;
+    background-color: #fff;
   position: relative;
   overflow: hidden;
-  width: 900px;
+  width: 100%;
   max-width: 100%;
-  min-height: 550px;
-  margin: 3rem auto;
+  height:88vh;
   display: flex;
-  @media only screen and (max-width:550px){
+  @media only screen and (max-width: 550px) {
     flex-direction: column;
     margin: 0;
+  
 }
 `;