Добавление авторизации и улучшение качества кода

library_service/main.py

@@ -1,9 +1,11 @@
 """Основной модуль"""
 from contextlib import asynccontextmanager
+from pathlib import Path
 
 from alembic import command
 from alembic.config import Config
 from fastapi import FastAPI
+from fastapi.staticfiles import StaticFiles
 
 from .routers import api_router
 from .settings import engine, get_app
@@ -29,3 +31,5 @@ async def lifespan(app: FastAPI):
 
 # Подключение маршрутов
 app.include_router(api_router)
+static_path = Path(__file__).parent / "static"
+app.mount("/static", StaticFiles(directory=static_path), name="static")

library_service/routers/__init__.py

@@ -11,9 +11,9 @@ from .misc import router as misc_router
 api_router = APIRouter()
 
 # Подключение всех маршрутов
-api_router.include_router(auth_router)
-api_router.include_router(authors_router)
-api_router.include_router(books_router)
-api_router.include_router(genres_router)
-api_router.include_router(relationships_router)
 api_router.include_router(misc_router)
+api_router.include_router(auth_router, prefix="/api")
+api_router.include_router(authors_router, prefix="/api")
+api_router.include_router(books_router, prefix="/api")
+api_router.include_router(genres_router, prefix="/api")
+api_router.include_router(relationships_router, prefix="/api")

library_service/routers/misc.py

@@ -31,7 +31,20 @@ def get_info(app) -> Dict:
 @router.get("/", include_in_schema=False)
 async def root(request: Request, app=Depends(get_app)):
     """Эндпоинт главной страницы"""
-    return templates.TemplateResponse(request, "index.html", get_info(app))
+    return RedirectResponse("/books")
+
+
+@router.get("/books", include_in_schema=False)
+async def books(request: Request, app=Depends(get_app)):
+    """Эндпоинт страницы выбора книг"""
+    return templates.TemplateResponse(request, "books.html", get_info(app))
+
+
+@router.get("/auth", include_in_schema=False)
+async def root(request: Request, app=Depends(get_app)):
+    """Эндпоинт страницы авторизации"""
+    return templates.TemplateResponse(request, "auth.html", get_info(app))
+
 
 
 @router.get("/api", include_in_schema=False)
@@ -54,18 +67,6 @@ async def favicon():
     )
 
 
-@router.get("/static/{path:path}", include_in_schema=False)
-async def serve_static(path: str):
-    """Статические файлы"""
-    static_dir = Path(__file__).parent.parent / "static"
-    file_path = static_dir / path
-
-    if not file_path.is_file() or not file_path.is_relative_to(static_dir):
-        return JSONResponse(status_code=404, content={"error": "File not found"})
-
-    return FileResponse(file_path)
-
-
 @router.get(
     "/api/info",
     summary="Информация о сервисе",

library_service/static/auth.js

@@ -0,0 +1,287 @@
+$(function () {
+    const $loginTab = $("#login-tab");
+    const $registerTab = $("#register-tab");
+    const $loginForm = $("#login-form");
+    const $registerForm = $("#register-form");
+    
+    const $guestLink = $("#guest-link");
+    const $userBtn = $("#user-btn");
+    const $userDropdown = $("#user-dropdown");
+    const $userArrow = $("#user-arrow");
+    const $userAvatar = $("#user-avatar");
+    const $dropdownName = $("#dropdown-name");
+    const $dropdownUsername = $("#dropdown-username");
+    const $dropdownEmail = $("#dropdown-email");
+    const $logoutBtn = $("#logout-btn");
+    const $menuContainer = $("#user-menu-container");
+    
+    function switchToLogin() {
+      $loginTab.addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500").removeClass("text-gray-400");
+      $registerTab.removeClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500").addClass("text-gray-400");
+      $loginForm.removeClass("hidden"); $registerForm.addClass("hidden");
+      history.replaceState(null, "", "/auth#login");
+    }
+  
+    function switchToRegister() {
+      $registerTab.addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500").removeClass("text-gray-400");
+      $loginTab.removeClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500").addClass("text-gray-400");
+      $registerForm.removeClass("hidden"); $loginForm.addClass("hidden");
+      history.replaceState(null, "", "/auth#register");
+    }
+  
+    $loginTab.on("click", switchToLogin);
+    $registerTab.on("click", switchToRegister);
+  
+    $("body").on("click", ".toggle-password", function () {
+      const $btn = $(this);
+      const $input = $btn.siblings("input");
+      const $eyeOpen = $btn.find(".eye-open");
+      const $eyeClosed = $btn.find(".eye-closed");
+  
+      if ($input.attr("type") === "password") {
+        $input.attr("type", "text");
+        $eyeOpen.addClass("hidden");
+        $eyeClosed.removeClass("hidden");
+      } else {
+        $input.attr("type", "password");
+        $eyeOpen.removeClass("hidden");
+        $eyeClosed.addClass("hidden");
+      }
+    });
+    
+    $("#register-password").on("input", function () {
+      const password = $(this).val();
+      let strength = 0;
+      if (password.length >= 8) strength++;
+      if (password.length >= 12) strength++;
+      if (/[a-z]/.test(password) && /[A-Z]/.test(password)) strength++;
+      if (/\d/.test(password)) strength++;
+      if (/[^a-zA-Z0-9]/.test(password)) strength++;
+  
+      const levels = [
+        { width: "0%", color: "", text: "" },
+        { width: "20%", color: "bg-red-500", text: "Очень слабый" },
+        { width: "40%", color: "bg-orange-500", text: "Слабый" },
+        { width: "60%", color: "bg-yellow-500", text: "Средний" },
+        { width: "80%", color: "bg-lime-500", text: "Хороший" },
+        { width: "100%", color: "bg-green-500", text: "Отличный" },
+      ];
+  
+      const level = levels[strength];
+      const $bar = $("#password-strength-bar");
+      
+      $bar.css("width", level.width);
+      $bar.attr("class", "h-full transition-all duration-300 " + level.color);
+      $("#password-strength-text").text(level.text);
+  
+      checkPasswordMatch();
+    });
+  
+    function checkPasswordMatch() {
+      const password = $("#register-password").val();
+      const confirm = $("#register-password-confirm").val();
+      const $error = $("#password-match-error");
+  
+      if (confirm && password !== confirm) {
+        $error.removeClass("hidden");
+        return false;
+      } else {
+        $error.addClass("hidden");
+        return true;
+      }
+    }
+  
+    $("#register-password-confirm").on("input", checkPasswordMatch);
+  
+    $loginForm.on("submit", async function (event) {
+      event.preventDefault();
+  
+      const $errorDiv = $("#login-error");
+      const $submitBtn = $("#login-submit");
+      const username = $("#login-username").val();
+      const password = $("#login-password").val();
+  
+      $errorDiv.addClass("hidden");
+      $submitBtn.prop("disabled", true).text("Вход...");
+  
+      try {
+        const formData = new URLSearchParams();
+        formData.append("username", username);
+        formData.append("password", password);
+  
+        const response = await fetch("/api/auth/token", {
+          method: "POST",
+          headers: { "Content-Type": "application/x-www-form-urlencoded" },
+          body: formData.toString(),
+        });
+  
+        const data = await response.json();
+  
+        if (response.ok) {
+          localStorage.setItem("access_token", data.access_token);
+          if (data.refresh_token) {
+            localStorage.setItem("refresh_token", data.refresh_token);
+          }
+          window.location.href = "/";
+        } else {
+          $errorDiv.text(data.detail || "Неверное имя пользователя или пароль");
+          $errorDiv.removeClass("hidden");
+          $submitBtn.prop("disabled", false).text("Войти");
+        }
+      } catch (error) {
+        console.error("Login error:", error);
+        $errorDiv.text("Ошибка соединения с сервером");
+        $errorDiv.removeClass("hidden");
+        $submitBtn.prop("disabled", false).text("Войти");
+      }
+    });
+  
+    $registerForm.on("submit", async function (event) {
+      event.preventDefault();
+  
+      const $errorDiv = $("#register-error");
+      const $successDiv = $("#register-success");
+      const $submitBtn = $("#register-submit");
+  
+      if (!checkPasswordMatch()) {
+        $errorDiv.text("Пароли не совпадают").removeClass("hidden");
+        return;
+      }
+  
+      const userData = {
+        username: $("#register-username").val(),
+        email: $("#register-email").val(),
+        full_name: $("#register-fullname").val() || null,
+        password: $("#register-password").val(),
+      };
+  
+      $errorDiv.addClass("hidden");
+      $successDiv.addClass("hidden");
+      $submitBtn.prop("disabled", true).text("Регистрация...");
+  
+      try {
+        const response = await fetch("/api/auth/register", {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify(userData),
+        });
+  
+        const data = await response.json();
+  
+        if (response.ok) {
+          $successDiv.text("Регистрация успешна! Переключаемся на вход...").removeClass("hidden");
+          setTimeout(() => {
+            $("#login-username").val(userData.username);
+            switchToLogin();
+          }, 2000);
+        } else {
+          let errorMessage = data.detail;
+          if (Array.isArray(data.detail)) {
+            errorMessage = data.detail.map((err) => err.msg).join(". ");
+          }
+          $errorDiv.text(errorMessage || "Ошибка регистрации").removeClass("hidden");
+        }
+      } catch (error) {
+        console.error("Register error:", error);
+        $errorDiv.text("Ошибка соединения с сервером").removeClass("hidden");
+      } finally {
+        $submitBtn.prop("disabled", false).text("Зарегистрироваться");
+      }
+    });
+  
+    let isDropdownOpen = false;
+  
+    function openDropdown() {
+      isDropdownOpen = true;
+      $userDropdown.removeClass("hidden");
+      $userArrow.addClass("rotate-180");
+    }
+  
+    function closeDropdown() {
+      isDropdownOpen = false;
+      $userDropdown.addClass("hidden");
+      $userArrow.removeClass("rotate-180");
+    }
+  
+    $userBtn.on("click", function (e) {
+      e.stopPropagation();
+      isDropdownOpen ? closeDropdown() : openDropdown();
+    });
+  
+    $(document).on("click", function (e) {
+      if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+        closeDropdown();
+      }
+    });
+  
+    $(document).on("keydown", function (e) {
+      if (e.key === "Escape" && isDropdownOpen) {
+        closeDropdown();
+      }
+    });
+  
+    $logoutBtn.on("click", function () {
+      localStorage.removeItem("access_token");
+      localStorage.removeItem("refresh_token");
+      window.location.href = "/";
+    });
+  
+    function showGuest() {
+      $guestLink.removeClass("hidden");
+      $userBtn.addClass("hidden").removeClass("flex");
+      closeDropdown();
+    }
+  
+    function showUser(user) {
+      $guestLink.addClass("hidden");
+      $userBtn.removeClass("hidden").addClass("flex");
+  
+      const displayName = user.full_name || user.username;
+      const firstLetter = displayName.charAt(0).toUpperCase();
+  
+      $userAvatar.text(firstLetter);
+      $dropdownName.text(displayName);
+      $dropdownUsername.text("@" + user.username);
+      $dropdownEmail.text(user.email);
+    }
+    
+
+  function updateUserAvatar(email) {
+    if (!email) return;
+    const cleanEmail = email.trim().toLowerCase();
+    const emailHash = sha256(cleanEmail); 
+
+    const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+    const avatarImg = document.getElementById('user-avatar');
+    if (avatarImg) { avatarImg.src = avatarUrl; }
+  }
+  
+    if (window.location.hash === "#register") { switchToRegister(); }
+  
+    const token = localStorage.getItem("access_token");
+    
+    if (!token) {
+      showGuest();
+    } else {
+      fetch("/api/auth/me", {
+        headers: { Authorization: "Bearer " + token },
+      })
+        .then((response) => {
+          if (response.ok) return response.json();
+          throw new Error("Unauthorized");
+        })
+        .then((user) => {
+          showUser(user);
+          updateUserAvatar(user.email);
+          
+          document.getElementById('user-btn').classList.remove('hidden');
+          document.getElementById('guest-link').classList.add('hidden');
+          if (window.location.pathname === "/auth") { window.location.href = "/"; }
+        })
+        .catch(() => {
+          localStorage.removeItem("access_token");
+          localStorage.removeItem("refresh_token");
+          showGuest();
+        });
+    }
+  });

library_service/static/books.js

@@ -0,0 +1,217 @@
+$(document).ready(function () {
+  Promise.all([
+    fetch("/api/authors").then((response) => response.json()),
+    fetch("/api/genres").then((response) => response.json()),
+  ])
+    .then(([authorsData, genresData]) => {
+      const $dropdown = $("#author-dropdown");
+      authorsData.authors.forEach((author) => {
+        const $div = $("<div>", {
+          class: "p-2 hover:bg-gray-100 cursor-pointer",
+          "data-value": author.name,
+          text: author.name,
+        });
+        $dropdown.append($div);
+      });
+
+      const $list = $("#genres-list");
+      genresData.genres.forEach((genre) => {
+        const $li = $("<li>", { class: "mb-1" });
+        $li.html(`
+        <label class="custom-checkbox flex items-center">
+          <input type="checkbox" />
+          <span class="checkmark"></span>
+          ${genre.name}
+        </label>
+      `);
+        $list.append($li);
+      });
+
+      initializeAuthorDropdown();
+    })
+    .catch((error) => console.error("Error loading data:", error));
+
+  function initializeAuthorDropdown() {
+    const $authorSearchInput = $("#author-search-input");
+    const $authorDropdown = $("#author-dropdown");
+    const $selectedAuthorsContainer = $("#selected-authors-container");
+    const $dropdownItems = $authorDropdown.find("[data-value]");
+    let selectedAuthors = new Set();
+
+    const updateDropdownHighlights = () => {
+      $dropdownItems.each(function () {
+        const value = $(this).data("value");
+        $(this).toggleClass("bg-gray-200", selectedAuthors.has(value));
+      });
+    };
+
+    const renderSelectedAuthors = () => {
+      $selectedAuthorsContainer.children().not("#author-search-input").remove();
+
+      selectedAuthors.forEach((author) => {
+        const $authorChip = $("<span>", {
+          class:
+            "flex items-center bg-gray-200 text-gray-800 text-sm font-medium px-2.5 py-0.5 rounded-full",
+        });
+        $authorChip.html(`
+          ${author}
+          <button type="button" class="ml-1 inline-flex items-center p-0.5 text-sm text-gray-400 bg-transparent rounded-sm hover:bg-gray-200 hover:text-gray-900" data-author="${author}">
+            <svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
+              <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
+            </svg>
+            <span class="sr-only">Remove author</span>
+          </button>
+        `);
+        $selectedAuthorsContainer.append($authorChip);
+      });
+      updateDropdownHighlights();
+    };
+
+    $authorSearchInput.on("focus", () => {
+      $authorDropdown.removeClass("hidden");
+    });
+
+    $authorSearchInput.on("input", function () {
+      const query = $(this).val().toLowerCase();
+      $dropdownItems.each(function () {
+        const text = $(this).text().toLowerCase();
+        $(this).css("display", text.includes(query) ? "block" : "none");
+      });
+      $authorDropdown.removeClass("hidden");
+    });
+
+    $(document).on("click", function (event) {
+      if (
+        !$selectedAuthorsContainer.is(event.target) &&
+        !$selectedAuthorsContainer.has(event.target).length &&
+        !$authorDropdown.is(event.target) &&
+        !$authorDropdown.has(event.target).length
+      ) {
+        $authorDropdown.addClass("hidden");
+      }
+    });
+
+    $authorDropdown.on("click", "[data-value]", function () {
+      const selectedValue = $(this).data("value");
+      if (selectedAuthors.has(selectedValue)) {
+        selectedAuthors.delete(selectedValue);
+      } else {
+        selectedAuthors.add(selectedValue);
+      }
+      $authorSearchInput.val("");
+      renderSelectedAuthors();
+      $authorSearchInput.focus();
+    });
+
+    $selectedAuthorsContainer.on("click", "button", function () {
+      const authorToRemove = $(this).data("author");
+      selectedAuthors.delete(authorToRemove);
+      renderSelectedAuthors();
+      $authorSearchInput.focus();
+    });
+
+    renderSelectedAuthors();
+  }
+
+  const $guestLink = $("#guest-link");
+  const $userBtn = $("#user-btn");
+  const $userDropdown = $("#user-dropdown");
+  const $userArrow = $("#user-arrow");
+  const $userAvatar = $("#user-avatar");
+  const $dropdownName = $("#dropdown-name");
+  const $dropdownUsername = $("#dropdown-username");
+  const $dropdownEmail = $("#dropdown-email");
+  const $logoutBtn = $("#logout-btn");
+
+  let isDropdownOpen = false;
+
+  function openDropdown() {
+    isDropdownOpen = true;
+    $userDropdown.removeClass("hidden");
+    $userArrow.addClass("rotate-180");
+  }
+
+  function closeDropdown() {
+    isDropdownOpen = false;
+    $userDropdown.addClass("hidden");
+    $userArrow.removeClass("rotate-180");
+  }
+
+  $userBtn.on("click", function (e) {
+    e.stopPropagation();
+    isDropdownOpen ? closeDropdown() : openDropdown();
+  });
+
+  $(document).on("click", function (e) {
+    if (isDropdownOpen && !$(e.target).closest("#user-menu-container").length) {
+      closeDropdown();
+    }
+  });
+
+  $(document).on("keydown", function (e) {
+    if (e.key === "Escape" && isDropdownOpen) {
+      closeDropdown();
+    }
+  });
+
+  $logoutBtn.on("click", function () {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    window.location.reload();
+  });
+
+  function showGuest() {
+    $guestLink.removeClass("hidden");
+    $userBtn.addClass("hidden").removeClass("flex");
+    closeDropdown();
+  }
+
+  function showUser(user) {
+    $guestLink.addClass("hidden");
+    $userBtn.removeClass("hidden").addClass("flex");
+
+    const displayName = user.full_name || user.username;
+    const firstLetter = displayName.charAt(0).toUpperCase();
+
+    $userAvatar.text(firstLetter);
+    $dropdownName.text(displayName);
+    $dropdownUsername.text("@" + user.username);
+    $dropdownEmail.text(user.email);
+  }
+
+  function updateUserAvatar(email) {
+    if (!email) return;
+    const cleanEmail = email.trim().toLowerCase();
+    const emailHash = sha256(cleanEmail); 
+
+    const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`;
+    const avatarImg = document.getElementById('user-avatar');
+    if (avatarImg) { avatarImg.src = avatarUrl; }
+  }
+
+  const token = localStorage.getItem("access_token");
+
+  if (!token) {
+    showGuest();
+  } else {
+    fetch("/api/auth/me", {
+      headers: { Authorization: "Bearer " + token },
+    })
+      .then((response) => {
+        if (response.ok) return response.json();
+        throw new Error("Unauthorized");
+      })
+      .then((user) => {
+        showUser(user);
+        updateUserAvatar(user.email);
+        
+        document.getElementById('user-btn').classList.remove('hidden');
+        document.getElementById('guest-link').classList.add('hidden');
+      })
+      .catch(() => {
+        localStorage.removeItem("access_token");
+        localStorage.removeItem("refresh_token");
+        showGuest();
+      });
+  }
+});

library_service/static/script.js

@@ -1,135 +0,0 @@
-// Load authors and genres asynchronously
-Promise.all([
-  fetch("/authors").then((response) => response.json()),
-  fetch("/genres").then((response) => response.json()),
-])
-  .then(([authorsData, genresData]) => {
-    // Populate authors dropdown
-    const dropdown = document.getElementById("author-dropdown");
-    authorsData.authors.forEach((author) => {
-      const div = document.createElement("div");
-      div.className = "p-2 hover:bg-gray-100 cursor-pointer";
-      div.setAttribute("data-value", author.name);
-      div.textContent = author.name;
-      dropdown.appendChild(div);
-    });
-
-    // Populate genres list
-    const list = document.getElementById("genres-list");
-    genresData.genres.forEach((genre) => {
-      const li = document.createElement("li");
-      li.className = "mb-1";
-      li.innerHTML = `
-        <label class="custom-checkbox flex items-center">
-          <input type="checkbox" />
-          <span class="checkmark"></span>
-          ${genre.name}
-        </label>
-      `;
-      list.appendChild(li);
-    });
-
-    initializeAuthorDropdown();
-  })
-  .catch((error) => console.error("Error loading data:", error));
-
-function initializeAuthorDropdown() {
-  const authorSearchInput = document.getElementById("author-search-input");
-  const authorDropdown = document.getElementById("author-dropdown");
-  const selectedAuthorsContainer = document.getElementById(
-    "selected-authors-container",
-  );
-  const dropdownItems = authorDropdown.querySelectorAll("[data-value]");
-  let selectedAuthors = new Set();
-
-  // Function to update highlights in dropdown
-  const updateDropdownHighlights = () => {
-    dropdownItems.forEach((item) => {
-      const value = item.dataset.value;
-      if (selectedAuthors.has(value)) {
-        item.classList.add("bg-gray-200");
-      } else {
-        item.classList.remove("bg-gray-200");
-      }
-    });
-  };
-
-  // Function to render selected authors
-  const renderSelectedAuthors = () => {
-    Array.from(selectedAuthorsContainer.children).forEach((child) => {
-      if (child.id !== "author-search-input") {
-        child.remove();
-      }
-    });
-
-    selectedAuthors.forEach((author) => {
-      const authorChip = document.createElement("span");
-      authorChip.className =
-        "flex items-center bg-gray-200 text-gray-800 text-sm font-medium px-2.5 py-0.5 rounded-full";
-      authorChip.innerHTML = `
-        ${author}
-        <button type="button" class="ml-1 inline-flex items-center p-0.5 text-sm text-gray-400 bg-transparent rounded-sm hover:bg-gray-200 hover:text-gray-900" data-author="${author}">
-          <svg class="w-2 h-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
-          </svg>
-          <span class="sr-only">Remove author</span>
-        </button>
-      `;
-      selectedAuthorsContainer.insertBefore(authorChip, authorSearchInput);
-    });
-    updateDropdownHighlights();
-  };
-
-  // Handle input focus to show dropdown
-  authorSearchInput.addEventListener("focus", () => {
-    authorDropdown.classList.remove("hidden");
-  });
-
-  // Handle input for filtering
-  authorSearchInput.addEventListener("input", () => {
-    const query = authorSearchInput.value.toLowerCase();
-    dropdownItems.forEach((item) => {
-      const text = item.textContent.toLowerCase();
-      item.style.display = text.includes(query) ? "block" : "none";
-    });
-    authorDropdown.classList.remove("hidden");
-  });
-
-  // Handle clicks outside to hide dropdown
-  document.addEventListener("click", (event) => {
-    if (
-      !selectedAuthorsContainer.contains(event.target) &&
-      !authorDropdown.contains(event.target)
-    ) {
-      authorDropdown.classList.add("hidden");
-    }
-  });
-
-  // Handle author selection from dropdown
-  authorDropdown.addEventListener("click", (event) => {
-    const selectedValue = event.target.dataset.value;
-    if (selectedValue) {
-      if (selectedAuthors.has(selectedValue)) {
-        selectedAuthors.delete(selectedValue);
-      } else {
-        selectedAuthors.add(selectedValue);
-      }
-      authorSearchInput.value = "";
-      renderSelectedAuthors();
-      authorSearchInput.focus();
-    }
-  });
-
-  // Handle removing selected author chip
-  selectedAuthorsContainer.addEventListener("click", (event) => {
-    if (event.target.closest("button")) {
-      const authorToRemove = event.target.closest("button").dataset.author;
-      selectedAuthors.delete(authorToRemove);
-      renderSelectedAuthors();
-      authorSearchInput.focus();
-    }
-  });
-
-  // Initial render and highlights (without auto-focus)
-  renderSelectedAuthors();
-}

library_service/static/styles.css

@@ -75,3 +75,91 @@ nav ul li a {
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
+
+.auth-tab {
+    font-family: "Dited", sans-serif;
+    letter-spacing: 1.5px;
+}
+
+input:focus {
+    transform: translateY(-1px);
+}
+
+button:disabled {
+    opacity: 0.7;
+}
+
+#login-form,
+#register-form {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+.flex.justify-center.gap-4 button:hover {
+    transform: translateY(-2px);
+}
+
+.shake {
+    animation: shake 0.5s ease-in-out;
+}
+
+@keyframes shake {
+    0%, 100% { transform: translateX(0); }
+    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
+    20%, 40%, 60%, 80% { transform: translateX(5px); }
+}
+
+#req-length, #req-upper, #req-lower, #req-digit {
+    transition: color 0.2s ease;
+}
+
+.req-icon {
+    font-size: 10px;
+    width: 12px;
+    display: inline-block;
+}
+
+#login-form:not(.hidden),
+#register-form:not(.hidden) {
+    animation: fadeIn 0.3s ease-in-out;
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+#login-tab, #register-tab {
+    font-family: "Dited", sans-serif;
+    letter-spacing: 1.5px;
+    cursor: pointer;
+}
+
+#user-dropdown {
+    animation: dropdownFade 0.1s ease-out;
+}
+
+@keyframes dropdownFade {
+    from { opacity: 0; transform: translateY(-5px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+#user-arrow.rotate-180 {
+    transform: rotate(180deg);
+}

library_service/templates/api.html

@@ -50,11 +50,12 @@
         <p>Current Time: {{ server_time }}</p>
         <p>Status: {{ status }}</p>
         <ul>
-            <li><a href="/docs">Swagger UI</a></li>
-            <li><a href="/redoc">ReDoc</a></li>
+            <li><a href="/">Home page</a></li>
             <li>
                 <a href="https://github.com/wowlikon/LibraryAPI">Source Code</a>
             </li>
+            <li><a href="/docs">Swagger UI</a></li>
+            <li><a href="/redoc">ReDoc</a></li>
         </ul>
     </body>
 </html>

library_service/templates/auth.html

@@ -0,0 +1,193 @@
+<!-- templates/auth.html -->
+{% extends "base.html" %}
+
+{% block title %}LiB - Авторизация{% endblock %}
+
+{% block content %}
+<div class="flex flex-1 items-center justify-center p-4">
+    <div class="w-full max-w-md">
+        <div class="bg-white rounded-lg shadow-md overflow-hidden">
+            <div class="flex border-b border-gray-200">
+                <button type="button" id="login-tab" class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-700 bg-gray-50 border-b-2 border-gray-500">Вход</button>
+                <button type="button" id="register-tab" class="flex-1 py-4 text-center font-medium transition duration-200 text-gray-400 hover:text-gray-600">Регистрация</button>
+            </div>
+
+            <form id="login-form" class="p-6">
+                <div class="mb-4">
+                    <label for="login-username" class="block text-sm font-medium text-gray-700 mb-2">Имя пользователя</label>
+                    <input 
+                        type="text" 
+                        id="login-username" 
+                        name="username"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                        placeholder="Введите имя пользователя"
+                        required
+                    />
+                </div>
+
+                <div class="mb-4">
+                    <label for="login-password" class="block text-sm font-medium text-gray-700 mb-2">Пароль</label>
+                    <div class="relative">
+                        <input 
+                            type="password" 
+                            id="login-password" 
+                            name="password"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                            placeholder="Введите пароль"
+                            required
+                        />
+                        <button 
+                            type="button" 
+                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                            onclick="togglePassword(this)"
+                        >
+                            <svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                            </svg>
+                            <svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+
+                <div class="flex items-center justify-between mb-6">
+                    <label class="custom-checkbox flex items-center text-sm text-gray-600">
+                        <input type="checkbox" id="remember-me" />
+                        <span class="checkmark"></span>Запомнить меня
+                    </label>
+                    <a href="#" class="text-sm text-gray-500 hover:text-gray-700 transition">Забыли пароль?</a>
+                </div>
+
+                <div id="login-error" class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"></div>
+
+                <button 
+                    type="submit" 
+                    id="login-submit"
+                    class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium"
+                >Войти</button>
+            </form>
+
+            <form id="register-form" class="p-6 hidden" onsubmit="return handleRegister(event)">
+                <div class="mb-4">
+                    <label for="register-username" class="block text-sm font-medium text-gray-700 mb-2">Имя пользователя</label>
+                    <input 
+                        type="text" 
+                        id="register-username" 
+                        name="username"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                        placeholder="Придумайте имя пользователя (мин. 3 символа)"
+                        required
+                        minlength="3"
+                        maxlength="50"
+                    />
+                </div>
+
+                <div class="mb-4">
+                    <label for="register-email" class="block text-sm font-medium text-gray-700 mb-2">Email</label>
+                    <input 
+                        type="email" 
+                        id="register-email" 
+                        name="email"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                        placeholder="example@mail.com"
+                        required
+                    />
+                </div>
+
+                <div class="mb-4">
+                    <label for="register-fullname" class="block text-sm font-medium text-gray-700 mb-2">Полное имя <span class="text-gray-400">(необязательно)</span></label>
+                    <input 
+                        type="text" 
+                        id="register-fullname" 
+                        name="full_name"
+                        class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                        placeholder="Иван Иванов"
+                        maxlength="100"
+                    />
+                </div>
+
+                <div class="mb-4">
+                    <label for="register-password" class="block text-sm font-medium text-gray-700 mb-2">Пароль</label>
+                    <div class="relative">
+                        <input 
+                            type="password" 
+                            id="register-password" 
+                            name="password"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                            placeholder="Минимум 8 символов, A-Z, a-z, 0-9"
+                            required
+                            minlength="8"
+                            maxlength="100"
+                        />
+                        <button 
+                            type="button" 
+                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                            onclick="togglePassword(this)"
+                        >
+                            <svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                            </svg>
+                            <svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <div class="mt-2">
+                        <div class="h-1 w-full bg-gray-200 rounded-full overflow-hidden">
+                            <div id="password-strength-bar" class="h-full w-0 transition-all duration-300"></div>
+                        </div>
+                        <p id="password-strength-text" class="text-xs mt-1 text-gray-500"></p>
+                    </div>
+                </div>
+
+                <div class="mb-4">
+                    <label for="register-password-confirm" class="block text-sm font-medium text-gray-700 mb-2">Подтвердите пароль</label>
+                    <div class="relative">
+                        <input 
+                            type="password" 
+                            id="register-password-confirm" 
+                            name="password_confirm"
+                            class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-gray-500 focus:border-transparent outline-none transition duration-200"
+                            placeholder="Повторите пароль"
+                            required
+                        />
+                        <button 
+                            type="button" 
+                            class="toggle-password absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600"
+                            onclick="togglePassword(this)"
+                        >
+                            <svg class="eye-open w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path>
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"></path>
+                            </svg>
+                            <svg class="eye-closed w-5 h-5 hidden" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21"></path>
+                            </svg>
+                        </button>
+                    </div>
+                    <p id="password-match-error" class="text-xs mt-1 text-red-500 hidden">Пароли не совпадают</p>
+                </div>
+
+                <div id="register-error" class="hidden mb-4 p-3 bg-red-100 border border-red-300 text-red-700 rounded-lg text-sm"></div>
+
+                <div id="register-success" class="hidden mb-4 p-3 bg-green-100 border border-green-300 text-green-700 rounded-lg text-sm"></div>
+
+                <button 
+                    type="submit" 
+                    id="register-submit"
+                    class="w-full bg-gray-500 text-white py-3 px-4 rounded-lg hover:bg-gray-600 transition duration-200 font-medium disabled:bg-gray-300 disabled:cursor-not-allowed"
+                >
+                    Зарегистрироваться
+                </button>
+            </form>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script type="text/javascript" src="/static/auth.js"></script>
+{% endblock %}

library_service/templates/base.html

@@ -0,0 +1,77 @@
+<!doctype html>
+<html lang="ru">
+    <head>
+        <title>{% block title %}LiB{% endblock %}</title>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <script async="" src="https://cdnjs.cloudflare.com/ajax/libs/js-sha256/0.11.0/sha256.min.js"></script>
+        <script src="https://cdnjs.cloudflare.com/ajax/libs/cash/8.1.5/cash.min.js"></script>
+        <script src="https://cdn.tailwindcss.com"></script>
+        <link rel="stylesheet" href="/static/styles.css" />
+        {% block extra_head %}{% endblock %}
+    </head>
+    <body class="flex flex-col min-h-screen bg-gray-100">
+        <header class="bg-gray-500 text-white p-4 shadow-md">
+            <div class="mx-auto pl-5 pr-3 flex justify-between items-center">
+                <a class="flex gap-4 items-center max-w-10 h-auto" href="/">
+                    <img class="invert" src="/static/logo.svg" />
+                    <h1 class="text-2xl font-bold">LiB</h1>
+                </a>
+                <nav>
+                    <ul class="flex space-x-4">
+                        <li><a href="/" class="hover:text-gray-200">Главная</a></li>
+                        <li><a href="/books" class="hover:text-gray-200">Книги</a></li>
+                        <li><a href="/about" class="hover:text-gray-200">О нас</a></li>
+                        <li><a href="/api" class="hover:text-gray-200">API</a></li>
+                    </ul>
+                </nav>
+                <div class="relative" id="user-menu-area">
+                    <a href="/auth" id="guest-link" class="block hover:opacity-80 transition"><img class="w-6 h-6 invert" src="/static/avatar.svg" /></a>
+                    <button type="button" id="user-btn" class="hidden items-center gap-2 hover:opacity-80 transition focus:outline-none">
+                        <img 
+                            id="user-avatar" 
+                            src="https://www.gravatar.com/avatar/00000000000000000000000000000000?d=mp&f=y" 
+                            class="w-8 h-8 rounded-full border-2 border-white object-cover bg-gray-600"
+                            alt="User Avatar"
+                        />
+                        
+                        <svg id="user-arrow" class="w-4 h-4 transition-transform duration-200" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+                        </svg>
+                    </button>
+                    <div id="user-dropdown" class="hidden absolute right-0 mt-2 w-56 bg-white rounded-lg shadow-lg border border-gray-200 z-50 overflow-hidden">
+                        <div class="px-4 py-3 border-b border-gray-200">
+                            <p id="dropdown-name" class="text-sm font-semibold text-gray-900 truncate">Пользователь</p>
+                            <p id="dropdown-username" class="text-sm text-gray-500 truncate">@username</p>
+                            <p id="dropdown-email" class="text-xs text-gray-400 truncate mt-1">email@example.com</p>
+                        </div>
+                        <a href="/profile" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
+                            <svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+                            <p class="text-gray-700 text-sm">Мой профиль</p>
+                        </a>
+                        <a href="/my-books" class="flex items-center px-4 py-2 text-sm hover:bg-gray-100">
+                            <svg class="w-4 h-4 mr-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path></svg>
+                            <p class="text-gray-700 text-sm">Мои книги</p>
+                        </a>
+                        <div class="border-t border-gray-200 mt-1 pt-1">
+                            <button type="button" id="logout-btn" class="flex items-center w-full px-4 py-2 text-sm text-red-600 hover:bg-red-50">
+                                <svg class="w-4 h-4 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 16l4-4m0 0l-4-4m4 4H7m6 4v1a3 3 0 01-3 3H6a3 3 0 01-3-3V7a3 3 0 013-3h4a3 3 0 013 3v1"></path></svg>
+                                <p class="text-gray-700 text-sm">Выйти</p>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </header>
+        
+        {% block content %}{% endblock %}
+        
+        <footer class="bg-gray-800 text-white p-4 mt-8">
+            <div class="container mx-auto text-center">
+                <p>&copy; 2025 My Awesome Library. All rights reserved.</p>
+            </div>
+        </footer>
+
+        {% block scripts %}{% endblock %}
+    </body>
+</html>

library_service/templates/books.html

@@ -0,0 +1,66 @@
+{% extends "base.html" %}
+
+{% block title %}LiB - Главная{% endblock %}
+
+{% block content %}
+<div class="flex flex-1 mt-4 p-4">
+    <aside class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96">
+        <h2 class="text-xl font-semibold mb-4">Фильтры</h2>
+        <div class="mb-4">
+            <h3 class="font-medium mb-2">Авторы</h3>
+            <div class="relative">
+                <div class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white" id="selected-authors-container">
+                    <input type="text" id="author-search-input" class="flex-grow outline-none bg-transparent" placeholder="Начните вводить..." />
+                </div>
+                <div id="author-dropdown" class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto"></div>
+            </div>
+        </div>
+        <div class="mb-4">
+            <h3 class="font-medium mb-2">Жанры</h3>
+            <ul id="genres-list"></ul>
+        </div>
+        <button class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200">
+            Применить фильтры
+        </button>
+    </aside>
+
+    <main class="flex-1">
+        <div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
+            <div>
+                <h3 class="text-lg font-bold mb-1">Product Title 1</h3>
+                <p class="text-gray-700 text-sm">
+                    A short description of the product, highlighting its
+                    key features and benefits.
+                </p>
+            </div>
+            <span class="text-lg font-semibold text-gray-600">$29.99</span>
+        </div>
+
+        <div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
+            <div>
+                <h3 class="text-lg font-bold mb-1">Product Title 2</h3>
+                <p class="text-gray-700 text-sm">
+                    Another great product with amazing features. You'll
+                    love it!
+                </p>
+            </div>
+            <span class="text-lg font-semibold text-blue-600">$49.99</span>
+        </div>
+
+        <div class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start">
+            <div>
+                <h3 class="text-lg font-bold mb-1">Product Title 3</h3>
+                <p class="text-gray-700 text-sm">
+                    This product is a must-have for every modern home.
+                    High quality and durable.
+                </p>
+            </div>
+            <span class="text-lg font-semibold text-gray-600">$19.99</span>
+        </div>
+    </main>
+</div>
+{% endblock %}
+
+{% block scripts %}
+<script type="text/javascript" src="/static/books.js"></script>
+{% endblock %}

library_service/templates/index.html

@@ -1,138 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <title>LiB</title>
-        <script src="https://cdn.tailwindcss.com"></script>
-        <link rel="stylesheet" href="static/styles.css" />
-    </head>
-    <body class="flex flex-col min-h-screen bg-gray-100">
-        <!-- Header -->
-        <header class="bg-gray-500 text-white p-4 shadow-md">
-            <div class="mx-auto pl-5 pr-3 flex justify-between items-center">
-                <a class="flex gap-4 items-center max-w-10 h-auto" href="/">
-                    <img class="invert" src="static/logo.svg" />
-                    <h1 class="text-2xl font-bold">LiB</h1>
-                </a>
-                <nav>
-                    <ul class="flex space-x-4">
-                        <li>
-                            <a href="/" class="hover:text-gray-200">Home</a>
-                        </li>
-                        <li>
-                            <a href="#" class="hover:text-gray-200">Products</a>
-                        </li>
-                        <li>
-                            <a href="#" class="hover:text-gray-200">About</a>
-                        </li>
-                        <li>
-                            <a href="/api" class="hover:text-gray-200">API</a>
-                        </li>
-                    </ul>
-                </nav>
-                <img class="max-w-6 h-auto invert" src="static/avatar.svg" />
-            </div>
-        </header>
-
-        <!-- Main -->
-        <div class="flex flex-1 mt-4 p-4">
-            <aside
-                class="w-1/4 bg-white p-4 rounded-lg shadow-md mr-4 h-fit resize-x overflow-auto min-w-64 max-w-96"
-            >
-                <h2 class="text-xl font-semibold mb-4">Фильтры</h2>
-                <!-- Authors -->
-                <div class="mb-4">
-                    <h3 class="font-medium mb-2">Авторы</h3>
-                    <div class="relative">
-                        <div
-                            class="flex flex-wrap gap-2 p-2 border border-gray-300 rounded-md bg-white"
-                            id="selected-authors-container"
-                        >
-                            <input
-                                type="text"
-                                id="author-search-input"
-                                class="flex-grow outline-none bg-transparent"
-                                placeholder="Начните вводить..."
-                            />
-                        </div>
-                        <div
-                            id="author-dropdown"
-                            class="absolute z-10 w-full bg-white border border-gray-300 rounded-md mt-1 hidden max-h-60 overflow-y-auto"
-                        ></div>
-                    </div>
-                </div>
-                <!-- Genres -->
-                <div class="mb-4">
-                    <h3 class="font-medium mb-2">Жанры</h3>
-                    <ul id="genres-list"></ul>
-                </div>
-                <!-- Apply -->
-                <button
-                    class="w-full bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition duration-200"
-                >
-                    Применить фильтры
-                </button>
-            </aside>
-
-            <!-- Main Area -->
-            <main class="flex-1">
-                <!-- Book Card 1 -->
-                <div
-                    class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
-                >
-                    <div>
-                        <h3 class="text-lg font-bold mb-1">Product Title 1</h3>
-                        <p class="text-gray-700 text-sm">
-                            A short description of the product, highlighting its
-                            key features and benefits.
-                        </p>
-                    </div>
-                    <span class="text-lg font-semibold text-gray-600"
-                        >$29.99</span
-                    >
-                </div>
-
-                <!-- Book Card 2 -->
-                <div
-                    class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
-                >
-                    <div>
-                        <h3 class="text-lg font-bold mb-1">Product Title 2</h3>
-                        <p class="text-gray-700 text-sm">
-                            Another great product with amazing features. You'll
-                            love it!
-                        </p>
-                    </div>
-                    <span class="text-lg font-semibold text-blue-600"
-                        >$49.99</span
-                    >
-                </div>
-
-                <!-- Book Card 3 -->
-                <div
-                    class="bg-white p-4 rounded-lg shadow-md mb-4 flex justify-between items-start"
-                >
-                    <div>
-                        <h3 class="text-lg font-bold mb-1">Product Title 3</h3>
-                        <p class="text-gray-700 text-sm">
-                            This product is a must-have for every modern home.
-                            High quality and durable.
-                        </p>
-                    </div>
-                    <span class="text-lg font-semibold text-gray-600"
-                        >$19.99</span
-                    >
-                </div>
-            </main>
-        </div>
-
-        <!-- Footer -->
-        <footer class="bg-gray-800 text-white p-4 mt-8">
-            <div class="container mx-auto text-center">
-                <p>&copy; 2025 My Awesome Library. All rights reserved.</p>
-            </div>
-        </footer>
-        <script type="text/javascript" src="static/script.js"></script>
-    </body>
-</html>

poetry.lock

@@ -1,4 +1,4 @@
-# This file is automatically @generated by Poetry 2.1.2 and should not be changed by hand.
+# This file is automatically @generated by Poetry 2.2.1 and should not be changed by hand.
 
 [[package]]
 name = "aiofiles"
@@ -59,6 +59,7 @@ files = [
 [package.dependencies]
 idna = ">=2.8"
 sniffio = ">=1.1"
+typing_extensions = {version = ">=4.5", markers = "python_version < \"3.13\""}
 
 [package.extras]
 doc = ["Sphinx (>=8.2,<9.0)", "packaging", "sphinx-autodoc-typehints (>=1.2.0)", "sphinx_rtd_theme"]
@@ -525,7 +526,7 @@ description = "Lightweight in-process concurrent programming"
 optional = false
 python-versions = ">=3.9"
 groups = ["main"]
-markers = "python_version == \"3.13\" and (platform_machine == \"aarch64\" or platform_machine == \"ppc64le\" or platform_machine == \"x86_64\" or platform_machine == \"amd64\" or platform_machine == \"AMD64\" or platform_machine == \"win32\" or platform_machine == \"WIN32\")"
+markers = "python_version < \"3.14\" and (platform_machine == \"aarch64\" or platform_machine == \"ppc64le\" or platform_machine == \"x86_64\" or platform_machine == \"amd64\" or platform_machine == \"AMD64\" or platform_machine == \"win32\" or platform_machine == \"WIN32\")"
 files = [
     {file = "greenlet-3.2.3-cp310-cp310-macosx_11_0_universal2.whl", hash = "sha256:1afd685acd5597349ee6d7a88a8bec83ce13c106ac78c196ee9dde7c04fe87be"},
     {file = "greenlet-3.2.3-cp310-cp310-manylinux2014_aarch64.manylinux_2_17_aarch64.whl", hash = "sha256:761917cac215c61e9dc7324b2606107b3b292a8349bdebb31503ab4de3f559ac"},
@@ -1471,6 +1472,7 @@ files = [
 
 [package.dependencies]
 pytest = ">=8.2,<10"
+typing-extensions = {version = ">=4.12", markers = "python_version < \"3.13\""}
 
 [package.extras]
 docs = ["sphinx (>=5.3)", "sphinx-rtd-theme (>=1)"]
@@ -1855,11 +1857,12 @@ version = "4.15.0"
 description = "Backported and Experimental Type Hints for Python 3.9+"
 optional = false
 python-versions = ">=3.9"
-groups = ["main"]
+groups = ["main", "dev"]
 files = [
     {file = "typing_extensions-4.15.0-py3-none-any.whl", hash = "sha256:f0fa19c6845758ab08074a0cfa8b7aecb71c999ca73d62883bc25cc018c4e548"},
     {file = "typing_extensions-4.15.0.tar.gz", hash = "sha256:0cea48d173cc12fa28ecabc3b837ea3cf6f38c6d1136f85cbaaf598984861466"},
 ]
+markers = {dev = "python_version == \"3.12\""}
 
 [[package]]
 name = "typing-inspection"
@@ -2243,5 +2246,5 @@ files = [
 
 [metadata]
 lock-version = "2.1"
-python-versions = "^3.13"
-content-hash = "2fdd550e819b1456733250a62196acb442127a296ff60e010c424ecbebec294e"
+python-versions = "^3.12"
+content-hash = "a8d44f0decfa3ba437e998207c16ca7429ee42e930e8aa1d40f87231e71f219f"

pyproject.toml

@@ -7,7 +7,7 @@ readme = "README.md"
 packages = [{ include = "library_service" }]
 
 [tool.poetry.dependencies]
-python = "^3.13"
+python = "^3.12"
 fastapi = { extras = ["all"], version = "^0.115.12" }
 psycopg2-binary = "^2.9.10"
 alembic = "^1.16.1"
@@ -28,9 +28,6 @@ isort = "^7.0.0"
 pytest-asyncio = "^1.3.0"
 pylint = "^4.0.4"
 
-[tool.poetry.requires-plugins]
-poetry-plugin-export = ">=1.8"
-
 [build-system]
 requires = ["poetry-core"]
 build-backend = "poetry.core.masonry.api"