ЛогинПароли. Продолжение

This commit is contained in:
DyCTaTOR 2023-12-25 13:32:42 +04:00
parent 34a37d6eab
commit c036badf7a
7 changed files with 66 additions and 29 deletions

View File

@ -1,4 +1,11 @@
{ {
"entrysData": [
{
"id": 0,
"login": "dyctator",
"password": "12345"
}
],
"directions": [ "directions": [
{ {
"id": 0, "id": 0,

View File

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

View File

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

View File

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

View File

@ -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([

View File

@ -0,0 +1,9 @@
const RegistrPage = () => {
return (
<div>
</div>
);
};
export default RegistrPage;