temp

.eslintrc.cjs

@@ -0,0 +1,24 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'airbnb-base',
+    'plugin:react/recommended',
+    'plugin:react/jsx-runtime',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parserOptions: { ecmaVersion: 12, sourceType: 'module' },
+  settings: { react: { version: '18.2' } },
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+    'indent': 'off',
+    'no-console': 'off',
+    'arrow-body-style': 'off',
+    'implicit-arrow-linebreak': 'off',
+  },
+}

.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

README.md

@@ -1,3 +1,3 @@
-# Отчёт по лабораторной работе №1
+# Отчёт по лабораторной работе №5
 
-Файл отчета: `Отчет лаб1.docx`
+Файл отчета: `Отчет лаб5.docx`

data.json

@@ -0,0 +1,259 @@
+{
+  "movies": [
+    {
+      "title": "Бойцовский клуб",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/FightClub.png",
+      "description": "Сотрудник страховой компании страдает хронической бессонницей и отчаянно пытается вырваться из мучительно скучной жизни. Однажды в очередной командировке он встречает некоего Тайлера Дёрдена — харизматического торговца мылом с извращенной философией. Тайлер уверен, что самосовершенствование — удел слабых, а единственное, ради чего стоит жить, — саморазрушение.<br><br> Проходит немного времени, и вот уже новые друзья лупят друг друга почем зря на стоянке перед баром, и очищающий мордобой доставляет им высшее блаженство. Приобщая других мужчин к простым радостям физической жестокости, они основывают тайный Бойцовский клуб, который начинает пользоваться невероятной популярностью.",
+      "releaseDate": "1999",
+      "country": "США, Германия",
+      "tagline": "Интриги. Хаос. Мыло",
+      "director": "Дэвид Финчер",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/dfeUzm6KF4g?si=U2D-2WNsJzkcxlBX",
+      "id": 1
+    },
+    {
+      "title": "Острые козырьки",
+      "typeId": 2,
+      "requiresSubscription": false,
+      "poster": "src/assets/main-page/posters/PeakyBlinders.png",
+      "description": "Сериал рассказывает историю восхождения одной цыганско-ирландской семьи и превращения ее в один из самых могущественных криминальных кланов Великобритании. Речь о семье Шелби, которая живет в начале XX века во втором крупном после Лондона городе Британии — Бирмингеме и набирает свою мощь в период между двумя мировыми войнами.",
+      "releaseDate": "2013",
+      "country": "Великобритания",
+      "tagline": "The streets are theirs",
+      "director": "Энтони Бирн, Колм МакКарти",
+      "ageRatingId": 4,
+      "video": "https://www.youtube.com/embed/7cOfn_sjlXM?si=fxNoZjlUon1SZd70",
+      "id": 2
+    },
+    {
+      "title": "Американский психопат",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/AmericanPsycho.jpg",
+      "description": "Днем он ничем не отличается от окружающих, и в толпе вы не обратите на него внимания. Но ночью этот благовоспитанный гражданин превращается в изощренного убийцу, терроризирующего спящий город.\n<br><br>\nСовременный дикарь, презирающий законы человечества, питается только испепеляющим пламенем своей ненависти, которая растет с каждым новым преступлением. Лавина ужаса приближается к критической черте. Скоро наступит момент, когда ее уже нельзя будет остановить.",
+      "releaseDate": "2000",
+      "country": "США, Канада",
+      "tagline": "Респектабельная внешность дьявола",
+      "director": "Мэри Хэррон",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/PpUWjff_OcM?si=e7tSm4V6qYkz406B",
+      "id": 3
+    },
+    {
+      "title": "Драйв",
+      "typeId": 1,
+      "requiresSubscription": false,
+      "poster": "src/assets/main-page/posters/Drive.jpg",
+      "description": "Великолепный водитель – при свете дня он выполняет каскадерские трюки на съёмочных площадках Голливуда, а по ночам ведет рискованную игру. Но один опасный контракт – и за его жизнь назначена награда. Теперь, чтобы остаться в живых и спасти свою очаровательную соседку, он должен делать то, что умеет лучше всего – виртуозно уходить от погони.",
+      "releaseDate": "2011",
+      "country": "США",
+      "tagline": "Some Heroes Are Real",
+      "director": " Николас Виндинг Рефн",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/XRK_wPm_EkI?si=4F8pjXahHsG1Gp5w",
+      "id": 4
+    },
+    {
+      "title": "Джокер",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/Joker.jpg",
+      "description": "Готэм, начало 1980-х годов. Комик Артур Флек живет с больной матерью, которая с детства учит его «ходить с улыбкой». Пытаясь нести в мир хорошее и дарить людям радость, Артур сталкивается с человеческой жестокостью и постепенно приходит к выводу, что этот мир получит от него не добрую улыбку, а ухмылку злодея Джокера.",
+      "releaseDate": "2019",
+      "country": "США, Канада",
+      "tagline": "Сделай счастливое лицо",
+      "director": "Тодд Филлипс",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/zAGVQLHvwOY?si=ecHfyymUUE8A6u2I",
+      "id": 5
+    },
+    {
+      "title": "Старикам здесь не место",
+      "typeId": 1,
+      "requiresSubscription": false,
+      "poster": "src/assets/main-page/posters/NoCountryForOldMen.jpg",
+      "description": "Обычный работяга обнаруживает в пустыне гору трупов, набитый героином грузовик и соблазнительную сумму в два миллиона долларов наличными. Он решает взять деньги себе, и результатом становится волна насилия, которую не может остановить вся полиция Западного Техаса.",
+      "releaseDate": "2007",
+      "country": "США",
+      "tagline": "Из воды сухим не выйти",
+      "director": "Итан Коэн, Джоэл Коэн",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/qZL0Ru-55u8?si=OISl2S8ojmJ1Mtqa",
+      "id": 6
+    },
+    {
+      "title": "Дилер",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/Pusher.png",
+      "description": "У пушера Франка крупные неприятности. Он должен 50 тысяч поставщикам-югославам, а вдобавок к этому во время продажи героина приезжим шведам налетела полиция, и весь взятый в долг товар пришлось выбросить в пруд. Друг Тонни, с которым он вместе работал, во всем признался полиции. Но товар выброшен, улик нет, и Франка выпустили. Теперь его долг поставщику Мило — 180 тысяч.",
+      "releaseDate": "1996",
+      "country": "Дания",
+      "tagline": "You don't have a chance. Seize it!",
+      "director": "Николас Виндинг Рефн",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/Mzv1bIsk5nU?si=ois8iG1SNlNQuzRc",
+      "id": 7
+    },
+    {
+      "title": "Лицо со шрамом",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/Scarface.png",
+      "description": "Весной 1980 года был открыт порт Мэйриэл Харбор, и тысячи кубинских беженцев ринулись в Соединенные Штаты на поиски Американской Мечты. Один из них нашел ее на залитых солнцем улицах Майами. Богатство, власть и страсть превзошли даже самые невероятные его мечты. Его звали Тони Монтана. Мир запомнил его под другим именем — Лицо со шрамом.",
+      "releaseDate": "1983",
+      "country": "США",
+      "tagline": "The World Is Yours",
+      "director": "Брайан Де Пальма",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/cv276Wg3e7I?si=sqZS0rQiCjpFjGmX",
+      "id": 8
+    },
+    {
+      "title": "Лучше звоните Солу",
+      "typeId": 2,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/BetterCallSaul.png",
+      "description": "История об испытаниях и невзгодах, которые приходится преодолеть Солу Гудману, адвокату по уголовным делам, в тот период, когда он пытается открыть свою собственную адвокатскую контору в Альбукерке, штат Нью-Мексико.",
+      "releaseDate": "2015",
+      "country": "США",
+      "tagline": "Make the call",
+      "director": " Винс Гиллиган, Питер Гулд",
+      "ageRatingId": 4,
+      "video": "https://www.youtube.com/embed/1u29aCWtW_Y?si=x7sqjMAMcbxeeaKb",
+      "id": 9
+    },
+    {
+      "title": "Во все тяжкие",
+      "typeId": 2,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/BreakingBad.png",
+      "description": "Школьный учитель химии Уолтер Уайт узнаёт, что болен раком лёгких. Учитывая сложное финансовое состояние дел семьи, а также перспективы, Уолтер решает заняться изготовлением метамфетамина. Для этого он привлекает своего бывшего ученика Джесси Пинкмана, когда-то исключённого из школы при активном содействии Уайта. Пинкман сам занимался варкой мета, но накануне, в ходе рейда УБН, он лишился подельника и лаборатории.",
+      "releaseDate": "2008",
+      "country": "США",
+      "tagline": "Запомните моё имя",
+      "director": " Винс Гиллиган",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/I4MCAOd-tmg?si=W65-59QB5PQKsljs",
+      "id": 10
+    },
+    {
+      "title": "Клан Сопрано",
+      "typeId": 2,
+      "requiresSubscription": false,
+      "poster": "src/assets/main-page/posters/Sopranos.png",
+      "description": "Мафиозный босс Северного Джерси Тони Сопрано эффективно решает проблемы «семьи». Но с собственной роднёй ситуация сложнее: дети от рук отбились, брак под угрозой, в отношениях с пожилой матерью сплошное недопонимание. После серии панических атак он решает тайно посещать психотерапевта.",
+      "releaseDate": "1999",
+      "country": "США",
+      "tagline": "Tony's not like other fathers. Tony is a mob boss",
+      "director": "Тимоти Ван Паттен, Джон Паттерсон",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/sxc61veiHmw?si=HPf4LJOvG4sEZaux",
+      "id": 11
+    },
+    {
+      "title": "123",
+      "typeId": 1,
+      "requiresSubscription": true,
+      "poster": "src/assets/main-page/posters/BladeRunner2049.jpg",
+      "description": "12313",
+      "releaseDate": "1231231",
+      "country": "США",
+      "tagline": "The streets are theirs",
+      "director": "Энтони Бирн, Колм МакКарти",
+      "ageRatingId": 5,
+      "video": "https://www.youtube.com/embed/zAGVQLHvwOY?si=ecHfyymUUE8A6u2I",
+      "id": 12
+    }
+  ],
+  "types": [
+    {
+      "id": 1,
+      "name": "Фильм"
+    },
+    {
+      "id": 2,
+      "name": "Сериал"
+    }
+  ],
+  "users": [
+    {
+      "id": 1,
+      "email": "myemail@mail.com",
+      "password": "12345678",
+      "expirationDate": "2025-01-12T20:22:19.846Z"
+    },
+    {
+      "id": 2,
+      "email": "another@mail.com",
+      "password": "qwerty",
+      "expirationDate": null
+    }
+  ],
+  "ageRatings": [
+    {
+      "id": 1,
+      "name": "0+"
+    },
+    {
+      "id": 2,
+      "name": "6+"
+    },
+    {
+      "id": 3,
+      "name": "12+"
+    },
+    {
+      "id": 4,
+      "name": "16+"
+    },
+    {
+      "id": 5,
+      "name": "18+"
+    }
+  ],
+  "pricingPlans": [
+    {
+      "id": 1,
+      "title": "Большой Шлёппа",
+      "subtitle": "Подписка на неделю",
+      "price": 49.99,
+      "description": "Попробуйте и решите, нравится ли вам наш сервис",
+      "isPrimary": false,
+      "period": {
+        "days": 7,
+        "months": 0,
+        "years": 0
+      }
+    },
+    {
+      "id": 2,
+      "title": "Базированный гигачад",
+      "subtitle": "Подписка на месяц",
+      "price": 149.99,
+      "description": "Для тех, кто очень любит смотреть фильмы и сериалы по вечерам",
+      "isPrimary": true,
+      "period": {
+        "days": 0,
+        "months": 1,
+        "years": 0
+      }
+    },
+    {
+      "id": 3,
+      "title": "Райан Гослинг",
+      "subtitle": "Подписка на год",
+      "price": 799.99,
+      "description": "Если вдруг захотите остаться с нами подольше",
+      "isPrimary": false,
+      "period": {
+        "days": 0,
+        "months": 0,
+        "years": 1
+      }
+    }
+  ]
+}

index.html

@@ -0,0 +1,14 @@
+<html lang="ru">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>СигмаТеатр</title>
+</head>
+
+<body>
+  <div id="root" class="h-100 d-flex flex-column"></div>
+  <script type="module" src="/src/main.jsx"></script>
+</body>
+
+</html>

jsconfig.json

@@ -0,0 +1,15 @@
+{
+    "compilerOptions": {
+        "module": "ESNext",
+        "moduleResolution": "Node",
+        "target": "ES2020",
+        "jsx": "react",
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "sourceMap": true
+    },
+    "exclude": [
+        "node_modules",
+        "**/node_modules/*"
+    ]
+}

json-server.json

@@ -0,0 +1,5 @@
+{
+    "static": "./node_modules/json-server/public",
+    "port": 8081,
+    "watch": "true"
+}

package.json

@@ -0,0 +1,38 @@
+{
+  "name": "lec4",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
+    "rest": "json-server data.json",
+    "vite": "vite",
+    "dev": "npm-run-all --parallel rest vite",
+    "prod": "npm-run-all lint 'vite build' --parallel rest 'vite preview'"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.18.0",
+    "react-hot-toast": "^2.4.1",
+    "axios": "^1.6.1",
+    "bootstrap": "^5.3.2",
+    "react-bootstrap": "^2.9.1",
+    "react-bootstrap-icons": "^1.10.3",
+    "prop-types": "^15.8.1"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.15",
+    "@types/react-dom": "^18.2.15",
+    "@vitejs/plugin-react": "^4.0.3",
+    "eslint": "^8.45.0",
+    "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-plugin-import": "^2.29.0",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.3",
+    "json-server": "^0.17.4",
+    "npm-run-all": "^4.1.5",
+    "vite": "^4.4.5"
+  }
+}

src/App.css

@@ -0,0 +1,9 @@
+body {
+    padding-top: 62px;
+}
+
+.image-preview {
+    border-radius: 16px;
+    max-width: 200px;
+    height: auto;
+}

src/App.jsx

@@ -0,0 +1,36 @@
+import PropTypes from 'prop-types';
+import { Container } from 'react-bootstrap';
+import { Toaster } from 'react-hot-toast';
+import { Outlet } from 'react-router-dom';
+import './App.css';
+import Footer from './components/footer/Footer.jsx';
+import Navigation from './components/navigation/Navigation.jsx';
+import { WishlistProvider } from './components/wishlist/WishlistContext.jsx';
+import { LoginProvider } from './components/login/LoginContext.jsx';
+import { SubscriptionProvider } from './components/subscription/SubscriptionContext.jsx';
+
+const App = ({ routes }) => {
+  return (
+    <LoginProvider>
+      <SubscriptionProvider>
+        <WishlistProvider>
+          <Navigation routes={ routes }></Navigation>
+
+          <Container as="main" fluid className="px-0">
+            <Outlet />
+          </Container>
+
+          <Footer routes={ routes } />
+
+          <Toaster position='top-center' reverseOrder={true} />
+        </WishlistProvider>
+      </SubscriptionProvider>
+    </LoginProvider>
+  );
+};
+
+App.propTypes = {
+  routes: PropTypes.array,
+};
+
+export default App;

src/components/ageRatings/hooks/AgeRatingsHook.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import AgeRatingsApiService from '../service/AgeRatingsApiService';
+
+const useAgeRatings = () => {
+    const [ageRatings, setAgeRatings] = useState([]);
+
+    const getAgeRatings = async () => {
+        const data = await AgeRatingsApiService.getAll();
+        setAgeRatings(data ?? []);
+    };
+
+    useEffect(() => {
+        getAgeRatings();
+    }, []);
+
+    return {
+        ageRatings,
+    };
+};
+
+export default useAgeRatings;

src/components/ageRatings/service/AgeRatingsApiService.js

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

src/components/api/ApiClient.js

@@ -0,0 +1,40 @@
+import axios from 'axios';
+import toast from 'react-hot-toast';
+
+export class HttpError extends Error {
+    constructor(message = '') {
+        super(message);
+        this.name = 'HttpError';
+        Object.setPrototypeOf(this, new.target.prototype);
+        toast.error(message, { id: 'HttpError' });
+    }
+}
+
+function responseHandler(response) {
+    if (response.status === 200 || response.status === 201) {
+        const data = response?.data;
+        if (!data) {
+            throw new HttpError('API Error. No data!');
+        }
+        return data;
+    }
+    throw new HttpError(`API Error! Invalid status code ${response.status}!`);
+}
+
+function responseErrorHandler(error) {
+    if (error === null) {
+        throw new Error('Unrecoverable error!! Error is null!');
+    }
+    toast.error(error.message, { id: 'AxiosError' });
+    return Promise.reject(error.message);
+}
+
+export const ApiClient = axios.create({
+    baseURL: 'http://localhost:8081/',
+    timeout: '3000',
+    headers: {
+        Accept: 'application/json',
+    },
+});
+
+ApiClient.interceptors.response.use(responseHandler, responseErrorHandler);

src/components/api/ApiService.js

@@ -0,0 +1,29 @@
+import { ApiClient } from './ApiClient';
+
+class ApiService {
+    constructor(url) {
+        this.url = url;
+    }
+
+    async getAll(expand) {
+        return ApiClient.get(`${this.url}${expand || ''}`);
+    }
+
+    async get(id, expand) {
+        return ApiClient.get(`${this.url}/${id}${expand || ''}`);
+    }
+
+    async create(body) {
+        return ApiClient.post(this.url, body);
+    }
+
+    async update(id, body) {
+        return ApiClient.put(`${this.url}/${id}`, body);
+    }
+
+    async delete(id) {
+        return ApiClient.delete(`${this.url}/${id}`);
+    }
+}
+
+export default ApiService;

src/components/authentification/hooks/UserLoginFormHook.js

@@ -0,0 +1,70 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import { useNavigate } from 'react-router-dom';
+import UsersApiService from '../service/UsersApiService';
+import useLogin from '../../login/LoginHook';
+
+const useUserLoginForm = () => {
+    const navigate = useNavigate();
+
+    const { loginAuthorize } = useLogin();
+
+    const [currentInput, setCurrentInput] = useState({});
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const handleChange = (event) => {
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+
+        setCurrentInput({
+            ...currentInput,
+            [inputName]: inputValue,
+        });
+    };
+
+    const checkCredentials = async () => {
+        let correspondingUser;
+
+        const allUsers = await UsersApiService.getAll();
+        allUsers.forEach((user) => {
+            if (user.email === currentInput.email && user.password === currentInput.password) {
+                correspondingUser = user;
+            }
+        });
+
+        if (!correspondingUser) {
+            toast.error('Введены неверные логин и пароль');
+            return;
+        }
+
+        loginAuthorize(correspondingUser);
+        navigate('/');
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (form.checkValidity()) {
+            await checkCredentials();
+            return true;
+        }
+
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useUserLoginForm;

src/components/authentification/modals/ForgotPasswordModal.jsx

@@ -0,0 +1,38 @@
+import PropTypes from 'prop-types';
+
+import {
+    Form, Button, Modal,
+} from 'react-bootstrap';
+
+const ForgotPasswordModal = ({ shouldShowModal, hideModal }) => {
+    return (
+        <Modal show={shouldShowModal} onHide={() => hideModal()}>
+            <Modal.Header closeButton>
+                <Modal.Title>Восстановление пароля</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body className="mb-3">
+                <p>В поле ниже напишите адрес электроннной почты, с которой была совершена
+                    регистрация. На этот адрес придёт письмо с дальнейшеми указаниями.</p>
+
+                <Form.Group>
+                    <Form.Label>Адрес электронной почты:</Form.Label>
+                    <Form.Control type="email" placeholder="myemail@mail.com" />
+                </Form.Group>
+            </Modal.Body>
+
+            <Modal.Footer>
+                <Button variant="primary" onClick={() => hideModal()}>
+                    Отправить
+                </Button>
+            </Modal.Footer>
+        </Modal>
+    );
+};
+
+ForgotPasswordModal.propTypes = {
+    shouldShowModal: PropTypes.bool,
+    hideModal: PropTypes.func,
+};
+
+export default ForgotPasswordModal;

src/components/authentification/service/UsersApiService.js

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

src/components/footer/Footer.css

@@ -0,0 +1,42 @@
+.flex-box {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+}
+
+.download-button {
+    margin-right: 1rem;
+}
+
+.footer-navigation-button {
+    margin-left: 1rem;
+    text-decoration: none;
+}
+
+@media (max-width: 1300px) {
+    .flex-box {
+        flex-direction: column;
+    }
+
+    #stores {
+        flex-direction: row;
+    }
+
+    #links {
+        padding-top: 20px;
+    }
+
+    .download-button {
+        margin-top: 1rem;
+    }
+
+    .footer-navigation-button {
+        margin-bottom: 0.75rem;
+    }
+}
+
+@media (max-width: 600px) {
+    #stores {
+        flex-direction: column;
+    }
+}

src/components/footer/Footer.jsx

@@ -0,0 +1,65 @@
+import { Container } from 'react-bootstrap';
+import { Link } from 'react-router-dom';
+import './Footer.css';
+import PropTypes from 'prop-types';
+
+import appGallery from '../../assets/footer/download-buttons/AppGallery.svg';
+import appStore from '../../assets/footer/download-buttons/AppStore.svg';
+import googlePlay from '../../assets/footer/download-buttons/GooglePlay.svg';
+
+const Footer = ({ routes }) => {
+    const year = new Date().getFullYear();
+
+    const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
+    const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
+    const pageAdminPanel = routes.find((page) => { return page.title === 'CRUD администрирование'; });
+
+    return (
+        <footer className="py-2 bg-dark text-light mt-auto">
+            <Container fluid="md" className="py-2">
+                <div className="d-flex flex-wrap justify-content-between align-items-center">
+                    <div>
+                        <div className="flex-box justify-content-start" id="stores">
+                            <a href="https://play.google.com/store/games?hl=ru&gl=US">
+                                <img src={ googlePlay } className="download-button" alt="" />
+                            </a>
+                            <a href="https://www.huawei.ru/appgallery/">
+                                <img src={ appGallery } className="download-button" alt="" />
+                            </a>
+                            <a href="https://www.apple.com/app-store/">
+                                <img src={ appStore } className="download-button" alt="" />
+                            </a>
+                        </div>
+
+                        <h6 className="text-secondary mt-3">&copy; { year } СигмаТеатр</h6>
+                    </div>
+
+                    <div className="flex-box" id="links">
+                        <Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Главная
+                        </Link>
+
+                        <Link to={ pageMain.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Политика конфиденциальности
+                        </Link>
+
+                        <Link to={ pageAboutUs.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            О нас
+                        </Link>
+
+                        <Link to={ pageAdminPanel.path ?? '/' } className="text-secondary text-decoration-none footer-navigation-button">
+                            Страница администратора
+                        </Link>
+                    </div>
+
+                </div>
+            </Container>
+        </footer>
+    );
+};
+
+Footer.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Footer;

src/components/input/Checkbox.jsx

@@ -0,0 +1,27 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Checkbox = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Check
+            name={ name || '' }
+            checked={ value }
+            className={ `mb-2 ${className || ''}` }
+            label={ label }
+            onChange={ onChange }
+            { ...rest }
+        />
+    );
+};
+
+Checkbox.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.bool,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Checkbox;

src/components/input/Input.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Input = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label>{label}</Form.Label>
+            <Form.Control name={name || ''} value={value || ''} onChange={onChange} {...rest} />
+        </Form.Group>
+    );
+};
+
+Input.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Input;

src/components/input/Select.jsx

@@ -0,0 +1,29 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Select = ({
+    values, name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label className='form-label'>{label}</Form.Label>
+            <Form.Select name={name || ''} value={value || ''} onChange={onChange} {...rest}>
+                <option value=''>Выберите значение</option>
+                {
+                    values.map((type) => <option key={type.id} value={type.id}>{type.name}</option>)
+                }
+            </Form.Select>
+        </Form.Group>
+    );
+};
+
+Select.propTypes = {
+    values: PropTypes.array,
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.number,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Select;

src/components/input/Textarea.jsx

@@ -0,0 +1,23 @@
+import PropTypes from 'prop-types';
+import { Form } from 'react-bootstrap';
+
+const Textarea = ({
+    name, label, value, onChange, className, ...rest
+}) => {
+    return (
+        <Form.Group className={`mb-2 ${className || ''}`} controlId={name}>
+            <Form.Label>{ label }</Form.Label>
+            <Form.Control as='textarea' rows={ 4 } name={ name || '' } value={ value || '' } onChange={ onChange } {...rest} />
+        </Form.Group>
+    );
+};
+
+Textarea.propTypes = {
+    name: PropTypes.string,
+    label: PropTypes.string,
+    value: PropTypes.string,
+    onChange: PropTypes.func,
+    className: PropTypes.string,
+};
+
+export default Textarea;

src/components/lines/form/LinesForm.jsx

@@ -0,0 +1,48 @@
+import PropTypes from 'prop-types';
+import { Button, Form } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import useLinesItemForm from '../hooks/LinesItemFormHook';
+import LinesItemForm from './LinesItemForm.jsx';
+
+const LinesForm = ({ id }) => {
+    const navigate = useNavigate();
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+    } = useLinesItemForm(id);
+
+    const onBack = () => {
+        navigate(-1);
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onBack();
+        }
+    };
+
+    return (
+        <>
+            <Form className='m-0 p-2' noValidate validated={validated} onSubmit={onSubmit}>
+                <LinesItemForm item={item} handleChange={handleChange} />
+                <Form.Group className='row justify-content-center m-0 mt-3'>
+                    <Button className='col-5 col-lg-2 m-0 me-2' variant='secondary' onClick={() => onBack()}>
+                        Назад
+                    </Button>
+                    <Button className='col-5 col-lg-2 m-0 ms-2' type='submit' variant='primary'>
+                        Сохранить
+                    </Button>
+                </Form.Group>
+            </Form>
+        </>
+    );
+};
+
+LinesForm.propTypes = {
+    id: PropTypes.string,
+};
+
+export default LinesForm;

src/components/lines/form/LinesItemForm.css

@@ -0,0 +1,5 @@
+#image-preview {
+    border-radius: 20px;
+    max-width: 200px;
+    height: auto;
+}

src/components/lines/form/LinesItemForm.jsx

@@ -0,0 +1,66 @@
+import PropTypes from 'prop-types';
+import imgPlaceholder from '../../../assets/200.png';
+import Input from '../../input/Input.jsx';
+import Select from '../../input/Select.jsx';
+import Checkbox from '../../input/Checkbox.jsx';
+import Textarea from '../../input/Textarea.jsx';
+import useTypes from '../../types/hooks/TypesHook';
+import './LinesItemForm.css';
+import useAgeRatings from '../../ageRatings/hooks/AgeRatingsHook';
+
+const LinesItemForm = ({ item, handleChange }) => {
+    const { types } = useTypes();
+    const { ageRatings } = useAgeRatings();
+
+    console.log(types);
+    console.log(ageRatings);
+
+    return (
+        <>
+            <div className='text-center'>
+                <img id='image-preview' className='rounded' alt='placeholder'
+                    src={item.poster || imgPlaceholder} />
+            </div>
+
+            <Input name='title' label='Название' value={item.title} onChange={handleChange}
+                type='text' required />
+
+            <Select values={types} name='typeId' label='Тип' value={item.typeId} onChange={handleChange}
+                required />
+
+            <Checkbox name='requiresSubscription' label='Требуется подписка'
+                value={item.requiresSubscription} onChange={handleChange} />
+
+            <Input name='poster' label='Постер' onChange={handleChange}
+                type='file' accept='image/*' />
+
+            <Textarea name='description' label='Описание' value={item.description} onChange={handleChange}
+                required />
+
+            <Input name='releaseDate' label='Год производства' value={item.releaseDate} onChange={handleChange}
+                type='number' min='1900' step='1' required />
+
+            <Input name='country' label='Страна' value={item.country} onChange={handleChange}
+                type='text' required />
+
+            <Input name='tagline' label='Слоган' value={item.tagline} onChange={handleChange}
+                type='text' required />
+
+            <Input name='director' label='Режиссер' value={item.director} onChange={handleChange}
+                type='text' required />
+
+            <Select values={ageRatings} name='ageRatingId' label='Возрастное ограничение' value={item.ageRatingId} onChange={handleChange}
+                required />
+
+            <Input name='video' label='URL видео' value={item.video} onChange={handleChange}
+                type='text' required />
+        </>
+    );
+};
+
+LinesItemForm.propTypes = {
+    item: PropTypes.object,
+    handleChange: PropTypes.func,
+};
+
+export default LinesItemForm;

src/components/lines/hooks/LinesDeleteModalHook.js

@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import useModal from '../../modal/ModalHook';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesDeleteModal = (linesChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const showModalDialog = (id) => {
+        showModal();
+        setCurrentId(id);
+    };
+
+    const onClose = () => {
+        hideModal();
+    };
+
+    const onDelete = async () => {
+        await LinesApiService.delete(currentId);
+        linesChangeHandle();
+        toast.success('Элемент успешно удален', { id: 'LinesTable' });
+        onClose();
+    };
+
+    return {
+        isDeleteModalShow: isModalShow,
+        showDeleteModal: showModalDialog,
+        handleDeleteConfirm: onDelete,
+        handleDeleteCancel: onClose,
+    };
+};
+
+export default useLinesDeleteModal;

src/components/lines/hooks/LinesFilterHook.js

@@ -0,0 +1,28 @@
+import { useSearchParams } from 'react-router-dom';
+import useTypes from '../../types/hooks/TypesHook';
+
+const useTypeFilter = () => {
+    const filterName = 'type';
+
+    const [searchParams, setSearchParams] = useSearchParams();
+
+    const { types } = useTypes();
+
+    const handleFilterChange = (event) => {
+        const type = event.target.value;
+        if (type) {
+            searchParams.set(filterName, event.target.value);
+        } else {
+            searchParams.delete(filterName);
+        }
+        setSearchParams(searchParams);
+    };
+
+    return {
+        types,
+        currentFilter: searchParams.get(filterName) || '',
+        handleFilterChange,
+    };
+};
+
+export default useTypeFilter;

src/components/lines/hooks/LinesFormModalHook.js

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import useModal from '../../modal/ModalHook';
+import useLinesItemForm from './LinesItemFormHook';
+
+const useLinesFormModal = (linesChangeHandle) => {
+    const { isModalShow, showModal, hideModal } = useModal();
+    const [currentId, setCurrentId] = useState(0);
+
+    const {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    } = useLinesItemForm(currentId, linesChangeHandle);
+
+    const showModalDialog = (id) => {
+        setCurrentId(id);
+        resetValidity();
+        showModal();
+    };
+
+    const onClose = () => {
+        setCurrentId(-1);
+        hideModal();
+    };
+
+    const onSubmit = async (event) => {
+        if (await handleSubmit(event)) {
+            onClose();
+        }
+    };
+
+    return {
+        isFormModalShow: isModalShow,
+        isFormValidated: validated,
+        showFormModal: showModalDialog,
+        currentItem: item,
+        handleItemChange: handleChange,
+        handleFormSubmit: onSubmit,
+        handleFormClose: onClose,
+    };
+};
+
+export default useLinesFormModal;

src/components/lines/hooks/LinesHook.js

@@ -0,0 +1,30 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLines = (typeFilter) => {
+    const [linesRefresh, setLinesRefresh] = useState(false);
+    const [lines, setLines] = useState([]);
+    const handleLinesChange = () => setLinesRefresh(!linesRefresh);
+
+    const getLines = async () => {
+        let expand = '?_expand=type&_expand=ageRating';
+        if (typeFilter) {
+            expand = `${expand}&typeId=${typeFilter}`;
+        }
+
+        const data = await LinesApiService.getAll(expand);
+        setLines(data ?? []);
+    };
+
+    useEffect(() => {
+        getLines();
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [linesRefresh, typeFilter]);
+
+    return {
+        lines,
+        handleLinesChange,
+    };
+};
+
+export default useLines;

src/components/lines/hooks/LinesItemFormHook.js

@@ -0,0 +1,94 @@
+import { useState } from 'react';
+import toast from 'react-hot-toast';
+import getBase64FromFile from '../../utils/Base64';
+import LinesApiService from '../service/LinesApiService';
+import useLinesItem from './LinesItemHook';
+
+const useLinesItemForm = (id, linesChangeHandle) => {
+    const { item, setItem } = useLinesItem(id);
+
+    const [validated, setValidated] = useState(false);
+
+    const resetValidity = () => {
+        setValidated(false);
+    };
+
+    const getLineObject = (formData) => {
+        const typeId = parseInt(formData.typeId, 10);
+        const ageRatingId = parseInt(formData.ageRatingId, 10);
+        const requiresSubscription = formData.requiresSubscription === true;
+        const poster = formData.poster.startsWith('data:image') ? formData.poster : '';
+
+        return {
+            title: formData.title,
+            typeId,
+            requiresSubscription,
+            poster,
+            description: formData.description,
+            releaseDate: formData.releaseDate.toString(),
+            country: formData.country,
+            tagline: formData.tagline,
+            director: formData.director,
+            ageRatingId,
+            video: formData.video,
+        };
+    };
+
+    const handleImageChange = async (event) => {
+        const { files } = event.target;
+        const file = await getBase64FromFile(files.item(0));
+        setItem({
+            ...item,
+            poster: file,
+        });
+    };
+
+    const handleChange = (event) => {
+        if (event.target.type === 'file') {
+            handleImageChange(event);
+            return;
+        }
+
+        const inputName = event.target.name;
+        const inputValue = event.target.type === 'checkbox' ? event.target.checked : event.target.value;
+
+        setItem({
+            ...item,
+            [inputName]: inputValue,
+        });
+    };
+
+    const handleSubmit = async (event) => {
+        const form = event.currentTarget;
+        event.preventDefault();
+        event.stopPropagation();
+
+        const body = getLineObject(item);
+
+        if (form.checkValidity()) {
+            if (id === undefined) {
+                await LinesApiService.create(body);
+            } else {
+                await LinesApiService.update(id, body);
+            }
+
+            if (linesChangeHandle) linesChangeHandle();
+            toast.success('Элемент успешно сохранен', { id: 'LinesTable' });
+
+            return true;
+        }
+
+        setValidated(true);
+        return false;
+    };
+
+    return {
+        item,
+        validated,
+        handleSubmit,
+        handleChange,
+        resetValidity,
+    };
+};
+
+export default useLinesItemForm;

src/components/lines/hooks/LinesItemHook.js

@@ -0,0 +1,42 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../service/LinesApiService';
+
+const useLinesItem = (id) => {
+    const emptyItem = {
+        id: '',
+        title: '',
+        typeId: 0,
+        requiresSubscription: false,
+        poster: '',
+        description: '',
+        releaseDate: '',
+        country: '',
+        tagline: '',
+        director: '',
+        ageRatingId: 0,
+        video: '',
+    };
+
+    const [item, setItem] = useState({ ...emptyItem });
+
+    const getItem = async (itemId = undefined) => {
+        if (itemId && itemId > 0) {
+            const data = await LinesApiService.get(itemId);
+            setItem(data);
+        } else {
+            setItem({ ...emptyItem });
+        }
+    };
+
+    useEffect(() => {
+        getItem(id);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [id]);
+
+    return {
+        item,
+        setItem,
+    };
+};
+
+export default useLinesItem;

src/components/lines/service/LinesApiService.js

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

src/components/lines/table/Lines.jsx

@@ -0,0 +1,72 @@
+import { Button } from 'react-bootstrap';
+import Select from '../../input/Select.jsx';
+import ModalConfirm from '../../modal/ModalConfirm.jsx';
+import ModalForm from '../../modal/ModalForm.jsx';
+import LinesItemForm from '../form/LinesItemForm.jsx';
+import useLinesDeleteModal from '../hooks/LinesDeleteModalHook';
+import useTypeFilter from '../hooks/LinesFilterHook';
+import useLinesFormModal from '../hooks/LinesFormModalHook';
+import useLines from '../hooks/LinesHook';
+import LinesTable from './LinesTable.jsx';
+import LinesTableRow from './LinesTableRow.jsx';
+
+const Lines = () => {
+    const { types, currentFilter, handleFilterChange } = useTypeFilter();
+
+    const { lines: movies, handleLinesChange } = useLines(currentFilter);
+
+    const {
+        isDeleteModalShow,
+        showDeleteModal,
+        handleDeleteConfirm,
+        handleDeleteCancel,
+    } = useLinesDeleteModal(handleLinesChange);
+
+    const {
+        isFormModalShow,
+        isFormValidated,
+        showFormModal,
+        currentItem,
+        handleItemChange,
+        handleFormSubmit,
+        handleFormClose,
+    } = useLinesFormModal(handleLinesChange);
+
+    return (
+        <>
+            <Button className='mb-4' onClick={() => showFormModal()}>
+                Добавить запись
+            </Button>
+
+            <Select className='mt-2' values={types} label='Фильтр по типу'
+                value={ parseInt(currentFilter, 10) } onChange={handleFilterChange} />
+
+            <LinesTable>
+                {
+                    movies.map((movie, index) =>
+                        <LinesTableRow
+                            key={ movie.id }
+                            index={ index }
+                            line={ movie }
+                            onDelete={ () => showDeleteModal(movie.id) }
+                            onEdit={ () => showFormModal(movie.id) }
+                        />)
+                }
+            </LinesTable>
+
+            <ModalConfirm show={isDeleteModalShow}
+                onConfirm={handleDeleteConfirm} onClose={handleDeleteCancel}
+                title='Удаление' message='Удалить элемент?' />
+
+            <ModalForm show={isFormModalShow} validated={isFormValidated}
+                onSubmit={handleFormSubmit} onClose={handleFormClose}
+                title='Редактирование'>
+
+                <LinesItemForm item={currentItem} handleChange={handleItemChange} />
+
+            </ModalForm>
+        </>
+    );
+};
+
+export default Lines;

src/components/lines/table/LinesTable.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import { Table } from 'react-bootstrap';
+
+const LinesTable = ({ children }) => {
+    return (
+        <Table striped responsive>
+            <thead>
+                <tr>
+                    <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>
+                </tr>
+            </thead>
+
+            <tbody>
+                {children}
+            </tbody >
+        </Table >
+    );
+};
+
+LinesTable.propTypes = {
+    children: PropTypes.node,
+};
+
+export default LinesTable;

src/components/lines/table/LinesTableRow.jsx

@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import { PencilFill, TrashFill } from 'react-bootstrap-icons';
+
+const LinesTableRow = ({
+    index, line, onDelete, onEdit,
+}) => {
+    const handleAnchorClick = (event, action) => {
+        event.preventDefault();
+        action();
+    };
+
+    return (
+        <tr>
+            <th scope="row">{index + 1}</th>
+            <td>{ line.title }</td>
+            <td>{ line.type.name }</td>
+            <td>{ line.requiresSubscription ? '+' : '-' }</td>
+            <td>{ line.releaseDate }</td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onEdit)}><PencilFill /></a></td>
+            <td><a href="#" onClick={(event) => handleAnchorClick(event, onDelete)}><TrashFill /></a></td>
+        </tr>
+    );
+};
+
+LinesTableRow.propTypes = {
+    index: PropTypes.number,
+    line: PropTypes.object,
+    onDelete: PropTypes.func,
+    onEdit: PropTypes.func,
+    onEditInPage: PropTypes.func,
+};
+
+export default LinesTableRow;

src/components/login/LoginContext.jsx

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { createContext, useEffect, useReducer } from 'react';
+import { loadLoginData, loginReducer, saveLoginData } from './LoginReducer';
+
+const LoginContext = createContext(null);
+
+export const LoginProvider = ({ children }) => {
+    const [loginData, dispatch] = useReducer(loginReducer, null, loadLoginData);
+
+    useEffect(() => {
+        saveLoginData(loginData || null);
+    }, [loginData]);
+
+    return (
+        <LoginContext.Provider value={{ loginData, dispatch }}>
+            { children }
+        </LoginContext.Provider>
+    );
+};
+
+LoginProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default LoginContext;

src/components/login/LoginHook.js

@@ -0,0 +1,26 @@
+import { useContext } from 'react';
+import LoginContext from './LoginContext.jsx';
+import { loginAuthorize, loginLogout, loginUpdate } from './LoginReducer';
+import UsersApiService from '../authentification/service/UsersApiService';
+
+const useLogin = () => {
+    const { loginData, dispatch } = useContext(LoginContext);
+
+    const updateServerData = async (updatedLoginData) => {
+        if (!loginData) {
+            return;
+        }
+
+        await UsersApiService.update(loginData.id, updatedLoginData);
+        dispatch(loginUpdate(updatedLoginData));
+    };
+
+    return {
+        loginData,
+        loginAuthorize: (login) => dispatch(loginAuthorize(login)),
+        loginLogout: () => dispatch(loginLogout()),
+        updateServerData,
+    };
+};
+
+export default useLogin;

src/components/login/LoginReducer.js

@@ -0,0 +1,46 @@
+const LOGIN_KEY = 'localLogin';
+const LOGIN_AUTHORIZE = 'login/authorize';
+const LOGIN_LOGOUT = 'login/logout';
+const LOGIN_UPDATE = 'login/update';
+
+export const saveLoginData = (login) => {
+    localStorage.setItem(LOGIN_KEY, JSON.stringify(login));
+};
+
+export const loadLoginData = () => {
+    const loginData = localStorage.getItem(LOGIN_KEY);
+    if (loginData) {
+        return JSON.parse(loginData);
+    }
+
+    return null;
+};
+
+export const loginReducer = (state, action) => {
+    switch (action.type) {
+        case LOGIN_AUTHORIZE: {
+            return action.userData;
+        }
+        case LOGIN_UPDATE: {
+            return action.userData;
+        }
+        case LOGIN_LOGOUT: {
+            return null;
+        }
+        default: {
+            throw Error(`Unknown action: ${action.type}`);
+        }
+    }
+};
+
+export const loginAuthorize = (userData) => ({
+    type: LOGIN_AUTHORIZE, userData,
+});
+
+export const loginUpdate = (userData) => ({
+    type: LOGIN_AUTHORIZE, userData,
+});
+
+export const loginLogout = () => ({
+    type: LOGIN_LOGOUT,
+});

src/components/modal/ModalConfirm.jsx

@@ -0,0 +1,41 @@
+import PropTypes from 'prop-types';
+import { Button, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+
+const ModalConfirm = ({
+    show, title, message, onConfirm, onClose,
+}) => {
+    return createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+
+            <Modal.Body>
+                {message}
+            </Modal.Body>
+
+            <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                <Button variant='secondary' className='col-5 m-0 me-2'
+                    onClick={() => onClose()}>
+                    Нет
+                </Button>
+                <Button variant='primary' className='col-5 m-0 ms-2'
+                    onClick={() => onConfirm()}>
+                    Да
+                </Button>
+            </Modal.Footer>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalConfirm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    message: PropTypes.string,
+    onConfirm: PropTypes.func,
+    onClose: PropTypes.func,
+};
+
+export default ModalConfirm;

src/components/modal/ModalForm.css

@@ -0,0 +1,8 @@
+.modal-dialog {
+    overflow-y: initial !important
+}
+
+.form-modal-body {
+    height: 80vh;
+    overflow-y: auto;
+}

src/components/modal/ModalForm.jsx

@@ -0,0 +1,43 @@
+import PropTypes from 'prop-types';
+import { Button, Form, Modal } from 'react-bootstrap';
+import { createPortal } from 'react-dom';
+import './ModalForm.css';
+
+const ModalForm = ({
+    show, title, validated, onSubmit, onClose, children,
+}) => {
+    return createPortal(
+        <Modal show={show} backdrop='static' onHide={() => onClose()}>
+            <Modal.Header className='pt-2 pb-2 ps-3 pe-3' closeButton>
+                <Modal.Title>{title}</Modal.Title>
+            </Modal.Header>
+            <Form className='m-0' noValidate validated={validated} onSubmit={onSubmit}>
+                <Modal.Body className='form-modal-body'>
+                    {children}
+                </Modal.Body>
+
+                <Modal.Footer className='m-0 pt-2 pb-2 ps-3 pe-3 row justify-content-center'>
+                    <Button variant='secondary' className='col-5 m-0 me-2'
+                        onClick={() => onClose()}>
+                        Отмена
+                    </Button>
+                    <Button variant='primary' className='col-5 m-0 ms-2' type='submit'>
+                        Сохранить
+                    </Button>
+                </Modal.Footer>
+            </Form>
+        </Modal>,
+        document.body,
+    );
+};
+
+ModalForm.propTypes = {
+    show: PropTypes.bool,
+    title: PropTypes.string,
+    validated: PropTypes.bool,
+    onSubmit: PropTypes.func,
+    onClose: PropTypes.func,
+    children: PropTypes.node,
+};
+
+export default ModalForm;

src/components/modal/ModalHook.js

@@ -0,0 +1,21 @@
+import { useState } from 'react';
+
+const useModal = () => {
+    const [showModal, setShowModal] = useState(false);
+
+    const showModalDialog = () => {
+        setShowModal(true);
+    };
+
+    const hideModalDialog = () => {
+        setShowModal(false);
+    };
+
+    return {
+        isModalShow: showModal,
+        showModal: showModalDialog,
+        hideModal: hideModalDialog,
+    };
+};
+
+export default useModal;

src/components/movies/MovieBookmark.jsx

@@ -0,0 +1,24 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const MovieBookmark = ({
+    movieData, deleteCallback,
+}) => {
+    return (
+        <Col xs={ 6 } sm={ 4 } lg={ 3 }>
+            <a href={ `/videoplayer/${movieData.id}` } className="text-decoration-none">
+                <img src={ movieData.poster } className="img-fluid film-poster" alt="" />
+                <h5 className="text-black mt-3">{ movieData.title }</h5>
+                <h6 className="text-secondary">{ movieData.requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
+            </a>
+            <button className="btn btn-outline-info" onClick={ () => deleteCallback(movieData) }>Удалить</button>
+        </Col>
+    );
+};
+
+MovieBookmark.propTypes = {
+    movieData: PropTypes.object,
+    deleteCallback: PropTypes.func,
+};
+
+export default MovieBookmark;

src/components/movies/MovieDataHook.js

@@ -0,0 +1,15 @@
+import { useEffect, useState } from 'react';
+import LinesApiService from '../lines/service/LinesApiService';
+
+const useMovieData = (movieId) => {
+    const [movieData, setMovieData] = useState({ ageRating: {} });
+
+    useEffect(() => {
+        LinesApiService.get(movieId, '?_expand=ageRating')
+            .then((data) => setMovieData(data));
+    });
+
+    return { movieData };
+};
+
+export default useMovieData;

src/components/movies/MovieItem.css

@@ -0,0 +1,3 @@
+.film-poster {
+    border-radius: 20px;
+}

src/components/movies/MovieItem.jsx

@@ -0,0 +1,28 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+import './MovieItem.css';
+
+const MovieItem = ({
+    id, imageSrc, title, requiresSubscription, handleClick,
+}) => {
+    return (
+        <Col xs={ 6 } sm={ 4 } lg={ 3 }>
+            <a href='#' className="text-decoration-none" onClick={ (e) => handleClick(e, id) }>
+                <img src={ imageSrc } className="img-fluid film-poster" alt="" />
+                <h5 className="text-black mt-3">{ title }</h5>
+                <h6 className="text-secondary">{ requiresSubscription ? 'По подписке' : 'Бесплатно' }</h6>
+            </a>
+        </Col>
+    );
+};
+
+MovieItem.propTypes = {
+    id: PropTypes.number,
+    imageSrc: PropTypes.string,
+    title: PropTypes.string,
+    requiresSubscription: PropTypes.bool,
+    handleClick: PropTypes.func,
+};
+
+export default MovieItem;

src/components/navigation/Navigation.css

@@ -0,0 +1,8 @@
+.my-nav-link {
+    align-items: center;
+    display: flex;
+}
+
+.fixed-height {
+    height: 62px;
+}

src/components/navigation/Navigation.jsx

@@ -0,0 +1,104 @@
+import {
+    Container, Nav, Navbar, Button,
+} from 'react-bootstrap';
+
+import PropTypes from 'prop-types';
+import { Film } from 'react-bootstrap-icons';
+import { Link, useLocation } from 'react-router-dom';
+import { useContext, useEffect, useState } from 'react';
+
+import './Navigation.css';
+import useLogin from '../login/LoginHook';
+import SubscriptionContext from '../subscription/SubscriptionContext.jsx';
+
+const Navigation = ({ routes }) => {
+    const location = useLocation();
+    const indexPageLink = routes.filter((route) => route.index === false).shift();
+
+    const pageMain = routes.find((page) => { return page.title === 'СигмаТеатр'; });
+    const pageAboutUs = routes.find((page) => { return page.title === 'О нас'; });
+    const pageLogin = routes.find((page) => { return page.title === 'Вход в аккаунт'; });
+    const pageProfile = routes.find((page) => { return page.title === 'Профиль'; });
+    const pagePricing = routes.find((page) => { return page.title === 'Подписка'; });
+
+    const { loginData } = useLogin();
+    let ProfileButton = (
+        <>
+            Ожидание...
+        </>
+    );
+
+    const [subscriptionActive2, setSubscriptionActive2] = useState(false);
+
+    useEffect(() => {
+        if (loginData === null) {
+            setSubscriptionActive2(false);
+            return;
+        }
+
+        if (loginData.expirationDate === null) {
+            setSubscriptionActive2(false);
+            return;
+        }
+
+        setSubscriptionActive2(true);
+    }, [loginData]);
+
+    if (loginData === null) {
+        ProfileButton = (
+            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageLogin.path } eventKey={ pageLogin.path } to={ pageLogin.path ?? '/' }>
+                Вход в аккаунт
+            </Nav.Link>
+        );
+    } else {
+        ProfileButton = (
+            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageProfile.path } eventKey={ pageProfile.path } to={ pageProfile.path ?? '/' }>
+                Профиль
+            </Nav.Link>
+        );
+    }
+
+    const { subscriptionActive } = useContext(SubscriptionContext);
+
+    return (
+        <header>
+            <Navbar fixed='top' expand='lg' bg='dark' data-bs-theme='dark' className='py-1 fixed-height'>
+                <Container fluid='md'>
+                    <Navbar.Brand as={ Link } to={indexPageLink?.path ?? '/'} className='align-items-center'>
+                        <Film className='d-inline-block align-middle pb-1' width="25" height="25"/>
+                        <span className="fw-bold text-uppercase ms-2">СигмаТеатр</span>
+                    </Navbar.Brand>
+                    <Navbar.Toggle aria-controls='main-navbar' />
+                    <Navbar.Collapse id='main-navbar' className='justify-content-end align-items-center'>
+                        <Nav className='link' activeKey={ location.pathname }>
+
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageMain.path } eventKey={ pageMain.path } to={ pageMain.path ?? '/' }>
+                                <span>Фильмы и сериалы</span>
+                            </Nav.Link>
+                            <Nav.Link className='me-3 my-nav-link' as={ Link } key={ pageAboutUs.path } eventKey={ pageAboutUs.path } to={ pageAboutUs.path ?? '/' }>
+                                Справка
+                            </Nav.Link>
+                            { ProfileButton }
+                            { !subscriptionActive2
+                                && <Nav.Link className='d-lg-none' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
+                                    Купить подписку
+                                </Nav.Link>
+                            }
+                            { !subscriptionActive2
+                                && <Nav.Link className='d-none d-lg-inline' as={ Link } eventKey={ pagePricing.path } to={ pagePricing.path ?? '/' }>
+                                    <Button variant='light'>Купить подписку</Button>
+                                </Nav.Link>
+                            }
+                        </Nav>
+                    </Navbar.Collapse>
+                </Container>
+            </Navbar >
+        </header>
+    );
+};
+
+Navigation.propTypes = {
+    routes: PropTypes.array,
+};
+
+export default Navigation;

src/components/pricing/PricingPlan.jsx

@@ -0,0 +1,41 @@
+import { Col, Card } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const PricingPlan = ({ pricingPlanData, onBuySubscription }) => {
+    const borderStyling = pricingPlanData.isPrimary ? 'border-primary border-3 pb-3' : 'border-1';
+
+    return (
+        <Col xs={pricingPlanData.isPrimary ? 9 : 8} lg={4} xl={pricingPlanData.isPrimary ? 4 : 3}>
+            <Card className={ borderStyling }>
+                { pricingPlanData.isPrimary && <Card.Header className="text-center text-primary">Самый популярный</Card.Header> }
+
+                <Card.Body className={ `text-center ${pricingPlanData.isPrimary ? 'py-5' : 'py-4'}` }>
+                    <h4 className="card-title">{ pricingPlanData.title }</h4>
+                    <p className="lead card-subtitle">{ pricingPlanData.subtitle }</p>
+                    <p className={ `${pricingPlanData.isPrimary ? 'display-4' : 'display-5'} my-4 text-primary fw-bold` }>{ pricingPlanData.price } &#8381;</p>
+                    <p className="card-text mx-5 text-muted d-none d-lg-block">{ pricingPlanData.description }</p>
+                    <a
+                        href="#"
+                        className={ `btn btn-outline-primary btn-lg ${pricingPlanData.isPrimary ? 'mt-4' : 'mt-3'}`}
+                        onClick={ (e) => {
+                            e.preventDefault();
+                            e.stopPropagation();
+
+                            onBuySubscription(pricingPlanData.period);
+                        }}
+                    >
+                        Купить
+                    </a>
+                </Card.Body>
+
+            </Card>
+        </Col>
+    );
+};
+
+PricingPlan.propTypes = {
+    pricingPlanData: PropTypes.object,
+    onBuySubscription: PropTypes.func,
+};
+
+export default PricingPlan;

src/components/pricing/Priveledge.jsx

@@ -0,0 +1,24 @@
+import { Col } from 'react-bootstrap';
+import PropTypes from 'prop-types';
+
+const Priveledge = ({ icon, title, description }) => {
+    return (
+        <Col lg={ 6 }>
+            <div className="d-flex flex-row align-items-center">
+                <img src={ icon } width="50px" height="100%" alt="" />
+                <div className="ms-3">
+                    <p className="lead">{ title }</p>
+                    <p>{ description }</p>
+                </div>
+            </div>
+        </Col>
+    );
+};
+
+Priveledge.propTypes = {
+    icon: PropTypes.string,
+    title: PropTypes.string,
+    description: PropTypes.string,
+};
+
+export default Priveledge;

src/components/pricing/hooks/PricingPlansHook.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import PricingApiService from '../service/PricingApiService';
+
+const usePricingPlans = () => {
+    const [pricingPlans, setPricingPlans] = useState([]);
+    const [isPending, setIsPending] = useState(true);
+
+    const getPricing = async () => {
+        const data = await PricingApiService.getAll();
+        setPricingPlans(data ?? []);
+
+        setIsPending(false);
+    };
+
+    useEffect(() => {
+        getPricing();
+    }, []);
+
+    return {
+        pricingPlans,
+        isPending,
+    };
+};
+
+export default usePricingPlans;

src/components/pricing/service/PricingApiService.js

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

src/components/subscription/SubscriptionContext.jsx

@@ -0,0 +1,20 @@
+import PropTypes from 'prop-types';
+import { createContext, useState } from 'react';
+
+const SubscriptionContext = createContext(false);
+
+export const SubscriptionProvider = ({ children }) => {
+    const [subscriptionActive, setSubscriptionActive] = useState(false);
+
+    return (
+        <SubscriptionContext.Provider value={{ subscriptionActive, setSubscriptionActive }}>
+            { children }
+        </SubscriptionContext.Provider>
+    );
+};
+
+SubscriptionProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default SubscriptionContext;

src/components/subscription/SubscriptionHook.js

@@ -0,0 +1,70 @@
+import { useContext, useEffect } from 'react';
+import SubscriptionContext from './SubscriptionContext.jsx';
+import useLogin from '../login/LoginHook';
+
+const useSubscription = () => {
+    const { subscriptionActive, setSubscriptionActive } = useContext(SubscriptionContext);
+    const { loginData, updateServerData } = useLogin();
+
+    useEffect(() => {
+        if (loginData === null) {
+            setSubscriptionActive(false);
+            return;
+        }
+        if (loginData.expirationDate === null) {
+            setSubscriptionActive(false);
+            return;
+        }
+
+        const currentDate = new Date().getTime();
+        const expirationDate = Date.parse(loginData.expirationDate);
+
+        setSubscriptionActive(currentDate <= expirationDate);
+        console.log(`subscriptionActive set to ${currentDate <= expirationDate}`);
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loginData]);
+
+    const getExpirationDateFormatted = () => {
+        if (!loginData) {
+            return '';
+        }
+
+        if (loginData.expirationDate === null) {
+            return 'идёт отмена...';
+        }
+
+        const timestamp = Date.parse(loginData.expirationDate);
+        const expirationDate = new Date(timestamp);
+
+        return expirationDate.toLocaleString('ru-RU').split(', ')[0];
+    };
+
+    const activateSubscription = (expirationDate) => {
+        updateServerData({
+            ...loginData,
+            expirationDate: expirationDate.toISOString(),
+        });
+        console.log('server data updated');
+    };
+
+    const cancelSubscription = () => {
+        if (!loginData) {
+            return;
+        }
+
+        updateServerData({
+            ...loginData,
+            expirationDate: null,
+        });
+    };
+
+    return {
+        subscriptionActive,
+        getExpirationDateFormatted,
+        activateSubscription,
+        cancelSubscription,
+    };
+};
+
+export default useSubscription;

src/components/types/hooks/TypesHook.js

@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+import TypesApiService from '../service/TypesApiService';
+
+const useTypes = () => {
+    const [types, setTypes] = useState([]);
+
+    const getTypes = async () => {
+        const data = await TypesApiService.getAll();
+        setTypes(data ?? []);
+    };
+
+    useEffect(() => {
+        getTypes();
+    }, []);
+
+    return {
+        types,
+    };
+};
+
+export default useTypes;

src/components/types/service/TypesApiService.js

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

src/components/utils/Base64.js

@@ -0,0 +1,15 @@
+const getBase64FromFile = async (file) => {
+    const reader = new FileReader();
+    return new Promise((resolve, reject) => {
+        reader.onloadend = () => {
+            const fileContent = reader.result;
+            resolve(fileContent);
+        };
+        reader.onerror = () => {
+            reject(new Error('Oops, something went wrong with the file reader.'));
+        };
+        reader.readAsDataURL(file);
+    });
+};
+
+export default getBase64FromFile;

src/components/wishlist/Wishlist.jsx

@@ -0,0 +1,42 @@
+import { Container, Row, Button } from 'react-bootstrap';
+import useWishlist from './WishlistHook';
+import MovieBookmark from '../movies/MovieBookmark.jsx';
+
+const Wishlist = () => {
+    const {
+        wishlist,
+        removeFromWishlist,
+        clearWishlist,
+    } = useWishlist();
+
+    return (
+        <Container fluid="md" className="py-4 mb-4">
+
+            <div className="text-center">
+                <h2>Избранное</h2>
+                <p className="lead text-muted">Фильмы и сериары, отмеченные как `посмотреть позже`</p>
+            </div>
+
+            <Row className="gx-5 gy-5 my-3">
+                {
+                    wishlist.map((wishlistItem) =>
+                        <MovieBookmark
+                            key={ wishlistItem.id }
+                            movieData={ wishlistItem }
+                            deleteCallback={ removeFromWishlist }
+                        />)
+                }
+            </Row>
+
+            { wishlist.length !== 0
+                ? <Button className='mb-4' onClick={() => clearWishlist()}>
+                        Очистить список избранного
+                    </Button>
+                : <p className="display-5 my-5">Список желаемого пуст</p>
+            }
+
+        </Container>
+    );
+};
+
+export default Wishlist;

src/components/wishlist/WishlistContext.jsx

@@ -0,0 +1,30 @@
+import PropTypes from 'prop-types';
+import {
+    createContext,
+    useEffect,
+    useReducer,
+} from 'react';
+
+import { wishlistReducer, loadWishlist, saveWishlist } from './WishlistReducer';
+
+const WishlistContext = createContext(null);
+
+export const WishlistProvider = ({ children }) => {
+    const [wishlist, dispatch] = useReducer(wishlistReducer, [], loadWishlist);
+
+    useEffect(() => {
+        saveWishlist(wishlist || []);
+    }, [wishlist]);
+
+    return (
+        <WishlistContext.Provider value={{ wishlist, dispatch }}>
+            {children}
+        </WishlistContext.Provider>
+    );
+};
+
+WishlistProvider.propTypes = {
+    children: PropTypes.node,
+};
+
+export default WishlistContext;

src/components/wishlist/WishlistHook.js

@@ -0,0 +1,16 @@
+import { useContext } from 'react';
+import { wishlistAdd, wishlistClear, wishlistRemove } from './WishlistReducer';
+import WishlistContext from './WishlistContext.jsx';
+
+const useWishlist = () => {
+    const { wishlist, dispatch } = useContext(WishlistContext);
+
+    return {
+        wishlist,
+        addToWishlist: (item) => dispatch(wishlistAdd(item)),
+        removeFromWishlist: (item) => dispatch(wishlistRemove(item)),
+        clearWishlist: () => dispatch(wishlistClear()),
+    };
+};
+
+export default useWishlist;

src/components/wishlist/WishlistReducer.js

@@ -0,0 +1,60 @@
+const addToWishlist = (wishlist, movie) => {
+    const existsMovie = wishlist.find((wishlistItem) => wishlistItem.id === movie.id);
+    if (existsMovie !== undefined) {
+        return wishlist;
+    }
+
+    return [...wishlist, movie];
+};
+
+const removeFromWishlist = (wishlist, movie) => {
+    return wishlist.filter((wishlistItem) => wishlistItem.id !== movie.id);
+};
+
+const WISHLIST_KEY = 'localWishlist';
+const WISHLIST_ADD = 'wishlist/add';
+const WISHLIST_REMOVE = 'wishlist/remove';
+const WISHLIST_CLEAR = 'wishlist/clear';
+
+export const saveWishlist = (wishlist) => {
+    localStorage.setItem(WISHLIST_KEY, JSON.stringify(wishlist));
+};
+
+export const loadWishlist = (initialValue = []) => {
+    const wishlistData = localStorage.getItem(WISHLIST_KEY);
+    if (wishlistData) {
+        return JSON.parse(wishlistData);
+    }
+
+    return initialValue;
+};
+
+export const wishlistReducer = (wishlist, action) => {
+    const { movie } = action;
+    switch (action.type) {
+        case WISHLIST_ADD: {
+            return addToWishlist(wishlist, movie);
+        }
+        case WISHLIST_REMOVE: {
+            return removeFromWishlist(wishlist, movie);
+        }
+        case WISHLIST_CLEAR: {
+            return [];
+        }
+        default: {
+            throw Error(`Unknown action: ${action.type}`);
+        }
+    }
+};
+
+export const wishlistAdd = (movie) => ({
+    type: WISHLIST_ADD, movie,
+});
+
+export const wishlistRemove = (movie) => ({
+    type: WISHLIST_REMOVE, movie,
+});
+
+export const wishlistClear = () => ({
+    type: WISHLIST_CLEAR,
+});

src/main.jsx

@@ -0,0 +1,69 @@
+import 'bootstrap/dist/css/bootstrap.min.css';
+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import { RouterProvider, createBrowserRouter } from 'react-router-dom';
+import App from './App.jsx';
+import './index.css';
+
+import ErrorPage from './pages/ErrorPage.jsx';
+import PageIndex from './pages/PageIndex.jsx';
+import PagePricing from './pages/PagePricing.jsx';
+import PageAboutUs from './pages/PageAboutUs.jsx';
+import PageLogin from './pages/PageLogin.jsx';
+import PageVideoplayer from './pages/PageVideoplayer.jsx';
+import PageAdminPanel from './pages/PageAdminPanel.jsx';
+import PageProfile from './pages/PageProfile.jsx';
+
+const routes = [
+  {
+    index: true,
+    path: '/',
+    element: <PageIndex />,
+    title: 'СигмаТеатр',
+  },
+  {
+    path: '/pricing',
+    element: <PagePricing />,
+    title: 'Подписка',
+  },
+  {
+    path: '/about_us',
+    element: <PageAboutUs />,
+    title: 'О нас',
+  },
+  {
+    path: '/login',
+    element: <PageLogin />,
+    title: 'Вход в аккаунт',
+  },
+  {
+    path: '/videoplayer/:id?',
+    element: <PageVideoplayer />,
+    title: 'Просмотр',
+  },
+  {
+    path: '/admin_panel',
+    element: <PageAdminPanel />,
+    title: 'CRUD администрирование',
+  },
+  {
+    path: '/profile',
+    element: <PageProfile />,
+    title: 'Профиль',
+  },
+];
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App routes={ routes } />,
+    children: routes,
+    errorElement: <ErrorPage />,
+  },
+]);
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+  <React.StrictMode>
+    <RouterProvider router={ router } />
+  </React.StrictMode>,
+);

src/pages/ErrorPage.jsx

@@ -0,0 +1,19 @@
+import { Alert, Button, Container } from 'react-bootstrap';
+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" variant="primary" onClick={() => navigate(-1)}>Назад</Button>
+            </Container>
+        </Container>
+    );
+};
+
+export default ErrorPage;

src/pages/PageAboutUs.jsx

@@ -0,0 +1,121 @@
+import {
+    Container, Row, Col, Form, InputGroup, Button, Modal,
+} from 'react-bootstrap';
+
+import { EnvelopeFill, PersonFill, ChatRightDotsFill } from 'react-bootstrap-icons';
+import { useState } from 'react';
+
+const PageAboutUs = () => {
+    const [show, setShow] = useState(false);
+
+    const handleClose = () => setShow(false);
+    const handleShow = () => setShow(true);
+
+    return (
+        <>
+            <section id="contact-info">
+                <Container fluid="md" className="py-4">
+                    <Row className="gx-5 gy-5">
+                        <Col lg={ 5 }>
+                            <h2 className="text-center mb-5">Контактные данные</h2>
+                            <ul className="list-group list-group-flush">
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Страна:</span> Россия
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Адрес:</span> 432029, Ульяновск
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Телефон:</span> +7 (987) 654 32-10
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Факс:</span> +49 221 95491533
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">Электронная почта:</span> sigmacinema@gmail.com
+                                </li>
+                                <li className="list-group-item">
+                                    <span className="fw-bold">ИНН:</span> 7743013902
+                                </li>
+                            </ul>
+                        </Col>
+
+                        <Col lg={ 7 }>
+                            <h2 className="text-center mb-5">Мы на карте</h2>
+                            <iframe
+                            src="https://www.google.com/maps/embed/v1/place?q=Ульяновск,+Россия,+432029&key=AIzaSyBFw0Qbyq9zTFTd-tUY6dZWTgaQzuU17R8"
+                            width="100%" height="500" allowFullScreen="" loading="lazy"
+                            referrerPolicy="no-referrer-when-downgrade"></iframe>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <section id="feedback" className="bg-light">
+                <Container fluid="md" className="py-4 mt-5">
+                    <div className="text-center">
+                        <h2>Остались вопросы?</h2>
+                        <p className="lead text-muted">Задайте ваш вопрос нашей службе поддержки - мы постараемся ответить на него в ближайшее время</p>
+                    </div>
+
+                    <Row className="justify-content-center mt-5">
+                        <Col lg={ 6 }>
+                            <Form>
+                                <Form.Group>
+                                    <Form.Label>Ваш адрес электронной почты</Form.Label>
+                                    <InputGroup className="mb-3">
+                                        <InputGroup.Text><EnvelopeFill /></InputGroup.Text>
+                                        <Form.Control type="email" placeholder="myemail@mail.com" />
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>Ваше имя</Form.Label>
+                                    <InputGroup className="mb-3">
+                                        <InputGroup.Text><PersonFill /></InputGroup.Text>
+                                        <Form.Control type="text" placeholder="Иванов Иван" />
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Group>
+                                    <Form.Label>О чем ваш вопрос?</Form.Label>
+                                    <InputGroup className="mb-4">
+                                        <InputGroup.Text><ChatRightDotsFill /></InputGroup.Text>
+                                        <Form.Select>
+                                            <option value="pricing">Оплата подписки</option>
+                                            <option value="content">Фильмы или сериалы</option>
+                                            <option value="other">Другое</option>
+                                        </Form.Select>
+                                    </InputGroup>
+                                </Form.Group>
+
+                                <Form.Control as="textarea" rows={ 5 } placeholder="Ваш вопрос..." />
+
+                                <div className="text-center mt-4">
+                                    <Button variant="primary" onClick={ handleShow }>Отправить</Button>
+                                </div>
+                            </Form>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <Modal show={ show } onHide={ handleClose }>
+                <Modal.Header closeButton>
+                    <Modal.Title>Ваш вопрос отправлен</Modal.Title>
+                </Modal.Header>
+
+                <Modal.Body>На указанный вами адрес электронной почты
+                    скоро придет письмо с ответом.</Modal.Body>
+
+                <Modal.Footer>
+                    <Button variant="primary" onClick={handleClose}>
+                        Закрыть
+                    </Button>
+                </Modal.Footer>
+            </Modal>
+        </>
+    );
+};
+
+export default PageAboutUs;

src/pages/PageAdminPanel.jsx

@@ -0,0 +1,20 @@
+import { Container } from 'react-bootstrap';
+import Lines from '../components/lines/table/Lines.jsx';
+
+const PageAdminPanel = () => {
+    return (
+        <section id="administration">
+            <Container fluid="md" className="py-4 mb-4">
+                <div className="text-center">
+                    <h2>Страница администратора</h2>
+                    <p className="lead text-muted">Выполнение CRUD-операций над фильмами или сериалами</p>
+                </div>
+
+                <Lines />
+
+            </Container>
+        </section>
+    );
+};
+
+export default PageAdminPanel;

src/pages/PageIndex.jsx

@@ -0,0 +1,82 @@
+import { Container, Row } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import useLines from '../components/lines/hooks/LinesHook';
+import MovieItem from '../components/movies/MovieItem.jsx';
+import useLogin from '../components/login/LoginHook';
+
+const PageIndex = () => {
+    const navigate = useNavigate();
+
+    const { loginData } = useLogin();
+
+    const showMoviePage = (event, movieId) => {
+        event.preventDefault();
+        event.stopPropagation();
+
+        if (!loginData) {
+            toast.error('Для просмотра фильма необходимо войти в аккаунт');
+            navigate('/login');
+            return;
+        }
+
+        navigate(`/videoplayer/${movieId}`);
+    };
+
+    const { lines: movies } = useLines();
+
+    return (
+        <>
+            <section id="movies">
+                <Container fluid="md" className="py-4 mb-4">
+
+                    <div className="text-center">
+                        <h2>Самые базированные фильмы</h2>
+                        <p className="lead text-muted">Здесь собраны ваши любимые кинофильмы</p>
+                    </div>
+
+                    <Row className="gx-5 gy-5 my-3">
+                        {
+                            movies.filter((item) => item.type.name === 'Фильм').map((movie) =>
+                                <MovieItem
+                                    key = { movie.id }
+                                    id={ movie.id }
+                                    imageSrc={ movie.poster }
+                                    title={ movie.title }
+                                    requiresSubscription={ movie.requiresSubscription }
+                                    handleClick={ showMoviePage }
+                                />)
+                        }
+                    </Row>
+
+                </Container>
+            </section>
+
+            <section id="series" className="bg-light">
+                <Container fluid="md" className="py-4">
+
+                    <div className="text-center">
+                        <h2>Популярные сериалы</h2>
+                        <p className="lead text-muted">Сериалы, главные герои которых - буквально вы</p>
+                    </div>
+
+                    <Row className="gx-5 gy-5 mt-3 mb-5">
+                        {
+                            movies.filter((item) => item.type.name === 'Сериал').map((movie) =>
+                                <MovieItem
+                                    key = { movie.id }
+                                    id={ movie.id }
+                                    imageSrc={ movie.poster }
+                                    title={ movie.title }
+                                    requiresSubscription={ movie.requiresSubscription }
+                                    handleClick={ showMoviePage }
+                                />)
+                        }
+                    </Row>
+                </Container>
+            </section>
+        </>
+    );
+};
+
+export default PageIndex;

src/pages/PageLogin.jsx

@@ -0,0 +1,97 @@
+import {
+    Container, Row, Col, Form, InputGroup, Button, Card,
+} from 'react-bootstrap';
+
+import {
+    PersonCircle, EnvelopeFill, LockFill,
+} from 'react-bootstrap-icons';
+
+import { useState } from 'react';
+import ForgotPasswordModal from '../components/authentification/modals/ForgotPasswordModal.jsx';
+import useUserLoginForm from '../components/authentification/hooks/UserLoginFormHook';
+
+const PageLogin = () => {
+    const [shouldShowForgotModal, setShowForgotModal] = useState(false);
+
+    const { validated, handleSubmit, handleChange } = useUserLoginForm();
+
+    const handleForgotPassword = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+
+        setShowForgotModal(true);
+    };
+
+    const handleLogin = async (event) => {
+        await handleSubmit(event);
+    };
+
+    return (
+        <>
+            <section id="login">
+                <Container fluid="sm" className="py-4">
+                    <div className="text-center">
+                        <h2>Вход в аккаунт</h2>
+                        <p className="lead text-muted">Войдите в ваш аккаунт чтобы воспользоваться подпиской и иметь возможность отмечать желаемые фильмы</p>
+                    </div>
+
+                    <Row className="justify-content-center mt-5">
+                        <Col lg={ 4 }>
+                            <Card>
+                                <Card.Body>
+                                    <div className="d-flex flex-row justify-content-center align-items-center">
+                                        <PersonCircle className="text-primary" fontSize={ '30px' } />
+                                        <p className="lead my-auto ms-3 text-primary">Вход</p>
+                                    </div>
+
+                                    <Form className="my-3" noValidate validated={ validated } onSubmit={ handleLogin }>
+                                        <Form.Group>
+                                            <Form.Label>Электронная почта</Form.Label>
+                                            <InputGroup className="mb-3">
+                                                <InputGroup.Text><EnvelopeFill /></InputGroup.Text>
+                                                <Form.Control name="email" type="email" placeholder="myemail@mail.com" onChange={handleChange} required/>
+                                            </InputGroup>
+                                        </Form.Group>
+
+                                        <Form.Group>
+                                            <Form.Label>Пароль</Form.Label>
+                                            <InputGroup className="mb-3">
+                                                <InputGroup.Text><LockFill /></InputGroup.Text>
+                                                <Form.Control name="password" type="password" onChange={handleChange} required />
+
+                                            </InputGroup>
+                                        </Form.Group>
+
+                                        <Form.Group className="mt-4 d-flex justify-content-between">
+                                            <div className="form-check me-4">
+                                                <Form.Check id="rememberMe"/>
+                                                <Form.Label><small className="text-secondary">Запомнить на этом компьютере</small></Form.Label>
+                                            </div>
+
+                                            <div className="forgot">
+                                                <a onClick={ handleForgotPassword } href='/' id="forgotPassword" className="text-decoration-none">
+                                                    <small>Забыли пароль?</small>
+                                                </a>
+                                            </div>
+                                        </Form.Group>
+
+                                        <div className="text-center mt-5">
+                                            <Button variant="primary" type='submit'>Войти</Button>
+                                        </div>
+                                    </Form>
+                                </Card.Body>
+                            </Card>
+                        </Col>
+                    </Row>
+                </Container>
+            </section>
+
+            <ForgotPasswordModal
+                shouldShowModal={ shouldShowForgotModal }
+                hideModal={ () => setShowForgotModal(false) }
+            />
+        </>
+    );
+};
+
+export default PageLogin;

src/pages/PagePricing.jsx

@@ -0,0 +1,91 @@
+import {
+    Container, Row,
+} from 'react-bootstrap';
+
+import { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import diamondIcon from '../assets/pricing/diamond.png';
+import noAdsIcon from '../assets/pricing/no-ads.png';
+
+import Priveledge from '../components/pricing/Priveledge.jsx';
+import PricingPlan from '../components/pricing/PricingPlan.jsx';
+import usePricingPlans from '../components/pricing/hooks/PricingPlansHook';
+import useLogin from '../components/login/LoginHook';
+import useSubscription from '../components/subscription/SubscriptionHook';
+
+const PagePricing = () => {
+    const { pricingPlans, isPending } = usePricingPlans();
+
+    const { loginData } = useLogin();
+    const { subscriptionActive, activateSubscription } = useSubscription();
+
+    const handleBuySubscription = (period) => {
+        const expirationDate = new Date();
+
+        expirationDate.setDate(expirationDate.getDate() + period.days);
+        expirationDate.setMonth(expirationDate.getMonth() + period.months);
+        expirationDate.setFullYear(expirationDate.getFullYear() + period.years);
+
+        activateSubscription(expirationDate);
+    };
+
+    const navigate = useNavigate();
+
+    useEffect(() => {
+        if (!loginData) {
+            navigate('/Login');
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loginData]);
+
+    useEffect(() => {
+        if (subscriptionActive) {
+            navigate('/Profile');
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [subscriptionActive]);
+
+    return (
+        <>
+            <section id="subscription-features">
+                <Container fluid="md" className="py-5">
+                    <div className="text-center">
+                        <h2>Преимущества подписки</h2>
+                        <p className="lead text-muted">Всё лучшее - в одной подписке</p>
+                    </div>
+
+                    <Row className="justify-content-between align-items-center my-5 gy-5">
+                        <Priveledge icon={ diamondIcon } title="Большая коллекция" description="Известные топовые фильмы и новинки" />
+                        <Priveledge icon={ noAdsIcon } title="Без рекламы" description="Видео не прервётся на самом интересном месте" />
+                    </Row>
+                </Container>
+            </section>
+
+            <section id="pricing" className="bg-light">
+                <Container fluid="md" className="py-5">
+                    <div className="text-center">
+                        <h2>Подписка на кинотеатр</h2>
+                        <p className="lead text-muted">Выберите, какой план вам подходит больше всего</p>
+                    </div>
+
+                    <Row className="my-5 justify-content-center align-items-center gy-3">
+                        { isPending && <p className="display-1 my-5">Загрузка...</p> }
+
+                        {pricingPlans.map((pricingPlan) => (
+                            <PricingPlan
+                                key={pricingPlan.id}
+                                pricingPlanData={pricingPlan}
+                                onBuySubscription={handleBuySubscription}
+                            />
+                        ))}
+                    </Row>
+                </Container>
+            </section>
+        </>
+    );
+};
+
+export default PagePricing;

src/pages/PageProfile.jsx

@@ -0,0 +1,81 @@
+import { Container } from 'react-bootstrap';
+import { useNavigate } from 'react-router-dom';
+import { useEffect } from 'react';
+import Wishlist from '../components/wishlist/Wishlist.jsx';
+import useWishlist from '../components/wishlist/WishlistHook';
+import useLogin from '../components/login/LoginHook';
+import useSubscription from '../components/subscription/SubscriptionHook';
+
+const PageProfile = () => {
+    const navigate = useNavigate();
+
+    const { loginData, loginLogout } = useLogin();
+
+    const {
+        subscriptionActive,
+        getExpirationDateFormatted,
+        cancelSubscription,
+    } = useSubscription();
+
+    useEffect(() => {
+        if (loginData === null) {
+            navigate('/login');
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [loginData]);
+
+    const { clearWishlist } = useWishlist();
+
+    const handleLogout = () => {
+        loginLogout();
+
+        navigate('/login');
+        clearWishlist();
+    };
+
+    let subscriptionStatus;
+    if (subscriptionActive) {
+        subscriptionStatus = <span className="text-success">активна</span>;
+    } else {
+        subscriptionStatus = <span className="text-danger">неактивна</span>;
+    }
+
+    return (
+        <>
+            <section id="subscriptionStatus">
+                <Container fluid="md" className="py-4 mb-4">
+
+                    <div className="text-center">
+                        <h2>Статус подписки</h2>
+                        <p className="lead text-muted">Здесь отображается статус текущей подписки</p>
+                    </div>
+
+                    <p className="display-1 my-5">Статус: {subscriptionStatus}</p>
+
+                    { subscriptionActive === true
+                        && <div>
+                            <h3 className="fw-normal">Действует до: <span className="fw-bold">{ getExpirationDateFormatted() }</span></h3>
+                            <button className="btn btn-outline-danger mt-4" onClick={() => {
+                                cancelSubscription();
+                            }}>Отменить подписку</button>
+                        </div>
+                    }
+
+                </Container>
+            </section>
+
+            <section id="watchLater" className="bg-light">
+                <Wishlist />
+            </section>
+
+            <section id="logout">
+                <div className="text-center py-4">
+                    <button className="btn btn-lg btn-danger" onClick={handleLogout}>Выйти из аккаунта</button>
+                </div>
+            </section>
+        </>
+    );
+};
+
+export default PageProfile;

src/pages/PageVideoplayer.jsx

@@ -0,0 +1,88 @@
+import {
+    Container, Row, Col, Button,
+} from 'react-bootstrap';
+
+import { useNavigate, useParams } from 'react-router-dom';
+import toast from 'react-hot-toast';
+import { useEffect } from 'react';
+
+import useMovieData from '../components/movies/MovieDataHook';
+import useWishlist from '../components/wishlist/WishlistHook';
+import useLogin from '../components/login/LoginHook';
+import useSubscription from '../components/subscription/SubscriptionHook';
+
+const PageVideoplayer = () => {
+    const { id } = useParams();
+    const { movieData } = useMovieData(id);
+
+    const navigate = useNavigate();
+
+    const { loginData } = useLogin();
+    const { subscriptionActive } = useSubscription();
+
+    const { addToWishlist } = useWishlist();
+
+    useEffect(() => {
+        if (movieData.id) {
+            if (movieData.requiresSubscription && !subscriptionActive) {
+                toast.error('Для просмотра этого фильма необходима подписка');
+                navigate('/Pricing');
+            }
+        }
+
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [movieData]);
+
+    if (!loginData) {
+        toast.error('Для просмотра фильмов необходимо авторизоваться');
+        navigate('/login');
+    }
+
+    const handleWatchLater = async () => {
+        addToWishlist(movieData);
+        toast.success('Добавлено');
+    };
+
+    return (
+        <Container fluid="md" className="py-4 mb-4">
+            <div className="ratio ratio-16x9 my-4">
+                <iframe width="560" height="315" src={ movieData.video } title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowFullScreen></iframe>
+            </div>
+            <p className="display-4">{ movieData.title }</p>
+
+            <Row className="jgx-5 gy-5 mb-4">
+                <Col lg={ 7 }>
+                    <h3>Описание</h3>
+                    <p className="my-4">
+                        { movieData.description }
+                    </p>
+                </Col>
+
+                <Col lg={ 5 } id="movieInfoContainer">
+                    <h3>О фильме</h3>
+                    <ul className="list-group list-group-flush my-3">
+                        <li className="list-group-item">
+                            <span className="fw-bold">Год производства:</span> { movieData.releaseDate }
+                        </li>
+                        <li className="list-group-item">
+                            <span className="fw-bold">Страна:</span> { movieData.country }
+                        </li>
+                        <li className="list-group-item">
+                            <span className="fw-bold">Слоган:</span> <span className="text-secondary">«{ movieData.tagline }»</span>
+                        </li>
+                        <li className="list-group-item">
+                            <span className="fw-bold">Режиссер:</span> { movieData.director }
+                        </li>
+                        <li className="list-group-item">
+                            <span className="fw-bold">Возраст:</span> { movieData.ageRating.name }
+                        </li>
+                    </ul>
+                </Col>
+            </Row>
+
+            <Button onClick={ handleWatchLater }>Посмотреть позже</Button>
+        </Container>
+    );
+};
+
+export default PageVideoplayer;

vite.config.js

@@ -0,0 +1,13 @@
+/* eslint-disable import/no-extraneous-dependencies */
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  build: {
+    sourcemap: true,
+    chunkSizeWarningLimit: 1024,
+    emptyOutDir: true,
+  },
+});