import React, { useState } from 'react';
import { Navigate } from "react-router-dom";
import axios from 'axios';
import './login.css';
function Login() {
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const [loginClass, setLoginClass] = useState('');
const [passwordClass, setPasswordClass] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const submit = async (evt) => {
evt.preventDefault(); // Предотвращаем отправку формы
console.log(login, password);
if (login.length === 0 || password.length === 0) {
console.log('stop')
if (!login) { // Проверяем, не пустое ли поле login
setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
if (!password) { // Проверяем, не пустое ли поле password
setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
} else {
console.log('req')
await axios
.post('http://localhost:5000/test/auth/login', {
login: login,
password: password
})
.then((response) => {
console.log(response);
const { data } = response;
if (data.status == 200) {
console.log('entered successfully');
// Здесь изменяется состояние
setIsLoggedIn(true);
} else {
console.log('could not enter');
}
})
.catch((error) => {
console.log(error);
});
setPassword('');
setLogin('');
setLoginClass('');
setPasswordClass('');
}
// тут должен происходить переход
if (isLoggedIn) {
return <Navigate to="/main" replace={true}/>
}
return
};
return (
<div className="container col-xl-10 col-xxl-8 px-4 py-5">
<div className="row align-items-center g-lg-5 py-5">
<div className="col-lg-7 text-center text-lg-start ">
<h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>
<p className="col-lg-10 fs-4">
Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!
</p>
</div>
<div className="col-md-10 mx-auto col-lg-5">
<form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">
<h2 className="mb-4">Вход</h2>
<div className="form-floating mb-3">
<input
type="text"
className={`form-control ${loginClass}`}
id="login"
placeholder="Введите логин"
value={login}
onChange={(evt) => { setLogin(evt.target.value) }}
/>
<label htmlFor="login">Логин</label>
</div>
<div className="form-floating mb-3">
<input
type="password"
className={`form-control ${passwordClass}`}
id="password"
placeholder="Введите пароль"
value={password}
onChange={(evt) => { setPassword(evt.target.value) }}
/>
<label htmlFor="password">Пароль</label>
</div>
<button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>
</form>
</div>
</div>
</div>
);
}
export default Login;import React from 'react'
import ReactDOM from 'react-dom/client'
import './index.css'
import Login from './pages/login-page/Login'
import {
createBrowserRouter,
RouterProvider,
} from "react-router-dom";
const router = createBrowserRouter([
{
path: "/",
element: <Login />,
},
{
path: "/main",
element: <div>Main Page</div>
}
]);
ReactDOM.createRoot(document.getElementById('root')).render(
<React.StrictMode>
{/* <Login /> */}
<RouterProvider router={router} />
</React.StrictMode>,
)
import React, { useState } from 'react';
import { Navigate } from "react-router-dom";
import axios from 'axios';
import './login.css';
function Login() {
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const [loginClass, setLoginClass] = useState('');
const [passwordClass, setPasswordClass] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const submit = async (evt) => {
evt.preventDefault(); // Предотвращаем отправку формы
console.log(login, password);
if (login.length === 0 || password.length === 0) {
console.log('stop')
if (!login) { // Проверяем, не пустое ли поле login
setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
if (!password) { // Проверяем, не пустое ли поле password
setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
} else {
console.log('req')
await axios
.post('http://localhost:5000/test/auth/login', {
login: login,
password: password
})
.then((response) => {
console.log(response);
const { data } = response;
if (data.status == 200) {
console.log('entered successfully');
// Здесь изменяется состояние
setIsLoggedIn(true);
} else {
console.log('could not enter');
}
})
.catch((error) => {
console.log(error);
});
setPassword('');
setLogin('');
setLoginClass('');
setPasswordClass('');
}
};
if (isLoggedIn) {
return <Navigate to="/main" replace={true}/>
}
return (
<div className="container col-xl-10 col-xxl-8 px-4 py-5">
<div className="row align-items-center g-lg-5 py-5">
<div className="col-lg-7 text-center text-lg-start ">
<h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>
<p className="col-lg-10 fs-4">
Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!
</p>
</div>
<div className="col-md-10 mx-auto col-lg-5">
<form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">
<h2 className="mb-4">Вход</h2>
<div className="form-floating mb-3">
<input
type="text"
className={`form-control ${loginClass}`}
id="login"
placeholder="Введите логин"
value={login}
onChange={(evt) => { setLogin(evt.target.value) }}
/>
<label htmlFor="login">Логин</label>
</div>
<div className="form-floating mb-3">
<input
type="password"
className={`form-control ${passwordClass}`}
id="password"
placeholder="Введите пароль"
value={password}
onChange={(evt) => { setPassword(evt.target.value) }}
/>
<label htmlFor="password">Пароль</label>
</div>
<button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>
</form>
</div>
</div>
</div>
);
}
export default Login;