diff --git a/src/Components/LoginModal.jsx b/src/Components/LoginModal.jsx new file mode 100644 index 0000000..4c0b2a0 --- /dev/null +++ b/src/Components/LoginModal.jsx @@ -0,0 +1,69 @@ +import "../styles/LoginModal.css"; +import { useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { useUserContext } from "../Context/UserContext"; +import closeIcon from "../assets/icons/closeIcon.svg"; + +export default function LoginModal() { + const navigate = useNavigate(); + const { setIsLoggedIn, setShowLoginModal } = useUserContext(); + const [email, setEmail] = useState(""); + const [password, setPassword] = useState(""); + + function handleLogin() { + if (email && password) { + setIsLoggedIn(true); + setShowLoginModal(false); + navigate("/dashboard"); + } + } + + function handleClose() { + setShowLoginModal(false); + } + + return ( +
+
+ +

Welcome, Collaborator!

+

+ Ready to connect? Enter your email to begin your mission. This is a + private, secure space designed for you and your teammates. Your + mission of connection starts here. +

+
+
+ + setEmail(e.target.value)} + /> +
+
+ + setPassword(e.target.value)} + /> +
+
+
+ Forgot your password? + +

+ Don't have an account yet? Sign up here! +

+
+
+
+ ); +} diff --git a/src/Components/NavBar.jsx b/src/Components/NavBar.jsx index 8f23a74..6ca3e82 100644 --- a/src/Components/NavBar.jsx +++ b/src/Components/NavBar.jsx @@ -1,19 +1,12 @@ -import { NavLink, useLocation, useNavigate } from "react-router-dom"; -import { useState } from "react"; +import { NavLink, useLocation } from "react-router-dom"; import logo from "../assets/icons/logo.svg"; import "../styles/NavBar.css"; import NavUserSection from "./NavUserSection"; +import LoginModal from "./LoginModal"; +import { useUserContext } from "../Context/UserContext"; export default function NavBar() { - const navigate = useNavigate(); - const [isLoggedIn, setIsLoggedIn] = useState(false); - - // TODO: Update to link to the dashboard after activity has been completed - const handleLoginClick = () => { - setIsLoggedIn(true); - navigate("/dashboard"); - }; - + const { showLoginModal, setShowLoginModal, isLoggedIn } = useUserContext(); const { pathname } = useLocation(); const hideOnActivity = @@ -24,8 +17,13 @@ export default function NavBar() { if (hideOnActivity || hideOnResults) return null; + function handleLoginClick() { + setShowLoginModal(true); + } + return (