Add signup and login pages

frontend/package.json

@@ -16,6 +16,7 @@
     "@types/react": "^18.3.6",
     "@types/react-dom": "^18.3.0",
     "axios": "^1.7.7",
+    "beautify": "^0.0.8",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.26.2",

frontend/src/App.tsx

@@ -3,6 +3,8 @@ import "@fontsource/lexend";
 import { ReactElement } from "react";
 import { Route, Routes } from "react-router-dom";
 import Home from "./pages/Home/Home";
+import SignUp from "./pages/SignUp/SignUp";
+import Login from "./pages/Login/Login";
 //import QuestionList from "./pages/QuestionList/QuestionList";
 import { createTheme, ThemeProvider } from "@mui/material";
 import { MainDialogContextProvider } from "./contexts/MainDialogContext";
@@ -62,6 +64,8 @@ const App = (): ReactElement => {
         <ConfirmationDialogContextProvider>
           <Routes>
             <Route path="/" element={<Home />} />
+            <Route path="/signup" element={<SignUp />} />
+            <Route path="/login" element={<Login />} />
             {/* <Route path="/questions" element={<QuestionList />} /> */}
           </Routes>
         </ConfirmationDialogContextProvider>

frontend/src/components/Navbar/Navbar.scss

@@ -1,4 +1,5 @@
 .Navbar {
+  width: 90%;
   display: flex;
   padding: 20px 34px;
   justify-content: space-between;

frontend/src/components/Navbar/Navbar.tsx

@@ -1,16 +1,20 @@
 import { Box, Button, Typography } from "@mui/material";
 import { ReactElement } from "react";
+import { useNavigate } from "react-router-dom"; // Import useNavigate for navigation
 import "./Navbar.scss";
 import ApiIcon from "@mui/icons-material/Api";
 import { useMainDialog } from "../../contexts/MainDialogContext";
 
 const Navbar = (): ReactElement => {
   const { openMainDialog, setMainDialogTitle, setMainDialogContent } = useMainDialog();
+  const navigate = useNavigate(); 
 
-  const login = () => {
-    setMainDialogTitle("Work in Progress");
-    setMainDialogContent("User service is under construction. Check back in a future milestone!");
-    openMainDialog();
+  const redirectToSignUp = () => {
+    navigate("/signup"); 
+  };
+
+  const redirectToLogin = () => {
+    navigate("/login");
   };
 
   return (
@@ -20,10 +24,10 @@ const Navbar = (): ReactElement => {
         <Typography className="Navbar-title">LuckyJinx</Typography>
       </Box>
       <Box className="Navbar-buttons">
-        <Button color="secondary" variant="contained" onClick={login}>
+        <Button color="secondary" variant="contained" onClick={redirectToSignUp}>
           Sign Up
         </Button>
-        <Button color="primary" variant="contained" onClick={login}>
+        <Button color="primary" variant="contained" onClick={redirectToLogin}>
           Login
         </Button>
       </Box>

frontend/src/pages/Home/Home.tsx

@@ -8,12 +8,6 @@ import Footer from "../../components/Footer/Footer";
 import QuestionList from "../../components/QuestionList/QuestionList";
 
 const Home = (): ReactElement => {
-  // const navigate = useNavigate();
-
-  // const goToQuestionList = () => {
-  //   navigate("/questions");
-  // };
-
   return (
     <Box className="Home">
       <Navbar />

frontend/src/pages/Login/Login.scss

@@ -0,0 +1,151 @@
+.Login {
+  background: var(--Grey-10, #1a1a1a);
+  min-height: 100vh;
+  padding: 40px 80px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  align-items: center;
+
+  &-container {
+    padding-block: 40px;
+    width: 100%;
+    max-width: 1000px;
+    background: var(--Grey-20, #252525);
+    border-radius: 10px;
+    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  &-title {
+    font-size: 2.5rem;
+    font-weight: 700;
+    color: #d4ff50;
+    margin-bottom: 40px;
+  }
+
+  &-subtitle {
+    font-size: 1rem;
+    font-weight: 300;
+    color: #b5b5b5;
+    text-align: center;
+    margin-bottom: 40px;
+  }
+
+  &-form {
+    width: 100%;
+    max-width: 900px;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 40px;
+    align-items: center;
+
+    .MuiTextField-root {
+      background-color: #333;
+      border-radius: 50px; 
+      padding: 10px 15px;
+
+      .MuiOutlinedInput-notchedOutline {
+        border-color: #555;
+        border-radius: 50px; 
+      }
+
+      .MuiInputLabel-root {
+        color: #999;
+      }
+    }
+
+    .SignUp-password {
+      position: relative;
+
+      .password-eye-icon {
+        position: absolute;
+        top: 50%;
+        right: 10px;
+        transform: translateY(-50%);
+        cursor: pointer;
+        color: #999;
+      }
+    }
+  }
+
+  &-button {
+    grid-column: span 2; 
+    background-color: #d4ff50;
+    color: black;
+    padding: 10px 20px;
+    border-radius: 5px;
+    font-size: 1.2rem;
+    text-transform: none;
+    margin-top: 20px;
+
+    &:hover {
+      background-color: #c3ff40;
+    }
+  }
+
+  &-signup {
+    grid-column: span 2;
+    color: #e4e4e7;
+    margin-top: 20px;
+    font-size: 0.9rem;
+    text-align: center;
+
+    a {
+      color: #d4ff50;
+      text-decoration: none;
+      font-weight: 500;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  &-or {
+    grid-column: span 2;
+    color: #999;
+    font-size: 0.85rem;
+    margin: 20px 0;
+  }
+
+  &-social {
+    grid-column: span 2;
+    display: flex;
+    justify-content: center;
+    gap: 1.5rem;
+
+    .SignUp-social-button {
+      width: 50px;
+      height: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 50%;
+      background-color: #333;
+      cursor: pointer;
+      transition: background-color 0.3s;
+
+      &:hover {
+        background-color: #444;
+      }
+
+      img {
+        width: 30px;
+        height: 30px;
+      }
+    }
+  }
+}
+
+.forgot-password {
+  color: #3f51b5; 
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline; 
+  }
+}
+

frontend/src/pages/Login/Login.tsx

@@ -0,0 +1,86 @@
+import { ReactElement, useState } from "react";
+import { Box, Button, Typography, TextField, IconButton, InputAdornment } from "@mui/material";
+import Navbar from "../../components/Navbar/Navbar";
+import Footer from "../../components/Footer/Footer";
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import "./Login.scss";
+
+const Login = (): ReactElement => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    setShowPassword((prev) => !prev);
+  };
+
+  return (
+    <Box className="Login">
+      <Navbar />
+
+      <Box className="Login-container">
+        <Typography variant="body2" className="Home-welcome-title">
+          Login
+        </Typography>
+        <Typography className="Login-subtitle" sx={{ mb: 3 }}>
+          Welcome back! Please log in to access your account.
+        </Typography>
+
+        <Box className="Login-form" sx={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
+          <Box sx={{ display: 'flex', width: '100%', justifyContent: 'space-between'}}>
+            <TextField
+              label="Enter your Email"
+              variant="outlined"
+              fullWidth
+              sx={{ mr: 1 }} 
+            />
+            <TextField
+              label="Enter your Password"
+              type={showPassword ? "text" : "password"}
+              variant="outlined"
+              fullWidth
+              InputProps={{
+                endAdornment: (
+                  <InputAdornment position="end">
+                    <IconButton
+                      onClick={togglePasswordVisibility}
+                      className="password-eye-icon"
+                      edge="end"
+                    >
+                      {showPassword ? <VisibilityOff /> : <Visibility />}
+                    </IconButton>
+                  </InputAdornment>
+                )
+              }}
+            />
+          </Box>
+          <Typography 
+            component="a" 
+            href="/forgot-password" 
+            className="forgot-password" 
+            sx={{ textDecoration: 'underline', textAlign: 'center' }}
+          >
+            Forgot password?
+          </Typography>
+
+          <Button
+            color="primary"
+            variant="contained"
+            className="LoginUp-button"
+          >
+            Login
+          </Button>
+
+          <Typography className="Login-signup">
+            Not registered yet? <a href="/signup">Sign Up</a>
+          </Typography>
+
+          {/* <Typography className="SignUp-or">Or Continue with</Typography> */}
+        </Box>
+      </Box>
+
+      <Footer />
+    </Box>
+  );
+};
+
+export default Login;