diff --git a/package-lock.json b/package-lock.json index c7c1e7c..9241684 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index db9d053..8559088 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/App.js b/src/App.js index b040c3b..795a79d 100644 --- a/src/App.js +++ b/src/App.js @@ -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() { /> : } + element={isAuthenticated ? : } /> ( + + + +); + +const DashboardPage = () => { +const [isMenuHidden, setIsMenuHidden] = useState(''); + return ( + <> + + + Admin Dashboard + + + + + + + Меню + + setIsMenuHidden(true)}> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + setIsMenuHidden(false)} + edge="start" + sx={{ marginRight: 2, ...(isMenuHidden && { display: 'none' }) }} + > + + + + + + Добро пожаловать в панель администратора + + + + + Быстрые действия + + + + + + + + + + + Последние действия + + {/* Здесь можно добавить компонент для отображения последних действий */} + + + + + + + © {new Date().getFullYear()} LCSA и SnippetsX. Все права защищены. + + + + ); +}; + + + +export default DashboardPageWithTheme; diff --git a/src/Login/CookieCreating.js b/src/Login/CookieCreating.js index 2f43d69..bee37f9 100644 --- a/src/Login/CookieCreating.js +++ b/src/Login/CookieCreating.js @@ -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 } diff --git a/src/Login/LoginPage.css b/src/Login/LoginPage.css new file mode 100644 index 0000000..76373e9 --- /dev/null +++ b/src/Login/LoginPage.css @@ -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; +} diff --git a/src/Login/LoginPage.js b/src/Login/LoginPage.js index eecbc4a..262db88 100644 --- a/src/Login/LoginPage.js +++ b/src/Login/LoginPage.js @@ -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 = () => ( @@ -15,17 +19,26 @@ const LoginPageWithTheme = () => ( ); -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)} /> { 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' : ''} />