From a551e00f04c19260ba9fc8e880bb64f85fa1f33b Mon Sep 17 00:00:00 2001
From: Federico Hurtado <fed_home@Federicos-Mac-mini.local>
Date: Wed, 9 Oct 2024 15:25:19 -0400
Subject: [PATCH] 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 | 42 ++++++++++++++++++++++++++++++++
frontend/package.json | 3 ++-
frontend/src/App.js | 29 +++++++++++++++++++---
frontend/src/components/Home.js | 8 ++++++
frontend/src/components/Login.js | 27 ++++++++++++++++++++
5 files changed, 105 insertions(+), 4 deletions(-)
create mode 100644 frontend/src/components/Login.js
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index e9bcb3e..402182a 100644
--- a/frontend/package-lock.json
+++ b/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",
diff --git a/frontend/package.json b/frontend/package.json
index 58a5d6a..f94cf3a 100644
--- a/frontend/package.json
+++ b/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"
diff --git a/frontend/src/App.js b/frontend/src/App.js
index 734177f..7fdb592 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -1,12 +1,35 @@
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>
);
}
diff --git a/frontend/src/components/Home.js b/frontend/src/components/Home.js
index a37cea1..00601b1 100644
--- a/frontend/src/components/Home.js
+++ b/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> </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> </span>}</p>
</div>
diff --git a/frontend/src/components/Login.js b/frontend/src/components/Login.js
new file mode 100644
index 0000000..7b4eb13
--- /dev/null
+++ b/frontend/src/components/Login.js
@@ -0,0 +1,27 @@
+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;
--
GitLab