From 196ce072ba08159c01ca958bd318188829d8c865 Mon Sep 17 00:00:00 2001
From: Zakharov_Rostislav <r.z.8102.80@gmail.com>
Date: Mon, 4 Dec 2023 22:25:03 +0400
Subject: [PATCH] lab4 maybe it is end

---
 ReactLibrary/data.json                     | 36 ++++++------
 ReactLibrary/src/App.jsx                   |  2 +-
 ReactLibrary/src/index.css                 |  8 ++-
 ReactLibrary/src/main.jsx                  | 66 +++++++++++++++++++++-
 ReactLibrary/src/pages/AdminPage.jsx       | 23 ++++++++
 ReactLibrary/src/pages/AuthorEdit.jsx      | 59 +++++++++++++++++++
 ReactLibrary/src/pages/AuthorsTable.jsx    | 27 +++++++++
 ReactLibrary/src/pages/BookEdit.jsx        | 56 ++++++++++++++++++
 ReactLibrary/src/pages/BooksTable.jsx      | 28 +++++++++
 ReactLibrary/src/pages/CategoriesTable.jsx | 25 ++++++++
 ReactLibrary/src/pages/CategoryEdit.jsx    | 39 +++++++++++++
 ReactLibrary/src/pages/ErrorPage.jsx       |  3 +-
 ReactLibrary/src/pages/LoginPage.jsx       | 45 +++++++++++++++
 ReactLibrary/src/pages/MainPage.jsx        |  6 +-
 ReactLibrary/src/pages/RegPage.jsx         | 55 ++++++++++++++++++
 ReactLibrary/src/pages/UserFavorities.jsx  | 28 +++++++++
 ReactLibrary/src/pages/UserHistory.jsx     | 29 ++++++++++
 ReactLibrary/src/pages/UserPage.jsx        | 22 ++++++++
 18 files changed, 529 insertions(+), 28 deletions(-)
 create mode 100644 ReactLibrary/src/pages/AdminPage.jsx
 create mode 100644 ReactLibrary/src/pages/AuthorEdit.jsx
 create mode 100644 ReactLibrary/src/pages/AuthorsTable.jsx
 create mode 100644 ReactLibrary/src/pages/BookEdit.jsx
 create mode 100644 ReactLibrary/src/pages/BooksTable.jsx
 create mode 100644 ReactLibrary/src/pages/CategoriesTable.jsx
 create mode 100644 ReactLibrary/src/pages/CategoryEdit.jsx
 create mode 100644 ReactLibrary/src/pages/LoginPage.jsx
 create mode 100644 ReactLibrary/src/pages/RegPage.jsx
 create mode 100644 ReactLibrary/src/pages/UserFavorities.jsx
 create mode 100644 ReactLibrary/src/pages/UserHistory.jsx
 create mode 100644 ReactLibrary/src/pages/UserPage.jsx

diff --git a/ReactLibrary/data.json b/ReactLibrary/data.json
index c1dbe76..880438e 100644
--- a/ReactLibrary/data.json
+++ b/ReactLibrary/data.json
@@ -13,6 +13,24 @@
       "name": "Лирическое стихотворение"
     }
   ],
+  "authors": [
+    {
+      "id": 1,
+      "name": "Пушкин А. С."
+    },
+    {
+      "id": 2,
+      "name": "Державин Г. Р."
+    },
+    {
+      "id": 3,
+      "name": "Квинт Гораций Флакк"
+    },
+    {
+      "id": 4,
+      "name": "Карамзин Н. М."
+    }
+  ],
   "books": [
     {
       "categoriesId": "3",
@@ -46,23 +64,5 @@
       "image": "",
       "id": 4
     }
-  ],
-  "authors": [
-    {
-      "id": 1,
-      "name": "Пушкин А. С."
-    },
-    {
-      "id": 2,
-      "name": "Державин Г. Р."
-    },
-    {
-      "id": 3,
-      "name": "Квинт Гораций Флакк"
-    },
-    {
-      "id": 4,
-      "name": "Карамзин Н. М."
-    }
   ]
 }
\ No newline at end of file
diff --git a/ReactLibrary/src/App.jsx b/ReactLibrary/src/App.jsx
index 63089b5..450cf9c 100644
--- a/ReactLibrary/src/App.jsx
+++ b/ReactLibrary/src/App.jsx
@@ -12,7 +12,7 @@ const App = ({ routes }) => {
       <Container className='p-2' as="main" fluid>
         <Outlet />
       </Container>
-      <Footer />
+      <Footer/>
     </>
   );
 };
diff --git a/ReactLibrary/src/index.css b/ReactLibrary/src/index.css
index d92fce2..8ec63f0 100644
--- a/ReactLibrary/src/index.css
+++ b/ReactLibrary/src/index.css
@@ -5,7 +5,7 @@ body{
     font-size: 1.5em;
 }
 
-.library-button{
+.lib-btn{
     background-color: #e8b8e8;
     color: #000000;
     font-size: 1em;
@@ -13,12 +13,16 @@ body{
     border: #e8b8e8;
 }
 
-.library-button:hover{
+.lib-btn:hover{
     background-color: #bf80e6;
     color: #000000;
     font-weight: bold;
 }
 
+.lib-table{
+    color: #000000;
+}
+
 h1 {
     font-size: 1.5em;
 }
\ No newline at end of file
diff --git a/ReactLibrary/src/main.jsx b/ReactLibrary/src/main.jsx
index 973d971..b4e60ba 100644
--- a/ReactLibrary/src/main.jsx
+++ b/ReactLibrary/src/main.jsx
@@ -6,13 +6,75 @@ import App from './App.jsx';
 import './index.css';
 import ErrorPage from './pages/ErrorPage.jsx';
 import MainPage from './pages/MainPage.jsx';
+import UserPage from './pages/UserPage.jsx';
+import AdminPage from './pages/AdminPage.jsx';
+import BooksTable from './pages/BooksTable.jsx';
+import CategoriesTable from './pages/CategoriesTable.jsx';
+import AuthorsTable from './pages/AuthorsTable.jsx';
+import UserHistory from './pages/UserHistory.jsx';
+import UserFavorities from './pages/UserFavorities.jsx';
+import RegPage from './pages/RegPage.jsx';
+import LoginPage from './pages/LoginPage.jsx';
+import BookEdit from './pages/BookEdit.jsx';
+import CategoryEdit from './pages/CategoryEdit.jsx';
+import AuthorEdit from './pages/AuthorEdit.jsx';
 
 const routes = [
   {
     index: true,
     path: '/',
-    element: <MainPage />,
-    title: 'Главная страница',
+    element: <MainPage/>,
+    title: 'Главная',
+  },
+  {
+    path: '/login-page',
+    element: <LoginPage/>,
+    title: 'Войти',
+  },
+  {
+    path: '/user-page',
+    element: <UserPage/>,
+    title: 'Личный кабинет',
+  },
+  {
+    path: '/admin-page',
+    element: <AdminPage/>,
+  },
+  {
+    path: '/books-table',
+    element: <BooksTable/>,
+  },
+  {
+    path: '/categories-table',
+    element: <CategoriesTable/>,
+  },
+  {
+    path: '/authors-table',
+    element: <AuthorsTable/>,
+  },
+  {
+    path: '/user-history',
+    element: <UserHistory/>,
+  },
+  {
+    path: '/user-favorities',
+    element: <UserFavorities/>,
+  },
+  {
+    path: '/reg-page',
+    element: <RegPage/>,
+  },
+  {
+    path: '/book-edit',
+    element: <BookEdit/>,
+  },
+  {
+    path: '/category-edit',
+    element: <CategoryEdit/>,
+  },
+  {
+    path: '/author-edit',
+    element: <AuthorEdit/>,
   },
 ];
 
diff --git a/ReactLibrary/src/pages/AdminPage.jsx b/ReactLibrary/src/pages/AdminPage.jsx
new file mode 100644
index 0000000..8cb37dc
--- /dev/null
+++ b/ReactLibrary/src/pages/AdminPage.jsx
@@ -0,0 +1,23 @@
+import { Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const AdminPage = () => {
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Страница администратора.
+            </h1>
+            <p className="mt-2 text-md-start text-center">
+                Здесь вы можете просмотреть существующие книги,
+                категории и авторов, а также добавить новых.
+            </p>
+            <div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
+                <Button as={Link} to="/books-table" className='lib-btn'>Таблица книг</Button>
+                <Button as={Link} to="/categories-table" className='lib-btn'>Страница категорий</Button>
+                <Button as={Link} to="/authors-table" className='lib-btn'>Таблица авторов</Button>
+            </div>
+        </>
+    );
+};
+
+export default AdminPage;
diff --git a/ReactLibrary/src/pages/AuthorEdit.jsx b/ReactLibrary/src/pages/AuthorEdit.jsx
new file mode 100644
index 0000000..e6db72d
--- /dev/null
+++ b/ReactLibrary/src/pages/AuthorEdit.jsx
@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const AuthorEdit = () => {
+    const [validated, setValidated] = useState(false);
+    const navigate = useNavigate();
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Добавление/редактирование автора.
+            </h1>
+            <div className="text-center">
+                <img id="image-preview" src="https://via.placeholder.com/200" alt="placeholder"/>
+            </div>
+            <Form id="books-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="author">
+                    <Form.Label htmlFor="author" className="form-label">Автор</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="name">
+                    <Form.Label>Название</Form.Label>
+                    <Form.Control type="text" name="name" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="country">
+                    <Form.Label>Страна</Form.Label>
+                    <Form.Control type="text" name="country" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="birthYear">
+                    <Form.Label>Год рождения</Form.Label>
+                    <Form.Control type="text" name="birthYear" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="deathYear">
+                    <Form.Label>Год смерти</Form.Label>
+                    <Form.Control type="text" name="deathYear" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="file">
+                    <Form.Label>Изображение</Form.Label>
+                    <Form.Control type="file" name="image" accept="image/*"/>
+                </Form.Group>
+                <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                    <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                </div>
+            </Form>
+        </>
+    );
+};
+
+export default AuthorEdit;
diff --git a/ReactLibrary/src/pages/AuthorsTable.jsx b/ReactLibrary/src/pages/AuthorsTable.jsx
new file mode 100644
index 0000000..3d31a87
--- /dev/null
+++ b/ReactLibrary/src/pages/AuthorsTable.jsx
@@ -0,0 +1,27 @@
+import { Button, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const AuthorsTable = () => {
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Таблица авторов.
+            </h1>
+            <Button as={Link} to="/author-edit" className='lib-btn'>Добавить автора</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Имя</th>
+                    <th scope="col" className="w-25">Страна</th>
+                    <th scope="col" className="w-25">Год рождения</th>
+                    <th scope="col" className="w-25">Год смерти</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default AuthorsTable;
diff --git a/ReactLibrary/src/pages/BookEdit.jsx b/ReactLibrary/src/pages/BookEdit.jsx
new file mode 100644
index 0000000..69b3da8
--- /dev/null
+++ b/ReactLibrary/src/pages/BookEdit.jsx
@@ -0,0 +1,56 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const BookEdit = () => {
+    const [validated, setValidated] = useState(false);
+    const navigate = useNavigate();
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Добавление/редактирование книги.
+            </h1>
+            <div className="text-center">
+                <img id="image-preview" src="https://via.placeholder.com/200" alt="placeholder"/>
+            </div>
+            <Form id="books-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="author">
+                    <Form.Label htmlFor="author" className="form-label">Автор</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="name">
+                    <Form.Label>Название</Form.Label>
+                    <Form.Control type="text" name="name" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="category">
+                    <Form.Label htmlFor="category" className="form-label">Категория</Form.Label>
+                    <Form.Select name='selected' required>
+                    </Form.Select>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="year">
+                    <Form.Label>Год издания</Form.Label>
+                    <Form.Control type="text" name="year" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="file">
+                    <Form.Label>Изображение</Form.Label>
+                    <Form.Control type="file" name="image" accept="image/*"/>
+                </Form.Group>
+                <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                    <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                </div>
+            </Form>
+        </>
+    );
+};
+
+export default BookEdit;
diff --git a/ReactLibrary/src/pages/BooksTable.jsx b/ReactLibrary/src/pages/BooksTable.jsx
new file mode 100644
index 0000000..e1802b6
--- /dev/null
+++ b/ReactLibrary/src/pages/BooksTable.jsx
@@ -0,0 +1,28 @@
+import { Button, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const BooksTable = () => {
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Таблица книг.
+            </h1>
+            <Button as={Link} to="/book-edit" className='lib-btn'>Добавить книгу</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Автор</th>
+                    <th scope="col" className="w-25">Название</th>
+                    <th scope="col" className="w-25">Категория</th>
+                    <th scope="col" className="w-25">Год издания</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default BooksTable;
diff --git a/ReactLibrary/src/pages/CategoriesTable.jsx b/ReactLibrary/src/pages/CategoriesTable.jsx
new file mode 100644
index 0000000..31aff62
--- /dev/null
+++ b/ReactLibrary/src/pages/CategoriesTable.jsx
@@ -0,0 +1,25 @@
+import { Button, Table } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const CategoriesTable = () => {
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Таблица категорий.
+            </h1>
+            <Button as={Link} to="/category-edit" className='lib-btn'>Добавить категорию</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Категория</th>
+                    <th scope="col" className="w-25">Описание</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default CategoriesTable;
diff --git a/ReactLibrary/src/pages/CategoryEdit.jsx b/ReactLibrary/src/pages/CategoryEdit.jsx
new file mode 100644
index 0000000..7e0c5b5
--- /dev/null
+++ b/ReactLibrary/src/pages/CategoryEdit.jsx
@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const CategoryEdit = () => {
+    const [validated, setValidated] = useState(false);
+    const navigate = useNavigate();
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Добавление/редактирование категории.
+            </h1>
+            <Form id="books-form" noValidate validated={validated} onSubmit={handleSubmit}>
+                <Form.Group className="mb-2" controlId="name">
+                    <Form.Label>Название</Form.Label>
+                    <Form.Control type="text" name="name" required/>
+                </Form.Group>
+                <Form.Group className="mb-2" controlId="info">
+                    <Form.Label>Описание</Form.Label>
+                    <Form.Control type="text" name="info" required/>
+                </Form.Group>
+                <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                    <Button className="lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+                    <Button className="lib-btn" type="submit" variant="primary">Сохранить</Button>
+                </div>
+            </Form>
+        </>
+    );
+};
+
+export default CategoryEdit;
diff --git a/ReactLibrary/src/pages/ErrorPage.jsx b/ReactLibrary/src/pages/ErrorPage.jsx
index 4876a80..d8c7086 100644
--- a/ReactLibrary/src/pages/ErrorPage.jsx
+++ b/ReactLibrary/src/pages/ErrorPage.jsx
@@ -3,14 +3,13 @@ import { useNavigate } from 'react-router-dom';
 
 const ErrorPage = () => {
     const navigate = useNavigate();
-
     return (
         <Container fluid className="p-2 row justify-content-center">
             <Container className='col-md-6'>
                 <Alert variant="danger">
                     Страница не найдена
                 </Alert>
-                <Button className="w-25 mt-2 library-button" onClick={() => navigate(-1)}>Назад</Button>
+                <Button className="w-25 mt-2 lib-btn" onClick={() => navigate(-1)}>Назад</Button>
             </Container>
         </Container>
     );
diff --git a/ReactLibrary/src/pages/LoginPage.jsx b/ReactLibrary/src/pages/LoginPage.jsx
new file mode 100644
index 0000000..446b747
--- /dev/null
+++ b/ReactLibrary/src/pages/LoginPage.jsx
@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const LoginPage = () => {
+    const [validated, setValidated] = useState(false);
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Вход в аккаунт.
+            </h1>
+            <div className="row justify-content-center">
+                <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+                    <Form.Group className="mb-2" controlId="email">
+                        <Form.Label>E-mail</Form.Label>
+                        <Form.Control type="email" name="email" placeholder="name@example.ru" required />
+                        <Form.Control.Feedback>Почта заполнена</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Почта не заполнена</Form.Control.Feedback>
+                    </Form.Group>
+                    <Form.Group className="mb-2" controlId="password">
+                        <Form.Label>Пароль</Form.Label>
+                        <Form.Control type="password" name="password" required />
+                        <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+                    </Form.Group>
+                    <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                        <Button className="lib-btn" type="submit">Отправить</Button>
+                        <Button as={Link} to="/reg-page" className="lib-btn">У меня нет аккаунта</Button>
+                    </div>
+                </Form>
+            </div>
+        </>
+    );
+};
+
+export default LoginPage;
diff --git a/ReactLibrary/src/pages/MainPage.jsx b/ReactLibrary/src/pages/MainPage.jsx
index 7033ed3..bdddfe1 100644
--- a/ReactLibrary/src/pages/MainPage.jsx
+++ b/ReactLibrary/src/pages/MainPage.jsx
@@ -5,7 +5,7 @@ const MainPage = () => {
     return (
         <>
             <h1 className='mt-2 text-md-start text-center'>
-                Пример web-страницы.
+                Добро пожаловать!
             </h1>
             <p className="mt-2 text-md-start text-center">
                 Здесь вы обязательно найдете нужные вам книги.
@@ -15,8 +15,8 @@ const MainPage = () => {
                 Там же вы можете посмотреть вашу Историю чтения.
             </p>
             <div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
-                <Button as={Link} to="/user-page.html" className='library-button'>Личный кабинет</Button>
-                <Button as={Link} to="/search.html" className='library-button'>Поиск</Button>
+                <Button as={Link} to="/user-page" className='lib-btn'>Личный кабинет</Button>
+                <Button as={Link} to="/search" className='lib-btn'>Поиск</Button>
             </div>
         </>
     );
diff --git a/ReactLibrary/src/pages/RegPage.jsx b/ReactLibrary/src/pages/RegPage.jsx
new file mode 100644
index 0000000..3a70722
--- /dev/null
+++ b/ReactLibrary/src/pages/RegPage.jsx
@@ -0,0 +1,55 @@
+import { useState } from 'react';
+import { Button, Form } from 'react-bootstrap';
+
+const RegPage = () => {
+    const [validated, setValidated] = useState(false);
+    const handleSubmit = (event) => {
+        const form = event.currentTarget;
+        if (form.checkValidity() === false) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+        setValidated(true);
+    };
+
+    return (
+        <>
+            <h1 className='mt-2 text-center'>
+                Создание аккаунта.
+            </h1>
+            <div className="row justify-content-center">
+                <Form className="col-md-6 m-0" noValidate validated={validated} onSubmit={handleSubmit}>
+                    <Form.Group className="mb-2" controlId="name">
+                        <Form.Label>Никнейм</Form.Label>
+                        <Form.Control type="text" name="name" required />
+                        <Form.Control.Feedback>Никнейм заполнен</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Никнейм не заполнен</Form.Control.Feedback>
+                    </Form.Group>
+                    <Form.Group className="mb-2" controlId="email">
+                        <Form.Label>E-mail</Form.Label>
+                        <Form.Control type="email" name="email" placeholder="name@example.ru" required />
+                        <Form.Control.Feedback>Почта заполнена</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Почта не заполнена</Form.Control.Feedback>
+                    </Form.Group>
+                    <Form.Group className="mb-2" controlId="password">
+                        <Form.Label>Пароль</Form.Label>
+                        <Form.Control type="password" name="password" required />
+                        <Form.Control.Feedback>Пароль заполнен</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Пароль не заполнен</Form.Control.Feedback>
+                    </Form.Group>
+                    <Form.Group className="mb-2" controlId="password">
+                        <Form.Label>Повторите пароль</Form.Label>
+                        <Form.Control type="password" name="password" required />
+                        <Form.Control.Feedback>Пароль повторен</Form.Control.Feedback>
+                        <Form.Control.Feedback type="invalid">Пароль не повторен</Form.Control.Feedback>
+                    </Form.Group>
+                    <div className="d-grid gap-2 mt-4 d-md-flex justify-content-md-center">
+                        <Button className="lib-btn" type="submit">Отправить</Button>
+                    </div>
+                </Form>
+            </div>
+        </>
+    );
+};
+
+export default RegPage;
diff --git a/ReactLibrary/src/pages/UserFavorities.jsx b/ReactLibrary/src/pages/UserFavorities.jsx
new file mode 100644
index 0000000..badf34a
--- /dev/null
+++ b/ReactLibrary/src/pages/UserFavorities.jsx
@@ -0,0 +1,28 @@
+import { Button, Table } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const UserFavorities = () => {
+    const navigate = useNavigate();
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Избранное.
+            </h1>
+            <Button className="w-25 mt-2 lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Автор</th>
+                    <th scope="col" className="w-25">Название</th>
+                    <th scope="col" className="w-25">Категория</th>
+                    <th scope="col" className="w-25">Год издания</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default UserFavorities;
diff --git a/ReactLibrary/src/pages/UserHistory.jsx b/ReactLibrary/src/pages/UserHistory.jsx
new file mode 100644
index 0000000..fcf6476
--- /dev/null
+++ b/ReactLibrary/src/pages/UserHistory.jsx
@@ -0,0 +1,29 @@
+import { Button, Table } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+
+const UserHistory = () => {
+    const navigate = useNavigate();
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                История.
+            </h1>
+            <Button className="w-25 mt-2 lib-btn" onClick={() => navigate(-1)}>Назад</Button>
+            <Table className="mt-2 lib-table" striped>
+                <thead>
+                    <th scope="col">№</th>
+                    <th scope="col" className="w-25">Автор</th>
+                    <th scope="col" className="w-25">Название</th>
+                    <th scope="col" className="w-25">Категория</th>
+                    <th scope="col" className="w-25">Год издания</th>
+                    <th scope="col" className="w-25">Время чтения</th>
+                    <th scope="col"></th>
+                    <th scope="col"></th>
+                </thead>
+                <tbody></tbody>
+            </Table>
+        </>
+    );
+};
+
+export default UserHistory;
diff --git a/ReactLibrary/src/pages/UserPage.jsx b/ReactLibrary/src/pages/UserPage.jsx
new file mode 100644
index 0000000..f693518
--- /dev/null
+++ b/ReactLibrary/src/pages/UserPage.jsx
@@ -0,0 +1,22 @@
+import { Button } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+
+const UserPage = () => {
+    return (
+        <>
+            <h1 className='mt-2 text-md-start text-center'>
+                Ваш личный кабинет.
+            </h1>
+            <p className="mt-2 text-md-start text-center">
+                Здесь вы можете посмотреть вашу Историю чтения и Избранные книги.
+            </p>
+            <div className="d-grid gap-2 mt-2 d-md-flex justify-content-md-start">
+                <Button as={Link} to="/user-favorities" className='lib-btn'>Избранное</Button>
+                <Button as={Link} to="/user-history" className='lib-btn'>История</Button>
+                <Button as={Link} to="/admin-page" className='lib-btn'>Страница администратора</Button>
+            </div>
+        </>
+    );
+};
+
+export default UserPage;