Merge pull request #52 from ShinichiShi/main

merge from main to shin

client/package.json

@@ -25,7 +25,8 @@
     "react-icons": "^5.3.0",
     "react-phone-number-input": "^3.4.5",
     "react-router-dom": "^6.26.1",
-    "react-toastify": "^10.0.5"
+    "react-toastify": "^10.0.5",
+    "socket.io-client": "^4.7.5"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

client/src/components/Buyer/Login.jsx

@@ -3,6 +3,9 @@ import { getAuth, signInWithEmailAndPassword } from 'firebase/auth';
 import { app } from '../../../firebase';
 import { useNavigate } from 'react-router-dom';
 import styles from './signup.module.css'; // Import the CSS Module
+import Navi from './Navi'
+import { toast, ToastContainer } from 'react-toastify';
+import img from '../../assets/bgimg.jpeg';
 
 const auth = getAuth(app);
 
@@ -15,12 +18,12 @@ const Login = () => {
     e.preventDefault();
     try {
       await signInWithEmailAndPassword(auth, email, password).then(() => {
-        alert('success');
+        toast.success('Welcome');
         navigate('/buyer');
       });
     } catch (error) {
       // Handle errors here
-      alert(`Error: ${error.message}`);
+      toast.error('Error Loging in:', error);
     }
   };
 
@@ -30,8 +33,9 @@ const Login = () => {
     <>
       <div className={styles.mainvg}>
         <div className={styles.bgimg}>
+          <img src={img} alt="" />
           <div className={styles.fade}>
-            <div className={styles.headervg}>{/* Header content */}</div>
+            <div className={styles.headervg}><Navi/></div>
             <div className={styles.boxvg}>
               <div className={styles.containervg}>
                 <div className={styles.heading}>
@@ -64,6 +68,7 @@ const Login = () => {
             </div>
           </div>
         </div>
+        <ToastContainer/>
       </div>
     </>
   );

client/src/components/Buyer/Navi.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import styles from './signup.module.css';
+import { FaHome } from "react-icons/fa";
+import { useNavigate } from 'react-router-dom';
+
+export default function Navi() {
+  const navigate = useNavigate();
+    return(
+        <div className={styles.navi}>
+          <div className={styles.brand} onClick={() => navigate('/')}>
+            <div className={styles.first}>
+              <h1>Agri</h1>
+            </div>
+            <div className={styles.second}>
+              <h1>Connect</h1>
+            </div>
+          </div>
+          <div className={styles.right}>
+            <button className={styles.bt3} onClick={() => navigate('/')}>
+              <FaHome />
+              <h2>Home</h2>
+            </button>
+          </div>
+        </div>
+      )
+}

client/src/components/Buyer/Signup.jsx

@@ -1,13 +1,17 @@
 import { useState } from 'react';
 import { auth } from '../../../firebase';
-import { useNavigate } from 'react-router-dom';
+import { Navigate, useNavigate } from 'react-router-dom';
+import Navi from './Navi'
 import styles from './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';
-import Navbar from '../LandingPage/Navbar';
+
 
 const googleProvider = new GoogleAuthProvider();
 
@@ -17,30 +21,34 @@ export default function Signup() {
   const navigate = useNavigate();
 
   const signupWithGoogle = () => {
-    signInWithPopup(auth, googleProvider).then(() => alert('success'));
+    signInWithPopup(auth, googleProvider).then((e) => {
+      toast.success('Welcome')
+      navigate('/buyer');  
+    });
   };
 
   const create = async (e) => {
     e.preventDefault();
     try {
       await createUserWithEmailAndPassword(auth, email, password).then(() => {
-        alert('success');
+       toast.success('Welcome');
         navigate('/buyer');
         const user = auth.currentUser;
         console.log(user);
       });
     } catch (error) {
-      alert(`Error: ${error.message}`);
+      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}>
@@ -64,21 +72,25 @@ export default function Signup() {
                 />
                 <div className={styles.google}>
                   <button onClick={signupWithGoogle} className={styles.bt1}>
-                    Sign In With Google
+                    <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('/login')} className={styles.a1}>Login</a>
+                  <a onClick={() => navigate('/login')} className={styles.a1}>Login</a><br></br>
+                  Are you a Farmer?{' '}
+                  <a onClick={() => navigate('/fsignup')} className={styles.a1}>Click Here</a>
                 </p>
               </div>
             </div>
           </div>
         </div>
       </div>
+      <ToastContainer/>
     </div>
   );
 }