Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add ToS & Privacy Policy modal and navbar #43

Merged
merged 2 commits into from
Nov 15, 2024
Merged

Add ToS & Privacy Policy modal and navbar #43

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
587ec45
Add ToS & Privacy Policy modal and navbar
bednie Nov 14, 2024
46e92f0
Fix errors
bednie Nov 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion cypress/support/commands.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,4 +22,4 @@
//
//
// -- This will overwrite an existing command --
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
8 changes: 4 additions & 4 deletions cypress/support/component.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 />)
// cy.mount(<MyComponent />)
70 changes: 70 additions & 0 deletions src/account/signUp/SignUp.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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);
Expand Down Expand Up @@ -297,6 +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>
Expand All @@ -311,6 +315,72 @@ 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>
Expand Down
76 changes: 60 additions & 16 deletions src/navBar/NavBar.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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
Expand Down Expand Up @@ -61,21 +68,19 @@ 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}>
Contact Us
</Nav.Link>
<Nav.Link
as={Link}
to="/contactus"
onClick={handleNavClick}
// className="text-nowrap"
onClick={() => {
handleNavClick();
handleShowLegal();
}}
>
Contact Us
Legal
</Nav.Link>
</Nav>
<div
Expand All @@ -85,20 +90,20 @@ export default function NavBar() {
as={Link}
to="/signin"
onClick={handleNavClick}
className="py-1 text-center login-btn "
className="py-1 text-center login-btn"
>
Log In
</Nav.Link>
<Nav.Link
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>
Expand All @@ -117,6 +122,45 @@ 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>
);
}