fixed login

package.json

@@ -10,11 +10,12 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "codegen": "^0.1.0",
     "eslint-plugin-react": "^7.37.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
-    "react-scripts": "5.0.1",
+    "react-scripts": "^5.0.1",
     "web-vitals": "^2.1.4"
   },
   "scripts": {
@@ -40,5 +41,10 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "ajv": "^8.17.1",
+    "cors": "^2.8.5",
+    "express": "^4.21.1"
   }
 }

public/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta http-equiv="Content-Security-Policy" content="script-src 'self'" />
     <meta name="theme-color" content="#000000" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />

server.js

@@ -0,0 +1,13 @@
+const express = require('express');
+const cors = require('cors');
+const app = express();
+
+app.use(cors());
+
+app.use('/login', (req, res) =>{
+    res.send({
+        token: 'snippetsx'
+    })
+})
+
+app.listen(8080, () => console.log('API Running on localhost:8080'))

src/App.css

@@ -1,45 +1,3 @@
-.board-row {
+body {
-  align-items: center;
+  overflow-x: hidden; /* Hide horizontal scrollbar */
-  display: flex;
+}
-  justify-content: center;
-  min-width: 210px;
-}
-
-.board-row:after {
-  clear: both;
-  content: "";
-  display: table;
-}
-
-.square {
-  background-color: #6b3b3b;
-  border: 1px solid #999;
-  float: left;
-  font-size: 23px;
-  font-weight: bold;
-  line-height: 10px;
-  height: 64px;
-  margin-right: -1px;
-  margin-top: -1px;
-  padding: 0;
-  text-align: center;
-  width: 34px;
-}
-
-.square:focus {
-  outline: none;
-}
-
-.square:hover {
-  background-color: #00a2ff;
-}
-
-.game {
-  display: flex;
-  flex-direction: row;
-}
-
-.game-info {
-  margin-left: 20px;
-  min-width: 180px;
-}

src/App.js

@@ -1,35 +1,24 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState} from 'react';
 import Login from './Login/LoginPage';
-import { BrowserRouter as Router, Route, Routes, Navigate } from 'react-router-dom';
+import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
-import { checkAuthCookie } from './Login/CookieCreating';
+import Preferences from './Preferences/Preferences'
 import Dashboard from './Dashboard/DashboardMain'
+import './App.css'
 
 function App() {
-  const [isAuthenticated, setIsAuthenticated] = useState(false);
+  const [token, setToken] = useState();
 
-  useEffect(() => {
+  if(!token){
-    const token = checkAuthCookie();
+    return <Login setToken={setToken} />
-    setIsAuthenticated(!!token);
+  }
-  }, []);
 
   return (
     <Router>
       <Routes>
-        <Route 
+        <Route path="/dashboard" element={<Dashboard/>} />
-          path="/login" 
+        <Route path="/preferences" element={<Preferences/>} />
-          element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />} 
-        />
-        <Route 
-          path="/dashboard" 
-          element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />} 
-        />
-        <Route 
-          path="/" 
-          element={<Navigate to={isAuthenticated ? "/dashboard" : "/login"} />} 
-        />
       </Routes>
     </Router>
   );
 }
-
 export default App;

src/Dashboard/DashboardMain.js

@@ -9,7 +9,8 @@ import {
   ListItemText,
   List,
   Drawer,
-  IconButton
+  IconButton,
+  Divider
 } from '@mui/material';
 import ListItemIcon from '@mui/icons-material/List'
 import PeopleIcon from'@mui/icons-material/People'

src/Login/CookieCreating.js

@@ -1,34 +0,0 @@
-export const createAuthCookie = (token) => {
-  const expirationDate = new Date();
-  expirationDate.setDate(expirationDate.getDate() + 7); // Set expiration to 7 days from now
-
-  const cookieValue = encodeURIComponent(token);
-  document.cookie = `authToken=${cookieValue}; expires=${expirationDate.toUTCString()}; path=/; SameSite=Strict; Secure`;
-
-  console.log(document.cookie);
-};
-
-export const checkAuthCookie = () => {
-  const cookies = document.cookie.split(';');
-  const authCookie = cookies.find(cookie => cookie.trim().startsWith('authToken='));
-
-  if (!authCookie) {
-    return null; // Cookie not found
-  }
-
-  const [, token] = authCookie.split('=');
-  const decodedToken = decodeURIComponent(token);
-
-  // Check if the cookie has expired
-  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
-  }
-
-  return decodedToken;
-};

src/Login/LoginPage.css

@@ -1,10 +0,0 @@
-@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

@@ -1,77 +1,55 @@
 import React, { useState } from 'react';
-import { 
+import PropTypes from 'prop-types';
-  Container, 
+import { Button, Container, TextField, Typography, Box } from '@mui/material';
-  TextField, 
-  Button, 
-  Typography, 
-  Box,
-} from '@mui/material';
 import { ThemeProvider } from '@mui/material/styles';
 import theme from '../theme';
-import './LoginPage.css'
+import {loginUser} from './LoginServerSend'
-import { useNavigate } from 'react-router-dom';
-import { createAuthCookie } from './CookieCreating';
 
-
+export default function Login({ setToken }) {
-const LoginPageWithTheme = () => (
+  const [username, setUserName] = useState('');
-  <ThemeProvider theme={theme}>
-    <LoginPage />
-  </ThemeProvider>
-);
-
-
-const LoginPage = () => {
-  const [username, setusername] = useState('');
   const [password, setPassword] = useState('');
-  const [msg, setMsg] = useState('');
-  const navigate = useNavigate();
 
-  const handleSubmit = (event) => {
+  const handleSubmit = async e => {
-    event.preventDefault();
+    e.preventDefault();
-    console.log('Login attempt with:', username, password);
+    const token = await loginUser({
-    if (username === 'snippetsx' && password === '2371') 
+      username,
-    {
+      password
-      createAuthCookie(username);
+    });
-      navigate('/dashboard');
+    setToken(token);
-    }
+  }
-    else
-    {
-      setMsg(true)
-    }
-    
-  };
 
-  return (
+  return(
-    <>
+    <ThemeProvider theme={theme}>
       <Box
         sx={{
           width: '100%',
           backgroundColor: '#4e00ba',
           color: 'white',
           padding: 2,
-          textAlign: 'bottom',
+          textAlign: 'center', 
         }}
       >
         <Typography variant="h6">
           Admin Dashboard
         </Typography>
       </Box>
-      
+      <Container component="main" maxWidth="xs">
-      <Container maxWidth="xs">
+        
         <Box
           sx={{
-            marginTop: 5,
+            marginTop: 8,
             display: 'flex',
             flexDirection: 'column',
             alignItems: 'center',
           }}
         >
-          
+        
           <Typography component="h1" variant="h5">
-            Sign in to Admin Panel
+            Please Log In
           </Typography>
-          <Box component="form" onSubmit={handleSubmit} noValidate sx={{ mt: 1 }}>
+          <Box component="form" onSubmit={handleSubmit} sx={{ mt: 1 }}>
             <TextField
+              variant="outlined"
               margin="normal"
               required
               fullWidth
@@ -80,10 +58,10 @@ const LoginPage = () => {
               name="username"
               autoComplete="username"
               autoFocus
-              value={username}
+              onChange={e => setUserName(e.target.value)}
-              onChange={(e) => setusername(e.target.value)}
             />
             <TextField
+              variant="outlined"
               margin="normal"
               required
               fullWidth
@@ -92,40 +70,24 @@ const LoginPage = () => {
               type="password"
               id="password"
               autoComplete="current-password"
-              value={password}
+              onChange={e => setPassword(e.target.value)}
-              onChange={(e) => setPassword(e.target.value)}
-              error={msg}
-              helperText={msg ? "Incorrect password" : ""}
-              className={msg ? 'shake-animation' : ''}
             />
-            
             <Button
               type="submit"
               fullWidth
               variant="contained"
+              color="primary"
               sx={{ mt: 3, mb: 2 }}
             >
-              Sign In
+              Submit
             </Button>
           </Box>
         </Box>
       </Container>
-      <Box sx={{ 
+    </ThemeProvider>
-        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 and SnippetsX. Все права защищены.
-        </Typography>
-      </Box>
-    </>
-  );
-};
 
-
+Login.propTypes = {
-export default LoginPageWithTheme;
+  setToken: PropTypes.func.isRequired
+};

src/Login/LoginServerSend.js

@@ -1,17 +1,10 @@
-import axios from 'axios';
+export async function loginUser(credentials) {
-
+  return fetch('http://localhost:8080/login', {
-const API_BASE_URL = 'https://api.admin.lcsa.ru'; // Replace with your actual API base URL
+    method: 'POST',
-
+    headers: {
-export const sendLoginCredentials = async (username, password) => {
+      'Content-Type': 'application/json'
-  /*try {
+    },
-    const response = await axios.post(`${API_BASE_URL}/login`, {
+    body: JSON.stringify(credentials)
-      username,
+  })
-      password
+    .then(data => data.json())
-    });
+ }
-    return response.data;
-  } catch (error) {
-    console.error('Login error:', error);
-    throw error;
-  }*/
- return false
-};

src/Preferences/Preferences.js

@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { 
+  Container, 
+  TextField, 
+  Button, 
+  Typography, 
+  Box,
+} from '@mui/material';
+import { ThemeProvider } from '@mui/material/styles';
+import theme from '../theme';
+
+
+const PreferencesPageWithTheme = () => (
+  <ThemeProvider theme={theme}>
+    <PreferencesPage />
+  </ThemeProvider>
+);
+
+
+const PreferencesPage = () => {
+  return (
+    <>
+      <Box
+        sx={{
+          width: '100%',
+          backgroundColor: '#4e00ba',
+          color: 'white',
+          padding: 2,
+          textAlign: 'bottom',
+        }}
+      >
+        <Typography variant="h6">
+          Admin Dashboard
+        </Typography>
+      </Box>
+
+    </>
+  )
+}
+export default PreferencesPageWithTheme;