Работа с логинами

Lab5/src/components/logins/hooks/EntrysDataHook.js

@@ -0,0 +1,34 @@
+import { useEffect, useState } from 'react';
+import EntrysDataApiService from '../service/EntrysDataApiService';
+
+const useEntysDataItem = (id) => {
+    const emptyItem = {
+        id: '',
+        date: '',
+        name: '',
+        description: '',
+        image: '',
+    };
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await EntrysDataApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useEntysDataItem;

Lab5/src/components/logins/login/Entry.jsx

@@ -0,0 +1,40 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { Button, Form, Label } from 'react-bootstrap';
+import Input from '../../input/Input.jsx';
+
+const Entry = () => {
+    const [validated, setValidated] = useState(false);
+    const [login, setLogin] = useState('');
+    const [password, setPassword] = useState('');
+
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+        if (form.checkValidity() !== false) {
+            toast.success('Валидация прошла успешно');
+        }
+        setValidated(true);
+    };
+    return (
+        <main className="container-fluid text-center">
+            <span className="mainSt">
+                <b>Личный кабинет</b>
+            </span>
+            <div className="rectpage4 d-flex row justify-content-center">
+                <Form className="col-md-4 m-0 w-auto" onSubmit={ handleSubmit } noValidate validated={validated}>
+                    <Label className="form-label"><b>Логин</b></Label>
+                    <Input name="login" value = { login } onChange={(e) => setLogin(e.target.value)}
+                        placeholder="dyctator" type="text" required />
+                    <Label className="form-label"><b>Пароль</b></Label>
+                    <Input name="password" value = { password } onChange={(e) => setPassword(e.target.value)}
+                        type="password" required />
+                    <Button className="btn btn-primary w-auto" type="submit" >Войти</Button>
+                </Form>
+            </div>
+        </main>
+    );
+};
+
+export default Entry;

Lab5/src/components/logins/service/EntrysDataApiService.js

@@ -0,0 +1,5 @@
+import ApiService from '../../api/ApiService';
+
+const LinesApiService = new ApiService('entrysData');
+
+export default LinesApiService;

Lab5/src/pages/Page4.jsx

@@ -1,26 +1,8 @@
+import Entry from '../components/logins/login/Entry.jsx';
+
 const Page4 = () => {
     return (
-        <main className="container-fluid text-center">
-            <span className="mainSt">
-                <b>Личный кабинет</b>
-            </span>
-            <div className="rectpage4 d-flex row justify-content-center">
-                <form className="col-md-4 m-0 w-auto" action="./page4.html" method="get">
-                    <div className="mb-2">
-                        <label className="form-label" htmlFor="login"><b>Логин</b></label>
-                        <input id="login" name="login" className="form-control"
-                        placeholder="dyctator" type="text" required />
-                    </div>
-                    <div className="mb-2">
-                        <label className="form-label" htmlFor="password"><b>Пароль</b></label>
-                        <input id="password" name="password" className="form-control" type="password" required />
-                    </div>
-                    <div className="text-center">
-                        <button className="btn btn-primary w-auto" type="button">Войти</button>
-                    </div>
-                </form>
-            </div>
-        </main>
+        <Entry />
     );
 };