ЛогинПароли. Продолжение
This commit is contained in:
parent
34a37d6eab
commit
c036badf7a
@ -1,4 +1,11 @@
|
|||||||
{
|
{
|
||||||
|
"entrysData": [
|
||||||
|
{
|
||||||
|
"id": 0,
|
||||||
|
"login": "dyctator",
|
||||||
|
"password": "12345"
|
||||||
|
}
|
||||||
|
],
|
||||||
"directions": [
|
"directions": [
|
||||||
{
|
{
|
||||||
"id": 0,
|
"id": 0,
|
||||||
|
@ -1,34 +1,22 @@
|
|||||||
import { useEffect, useState } from 'react';
|
import { useEffect, useState } from 'react';
|
||||||
import EntrysDataApiService from '../service/EntrysDataApiService';
|
import EntrysDataApiService from '../service/EntrysDataApiService';
|
||||||
|
|
||||||
const useEntysDataItem = (id) => {
|
const useEntrysData = () => {
|
||||||
const emptyItem = {
|
const [entrys, setEntrys] = useState([]);
|
||||||
id: '',
|
|
||||||
date: '',
|
|
||||||
name: '',
|
|
||||||
description: '',
|
|
||||||
image: '',
|
|
||||||
};
|
|
||||||
const [item, setItem] = useState({ ...emptyItem });
|
|
||||||
|
|
||||||
const getItem = async (itemId = undefined) => {
|
const getEntrysData = async () => {
|
||||||
if (itemId && itemId > 0) {
|
const data = await EntrysDataApiService.getAll();
|
||||||
const data = await EntrysDataApiService.get(itemId);
|
setEntrys(data ?? []);
|
||||||
setItem(data);
|
|
||||||
} else {
|
|
||||||
setItem({ ...emptyItem });
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
getItem(id);
|
getEntrysData();
|
||||||
// eslint-disable-next-line react-hooks/exhaustive-deps
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||||||
}, [id]);
|
}, []);
|
||||||
|
|
||||||
return {
|
return {
|
||||||
item,
|
entrys,
|
||||||
setItem,
|
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
export default useEntysDataItem;
|
export default useEntrysData;
|
||||||
|
@ -1,36 +1,59 @@
|
|||||||
import { useState } from 'react';
|
import { useState } from 'react';
|
||||||
|
import { Link } from 'react-router-dom';
|
||||||
import toast from 'react-hot-toast';
|
import toast from 'react-hot-toast';
|
||||||
import { Button, Form, Label } from 'react-bootstrap';
|
import { Button, Form } from 'react-bootstrap';
|
||||||
import Input from '../../input/Input.jsx';
|
import Input from '../../input/Input.jsx';
|
||||||
|
import useEntrysData from '../hooks/EntrysDataHook';
|
||||||
|
|
||||||
const Entry = () => {
|
const Entry = () => {
|
||||||
|
const { entrys } = useEntrysData();
|
||||||
const [validated, setValidated] = useState(false);
|
const [validated, setValidated] = useState(false);
|
||||||
const [login, setLogin] = useState('');
|
const [login, setLogin] = useState('');
|
||||||
const [password, setPassword] = useState('');
|
const [password, setPassword] = useState('');
|
||||||
|
const isLoginValid = (value) => /^[a-zA-Z]+$/.test(value);
|
||||||
|
|
||||||
const handleSubmit = (event) => {
|
const handleSubmit = (event) => {
|
||||||
const form = event.currentTarget;
|
const form = event.currentTarget;
|
||||||
event.preventDefault();
|
event.preventDefault();
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
if (form.checkValidity() !== false) {
|
if (form.checkValidity() !== false) {
|
||||||
toast.success('Валидация прошла успешно');
|
if (isLoginValid(login)) {
|
||||||
|
entrys.map((item) => {
|
||||||
|
if (login === item.login) {
|
||||||
|
if (password === item.password) {
|
||||||
|
toast.success('Вы вошли в аккаунт');
|
||||||
|
return [];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
toast.error('Данный пользователь не найден, либо был введён неверный пароль');
|
||||||
|
return [];
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
toast.error('Логин должен быть введён латинскими символами');
|
||||||
|
return;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
setValidated(true);
|
setValidated(true);
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<main className="container-fluid text-center">
|
<main className="container-fluid text-center">
|
||||||
<span className="mainSt">
|
<span className="mainSt">
|
||||||
<b>Личный кабинет</b>
|
<b>Личный кабинет</b>
|
||||||
</span>
|
</span>
|
||||||
<div className="rectpage4 d-flex row justify-content-center">
|
<div className="rectpage4 d-flex row justify-content-center">
|
||||||
|
<span className="EntrysSt">
|
||||||
|
<b></b>
|
||||||
|
</span>
|
||||||
<Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
|
<Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
|
||||||
<Label className="form-label"><b>Логин</b></Label>
|
<label className="form-label"><b>Логин</b></label>
|
||||||
<Input name="login" value = { login } onChange={(e) => setLogin(e.target.value)}
|
<Input name="login" value = { login } onChange={(e) => setLogin(e.target.value)}
|
||||||
placeholder="dyctator" type="text" required />
|
placeholder="dyctator" type="text" required />
|
||||||
<Label className="form-label"><b>Пароль</b></Label>
|
<label className="form-label"><b>Пароль</b></label>
|
||||||
<Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)}
|
<Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)}
|
||||||
type="password" required />
|
type="password" required />
|
||||||
<Button className="btn btn-primary w-auto" type="submit" >Войти</Button>
|
<Button className="btn btn-primary w-auto" type="submit" >Войти</Button>
|
||||||
|
<Button as={Link} to='/registrPage' variant = "danger" className="btn btn-primary w-auto" >Регистрация</Button>
|
||||||
</Form>
|
</Form>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
@ -37,6 +37,11 @@ h3 {
|
|||||||
color: #060647;
|
color: #060647;
|
||||||
font-size: 50px;
|
font-size: 50px;
|
||||||
}
|
}
|
||||||
|
.EntrysSt{
|
||||||
|
font-weight: bold;
|
||||||
|
color: #060647;
|
||||||
|
font-size: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
.rectPage2{
|
.rectPage2{
|
||||||
color: #FFFFFF;
|
color: #FFFFFF;
|
||||||
|
@ -10,6 +10,7 @@ import Page2 from './pages/Page2.jsx';
|
|||||||
import Page3 from './pages/Page3.jsx';
|
import Page3 from './pages/Page3.jsx';
|
||||||
import Page4 from './pages/Page4.jsx';
|
import Page4 from './pages/Page4.jsx';
|
||||||
import Page5 from './pages/Page5.jsx';
|
import Page5 from './pages/Page5.jsx';
|
||||||
|
import RegistrPage from './pages/RegistrPage.jsx';
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{
|
{
|
||||||
@ -38,6 +39,10 @@ const routes = [
|
|||||||
element: <Page5 />,
|
element: <Page5 />,
|
||||||
title: 'Контакты',
|
title: 'Контакты',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/registrPage',
|
||||||
|
element: <RegistrPage />,
|
||||||
|
},
|
||||||
];
|
];
|
||||||
|
|
||||||
const router = createBrowserRouter([
|
const router = createBrowserRouter([
|
||||||
|
9
Lab5/src/pages/RegistrPage.jsx
Normal file
9
Lab5/src/pages/RegistrPage.jsx
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
const RegistrPage = () => {
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default RegistrPage;
|
Loading…
Reference in New Issue
Block a user