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

2026-02-04 04:31:09 +00:00 · 2025-12-19 12:35:51 +03:00
parent 16a043843a
commit f6ac03a869
11 changed files with 836 additions and 164 deletions
@@ -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")
@@ -31,7 +31,13 @@ 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)
@@ -61,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="Информация о сервисе",
@@ -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();
+        });
+    }
+  });
@@ -1,7 +1,7 @@
 $(document).ready(function () {
  Promise.all([
-    fetch("/authors").then((response) => response.json()),
-    fetch("/genres").then((response) => response.json()),
+    fetch("/api/authors").then((response) => response.json()),
+    fetch("/api/genres").then((response) => response.json()),
  ])
    .then(([authorsData, genresData]) => {
      const $dropdown = $("#author-dropdown");
@@ -112,4 +112,106 @@ $(document).ready(function () {

    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();
+      });
+  }
+});
@@ -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);
+}
@@ -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 %}
@@ -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>
@@ -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 %}
@@ -1,139 +0,0 @@
-<!doctype html>
-<html lang="en">
-    <head>
-        <title>LiB</title>
-        <meta charset="UTF-8" />
-        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-        <script src="https://unpkg.com/cash-dom@1.4.0/dist/cash.min.js"></script>
-        <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">books</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>