added dev login

generatetoken.js

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

package.json

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

src/App.js

@@ -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} />
   }
 

src/Configuration/ConfiugrationMain.js

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

src/Dashboard/DashboardMain.js

@@ -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;
 

src/Dashboard/DashboardUsers.js

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

src/Login/LoginDev.js

@@ -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>
+  )
+}

src/Settings/SettingsInfo.js

@@ -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>

src/Terminal/TerminalPage.js

@@ -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);
   };

src/metadata.json

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