From 497d0e8deacee7fe479f3f4508390db0a24dd4b4 Mon Sep 17 00:00:00 2001 From: JacobDChamberlain Date: Fri, 3 Jan 2025 15:53:14 -0600 Subject: [PATCH] require login to view stock page --- frontend/src/components/Login/Login.css | 5 ++++ .../src/components/{Pages => }/Login/Login.js | 7 +++--- .../Pages/CurrentStock/CurrentStock.js | 23 +++++++++++++++---- frontend/src/components/Pages/Login/Login.css | 5 ---- 4 files changed, 27 insertions(+), 13 deletions(-) create mode 100644 frontend/src/components/Login/Login.css rename frontend/src/components/{Pages => }/Login/Login.js (90%) delete mode 100644 frontend/src/components/Pages/Login/Login.css diff --git a/frontend/src/components/Login/Login.css b/frontend/src/components/Login/Login.css new file mode 100644 index 0000000..2f9ae5c --- /dev/null +++ b/frontend/src/components/Login/Login.css @@ -0,0 +1,5 @@ +.login-wrapper { + height: 100vh; +} + +/* please make all css boostrap like stock page */ \ No newline at end of file diff --git a/frontend/src/components/Pages/Login/Login.js b/frontend/src/components/Login/Login.js similarity index 90% rename from frontend/src/components/Pages/Login/Login.js rename to frontend/src/components/Login/Login.js index efc806e..d55c515 100644 --- a/frontend/src/components/Pages/Login/Login.js +++ b/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); } diff --git a/frontend/src/components/Pages/CurrentStock/CurrentStock.js b/frontend/src/components/Pages/CurrentStock/CurrentStock.js index b1df2d3..2c07f23 100644 --- a/frontend/src/components/Pages/CurrentStock/CurrentStock.js +++ b/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
{error}
; } + return ( + !isLoggedIn ? :

Current Stock

@@ -115,9 +124,15 @@ const CurrentStock = () => { ) : ( - + <> + + + + )}
diff --git a/frontend/src/components/Pages/Login/Login.css b/frontend/src/components/Pages/Login/Login.css deleted file mode 100644 index 7b7bc08..0000000 --- a/frontend/src/components/Pages/Login/Login.css +++ /dev/null @@ -1,5 +0,0 @@ -.login-wrapper { - height: 100vh; -} - -/* please fix this so the page is full screen - ignore/delete this css file and make it all boostrap like stock page */ \ No newline at end of file