Merge pull request #42 from JacobDChamberlain/protectStockPage

require login to view stock page

frontend/src/components/Login/Login.css

@@ -0,0 +1,5 @@
+.login-wrapper {
+    height: 100vh;
+}
+
+/* please make all css boostrap like stock page */

frontend/src/components/Pages/Login/Login.js → frontend/src/components/Login/Login.js

@@ -1,12 +1,11 @@
 import React, { useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import './Login.css';
 const backendBaseURL = process.env.REACT_APP_BACKEND_URL;
 
-const Login = () => {
+const Login = ({ setIsLoggedIn }) => {
     const [username, setUsername] = useState('');
     const [password, setPassword] = useState('');
     const [error, setError] = useState('');
-    const navigate = useNavigate();
 
     const handleLogin = async (e) => {
         e.preventDefault();
@@ -19,7 +18,7 @@ const Login = () => {
             const data = await response.json();
             if (data.success) {
                 localStorage.setItem('token', data.token);
-                navigate('/stock'); // Redirect to the stock page
+                setIsLoggedIn(true)
             } else {
                 setError(data.message);
             }

frontend/src/components/Pages/CurrentStock/CurrentStock.js

@@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react';
-import { Login } from '../Login/Login'; //* move ALL OF STOCK DISPLAY into a component, and show either Login or Stock based on presence of token.
+import Login from '../../Login/Login'; //* move ALL OF STOCK DISPLAY into a component, and show either Login or Stock based on presence of token.
 import './CurrentStock.css';
 
 const CurrentStock = () => {
@@ -8,6 +8,8 @@ const CurrentStock = () => {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(null);
   const [isEditing, setIsEditing] = useState(false);
+  const [isLoggedIn, setIsLoggedIn] = useState(!!localStorage.getItem('token'));
+
 
   const backendBaseURL = process.env.REACT_APP_BACKEND_URL;
 
@@ -36,6 +38,11 @@ const CurrentStock = () => {
     setIsEditing(!isEditing);
   };
 
+  const handleLogout = () => {
+    localStorage.removeItem('token');
+    setIsLoggedIn(false);
+  }
+
   const handleCancel = () => {
     setLocalInventory(inventory); // Reset localInventory to original data
     setIsEditing(false); // Exit edit mode
@@ -101,7 +108,9 @@ const CurrentStock = () => {
     return <div className="alert alert-danger text-center">{error}</div>;
   }
 
+
   return (
+    !isLoggedIn ? <Login setIsLoggedIn={setIsLoggedIn} /> :
     <div className="container py-4 current-stock-container">
       <h1 className="text-center mb-4">Current Stock</h1>
       <div className="text-end mb-3">
@@ -115,9 +124,15 @@ const CurrentStock = () => {
             </button>
           </>
         ) : (
-          <button className="btn btn-primary" onClick={handleEditToggle}>
-            Edit Stock
-          </button>
+          <>
+            <button className="btn btn-warning" onClick={handleLogout}>
+              Logout
+            </button>
+            <button className="btn btn-primary" onClick={handleEditToggle}>
+              Edit Stock
+            </button>
+          </>
+
         )}
       </div>
       <div className="table-responsive">