Merge pull request #57 from vaibhavgarg25/v3

ui changes

client/src/components/Buyer/Signup.jsx

@@ -82,7 +82,7 @@ export default function Signup() {
                 <p className={styles.p1}>
                   Already have an account?{' '}
                   <a onClick={() => navigate('/login')} className={styles.a1}>Login</a><br></br>
-                  Are you a Farmer?{' '}
+                  Signup as a Farmer{' '}
                   <a onClick={() => navigate('/fsignup')} className={styles.a1}>Click Here</a>
                 </p>
               </div>

client/src/components/Buyer/signup.module.css

@@ -96,6 +96,7 @@ select>option{
     color: black;
 }
 .p1{
+    margin-bottom:40px;
     font-size: 18px;
     font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 }
@@ -115,8 +116,7 @@ select>option{
     text-decoration: underline;
     display: flex;
     gap: 10px;
-    position: relative;
-    left: 2vw;
+    padding-left: 30px;
 }
 .google>button>span{
     font-size: 20px;
@@ -183,4 +183,18 @@ select>option{
     color: black;
     background-color: transparent;
 }
-
+.bt1:hover{
+    scale:1.04
+}
+.email>.bt1{
+    display: flex;
+    border: none;
+    padding-left: 60px;
+    gap: 13px;
+    font-size: 22px;
+}
+.span{
+    position: relative;
+    bottom: 6px;
+    text-decoration:underline;
+}

client/src/components/Farmer/FDashboard.jsx

@@ -1,5 +1,8 @@
 import styles from './FDashboard.module.css';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { collection, getDocs } from 'firebase/firestore';
+import { db } from '../../../firebase';  // Import your firebase configuration
+
 
 function Searchsvg() {
   return (
@@ -76,42 +79,47 @@ function Search() {
   );
 }
 
-function Box({ showSecondaryBox }) {
+
+
+
+
+
+function Box({ data, showSecondaryBox }) {
   return (
     <div className={styles['box-primary']}>
       <div className={styles['primary-details']}>
-        <p>Name : Arvind Kumar</p>
-        <p>Crop : Rice</p>
-        <p>Quantity required : 100kg</p>
-        <p>Mobile No : 1234567890</p>
-        <p>State : Karnataka</p>
+        <p>Name: {data.name}</p>
+        <p>Crop: {data.crop}</p>
+        <p>Quantity required: {data.quantity}</p>
+        <p>Mobile No: {data.mobile}</p>
+        <p>State: {data.state}</p>
       </div>
       <div className={styles['primary-btn']}>
-        <button onClick={showSecondaryBox}>Show more details</button>
+        <button onClick={() => showSecondaryBox(data)}>Show more details</button>
       </div>
     </div>
   )
 }
 
-function Secondarybox({ hideSecondaryBox }) {
+function Secondarybox({ data, hideSecondaryBox }) {
   return (
     <div className={styles['box-sec']}>
       <h3>Details:</h3>
       <div className={styles.crossbtn}>
         <button onClick={hideSecondaryBox}>✕</button>
       </div>
       <div className={styles['sec-details']}>
-        <p>Name : Arvind Kumar</p>
-        <p>Crop : Rice</p>
-        <p>Quantity : 100kg</p>
-        <p>Language Known : Kannada, Hindi, English</p>
-        <p>Mobile : 1234567890</p>
-        <p>E-mail : [email protected]</p>
-        <p>Address : 23, Jayanagar, Bengaluru</p>
-        <p>City : Bengaluru</p>
-        <p>District : Bengaluru</p>
-        <p>State : Karnataka</p>
-        <p>Pincode : 560078</p>
+        <p>Name: {data.name}</p>
+        <p>Crop: {data.crop}</p>
+        <p>Quantity: {data.quantity}</p>
+        <p>Language Known: {data.languages}</p>
+        <p>Mobile: {data.mobile}</p>
+        <p>E-mail: {data.email}</p>
+        <p>Address: {data.address}</p>
+        <p>City: {data.city}</p>
+        <p>District: {data.district}</p>
+        <p>State: {data.state}</p>
+        <p>Pincode: {data.pincode}</p>
       </div>
       <div className={styles['contract-btn']}>
         <button>Make a Contract</button>
@@ -122,23 +130,41 @@ function Secondarybox({ hideSecondaryBox }) {
 
 function MainBox() {
   const [showBox, setShowBox] = useState(false);
+  const [selectedData, setSelectedData] = useState(null);
+  const [dealers, setDealers] = useState([]);
+
+  useEffect(() => {
+    const fetchDealers = async () => {
+      const dealersCollection = collection(db, '');  // enter ur collection name inside the quotes'
+      const dealersSnapshot = await getDocs(farmerdataCollection);//here too
+      const dealersList = dealersSnapshot.docs.map(doc => doc.data());
+      setDealers(dealersList);
+    };
+
+    fetchDealers();
+  }, []);
 
-  const showSecondaryBox = () => setShowBox(true);
+  const showSecondaryBox = (data) => {
+    setSelectedData(data);
+    setShowBox(true);
+  };
+
+
   const hideSecondaryBox = () => setShowBox(false);
 
   return (
     <div className={styles['container-p']}>
       <h1>DEALERS</h1>
       <div className={styles['container-s']}>
-        <Box showSecondaryBox={showSecondaryBox} />
-        <Box showSecondaryBox={showSecondaryBox} />
-        <Box showSecondaryBox={showSecondaryBox} />
-        <Box showSecondaryBox={showSecondaryBox} />
-        <Box showSecondaryBox={showSecondaryBox} />
+        {dealers.map((dealer, index) => (
+          <Box key={index} data={dealer} showSecondaryBox={showSecondaryBox} />
+        ))}
       </div>
-      {showBox && <div className={styles.modal}>
-        <Secondarybox hideSecondaryBox={hideSecondaryBox} />
-      </div>}
+      {showBox && selectedData && (
+        <div className={styles.modal}>
+          <Secondarybox data={selectedData} hideSecondaryBox={hideSecondaryBox} />
+        </div>
+      )}
     </div>
   )
 }

client/src/components/Farmer/FELogin.jsx

@@ -0,0 +1,77 @@
+import { useState } from 'react';
+import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
+import { app } from '../../../firebase';
+import { useNavigate } from 'react-router-dom';
+import styles from '../Buyer/signup.module.css'; // Import the CSS Module
+import Navi from '../Buyer/Navi'
+import { toast, ToastContainer } from 'react-toastify';
+import img from '../../assets/bgimg.jpeg';
+
+const auth = getAuth(app);
+
+const FELogin = () => {
+  const [email, setemail] = useState('');
+  const [password, setpass] = useState('');
+  const navigate = useNavigate();
+
+  const signinUser = async (e) => {
+    e.preventDefault();
+    try {
+      await signInWithEmailAndPassword(auth, email, password).then(() => {
+        toast.success('Welcome');
+        navigate('/farmerdashboard');
+      });
+    } catch (error) {
+      // Handle errors here
+      toast.error('Error Loging in:', error);
+    }
+  };
+
+
+
+  return (
+    <>
+      <div className={styles.mainvg}>
+        <div className={styles.bgimg}>
+          <img src={img} alt="" />
+          <div className={styles.fade}>
+            <div className={styles.headervg}><Navi/></div>
+            <div className={styles.boxvg}>
+              <div className={styles.containervg}>
+                <div className={styles.heading}>
+                  <h1>Login</h1>
+                </div>
+                <div className={styles.formvg}>
+                  <input
+                    type="email"
+                    placeholder="Email"
+                    onChange={(e) => setemail(e.target.value)}
+                    value={email}
+                    className={styles.i1}
+                  />
+                  <input
+                    type="password"
+                    placeholder="Password"
+                    onChange={(e) => setpass(e.target.value)}
+                    value={password}
+                    className={styles.i1}
+                  />
+                  <div className={styles.btn}>
+                    <button onClick={signinUser} className={styles.bt1}>Login</button>
+                  </div>
+                  <p className={styles.p1}>
+                    Don&apos;t have an account?{' '}
+                    <a onClick={() => navigate('/farmersignup')} className={styles.a1}>Register</a>
+                  </p>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <ToastContainer/>
+      </div>
+    </>
+  );
+};
+
+export default FELogin;

client/src/components/Farmer/FESignup.jsx

@@ -0,0 +1,96 @@
+import { useState } from 'react';
+import { auth } from '../../../firebase';
+import { Navigate, useNavigate } from 'react-router-dom';
+import Navi from '../Buyer/Navi'
+import styles from '../Buyer/signup.module.css'; // Import the CSS Module
+import { FcGoogle } from "react-icons/fc";
+import { toast, ToastContainer } from 'react-toastify';
+import img from '../../assets/bgimg.jpeg';
+import {
+  createUserWithEmailAndPassword,
+  GoogleAuthProvider,
+  signInWithPopup,
+} from 'firebase/auth';
+
+
+const googleProvider = new GoogleAuthProvider();
+
+export default function FESignup() {
+  const [email, setemail] = useState('');
+  const [password, setpass] = useState('');
+  const navigate = useNavigate();
+
+  const signupWithGoogle = () => {
+    signInWithPopup(auth, googleProvider).then((e) => {
+      toast.success('Welcome')
+      navigate('/profilesetup');  
+    });
+  };
+
+  const create = async (e) => {
+    e.preventDefault();
+    try {
+      await createUserWithEmailAndPassword(auth, email, password).then(() => {
+       toast.success('Welcome');
+        navigate('/buyer');
+        const user = auth.currentUser;
+        console.log(user);
+      });
+    } catch (error) {
+      toast.error('Error signing in:', error);
+    }
+  };
+
+
+  return (
+    <div className={styles.mainvg}>
+      <div className={styles.bgimg}>
+        <img src={img} alt="" />
+        <div className={styles.fade}>
+          <div className={styles.headervg}>
+            <Navi/>
+          </div>
+          <div className={styles.boxvg}>
+            <div className={styles.containervg}>
+              <div className={styles.heading}>
+                <h1>Create Account</h1>
+              </div>
+              <div className={styles.formvg}>
+                <input
+                  type="email"
+                  placeholder="Email"
+                  onChange={(e) => setemail(e.target.value)}
+                  value={email}
+                  className={styles.i1}
+                />
+                <input
+                  type="password"
+                  placeholder="Password"
+                  onChange={(e) => setpass(e.target.value)}
+                  value={password}
+                  className={styles.i1}
+                />
+                <div className={styles.google}>
+                  <button onClick={signupWithGoogle} className={styles.bt1}>
+                    <FcGoogle />
+                    <span>Sign In With Google</span>
+                  </button>
+                </div>
+                <div className={styles.btn}>
+                  <button onClick={create} className={styles.bt1}>Create Account</button>
+                </div>
+                <p className={styles.p1}>
+                  Already have an account?{' '}
+                  <a onClick={() => navigate('/farmerlogin')} className={styles.a1}>Login</a><br></br>
+                  Signup With Phone Number{' '}
+                  <a onClick={() => navigate('/fsignup')} className={styles.a1}>Click Here</a>
+                </p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <ToastContainer/>
+    </div>
+  );
+}