DRAFT - Adds login modal

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 (
+    <div className="loginModalOverlayer">
+      <div className="loginModal">
+        <button onClick={handleClose} className="iconButton">
+          <img src={closeIcon} alt="close-icon" />
+        </button>
+        <h2>Welcome, Collaborator!</h2>
+        <p>
+          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.
+        </p>
+        <form>
+          <div className="input">
+            <label>Email</label>
+            <input
+              name="Email"
+              type="text"
+              placeholder="you@example.com"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <div className="input">
+            <label>Password</label>
+            <input
+              name="Password"
+              type="password"
+              placeholder="Enter your password"
+              value={password}
+              onChange={(e) => setPassword(e.target.value)}
+            />
+          </div>
+        </form>
+        <div className="loginNav">
+          <a>Forgot your password?</a>
+          <button onClick={handleLogin}>Log In</button>
+          <p>
+            Don't have an account yet? <a>Sign up here!</a>
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}

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 (
     <nav>
+      {showLoginModal ? <LoginModal /> : <></>}
       <div className="navElements">
         <div className="menu">
           <img src={logo} alt="logo" />
@@ -50,7 +48,6 @@ export default function NavBar() {
               <a className="inactiveLink" title="Coming Soon">
                 Your Team
               </a>
-              {/* Just use testing-Remove later */}
               <NavLink
                 to="/results"
                 className={({ isActive }) => (isActive ? "activeLink" : "")}

src/Context/UserContext.jsx

@@ -7,6 +7,10 @@ export const defaultState = {
   setQuizScore: () => {},
   missionCompleted: false,
   setMissionCompleted: () => {},
+  isLoggedIn: false,
+  setIsLoggedIn: () => {},
+  showLoginModal: false,
+  setShowLoginModal: () => {},
 };
 
 export const UserContext = createContext(defaultState);
@@ -17,13 +21,19 @@ export const UserContextProvider = ({ children }) => {
   const [activityCompleted, setActivityCompleted] = useState(false);
   const [quizScore, setQuizScore] = useState(0);
   const [missionCompleted, setMissionCompleted] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(false);
+  const [showLoginModal, setShowLoginModal] = useState(false);
   const value = {
     activityCompleted,
     setActivityCompleted,
     quizScore,
     setQuizScore,
     missionCompleted,
     setMissionCompleted,
+    isLoggedIn,
+    setIsLoggedIn,
+    showLoginModal,
+    setShowLoginModal,
   };
   return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
 };

src/styles/LoginModal.css

@@ -0,0 +1,85 @@
+.loginModalOverlayer {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.15);
+  align-items: center;
+  z-index: 1000;
+}
+
+.loginModal {
+  width: 32.5rem;
+  height: 37.5rem;
+  border-radius: 0.5rem;
+  background: #fff;
+  color: #1c1c1e;
+  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
+  display: flex;
+  flex-flow: column;
+  padding: 2.47rem 2.38rem 3.5rem 2.38rem;
+}
+
+.iconButton {
+  height: 1.5rem;
+  margin-left: auto; 
+  margin-right: 0;
+
+}
+
+.loginModal > h2 {
+  font-size: 1.75rem;
+  font-weight: 700;
+  line-height: 1.875rem;
+  margin-top: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+.loginModal p {
+  color: #1c1c1e;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.375rem;
+  margin-bottom: 1.63rem;
+}
+
+.input {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 2.38rem;
+}
+
+.input label {
+  font-size: 1rem;
+  margin-bottom: 0.5rem;
+}
+
+.input input {
+  height: 2.375rem;
+  border-radius: 0.375rem;
+  border: 1px solid #E5E5E5;
+  padding: 0.5rem 0.62rem;
+}
+
+.loginNav {
+  margin: 0.6rem auto 0 auto;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.loginNav a {
+  margin-bottom: 1rem;
+  font-size: 1rem;
+  font-weight: 500;
+  color: #0036F5;
+}
+
+.loginNav button {
+  margin-bottom: 1.6rem;
+  width: 9.375rem;
+}
+