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'); +};