Create login page and homepage that are able to communicate. Set up so that...

Create login page and homepage that are able to communicate. Set up so that backend and frontend can communicate both in development and in cluster IP final.

frontend/package-lock.json

@@ -14,6 +14,7 @@
         "axios": "^1.7.7",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-router-dom": "^6.26.2",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
       }
@@ -3535,6 +3536,15 @@
         }
       }
     },
+    "node_modules/@remix-run/router": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.19.2.tgz",
+      "integrity": "sha512-baiMx18+IMuD1yyvOGaHM9QrVUPGGG0jC+z+IPHnRJWUAUvaKuWKyE8gjDj2rzv3sz9zOGoRSPgeBVHRhZnBlA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=14.0.0"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16258,6 +16268,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.26.2.tgz",
+      "integrity": "sha512-tvN1iuT03kHgOFnLPfLJ8V95eijteveqdOSk+srqfePtQvqCExB8eHOYnlilbOcyJyKnYkr1vJvf7YqotAJu1A==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.26.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.26.2.tgz",
+      "integrity": "sha512-z7YkaEW0Dy35T3/QKPYB1LjMK2R1fxnHO8kWpUMTBdfVzZrWOiY9a7CtN8HqdWtDUWd5FY6Dl8HFsqVwH4uOtQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@remix-run/router": "1.19.2",
+        "react-router": "6.26.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.1.tgz",

frontend/package.json

@@ -9,11 +9,12 @@
     "axios": "^1.7.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-router-dom": "^6.26.2",
     "react-scripts": "5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "FAST_REFRESH=false react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject"

frontend/src/App.js

 import "./App.css";
 import React from "react";
+import {
+  BrowserRouter as Router,
+  Route,
+  Routes,
+  Navigate,
+} from "react-router-dom";
+
 import Home from "./components/Home";
+import Login from "./components/Login";
+
+// Returns true if localstorage has an authToken item
+const isAuthenticated = () => {
+  return localStorage.getItem("authToken") ? true : false;
+};
 
 function App() {
   return (
-    <div className="App">
-      <Home />
-    </div>
+    <Router>
+      <div className="App">
+        <Routes>
+          {/* If authenticated, show Home; otherwise, redirect to /login */}
+          <Route
+            path="/"
+            element={isAuthenticated() ? <Home /> : <Navigate to="/login" />}
+          />
+          {/* Login route */}
+          <Route path="/login" element={<Login />} />
+        </Routes>
+      </div>
+    </Router>
   );
 }
 

frontend/src/components/Home.js

@@ -35,11 +35,19 @@ function Home() {
     <div>
       <h1>Home Page</h1>
 
+      <p>
+        Below are the results of calling the backend server. The API URL should
+        be localhost in development and be
+        http://corpsdirectory.discovery.cs.vt.edu/api in the cluster.
+      </p>
+
       {/* Display data if it exists */}
       <p>
         Data: {data ? <span>{JSON.stringify(data)}</span> : <span>&nbsp;</span>}
       </p>
 
+      <p>API URL: {process.env.REACT_APP_API_URL}</p>
+
       {/* display error if there is an error*/}
       <p>Error: {error ? <span>{error}</span> : <span>&nbsp;</span>}</p>
     </div>

frontend/src/components/Login.js

+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
+
+function Login() {
+  const navigate = useNavigate();
+
+  /*
+  Function that runs once login is processed.
+  The function creates an authToken to be used to check
+  whether the user is logged in and redirects them to 
+  the home page.
+  */
+  const handleLogin = () => {
+    // Simulate a login process, set token in local storage for example
+    localStorage.setItem("authToken", "your-token");
+    navigate("/"); // Redirect to home page after login
+  };
+
+  return (
+    <div>
+      <h1>Login Page</h1>
+      <button onClick={handleLogin}>Simulate successful login</button>
+    </div>
+  );
+}
+
+export default Login;