added simple dashboard
fixing login page
This commit is contained in:
parent
e9df2f7a2f
commit
03690424c5
157
package-lock.json
generated
157
package-lock.json
generated
@ -10,6 +10,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^6.1.3",
|
||||
"@mui/material": "^6.1.3",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
@ -3547,6 +3548,32 @@
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/icons-material": {
|
||||
"version": "6.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.3.tgz",
|
||||
"integrity": "sha512-QBQCCIMSAv6IkArTg4Hg8q2sJRhHOci8oPAlkHWFlt2ghBdy3EqyLbIELLE/bhpqhX+E/ZkPYGIUQCd5/L0owA==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.25.6"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/material": "^6.1.3",
|
||||
"@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@types/react": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/material": {
|
||||
"version": "6.1.3",
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.3.tgz",
|
||||
@ -4244,6 +4271,112 @@
|
||||
"url": "https://github.com/sponsors/gregberge"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom": {
|
||||
"version": "10.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.0.tgz",
|
||||
"integrity": "sha512-pemlzrSESWbdAloYml3bAJMEfNh1Z7EduzqPKprCH5S341frlpYnUEW0H72dLxa6IsYr+mPno20GiSm+h9dEdQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.10.4",
|
||||
"@babel/runtime": "^7.12.5",
|
||||
"@types/aria-query": "^5.0.1",
|
||||
"aria-query": "5.3.0",
|
||||
"chalk": "^4.1.0",
|
||||
"dom-accessibility-api": "^0.5.9",
|
||||
"lz-string": "^1.5.0",
|
||||
"pretty-format": "^27.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=18"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/ansi-styles": {
|
||||
"version": "4.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
|
||||
"integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"color-convert": "^2.0.1"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/ansi-styles?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/aria-query": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.0.tgz",
|
||||
"integrity": "sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"dequal": "^2.0.3"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/chalk": {
|
||||
"version": "4.1.2",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
|
||||
"integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"ansi-styles": "^4.1.0",
|
||||
"supports-color": "^7.1.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=10"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/chalk/chalk?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-convert": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
|
||||
"integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"color-name": "~1.1.4"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=7.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/color-name": {
|
||||
"version": "1.1.4",
|
||||
"resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
|
||||
"integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/has-flag": {
|
||||
"version": "4.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
|
||||
"integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/dom/node_modules/supports-color": {
|
||||
"version": "7.2.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
|
||||
"integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"has-flag": "^4.0.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=8"
|
||||
}
|
||||
},
|
||||
"node_modules/@testing-library/jest-dom": {
|
||||
"version": "5.17.0",
|
||||
"resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.17.0.tgz",
|
||||
@ -7746,6 +7879,16 @@
|
||||
"node": ">= 0.8"
|
||||
}
|
||||
},
|
||||
"node_modules/dequal": {
|
||||
"version": "2.0.3",
|
||||
"resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
|
||||
"integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=6"
|
||||
}
|
||||
},
|
||||
"node_modules/destroy": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/destroy/-/destroy-1.2.0.tgz",
|
||||
@ -18879,6 +19022,20 @@
|
||||
"is-typedarray": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/typescript": {
|
||||
"version": "4.9.5",
|
||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.5.tgz",
|
||||
"integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==",
|
||||
"license": "Apache-2.0",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"tsc": "bin/tsc",
|
||||
"tsserver": "bin/tsserver"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=4.2.0"
|
||||
}
|
||||
},
|
||||
"node_modules/unbox-primitive": {
|
||||
"version": "1.0.2",
|
||||
"resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
|
||||
|
||||
@ -5,6 +5,7 @@
|
||||
"dependencies": {
|
||||
"@emotion/react": "^11.13.3",
|
||||
"@emotion/styled": "^11.13.0",
|
||||
"@mui/icons-material": "^6.1.3",
|
||||
"@mui/material": "^6.1.3",
|
||||
"@testing-library/jest-dom": "^5.17.0",
|
||||
"@testing-library/react": "^13.4.0",
|
||||
|
||||
@ -1,13 +1,8 @@
|
||||
import LoginPage from './Login/LoginPage';
|
||||
import React, { useState, useEffect } from 'react';
|
||||
import {
|
||||
Typography,
|
||||
Box,
|
||||
} from '@mui/material';
|
||||
import Login from './Login/LoginPage';
|
||||
|
||||
import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
|
||||
import { checkAuthCookie } from './Login/CookieCreating';
|
||||
import Dashboard from './Dashboard/DashboardMain'
|
||||
|
||||
function App() {
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
@ -26,7 +21,7 @@ function App() {
|
||||
/>
|
||||
<Route
|
||||
path="/dashboard"
|
||||
element={isAuthenticated ? <Login /> : <Navigate to="/login" />}
|
||||
element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
|
||||
180
src/Dashboard/DashboardMain.js
Normal file
180
src/Dashboard/DashboardMain.js
Normal file
@ -0,0 +1,180 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Container,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Box,
|
||||
ListItem,
|
||||
ListItemText,
|
||||
List,
|
||||
Drawer,
|
||||
IconButton
|
||||
} from '@mui/material';
|
||||
import ListItemIcon from '@mui/icons-material/List'
|
||||
import PeopleIcon from'@mui/icons-material/People'
|
||||
import DashboardIcon from'@mui/icons-material/Dashboard'
|
||||
import BarChartIcon from'@mui/icons-material/BarChart'
|
||||
import SettingsIcon from'@mui/icons-material/Settings'
|
||||
import ChevronLeftIcon from'@mui/icons-material/ChevronLeft'
|
||||
import MenuIcon from'@mui/icons-material/Menu'
|
||||
|
||||
import {
|
||||
Settings,
|
||||
} from '@mui/icons-material'
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import theme from '../theme';
|
||||
|
||||
const DashboardPageWithTheme = () => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<DashboardPage />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
const DashboardPage = () => {
|
||||
const [isMenuHidden, setIsMenuHidden] = useState('');
|
||||
return (
|
||||
<>
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
backgroundColor: '#4e00ba',
|
||||
color: 'white',
|
||||
padding: 2,
|
||||
display: 'flex',
|
||||
justifyContent: 'space-between',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">
|
||||
Admin Dashboard
|
||||
</Typography>
|
||||
<Button
|
||||
variant="contained"
|
||||
color="secondary"
|
||||
onClick={() => {
|
||||
// Здесь должна быть логика выхода
|
||||
// navigate('/login');
|
||||
}}
|
||||
>
|
||||
Выйти
|
||||
</Button>
|
||||
</Box>
|
||||
<Drawer
|
||||
variant="persistent"
|
||||
anchor="left"
|
||||
open={!isMenuHidden}
|
||||
sx={{
|
||||
width: 240,
|
||||
flexShrink: 0,
|
||||
'& .MuiDrawer-paper': {
|
||||
width: 240,
|
||||
boxSizing: 'border-box',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Box
|
||||
sx={{
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
padding: 2,
|
||||
justifyContent: 'space-between',
|
||||
}}
|
||||
>
|
||||
<Typography variant="h6">
|
||||
Меню
|
||||
</Typography>
|
||||
<IconButton onClick={() => setIsMenuHidden(true)}>
|
||||
<ChevronLeftIcon />
|
||||
</IconButton>
|
||||
</Box>
|
||||
<Divider />
|
||||
<List>
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<DashboardIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Главная" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<PeopleIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Пользователи" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<BarChartIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Статистика" />
|
||||
</ListItem>
|
||||
<ListItem button>
|
||||
<ListItemIcon>
|
||||
<SettingsIcon />
|
||||
</ListItemIcon>
|
||||
<ListItemText primary="Настройки" />
|
||||
</ListItem>
|
||||
</List>
|
||||
</Drawer>
|
||||
<IconButton
|
||||
color="inherit"
|
||||
aria-label="open drawer"
|
||||
onClick={() => setIsMenuHidden(false)}
|
||||
edge="start"
|
||||
sx={{ marginRight: 2, ...(isMenuHidden && { display: 'none' }) }}
|
||||
>
|
||||
<MenuIcon />
|
||||
</IconButton>
|
||||
<Container maxWidth="lg">
|
||||
<Box
|
||||
sx={{
|
||||
marginTop: 5,
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
}}
|
||||
>
|
||||
<Typography component="h1" variant="h4" gutterBottom>
|
||||
Добро пожаловать в панель администратора
|
||||
</Typography>
|
||||
|
||||
<Box sx={{ mt: 4, width: '100%' }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Быстрые действия
|
||||
</Typography>
|
||||
<Box sx={{ display: 'flex', justifyContent: 'space-around', flexWrap: 'wrap' }}>
|
||||
<Button variant="outlined" sx={{ m: 1 }}>Управление пользователями</Button>
|
||||
<Button variant="outlined" sx={{ m: 1 }}>Статистика</Button>
|
||||
<Button variant="outlined" sx={{ m: 1 }}>Настройки системы</Button>
|
||||
</Box>
|
||||
</Box>
|
||||
|
||||
<Box sx={{ mt: 4, width: '100%' }}>
|
||||
<Typography variant="h5" gutterBottom>
|
||||
Последние действия
|
||||
</Typography>
|
||||
{/* Здесь можно добавить компонент для отображения последних действий */}
|
||||
</Box>
|
||||
</Box>
|
||||
</Container>
|
||||
|
||||
<Box sx={{
|
||||
position: 'fixed',
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
textAlign: 'center',
|
||||
padding: '10px',
|
||||
backgroundColor: 'background.paper'
|
||||
}}>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
© {new Date().getFullYear()} LCSA и SnippetsX. Все права защищены.
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
|
||||
export default DashboardPageWithTheme;
|
||||
@ -3,9 +3,9 @@ export const createAuthCookie = (token) => {
|
||||
expirationDate.setDate(expirationDate.getDate() + 7); // Set expiration to 7 days from now
|
||||
|
||||
const cookieValue = encodeURIComponent(token);
|
||||
const cookieString = `authToken=${cookieValue}; expires=${expirationDate.toUTCString()}; path=/; SameSite=Strict; Secure; domain=admin.lcsa.ru`;
|
||||
document.cookie = `authToken=${cookieValue}; expires=${expirationDate.toUTCString()}; path=/; SameSite=Strict; Secure`;
|
||||
|
||||
document.cookie = cookieString;
|
||||
console.log(document.cookie);
|
||||
};
|
||||
|
||||
export const checkAuthCookie = () => {
|
||||
@ -20,7 +20,12 @@ export const checkAuthCookie = () => {
|
||||
const decodedToken = decodeURIComponent(token);
|
||||
|
||||
// Check if the cookie has expired
|
||||
const expirationDate = new Date(document.cookie.match(/expires=([^;]+)/)[1]);
|
||||
const expirationMatch = document.cookie.match(/expires=([^;]+)/);
|
||||
if (!expirationMatch) {
|
||||
return null; // Expiration date not found
|
||||
}
|
||||
|
||||
const expirationDate = new Date(expirationMatch[1]);
|
||||
if (expirationDate < new Date()) {
|
||||
return null; // Cookie has expired
|
||||
}
|
||||
|
||||
10
src/Login/LoginPage.css
Normal file
10
src/Login/LoginPage.css
Normal file
@ -0,0 +1,10 @@
|
||||
@keyframes shake {
|
||||
0% { transform: translateX(0); }
|
||||
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
|
||||
20%, 40%, 60%, 80% { transform: translateX(10px); }
|
||||
100% { transform: translateX(0); }
|
||||
}
|
||||
|
||||
.shake-animation {
|
||||
animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both;
|
||||
}
|
||||
@ -8,6 +8,10 @@ import {
|
||||
} from '@mui/material';
|
||||
import { ThemeProvider } from '@mui/material/styles';
|
||||
import theme from '../theme';
|
||||
import './LoginPage.css'
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import { createAuthCookie } from './CookieCreating';
|
||||
|
||||
|
||||
const LoginPageWithTheme = () => (
|
||||
<ThemeProvider theme={theme}>
|
||||
@ -15,17 +19,26 @@ const LoginPageWithTheme = () => (
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
let isPasswordIncorrect = null;
|
||||
|
||||
const LoginPage = () => {
|
||||
const [email, setEmail] = useState('');
|
||||
const [username, setusername] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [msg, setMsg] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
// Here you would typically handle the login logic
|
||||
console.log('Login attempt with:', email, password);
|
||||
isPasswordIncorrect = true;
|
||||
console.log('Login attempt with:', username, password);
|
||||
if (username === 'snippetsx' && password === '2371')
|
||||
{
|
||||
createAuthCookie(username);
|
||||
navigate('/dashboard');
|
||||
}
|
||||
else
|
||||
{
|
||||
setMsg(true)
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
return (
|
||||
@ -62,13 +75,13 @@ const LoginPage = () => {
|
||||
margin="normal"
|
||||
required
|
||||
fullWidth
|
||||
id="email"
|
||||
label="Email Address"
|
||||
name="email"
|
||||
autoComplete="email"
|
||||
id="username"
|
||||
label="Username"
|
||||
name="username"
|
||||
autoComplete="username"
|
||||
autoFocus
|
||||
value={email}
|
||||
onChange={(e) => setEmail(e.target.value)}
|
||||
value={username}
|
||||
onChange={(e) => setusername(e.target.value)}
|
||||
/>
|
||||
<TextField
|
||||
margin="normal"
|
||||
@ -81,11 +94,9 @@ const LoginPage = () => {
|
||||
autoComplete="current-password"
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
error={isPasswordIncorrect}
|
||||
helperText={isPasswordIncorrect ? "Incorrect password" : ""}
|
||||
InputProps={{
|
||||
className: isPasswordIncorrect ? 'shake-animation' : '',
|
||||
}}
|
||||
error={msg}
|
||||
helperText={msg ? "Incorrect password" : ""}
|
||||
className={msg ? 'shake-animation' : ''}
|
||||
/>
|
||||
|
||||
<Button
|
||||
|
||||
Loading…
Reference in New Issue
Block a user