From 51cc9c7cbfcda2969214fb8393510f744e8e52a8 Mon Sep 17 00:00:00 2001
From: Ojas Arora <127867874+Ojas-Arora@users.noreply.github.com>
Date: Tue, 6 Aug 2024 18:14:11 +0530
Subject: [PATCH] Forgot Backend

---
 BACKEND/Express.js                    | 40 +++++++++++++++++++++++++++
 src/Components/MainRightBottomCard.js | 37 ++++++++++++++++++-------
 src/Components/Settings/Settings.css  | 14 ++++++++++
 src/Components/forgot.js              | 27 ++++++++++++++++--
 4 files changed, 105 insertions(+), 13 deletions(-)
 create mode 100644 BACKEND/Express.js

diff --git a/BACKEND/Express.js b/BACKEND/Express.js
new file mode 100644
index 00000000..51b375f4
--- /dev/null
+++ b/BACKEND/Express.js
@@ -0,0 +1,40 @@
+const express = require('express');
+const bodyParser = require('body-parser');
+const nodemailer = require('nodemailer'); // For sending emails
+const cors = require('cors'); // Import CORS package
+const app = express();
+
+app.use(bodyParser.json());
+app.use(cors()); // Enable CORS for all routes
+
+app.post('/api/reset-password', async (req, res) => {
+  const { email } = req.body;
+
+  // Add your logic to handle the password reset, e.g., send a reset link via email
+  const transporter = nodemailer.createTransport({
+    service: 'gmail', // Use your email service
+    auth: {
+      user: 'your-email@gmail.com',
+      pass: 'your-email-password'
+    }
+  });
+
+  const mailOptions = {
+    from: 'your-email@gmail.com',
+    to: email,
+    subject: 'Password Reset',
+    text: 'Click the link to reset your password: <reset link>'
+  };
+
+  try {
+    await transporter.sendMail(mailOptions);
+    res.status(200).json({ message: 'Password reset email sent.' });
+  } catch (error) {
+    console.error('Error sending email:', error); // Log the detailed error
+    res.status(500).json({ message: 'Error sending email.' });
+  }
+});
+
+app.listen(3000, () => {
+  console.log('Server running on port 3000');
+});
diff --git a/src/Components/MainRightBottomCard.js b/src/Components/MainRightBottomCard.js
index 45b91e60..616c1da9 100644
--- a/src/Components/MainRightBottomCard.js
+++ b/src/Components/MainRightBottomCard.js
@@ -5,20 +5,20 @@ function MainRightBottomCard() {
   const [visibleSellers, setVisibleSellers] = useState(3);
   const [allSellersLoaded, setAllSellersLoaded] = useState(false);
   const [showMore, setShowMore] = useState(false);
+  const [hoveredSeller, setHoveredSeller] = useState(null);
   const profileListRef = useRef(null);
 
   const handleButton = (e) => {
     if (e.target.textContent === "Follow") {
-      e.target.textContent = "Following"
-      e.target.style.background = "rgb(25, 22, 44)"
-      e.target.style.border = "2px solid #443b78"
+      e.target.textContent = "Following";
+      e.target.style.background = "rgb(25, 22, 44)";
+      e.target.style.border = "2px solid #443b78";
+    } else if (e.target.textContent === "Following") {
+      e.target.textContent = "Follow";
+      e.target.style.background = "linear-gradient(#ff21bc, #b21783)";
+      e.target.style.border = "";
     }
-    else if (e.target.textContent === "Following") {
-      e.target.textContent = "Follow"
-      e.target.style.background = "linear-gradient(#ff21bc, #b21783)"
-      e.target.style.border = ""
-    }
-  }
+  };
 
   const loadMoreSellers = () => {
     setVisibleSellers((prevVisibleSellers) => {
@@ -58,6 +58,14 @@ function MainRightBottomCard() {
     setAllSellersLoaded(!showMore); // Reset scroll loading state when toggling
   };
 
+  const handleMouseEnter = (id) => {
+    setHoveredSeller(id);
+  };
+
+  const handleMouseLeave = () => {
+    setHoveredSeller(null);
+  };
+
   return (
     <div className="bottom_card" ref={profileListRef}>
       <div className="bottomCard_name">
@@ -68,7 +76,16 @@ function MainRightBottomCard() {
       </div>
 
       {TopSeller.slice(0, visibleSellers).map((seller) => (
-        <div className="topSeller fromTop" key={seller.id}>
+        <div
+          className="topSeller fromTop"
+          key={seller.id}
+          onMouseEnter={() => handleMouseEnter(seller.id)}
+          onMouseLeave={handleMouseLeave}
+          style={{
+            backgroundColor: hoveredSeller === seller.id ? '#cf00a3' : 'initial',
+            transition: 'background-color 0.3s ease'
+          }}
+        >
           <div className="topSellerImg">
             <img src={seller?.imgSrc} alt="" />
           </div>
diff --git a/src/Components/Settings/Settings.css b/src/Components/Settings/Settings.css
index 901a3c6a..c954634d 100644
--- a/src/Components/Settings/Settings.css
+++ b/src/Components/Settings/Settings.css
@@ -50,6 +50,11 @@
   max-width: 800px; 
   min-height: 500px;
   box-sizing: border-box;
+  transition: background-color 0.3s ease; /* Smooth transition for hover effect */
+}
+
+.settings-content:hover {
+  background-color: darkturquoise; /* Hover effect color */
 }
 
 .form-group {
@@ -169,3 +174,12 @@ button:hover {
     width: 100%; 
   }
 }
+
+/* Add hover effect for other containers or elements as needed */
+.settings-content .form-group input[type="text"]:hover,
+.settings-content .form-group input[type="password"]:hover,
+.settings-content .form-group select:hover,
+.settings-content .form-group input[type="checkbox"]:hover,
+.settings-content button:hover {
+  background-color: #cf00a3;
+}
diff --git a/src/Components/forgot.js b/src/Components/forgot.js
index 2e01f450..5da858cd 100644
--- a/src/Components/forgot.js
+++ b/src/Components/forgot.js
@@ -1,16 +1,29 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
+import axios from 'axios'; // Import Axios
 import homeIcon from '../img/homeicon.png';
 import { Link } from "react-router-dom";
 import './forgot.css'; // Ensure you have specific styles for this component
 
 const ForgotPassword = () => {
   const navigate = useNavigate();
+  const [email, setEmail] = useState('');
+  const [message, setMessage] = useState('');
 
   const handleBackToLogin = () => {
     navigate('/login');
   };
 
+  const handleSubmit = async (event) => {
+    event.preventDefault();
+    try {
+      const response = await axios.post('http://localhost:3000/api/reset-password', { email }); // Replace with your backend endpoint
+      setMessage(response.data.message); // Handle the response message
+    } catch (error) {
+      setMessage('An error occurred. Please try again.'); // Handle the error
+    }
+  };
+
   return (
     <div className="forgot-password-page">
       <Link to="/">
@@ -18,10 +31,18 @@ const ForgotPassword = () => {
       </Link>
       <div className="forgot-password-container1">
         <h2>Forgot Password</h2>
-        <form className="forgot-password-form1">
+        {message && <p className="message">{message}</p>}
+        <form className="forgot-password-form1" onSubmit={handleSubmit}>
           <div className="input-group">
             <label htmlFor="email">Enter Your Email Address</label>
-            <input type="email" id="email" name="email" required />
+            <input 
+              type="email" 
+              id="email" 
+              name="email" 
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+              required 
+            />
           </div>
           <button type="submit" className="reset-button">Reset Password</button>
           <br></br>