From 587ec458c6854a05d3d191d47f5d3b51447d2275 Mon Sep 17 00:00:00 2001
From: bednie <88800117+bednie@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:45:57 +0000
Subject: [PATCH 1/2] Add ToS & Privacy Policy modal and navbar

---
 src/account/signUp/SignUp.jsx | 64 ++++++++++++++++++++++++++
 src/navBar/NavBar.jsx         | 87 ++++++++++++++++++++++++-----------
 2 files changed, 125 insertions(+), 26 deletions(-)

diff --git a/src/account/signUp/SignUp.jsx b/src/account/signUp/SignUp.jsx
index c28ccaf..d0590ee 100644
--- a/src/account/signUp/SignUp.jsx
+++ b/src/account/signUp/SignUp.jsx
@@ -19,6 +19,8 @@ import {
 } from "../../contexts/AccountContext";
 import LoadingSpinner from "../../common/LoadingSpinner";
 
+import { Modal, Tabs, Tab } from "react-bootstrap";
+
 export default function SignUp() {
   const { userType, userEmail, userName, userID, userToken, userAccDetail } =
     useAccountContext();
@@ -42,6 +44,7 @@ export default function SignUp() {
   const [state, setState] = useState("");
   const [country, setCountry] = useState("");
   const [userInterest, setUserInterest] = useState("");
+  const [showLegal, setShowLegal] = useState(false);
 
   const [errors, setErrors] = useState({});
   const [serverError, setServerError] = useState(null);
@@ -297,6 +300,8 @@ export default function SignUp() {
                   <option value="Other">Other</option>
                 </Form.Select>
               </div>
+            
+              
               <div className="ask-sign-in text-end">
                 Already have an account?
               </div>
@@ -311,6 +316,65 @@ export default function SignUp() {
                   Sign In
                 </Link>
               </div>
+              <br></br>
+              <div className="agreement-text text-muted text-center mb-3">
+                By signing up, you agree to our{" "}
+                <button
+                  type="button"
+                  className="legal-link"
+                  onClick={() => setShowLegal(true)}
+                  style={{
+                    background: "none",
+                    border: "none",
+                    padding: 0,
+                    color: "#0d6efd",
+                    textDecoration: "underline",
+                    cursor: "pointer",
+                  }}
+                >
+                  Terms of Service and Privacy Policy
+                </button>
+                {/* Legal Documents Modal */}
+                <Modal show={showLegal} onHide={() => setShowLegal(false)} size="lg">
+                  <Modal.Header closeButton>
+                    <Modal.Title>Legal Documents</Modal.Title>
+                  </Modal.Header>
+                  <Modal.Body style={{ maxHeight: "70vh", overflowY: "auto" }}>
+                    <Tabs
+                      defaultActiveKey="tos"
+                      className="mb-3"
+                    >
+                      <Tab eventKey="tos" title="Terms of Service">
+                        <h2>Terms of Service</h2>
+                        <p className="text-muted">Last Updated: November 14, 2024</p>
+                        
+                        <h3>1. Agreement to Terms</h3>
+                        <p>
+                          By accessing and using this application ("App"), you agree to be bound by these Terms of Service ("Terms"). 
+                          If you disagree with any part of these terms, you may not access the App.
+                        </p>
+
+                        {/* Add the rest of your Terms of Service content here */}
+                      </Tab>
+                      <Tab eventKey="privacy" title="Privacy Policy">
+                        <h2>Privacy Policy</h2>
+                        <p className="text-muted">Last Updated: November 14, 2024</p>
+
+                        <h3>1. Information We Collect</h3>
+                        <h4>Personal Information</h4>
+                        <ul>
+                          <li>Name and email address</li>
+                          <li>Student ID or verification</li>
+                          <li>Profile information you provide</li>
+                          <li>Device information and IP address</li>
+                        </ul>
+
+                        {/* Add the rest of your Privacy Policy content here */}
+                      </Tab>
+                    </Tabs>
+                  </Modal.Body>
+                </Modal>
+              </div>
             </Col>
           </Form>
         </div>
diff --git a/src/navBar/NavBar.jsx b/src/navBar/NavBar.jsx
index 6edde5d..9dcd5c3 100644
--- a/src/navBar/NavBar.jsx
+++ b/src/navBar/NavBar.jsx
@@ -1,7 +1,10 @@
-import React, { useState, useEffect, useContext } from "react";
+import React, { useState } from "react";
 import { Link } from "react-router-dom";
 import "./NavBar.css";
 import { useAccountContext } from "../contexts/AccountContext";
+import Modal from "react-bootstrap/Modal";
+import Tab from "react-bootstrap/Tab";
+import Tabs from "react-bootstrap/Tabs";
 
 import AgriLens from "../common/AgriLens";
 import AgriLensWithLogo from "../common/AgriLensWithLogo";
@@ -14,12 +17,16 @@ import Offcanvas from "react-bootstrap/Offcanvas";
 
 export default function NavBar() {
   const { userType } = useAccountContext();
-
   const [expanded, setExpanded] = useState(false);
+  const [showLegal, setShowLegal] = useState(false);
+
   const handleNavClick = () => {
     setExpanded(false);
   };
 
+  const handleCloseLegal = () => setShowLegal(false);
+  const handleShowLegal = () => setShowLegal(true);
+
   return (
     <section id="navbar">
       <Navbar
@@ -61,31 +68,22 @@ export default function NavBar() {
                 <Nav.Link as={Link} to="/pages" onClick={handleNavClick}>
                   Pages
                 </Nav.Link>
-                <Nav.Link
-                  as={Link}
-                  to="/aboutus"
-                  onClick={handleNavClick}
-                  // className="text-nowrap"
-                >
+                <Nav.Link as={Link} to="/aboutus" onClick={handleNavClick}>
                   About Us
                 </Nav.Link>
-                <Nav.Link
-                  as={Link}
-                  to="/contactus"
-                  onClick={handleNavClick}
-                  // className="text-nowrap"
-                >
+                <Nav.Link as={Link} to="/contactus" onClick={handleNavClick}>
                   Contact Us
                 </Nav.Link>
+                <Nav.Link onClick={() => { handleNavClick(); handleShowLegal(); }}>
+                  Legal
+                </Nav.Link>
               </Nav>
-              <div
-                className={`acc-btn align-items-center ${userType === "" ? "" : "d-none"}`}
-              >
+              <div className={`acc-btn align-items-center ${userType === "" ? "" : "d-none"}`}>
                 <Nav.Link
                   as={Link}
                   to="/signin"
                   onClick={handleNavClick}
-                  className="py-1 text-center login-btn "
+                  className="py-1 text-center login-btn"
                 >
                   Log In
                 </Nav.Link>
@@ -93,23 +91,19 @@ export default function NavBar() {
                   as={Link}
                   to="/signup"
                   onClick={handleNavClick}
-                  className="py-1 text-center signup-btn "
+                  className="py-1 text-center signup-btn"
                 >
                   Sign Up
                 </Nav.Link>
               </div>
-              <div className={`acc-view   ${userType === "" ? "d-none" : ""}`}>
+              <div className={`acc-view ${userType === "" ? "d-none" : ""}`}>
                 <div className="acc-type text-center">
                   {userType}
                   <span>
                     <i className="fa-solid fa-square-check ms-3"></i>
                   </span>
                 </div>
-                <Link
-                  to="/profile"
-                  onClick={handleNavClick}
-                  className="text-center"
-                >
+                <Link to="/profile" onClick={handleNavClick} className="text-center">
                   <img src={userLoggedInIcon} alt="User is Logged In Icon" />
                 </Link>
               </div>
@@ -117,6 +111,47 @@ export default function NavBar() {
           </Navbar.Offcanvas>
         </Container>
       </Navbar>
+
+      {/* Legal Documents Modal */}
+      <Modal show={showLegal} onHide={handleCloseLegal} size="lg">
+        <Modal.Header closeButton>
+          <Modal.Title>Legal Documents</Modal.Title>
+        </Modal.Header>
+        <Modal.Body style={{ maxHeight: '70vh', overflowY: 'auto' }}>
+          <Tabs
+            defaultActiveKey="tos"
+            className="mb-3"
+          >
+            <Tab eventKey="tos" title="Terms of Service">
+              <h2>Terms of Service</h2>
+              <p className="text-muted">Last Updated: November 14, 2024</p>
+              
+              <h3>1. Agreement to Terms</h3>
+              <p>
+                By accessing and using this application ("App"), you agree to be bound by these Terms of Service ("Terms"). 
+                If you disagree with any part of these terms, you may not access the App.
+              </p>
+
+              {/* Add the rest of your Terms of Service content here */}
+            </Tab>
+            <Tab eventKey="privacy" title="Privacy Policy">
+              <h2>Privacy Policy</h2>
+              <p className="text-muted">Last Updated: November 14, 2024</p>
+
+              <h3>1. Information We Collect</h3>
+              <h4>Personal Information</h4>
+              <ul>
+                <li>Name and email address</li>
+                <li>Student ID or verification</li>
+                <li>Profile information you provide</li>
+                <li>Device information and IP address</li>
+              </ul>
+
+              {/* Add the rest of your Privacy Policy content here */}
+            </Tab>
+          </Tabs>
+        </Modal.Body>
+      </Modal>
     </section>
   );
-}
+}
\ No newline at end of file

From 46e92f06fffdaf1440f4eb7486361fc6c6d1e5c3 Mon Sep 17 00:00:00 2001
From: bednie <88800117+bednie@users.noreply.github.com>
Date: Thu, 14 Nov 2024 22:57:07 +0000
Subject: [PATCH 2/2] Fix errors

---
 cypress/support/commands.js   |  2 +-
 cypress/support/component.js  |  8 ++++----
 src/account/signUp/SignUp.jsx | 30 ++++++++++++++++++------------
 src/navBar/NavBar.jsx         | 33 +++++++++++++++++++++------------
 4 files changed, 44 insertions(+), 29 deletions(-)

diff --git a/cypress/support/commands.js b/cypress/support/commands.js
index 66ea16e..119ab03 100644
--- a/cypress/support/commands.js
+++ b/cypress/support/commands.js
@@ -22,4 +22,4 @@
 //
 //
 // -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
\ No newline at end of file
+// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
diff --git a/cypress/support/component.js b/cypress/support/component.js
index 8f9154b..e3c2349 100644
--- a/cypress/support/component.js
+++ b/cypress/support/component.js
@@ -14,14 +14,14 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
+import "./commands";
 
 // Alternatively you can use CommonJS syntax:
 // require('./commands')
 
-import { mount } from 'cypress/react18'
+import { mount } from "cypress/react18";
 
-Cypress.Commands.add('mount', mount)
+Cypress.Commands.add("mount", mount);
 
 // Example use:
-// cy.mount(<MyComponent />)
\ No newline at end of file
+// cy.mount(<MyComponent />)
diff --git a/src/account/signUp/SignUp.jsx b/src/account/signUp/SignUp.jsx
index d0590ee..8513290 100644
--- a/src/account/signUp/SignUp.jsx
+++ b/src/account/signUp/SignUp.jsx
@@ -300,8 +300,7 @@ export default function SignUp() {
                   <option value="Other">Other</option>
                 </Form.Select>
               </div>
-            
-              
+
               <div className="ask-sign-in text-end">
                 Already have an account?
               </div>
@@ -335,30 +334,37 @@ export default function SignUp() {
                   Terms of Service and Privacy Policy
                 </button>
                 {/* Legal Documents Modal */}
-                <Modal show={showLegal} onHide={() => setShowLegal(false)} size="lg">
+                <Modal
+                  show={showLegal}
+                  onHide={() => setShowLegal(false)}
+                  size="lg"
+                >
                   <Modal.Header closeButton>
                     <Modal.Title>Legal Documents</Modal.Title>
                   </Modal.Header>
                   <Modal.Body style={{ maxHeight: "70vh", overflowY: "auto" }}>
-                    <Tabs
-                      defaultActiveKey="tos"
-                      className="mb-3"
-                    >
+                    <Tabs defaultActiveKey="tos" className="mb-3">
                       <Tab eventKey="tos" title="Terms of Service">
                         <h2>Terms of Service</h2>
-                        <p className="text-muted">Last Updated: November 14, 2024</p>
-                        
+                        <p className="text-muted">
+                          Last Updated: November 14, 2024
+                        </p>
+
                         <h3>1. Agreement to Terms</h3>
                         <p>
-                          By accessing and using this application ("App"), you agree to be bound by these Terms of Service ("Terms"). 
-                          If you disagree with any part of these terms, you may not access the App.
+                          By accessing and using this application ("App"), you
+                          agree to be bound by these Terms of Service ("Terms").
+                          If you disagree with any part of these terms, you may
+                          not access the App.
                         </p>
 
                         {/* Add the rest of your Terms of Service content here */}
                       </Tab>
                       <Tab eventKey="privacy" title="Privacy Policy">
                         <h2>Privacy Policy</h2>
-                        <p className="text-muted">Last Updated: November 14, 2024</p>
+                        <p className="text-muted">
+                          Last Updated: November 14, 2024
+                        </p>
 
                         <h3>1. Information We Collect</h3>
                         <h4>Personal Information</h4>
diff --git a/src/navBar/NavBar.jsx b/src/navBar/NavBar.jsx
index 9dcd5c3..7ccbcec 100644
--- a/src/navBar/NavBar.jsx
+++ b/src/navBar/NavBar.jsx
@@ -74,11 +74,18 @@ export default function NavBar() {
                 <Nav.Link as={Link} to="/contactus" onClick={handleNavClick}>
                   Contact Us
                 </Nav.Link>
-                <Nav.Link onClick={() => { handleNavClick(); handleShowLegal(); }}>
+                <Nav.Link
+                  onClick={() => {
+                    handleNavClick();
+                    handleShowLegal();
+                  }}
+                >
                   Legal
                 </Nav.Link>
               </Nav>
-              <div className={`acc-btn align-items-center ${userType === "" ? "" : "d-none"}`}>
+              <div
+                className={`acc-btn align-items-center ${userType === "" ? "" : "d-none"}`}
+              >
                 <Nav.Link
                   as={Link}
                   to="/signin"
@@ -103,7 +110,11 @@ export default function NavBar() {
                     <i className="fa-solid fa-square-check ms-3"></i>
                   </span>
                 </div>
-                <Link to="/profile" onClick={handleNavClick} className="text-center">
+                <Link
+                  to="/profile"
+                  onClick={handleNavClick}
+                  className="text-center"
+                >
                   <img src={userLoggedInIcon} alt="User is Logged In Icon" />
                 </Link>
               </div>
@@ -117,19 +128,17 @@ export default function NavBar() {
         <Modal.Header closeButton>
           <Modal.Title>Legal Documents</Modal.Title>
         </Modal.Header>
-        <Modal.Body style={{ maxHeight: '70vh', overflowY: 'auto' }}>
-          <Tabs
-            defaultActiveKey="tos"
-            className="mb-3"
-          >
+        <Modal.Body style={{ maxHeight: "70vh", overflowY: "auto" }}>
+          <Tabs defaultActiveKey="tos" className="mb-3">
             <Tab eventKey="tos" title="Terms of Service">
               <h2>Terms of Service</h2>
               <p className="text-muted">Last Updated: November 14, 2024</p>
-              
+
               <h3>1. Agreement to Terms</h3>
               <p>
-                By accessing and using this application ("App"), you agree to be bound by these Terms of Service ("Terms"). 
-                If you disagree with any part of these terms, you may not access the App.
+                By accessing and using this application ("App"), you agree to be
+                bound by these Terms of Service ("Terms"). If you disagree with
+                any part of these terms, you may not access the App.
               </p>
 
               {/* Add the rest of your Terms of Service content here */}
@@ -154,4 +163,4 @@ export default function NavBar() {
       </Modal>
     </section>
   );
-}
\ No newline at end of file
+}