added simple dashboard

fixing login page

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",

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",

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() {
         />
         <Route 
           path="/dashboard" 
-          element={isAuthenticated ? <Login /> : <Navigate to="/login" />} 
+          element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />} 
         />
         <Route 
           path="/" 

src/Dashboard/DashboardMain.js

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

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
   }

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

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 = () => (
   <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:', username, password);
-    console.log('Login attempt with:', email, password);
+    if (username === 'snippetsx' && password === '2371') 
-    isPasswordIncorrect = true;
+    {
+      createAuthCookie(username);
+      navigate('/dashboard');
+    }
+    else
+    {
+      setMsg(true)
+    }
+    
   };
 
   return (
@@ -62,13 +75,13 @@ const LoginPage = () => {
               margin="normal"
               required
               fullWidth
-              id="email"
+              id="username"
-              label="Email Address"
+              label="Username"
-              name="email"
+              name="username"
-              autoComplete="email"
+              autoComplete="username"
               autoFocus
-              value={email}
+              value={username}
-              onChange={(e) => setEmail(e.target.value)}
+              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}
+              error={msg}
-              helperText={isPasswordIncorrect ? "Incorrect password" : ""}
+              helperText={msg ? "Incorrect password" : ""}
-              InputProps={{
+              className={msg ? 'shake-animation' : ''}
-                className: isPasswordIncorrect ? 'shake-animation' : '',
-              }}
             />
             
             <Button