PR: Add Login and Protected ResumeBook Route

client/src/App.js

@@ -1,30 +1,28 @@
 import React from "react";
-import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
-import { Home, Board, Sponsors, Resources, Test, ResumeBook } from "./pages";
+import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom";
+import { Home, Board, Sponsors, Resources, ResumeBook } from "./pages";
 import { Footer, Navigation } from "./molecules";
-import ProgressBar from "react-scroll-progress-bar";
-import Calendar from "./atoms/CalendarSlots/Calendar";
-import CalendarEmbed from "./atoms/CalendarSlots/CalendarEmbed";
+import Login from "./pages/Login/Login";
+import PrivateRoute from "./components/PrivateRoute";
 
 function App() {
   return (
     <div className="App">
-      <ProgressBar bgcolor="#b81c34" />
       <Router>
         <Navigation />
         <Switch>
-          <Route path="/" exact component={() => <Home />} />
-          <Route path="/board" exact component={() => <Board />} />
-          <Route path="/sponsors" exact component={() => <Sponsors />} />
-          <Route path="/resources" exact component={() => <Resources />} />
-          {/* <Route path="/calendar" exact component={() => <Calendar />} /> */}
-          <Route path="/calendar" exact component={() => <CalendarEmbed />} />
-          <Route path="/resume-book" exact component={() => <ResumeBook />} />
+          <Route path="/" exact component={Home} />
+          <Route path="/login" exact component={Login} />
+          <PrivateRoute path="/resume-book" exact component={ResumeBook} />
+          <Route path="/board" exact component={Board} />
+          <Route path="/sponsors" exact component={Sponsors} />
+          <Route path="/resources" exact component={Resources} />
+          <Redirect to="/" />
         </Switch>
         <Footer />
       </Router>
     </div>
   );
 }
 
-export default App;
+export default App;

client/src/components/PrivateRoute.jsx

@@ -0,0 +1,17 @@
+import React from "react";
+import { Route, Redirect } from "react-router-dom";
+
+const PrivateRoute = ({ component: Component, ...rest }) => {
+  const isAuthenticated = localStorage.getItem("authenticated") === "true";
+
+  return (
+    <Route
+      {...rest}
+      render={(props) =>
+        isAuthenticated ? <Component {...props} /> : <Redirect to="/login" />
+      }
+    />
+  );
+};
+
+export default PrivateRoute;

client/src/pages/Login/Login.css

@@ -0,0 +1,52 @@
+.login-container {
+    max-width: 400px;
+    margin: 50px auto;
+    padding: 20px;
+    border: 1px solid #ccc;
+    border-radius: 8px;
+    background-color: #f9f9f9;
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  }
+
+  .login-container h1 {
+    text-align: center;
+    margin-bottom: 20px;
+  }
+
+  .form-group {
+    margin-bottom: 15px;
+  }
+
+  .form-group label {
+    display: block;
+    margin-bottom: 5px;
+    font-weight: bold;
+  }
+
+  .form-group input {
+    width: 100%;
+    padding: 8px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+  }
+
+  .error {
+    color: red;
+    font-size: 14px;
+    margin-bottom: 10px;
+  }
+
+  button {
+    width: 100%;
+    padding: 10px;
+    background-color: #b01c33;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  button:hover {
+    background-color: #c73046;
+  }

client/src/pages/Login/Login.jsx

@@ -0,0 +1,58 @@
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import "./Login.css";
+
+const Login = () => {
+  const [username, setUsername] = useState("");
+  const [password, setPassword] = useState("");
+  const [error, setError] = useState("");
+  const history = useHistory();
+
+  const handleLogin = (e) => {
+    e.preventDefault();
+
+    // Temporary hardcoded credentials for simplicity
+    const validUsername = "username";
+    const validPassword = "password";
+
+    if (username === validUsername && password === validPassword) {
+      // Save authentication state (e.g., in localStorage)
+      localStorage.setItem("authenticated", "true");
+      history.push("/resume-book"); // Redirect to ResumeBook
+    } else {
+      setError("Invalid username or password");
+    }
+  };
+
+  return (
+    <div className="login-container">
+      <h1>Login</h1>
+      <form onSubmit={handleLogin}>
+        <div className="form-group">
+          <label htmlFor="username">Username</label>
+          <input
+            type="text"
+            id="username"
+            value={username}
+            onChange={(e) => setUsername(e.target.value)}
+            required
+          />
+        </div>
+        <div className="form-group">
+          <label htmlFor="password">Password</label>
+          <input
+            type="password"
+            id="password"
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            required
+          />
+        </div>
+        {error && <p className="error">{error}</p>}
+        <button type="submit">Login</button>
+      </form>
+    </div>
+  );
+};
+
+export default Login;