snippetsx/admin_dashboard_react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 10 Wiki Activity

added dev login

Browse Source
This commit is contained in:
SnippetsX 2024-11-12 01:35:39 +03:00
parent 78dd6a2dc6
commit f4da58ab6c
10 changed files with 258 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
generatetoken.js Normal file
View File

@ -0,0 +1,10 @@
const fs = require('fs');
const filePath = 'authtoken.json';
if (!fs.existsSync(filePath)) {
const randomToken = (Math.random().toString(36).substring(2, 10));
console.log("You're token is ", randomToken);
fs.writeFileSync(filePath, JSON.stringify({ token: randomToken }, null, 2));
}

4
package.json
View File

@ -23,8 +23,8 @@
"xterm": "^5.3.0"
},
"scripts": {
"start": "node generate-buildno.js && react-scripts start",
"build": "node generate-buildno.js && react-scripts build",
"start": "node generatetoken.js && node generate-buildno.js && react-scripts start",
"build": "node generatetoken.js && node generate-buildno.js && react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},

3
src/App.js
View File

@ -4,6 +4,7 @@ import { BrowserRouter as Router, Route, Routes, Navigate} from 'react-router-do
import SettingsMain from './Settings/SettingsMain'
import SettingsInfo from './Settings/SettingsInfo'
import Dashboard from './Dashboard/DashboardMain'
import metadata from './metadata.json';
import './App.css'
import useToken from './core/useToken';
@ -13,7 +14,7 @@ import Terminal from './Terminal/TerminalPage'
function App() {
const { token, setToken } = useToken();
if(!token){
if(!token && !(['DEV', 'ALPHA', 'BETA'].includes(metadata.buildTag))){
return <Login setToken={setToken} />
}

2
src/Configuration/ConfiugrationMain.js Normal file
View File

@ -0,0 +1,2 @@
import React from "react";

2
src/Dashboard/DashboardMain.js
View File

@ -26,7 +26,7 @@ import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
import deleteToken from '../core/deleteToken';
import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
import { SimpleTreeView } from '@mui/x-tree-view/SimpleTreeView';
const drawerWidth = 240;

161
src/Dashboard/DashboardUsers.js Normal file
View File

@ -0,0 +1,161 @@
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 AccountCircleIcon from '@mui/icons-material/AccountCircleOutlined';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
import deleteToken from '../core/deleteToken';
import {SystemMon, WebsiteAvailability} from '../widgets/WidgetsStatistics'
const drawerWidth = 240;
export default function DashboardMain() {
const [anchorEl, setAnchorEl] = useState(null);
const openMenu = Boolean(anchorEl);
const handleMenuClick = (event) => {
setAnchorEl(event.currentTarget);
};
const handleMenuClose = () => {
setAnchorEl(null);
};
return (
<ThemeProvider theme={theme}>
<Box sx={{ display: 'flex' }}>
<CssBaseline />
<AppBar position="fixed" sx={{ width: `calc(100% - ${drawerWidth}px)`, ml: `${drawerWidth}px` }}>
<Toolbar>
<Typography variant="h6" noWrap sx={{ flexGrow: 1 }}>
Admin Dashboard
</Typography>
<IconButton
color="inherit"
onClick={handleMenuClick}
sx={{ transform: 'scale(1.2)' }}
>
<AccountCircleIcon />
</IconButton>
<Menu
anchorEl={anchorEl}
open={openMenu}
onClose={handleMenuClose}
>
<MenuItem onClick={() => { handleMenuClose(); window.location.href = '/dashboard'; }}>
<AccountCircleIcon sx={{ marginRight: 2 }} />
Dashboard
</MenuItem>
<MenuItem onClick={handleMenuClose}>
<AccountCircleIcon sx={{ marginRight: 2 }} />
Profile
</MenuItem>
<MenuItem onClick={handleMenuClose}>
<AccountCircleIcon sx={{ marginRight: 2 }} />
My account
</MenuItem>
<MenuItem onClick={() => { handleMenuClose(); window.location.href = '/settings'; }}>
<SettingsIcon sx={{ marginRight: 2 }} />
Settings
</MenuItem>
<MenuItem onClick={() => {
handleMenuClose();
deleteToken();
window.location.reload();
}}>
<LogoutIcon sx={{ marginRight: 2 }} />
Logout
</MenuItem>
</Menu>
</Toolbar>
</AppBar>
<Drawer
sx={{
width: drawerWidth,
flexShrink: 0,
'& .MuiDrawer-paper': {
width: drawerWidth,
bgcolor: 'secondary.main',
boxSizing: 'border-box',
},
}}
variant="permanent"
anchor="left"
>
<Divider />
<List>
<ListItem button key="Dashboard" onClick={() => window.location.href = '/dashboard'}>
<DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
<ListItemText primary="Dashboard" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Users">
<PeopleIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Users" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Reports">
<BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Reports" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Server Configuration">
<ConstructionOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Server Configuration" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Terminal" onClick={() => window.location.href = '/dashboard/console'}>
<TerminalOutlinedIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Terminal" sx={{ color: '#FFFFFF' }} />
</ListItem>
</List>
</Drawer>
<Box
component="main"
sx={{ flexGrow: 1, bgcolor: 'background.default', p: 3 }}
>
<Toolbar />
{/* <Typography variant="h4">Hi {localStorage.getItem('token')}</Typography> */}
<Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
<SystemMon/>
<WebsiteAvailability/>
<SystemMon/>
</Box>
<Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
<SystemMon/>
<WebsiteAvailability/>
<SystemMon/>
</Box>
<Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
<SystemMon/>
<WebsiteAvailability/>
<SystemMon/>
</Box>
<Box sx={{ display: 'flex', gap: 3, mb: 3 }}>
<SystemMon/>
<WebsiteAvailability/>
<SystemMon/>
</Box>
</Box>
</Box>
</ThemeProvider>
);
}

75
src/Login/LoginDev.js Normal file
View File

@ -0,0 +1,75 @@
import React, { useState } from 'react';
import PropTypes from 'prop-types';
import { Button, Container, TextField, Typography, AppBar, Toolbar, Box } from '@mui/material';
import { ThemeProvider } from '@mui/material/styles';
import theme from '../theme';
import {loginUser} from './LoginServerSend'
import './LoginPage.css'
import { sha256 } from 'js-sha256';
import authtoken from '../authtoken.json';
export default function Login({ setToken }) {
const [token, setToken] = useState('');
const [msg, setMsg] = useState('');
const handleSubmit = async e => {
e.preventDefault();
setMsg(true);
}
}
return(
<ThemeProvider theme={theme}>
<AppBar position="static">
<Toolbar>
<Typography variant="h6" sx={{ flexGrow: 1 }}>
Admin Dashboard
</Typography>
</Toolbar>
</AppBar>
<Container component="main" maxWidth="xs">
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
>
<Typography component="h1" variant="h5">
Please Enter Developer Token
</Typography>
<Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="token"
label="DeveloperToken"
type="password"
id="token"
error={!!msg}
helperText={msg ? "Incorrect Token" : ""}
className={msg ? 'shake-animation' : ''}
autoComplete="current-password"
onChange={e => setPassword(e.target.value)}
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
sx={{ mt: 3, mb: 2 }}
>
Submit
</Button>
</Box>
</Box>
</Container>
</ThemeProvider>
)
}

15
src/Settings/SettingsInfo.js
View File

@ -19,7 +19,6 @@ import DashboardIcon from '@mui/icons-material/DashboardOutlined';
import BarChartIcon from '@mui/icons-material/BarChartOutlined';
import SettingsIcon from '@mui/icons-material/SettingsOutlined';
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';
@ -30,19 +29,9 @@ import { DashboardInfo } from '../widgets/WidgetStatic'
const drawerWidth = 240;
export default function SettingsInfo() {
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);
@ -128,6 +117,10 @@ export default function SettingsInfo() {
<BarChartIcon sx={{ marginRight: 2, color: '#FFFFFF' }}/>
<ListItemText primary="Debug" sx={{ color: '#FFFFFF' }} />
</ListItem>
<ListItem button key="Info" onClick={() => window.location.href = '/settings/info'}>
<DashboardIcon sx={{ marginRight: 2, color: '#FFFFFF'}}/>
<ListItemText primary="Info" sx={{ color: '#FFFFFF' }} />
</ListItem>
</List>
</Drawer>

12
src/Terminal/TerminalPage.js
View File

@ -21,7 +21,6 @@ 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';
@ -33,20 +32,9 @@ import 'xterm/css/xterm.css';
const drawerWidth = 240;
export default function TerminalPage() {
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);
};

2
src/metadata.json
View File

@ -1 +1 @@
{"buildMajor":1,"buildMinor":0,"buildRevision":2,"buildTag":"DEV"}
{"buildMajor":1,"buildMinor":0,"buildRevision":5,"buildTag":"DEV"}