fixed login
This commit is contained in:
parent
03690424c5
commit
a77f2ed598
4424
package-lock.json
generated
4424
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -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" />
|
||||
|
||||
13
server.js
Normal file
13
server.js
Normal file
@ -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'))
|
||||
46
src/App.css
46
src/App.css
@ -1,45 +1,3 @@
|
||||
.board-row {
|
||||
align-items: center;
|
||||
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;
|
||||
body {
|
||||
overflow-x: hidden; /* Hide horizontal scrollbar */
|
||||
}
|
||||
31
src/App.js
31
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 { checkAuthCookie } from './Login/CookieCreating';
|
||||
import { BrowserRouter as Router, Route, Routes} from 'react-router-dom';
|
||||
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(() => {
|
||||
const token = checkAuthCookie();
|
||||
setIsAuthenticated(!!token);
|
||||
}, []);
|
||||
if(!token){
|
||||
return <Login setToken={setToken} />
|
||||
}
|
||||
|
||||
return (
|
||||
<Router>
|
||||
<Routes>
|
||||
<Route
|
||||
path="/login"
|
||||
element={isAuthenticated ? <Navigate to="/dashboard" /> : <Login />}
|
||||
/>
|
||||
<Route
|
||||
path="/dashboard"
|
||||
element={isAuthenticated ? <Dashboard /> : <Navigate to="/login" />}
|
||||
/>
|
||||
<Route
|
||||
path="/"
|
||||
element={<Navigate to={isAuthenticated ? "/dashboard" : "/login"} />}
|
||||
/>
|
||||
<Route path="/dashboard" element={<Dashboard/>} />
|
||||
<Route path="/preferences" element={<Preferences/>} />
|
||||
</Routes>
|
||||
</Router>
|
||||
);
|
||||
}
|
||||
|
||||
export default App;
|
||||
|
||||
@ -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'
|
||||
|
||||
@ -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;
|
||||
};
|
||||
@ -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;
|
||||
}
|
||||
@ -1,66 +1,43 @@
|
||||
import React, { useState } from 'react';
|
||||
import {
|
||||
Container,
|
||||
TextField,
|
||||
Button,
|
||||
Typography,
|
||||
Box,
|
||||
} from '@mui/material';
|
||||
import PropTypes from 'prop-types';
|
||||
import { Button, Container, TextField, Typography, Box } 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';
|
||||
import {loginUser} from './LoginServerSend'
|
||||
|
||||
|
||||
const LoginPageWithTheme = () => (
|
||||
<ThemeProvider theme={theme}>
|
||||
<LoginPage />
|
||||
</ThemeProvider>
|
||||
);
|
||||
|
||||
|
||||
const LoginPage = () => {
|
||||
const [username, setusername] = useState('');
|
||||
export default function Login({ setToken }) {
|
||||
const [username, setUserName] = useState('');
|
||||
const [password, setPassword] = useState('');
|
||||
const [msg, setMsg] = useState('');
|
||||
const navigate = useNavigate();
|
||||
|
||||
const handleSubmit = (event) => {
|
||||
event.preventDefault();
|
||||
console.log('Login attempt with:', username, password);
|
||||
if (username === 'snippetsx' && password === '2371')
|
||||
{
|
||||
createAuthCookie(username);
|
||||
navigate('/dashboard');
|
||||
}
|
||||
else
|
||||
{
|
||||
setMsg(true)
|
||||
const handleSubmit = async e => {
|
||||
e.preventDefault();
|
||||
const token = await loginUser({
|
||||
username,
|
||||
password
|
||||
});
|
||||
setToken(token);
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
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',
|
||||
@ -68,10 +45,11 @@ const LoginPage = () => {
|
||||
>
|
||||
|
||||
<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)}
|
||||
error={msg}
|
||||
helperText={msg ? "Incorrect password" : ""}
|
||||
className={msg ? 'shake-animation' : ''}
|
||||
onChange={e => setPassword(e.target.value)}
|
||||
/>
|
||||
|
||||
<Button
|
||||
type="submit"
|
||||
fullWidth
|
||||
variant="contained"
|
||||
color="primary"
|
||||
sx={{ mt: 3, mb: 2 }}
|
||||
>
|
||||
Sign In
|
||||
Submit
|
||||
</Button>
|
||||
</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 and SnippetsX. Все права защищены.
|
||||
</Typography>
|
||||
</Box>
|
||||
</>
|
||||
);
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
|
||||
Login.propTypes = {
|
||||
setToken: PropTypes.func.isRequired
|
||||
};
|
||||
|
||||
|
||||
export default LoginPageWithTheme;
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
import axios from 'axios';
|
||||
|
||||
const API_BASE_URL = 'https://api.admin.lcsa.ru'; // Replace with your actual API base URL
|
||||
|
||||
export const sendLoginCredentials = async (username, password) => {
|
||||
/*try {
|
||||
const response = await axios.post(`${API_BASE_URL}/login`, {
|
||||
username,
|
||||
password
|
||||
});
|
||||
return response.data;
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
throw error;
|
||||
}*/
|
||||
return false
|
||||
};
|
||||
export async function loginUser(credentials) {
|
||||
return fetch('http://localhost:8080/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(credentials)
|
||||
})
|
||||
.then(data => data.json())
|
||||
}
|
||||
40
src/Preferences/Preferences.js
Normal file
40
src/Preferences/Preferences.js
Normal file
@ -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;
|
||||
Loading…
Reference in New Issue
Block a user