From 1eece4f160b8820a48b23ddd9b4f46ba702714ab Mon Sep 17 00:00:00 2001 From: SnippetsX Date: Sun, 3 Nov 2024 01:35:38 +0300 Subject: [PATCH] added database struct updated index.html with minor changes added fully working logout option Added Working Settings Page Added blank option for the Terminal Page Edited icons and options in Dashboard Added blanks for subroutes Added redirect from root to dashboard --- database.sql | 8 ++ public/index.html | 2 +- public/manifest.json | 2 +- src/App.js | 12 ++- src/Dashboard/DashboardMain.js | 27 ++++-- src/Preferences/Preferences.js | 40 --------- src/Settings/SettingsMain.js | 152 +++++++++++++++++++++++++++++++++ src/core/deleteToken.js | 5 ++ 8 files changed, 193 insertions(+), 55 deletions(-) create mode 100644 database.sql delete mode 100644 src/Preferences/Preferences.js create mode 100644 src/Settings/SettingsMain.js create mode 100644 src/core/deleteToken.js diff --git a/database.sql b/database.sql new file mode 100644 index 0000000..4cb4bdb --- /dev/null +++ b/database.sql @@ -0,0 +1,8 @@ +CREATE TABLE users ( + id INT AUTO_INCREMENT PRIMARY KEY, + username VARCHAR(50) NOT NULL UNIQUE, + email VARCHAR(100) NOT NULL UNIQUE, + password_hash VARCHAR(255) NOT NULL, + created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP, + updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP +); diff --git a/public/index.html b/public/index.html index 50f9ea0..9a5fc9b 100644 --- a/public/index.html +++ b/public/index.html @@ -8,7 +8,7 @@ - React App + LCSA Admin Dashboard
diff --git a/public/manifest.json b/public/manifest.json index 080d6c7..3f4f82e 100644 --- a/public/manifest.json +++ b/public/manifest.json @@ -1,5 +1,5 @@ { - "short_name": "React App", + "short_name": "LCSA Admin Dashboard", "name": "Create React App Sample", "icons": [ { diff --git a/src/App.js b/src/App.js index 531e3c3..a5441fc 100644 --- a/src/App.js +++ b/src/App.js @@ -1,7 +1,7 @@ import React from 'react'; import Login from './Login/LoginPage'; -import { BrowserRouter as Router, Route, Routes} from 'react-router-dom'; -import Preferences from './Preferences/Preferences' +import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-dom'; +import Settings from './Settings/SettingsMain' import Dashboard from './Dashboard/DashboardMain' import './App.css' import useToken from './core/useToken'; @@ -9,7 +9,7 @@ import useToken from './core/useToken'; function App() { const { token, setToken } = useToken(); - + if(!token){ return } @@ -17,8 +17,12 @@ function App() { return ( + } /> } /> - } /> + {/* } /> + } /> + } /> */} + } /> ); diff --git a/src/Dashboard/DashboardMain.js b/src/Dashboard/DashboardMain.js index 2ab2f84..c5bee5d 100644 --- a/src/Dashboard/DashboardMain.js +++ b/src/Dashboard/DashboardMain.js @@ -17,12 +17,15 @@ import { import PeopleIcon from '@mui/icons-material/PeopleOutline'; import DashboardIcon from '@mui/icons-material/DashboardOutlined'; import BarChartIcon from '@mui/icons-material/BarChartOutlined'; +import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; import SettingsIcon from '@mui/icons-material/SettingsOutlined'; +import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined'; import LogoutIcon from '@mui/icons-material/LogoutOutlined'; import MenuIcon from '@mui/icons-material/Menu'; import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined'; import { ThemeProvider } from '@mui/material/styles'; import theme from '../theme'; +import deleteToken from '../core/deleteToken'; const drawerWidth = 240; @@ -87,11 +90,15 @@ export default function DashboardMain() { My account - + { handleMenuClose(); window.location.href = '/settings'; }}> Settings - + { + handleMenuClose(); + deleteToken(); + window.location.reload(); + }}> Logout @@ -127,14 +134,16 @@ export default function DashboardMain() { - - - - - - - + + + + + + + + + ( - - - -); - - -const PreferencesPage = () => { - return ( - <> - - - Admin Dashboard - - - - - ) -} -export default PreferencesPageWithTheme; \ No newline at end of file diff --git a/src/Settings/SettingsMain.js b/src/Settings/SettingsMain.js new file mode 100644 index 0000000..b7bbd10 --- /dev/null +++ b/src/Settings/SettingsMain.js @@ -0,0 +1,152 @@ +import React, { useState } from 'react'; +import { + Box, + ListItem, + ListItemText, + List, + Drawer, + IconButton, + Divider, + CssBaseline, + AppBar, + Toolbar, + Typography, + Menu, + MenuItem, +} from '@mui/material'; +import PeopleIcon from '@mui/icons-material/PeopleOutline'; +import DashboardIcon from '@mui/icons-material/DashboardOutlined'; +import BarChartIcon from '@mui/icons-material/BarChartOutlined'; +import ConstructionOutlinedIcon from '@mui/icons-material/ConstructionOutlined'; +import SettingsIcon from '@mui/icons-material/SettingsOutlined'; +import TerminalOutlinedIcon from '@mui/icons-material/TerminalOutlined'; +import LogoutIcon from '@mui/icons-material/LogoutOutlined'; +import MenuIcon from '@mui/icons-material/Menu'; +import AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined'; +import { ThemeProvider } from '@mui/material/styles'; +import theme from '../theme'; +import deleteToken from '../core/deleteToken'; + +const drawerWidth = 240; + +export default function DashboardMain() { + const [open, setOpen] = useState(false); + const [anchorEl, setAnchorEl] = useState(null); + const openMenu = Boolean(anchorEl); + + const handleDrawer = () => { + if(open === false){ + setOpen(true); + } + else{ + setOpen(false); + } + }; + + + const handleMenuClick = (event) => { + setAnchorEl(event.currentTarget); + }; + + const handleMenuClose = () => { + setAnchorEl(null); + }; + + return ( + + + + theme.zIndex.drawer + 1, width: `calc(100% - ${open ? drawerWidth : 0}px)`, ml: `${open ? drawerWidth : 0}px` }}> + + + + + + Admin Dashboard + + + + + + + + Profile + + + + My account + + { handleMenuClose(); window.location.href = '/settings'; }}> + + Settings + + { + handleMenuClose(); + deleteToken(); + window.location.reload(); + }}> + + Logout + + + + + + + + + + + + + + + + + + + + + + + + + + Welcome to the Settings! + + + + + ); +} \ No newline at end of file diff --git a/src/core/deleteToken.js b/src/core/deleteToken.js new file mode 100644 index 0000000..9a7f65b --- /dev/null +++ b/src/core/deleteToken.js @@ -0,0 +1,5 @@ +import { useState } from 'react'; + +export default function deleteToken(){ + localStorage.removeItem('token'); +};