Added initial login modal

package.json

@@ -10,13 +10,20 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/styled": "^11.11.0",
+    "@mui/icons-material": "^5.14.16",
+    "@mui/material": "^5.14.17",
+    "@mui/styled-engine": "^5.14.17",
+    "@mui/styled-engine-sc": "^6.0.0-alpha.5",
     "@reduxjs/toolkit": "^1.9.7",
     "@tanstack/react-query": "^5.8.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^8.1.3",
     "react-router-dom": "^6.18.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "reactjs-popup": "^2.0.6",
+    "styled-components": "^6.1.1"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",

src/App.css

@@ -4,39 +4,3 @@
   padding: 2rem;
   text-align: center;
 }
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

src/App.tsx

@@ -7,6 +7,7 @@ import store from "./Components/Plugins/Redux/Store/Store";
 const queryClient = new QueryClient();
 import { ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
+import "./styles.css";
 const router = createHashRouter([
   {
     path: "/",

src/Components/Buttons/Button.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
-import styles from "../styles";
-import { colors } from "../styles";
+import styles from "../../styles";
+import { colors } from "../../styles";
 
 export interface props {
   onClick: React.MouseEventHandler<HTMLButtonElement>;

src/Components/LoginModal/LoginModal.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import styles from "../../styles";
+import TextField from "@mui/material/TextField";
+import OutlinedInput from "@mui/material/OutlinedInput";
+import InputAdornment from "@mui/material/InputAdornment";
+import IconButton from "@mui/material/IconButton";
+import Visibility from "@mui/icons-material/Visibility";
+import VisibilityOff from "@mui/icons-material/VisibilityOff";
+
+export default function LoginModal() {
+  const [showPassword, setShowPassword] = useState(false);
+  const [user, setUser] = useState({
+    username: "",
+    password: "",
+  });
+  return (
+    <>
+      <p style={{ ...styles.text_dark, ...styles.text_L }}>Welcome back!</p>
+      <div style={styles.flex_column}>
+        <TextField
+          id="outlined-helperText"
+          label="Username"
+          style={{
+            ...styles.text_dark,
+            ...styles.text_M,
+            ...{
+              background: "none",
+              borderRadius: 8,
+              minWidth: "15vw",
+              minHeight: "5vh",
+              marginTop: 16,
+            },
+          }}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, username: e.target.value })
+          }
+          value={user.username}
+          placeholder={"Enter username"}
+        />
+        <TextField
+          id="outlined-helperText"
+          type={showPassword ? "text" : "password"}
+          style={{
+            ...styles.text_dark,
+            ...styles.text_M,
+            ...{
+              background: "none",
+              borderRadius: 8,
+              minWidth: "15vw",
+              minHeight: "5vh",
+              marginTop: 16,
+            },
+          }}
+          InputProps={{
+            endAdornment: (
+              <InputAdornment position="end">
+                <IconButton
+                  aria-label="toggle password visibility"
+                  onClick={() => setShowPassword(!showPassword)}
+                  edge="end"
+                >
+                  {showPassword ? <VisibilityOff /> : <Visibility />}
+                </IconButton>
+              </InputAdornment>
+            ),
+          }}
+          label="Password"
+          placeholder={"Enter password"}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setUser({ ...user, password: e.target.value })
+          }
+          value={user.password}
+        />
+      </div>
+    </>
+  );
+}

src/Pages/LandingPage/LandingPage.tsx

@@ -1,8 +1,13 @@
 import Button from "../../Components/Buttons/Button";
-import styles from "../../Components/styles";
+import styles from "../../styles";
 import citc_logo from "../../assets/citc_logo.jpg";
 import { toast } from "react-toastify";
+import Popup from "reactjs-popup";
+import "reactjs-popup/dist/index.css";
+import { useState } from "react";
+import LoginModal from "../../Components/LoginModal/LoginModal";
 export default function LandingPage() {
+  const [open, setOpen] = useState(false);
   return (
     <div style={styles.background}>
       <div
@@ -50,7 +55,7 @@ export default function LandingPage() {
                 type={"light"}
                 label={"Login"}
                 onClick={() => {
-                  toast("Successfully logged in!");
+                  setOpen(!open);
                 }}
               />
               <Button
@@ -60,6 +65,25 @@ export default function LandingPage() {
                   toast("Redirecting!");
                 }}
               />
+              <Popup
+                open={open}
+                onClose={() => setOpen(!open)}
+                modal
+                position={"top center"}
+                contentStyle={{
+                  width: "30vw",
+                  borderRadius: 16,
+                  borderColor: "grey",
+                  borderStyle: "solid",
+                  borderWidth: 1,
+                  padding: 16,
+                  alignContent: "center",
+                  justifyContent: "center",
+                  textAlign: "center",
+                }}
+              >
+                <LoginModal />
+              </Popup>
             </div>
           </div>
         </div>

src/styles.css

@@ -0,0 +1,20 @@
+@keyframes anvil {
+  0% {
+    transform: scale(1) translateY(0px);
+    opacity: 0;
+    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
+  }
+  1% {
+    transform: scale(0.96) translateY(10px);
+    opacity: 0;
+    box-shadow: 0 0 0 rgba(241, 241, 241, 0);
+  }
+  100% {
+    transform: scale(1) translateY(0px);
+    opacity: 1;
+    box-shadow: 0 0 500px rgba(241, 241, 241, 0);
+  }
+}
+.popup-content {
+  -webkit-animation: anvil 0.3s cubic-bezier(0.38, 0.1, 0.36, 0.9) forwards;
+}

tsconfig.json

@@ -18,7 +18,11 @@
     "strict": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
+    "noFallthroughCasesInSwitch": true,
+
+    "paths":{
+      "@mui/styled-engine": ["./node_modules/@mui/styled-engine-sc"]
+    }
   },
   "include": ["src"],
   "references": [{ "path": "./tsconfig.node.json" }]