From 82d298effe3ea0c03005e66cbd2c53371f060b55 Mon Sep 17 00:00:00 2001
From: wowlikon <wowlikon@gmail.com>
Date: Mon, 22 Dec 2025 22:25:51 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D0=B2=D1=80=D0=B5=D0=BC=D0=B5=D0=BD=D0=BD?=
 =?UTF-8?q?=D0=BE=D0=B9=20=D0=B0=D0=B2=D1=82=D0=BE=D1=80=D0=B8=D0=B7=D0=B0?=
 =?UTF-8?q?=D1=86=D0=B8=D0=B8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 library_service/static/auth.js          |  40 ++++--
 library_service/static/author.js        |   2 +-
 library_service/static/book.js          |   4 +-
 library_service/static/books.js         |   2 +-
 library_service/static/create_author.js |   2 +-
 library_service/static/create_book.js   |   2 +-
 library_service/static/create_genre.js  |   2 +-
 library_service/static/edit_book.js     |   2 +-
 library_service/static/edit_genre.js    |   2 +-
 library_service/static/profile.js       |   2 +-
 library_service/static/styles.css       | 155 +++++++++++-------------
 library_service/static/utils.js         |  63 +++++++---
 library_service/templates/auth.html     |   3 -
 13 files changed, 154 insertions(+), 127 deletions(-)

diff --git a/library_service/static/auth.js b/library_service/static/auth.js
index c8aac95..9bb33d0 100644
--- a/library_service/static/auth.js
+++ b/library_service/static/auth.js
@@ -1,6 +1,6 @@
 $(() => {
   $("#login-tab").on("click", function () {
-    $("#login-tab")
+    $(this)
       .removeClass("text-gray-400 hover:text-gray-600")
       .addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
     $("#register-tab")
@@ -12,7 +12,7 @@ $(() => {
   });
 
   $("#register-tab").on("click", function () {
-    $("#register-tab")
+    $(this)
       .removeClass("text-gray-400 hover:text-gray-600")
       .addClass("text-gray-700 bg-gray-50 border-b-2 border-gray-500");
     $("#login-tab")
@@ -23,6 +23,15 @@ $(() => {
     $("#login-form").addClass("hidden");
   });
 
+  $("body").on("click", ".toggle-password", function () {
+    const $btn = $(this);
+    const $input = $btn.siblings("input");
+
+    const isPassword = $input.attr("type") === "password";
+    $input.attr("type", isPassword ? "text" : "password");
+    $btn.find("svg").toggleClass("hidden");
+  });
+
   $("#register-password").on("input", function () {
     const password = $(this).val();
     let strength = 0;
@@ -74,6 +83,7 @@ $(() => {
     const username = $("#login-username").val();
     const password = $("#login-password").val();
 
+    const rememberMe = $("#remember-me").prop("checked");
     $submitBtn.prop("disabled", true).text("Вход...");
 
     try {
@@ -82,10 +92,17 @@ $(() => {
       formData.append("password", password);
 
       const data = await Api.postForm("/api/auth/token", formData);
+      const storage = rememberMe ? localStorage : sessionStorage;
+
+      storage.setItem("access_token", data.access_token);
+      if (rememberMe && data.refresh_token) {
+        storage.setItem("refresh_token", data.refresh_token);
+      }
+
+      const otherStorage = rememberMe ? sessionStorage : localStorage;
+      otherStorage.removeItem("access_token");
+      otherStorage.removeItem("refresh_token");
 
-      localStorage.setItem("access_token", data.access_token);
-      if (data.refresh_token)
-        localStorage.setItem("refresh_token", data.refresh_token);
       window.location.href = "/";
     } catch (error) {
       Utils.showToast(error.message || "Ошибка входа", "error");
@@ -117,7 +134,11 @@ $(() => {
     try {
       await Api.post("/api/auth/register", userData);
       Utils.showToast("Регистрация успешна! Войдите в систему.", "success");
-      setTimeout(() => window.location.reload(), 1500);
+
+      setTimeout(() => {
+        $("#login-tab").trigger("click");
+        $("#login-username").val(userData.username);
+      }, 1500);
     } catch (error) {
       let msg = error.message;
       if (Array.isArray(error.detail)) {
@@ -128,11 +149,4 @@ $(() => {
       $submitBtn.prop("disabled", false).text("Зарегистрироваться");
     }
   });
-
-  $("body").on("click", ".toggle-password", function () {
-    const $input = $(this).siblings("input");
-    const type = $input.attr("type") === "password" ? "text" : "password";
-    $input.attr("type", type);
-    $(this).find("svg").toggleClass("hidden");
-  });
 });
diff --git a/library_service/static/author.js b/library_service/static/author.js
index f641524..157bcee 100644
--- a/library_service/static/author.js
+++ b/library_service/static/author.js
@@ -12,7 +12,7 @@ $(document).ready(() => {
       document.title = `LiB - ${author.name}`;
       renderAuthor(author);
       renderBooks(author.books);
-      if (window.canManage) {
+      if (window.canManage()) {
         $("#edit-author-btn")
           .attr("href", `/author/${author.id}/edit`)
           .removeClass("hidden");
diff --git a/library_service/static/book.js b/library_service/static/book.js
index c28e8bf..0484086 100644
--- a/library_service/static/book.js
+++ b/library_service/static/book.js
@@ -57,7 +57,7 @@ $(document).ready(() => {
       currentBook = book;
       document.title = `LiB - ${book.title}`;
       renderBook(book);
-      if (window.canManage) {
+      if (window.canManage()) {
         $("#edit-book-btn")
           .attr("href", `/book/${book.id}/edit`)
           .removeClass("hidden");
@@ -123,7 +123,7 @@ $(document).ready(() => {
     $container.empty();
     const config = getStatusConfig(book.status);
 
-    if (window.canManage) {
+    if (window.canManage()) {
       const $dropdownHTML = $(`
                 <div class="relative inline-block text-left w-full md:w-auto">
                     <button id="status-toggle-btn" type="button" class="w-full justify-center md:w-auto inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold transition-all shadow-sm ${config.bgClass} ${config.textClass} hover:opacity-90 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-400">
diff --git a/library_service/static/books.js b/library_service/static/books.js
index 6054a1f..9f67490 100644
--- a/library_service/static/books.js
+++ b/library_service/static/books.js
@@ -403,7 +403,7 @@ $(document).ready(() => {
   });
 
   function showAdminControls() {
-    if (window.canManage) {
+    if (window.canManage()) {
       $("#admin-actions").removeClass("hidden");
     }
   }
diff --git a/library_service/static/create_author.js b/library_service/static/create_author.js
index 72a9cc2..db2454e 100644
--- a/library_service/static/create_author.js
+++ b/library_service/static/create_author.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  if (!window.canManage) return;
+  if (!window.canManage()) return;
   setTimeout(() => window.canManage, 100);
 
   const $form = $("#create-author-form");
diff --git a/library_service/static/create_book.js b/library_service/static/create_book.js
index a1e983c..699e0fb 100644
--- a/library_service/static/create_book.js
+++ b/library_service/static/create_book.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  if (!window.canManage) return;
+  if (!window.canManage()) return;
   setTimeout(() => window.canManage, 100);
 
   let allAuthors = [];
diff --git a/library_service/static/create_genre.js b/library_service/static/create_genre.js
index 9398b21..827202e 100644
--- a/library_service/static/create_genre.js
+++ b/library_service/static/create_genre.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  if (!window.canManage) return;
+  if (!window.canManage()) return;
   setTimeout(() => window.canManage, 100);
 
   const $form = $("#create-genre-form");
diff --git a/library_service/static/edit_book.js b/library_service/static/edit_book.js
index dcebb56..0bb3cc9 100644
--- a/library_service/static/edit_book.js
+++ b/library_service/static/edit_book.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  if (!window.canManage) return;
+  if (!window.canManage()) return;
   setTimeout(() => window.canManage, 100);
 
   const pathParts = window.location.pathname.split("/");
diff --git a/library_service/static/edit_genre.js b/library_service/static/edit_genre.js
index e963177..3d7e33f 100644
--- a/library_service/static/edit_genre.js
+++ b/library_service/static/edit_genre.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  if (!window.canManage) {
+  if (!window.canManage()) {
     Utils.showToast("У вас недостаточно прав", "error");
     setTimeout(() => (window.location.href = "/"), 1500);
     return;
diff --git a/library_service/static/profile.js b/library_service/static/profile.js
index c1f6623..bb81772 100644
--- a/library_service/static/profile.js
+++ b/library_service/static/profile.js
@@ -1,5 +1,5 @@
 $(document).ready(() => {
-  const token = localStorage.getItem("access_token");
+  const token = StorageHelper.get("access_token");
   if (!token) {
     window.location.href = "/auth";
     return;
diff --git a/library_service/static/styles.css b/library_service/static/styles.css
index e786f7a..f6e24e8 100644
--- a/library_service/static/styles.css
+++ b/library_service/static/styles.css
@@ -1,11 +1,74 @@
+@keyframes shake {
+    0%,
+    to {
+        transform: translateX(0);
+    }
+    10%,
+    30%,
+    50%,
+    70%,
+    90% {
+        transform: translateX(-5px);
+    }
+    20%,
+    40%,
+    60%,
+    80% {
+        transform: translateX(5px);
+    }
+}
+
+@keyframes fadeIn {
+    0% {
+        opacity: 0;
+        transform: translateY(-10px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes dropdownFade {
+    0% {
+        opacity: 0;
+        transform: translateY(-5px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+@keyframes pulse-soft {
+    0%,
+    to {
+        opacity: 1;
+    }
+    50% {
+        opacity: 0.7;
+    }
+}
+
+@keyframes fadeInUp {
+    0% {
+        opacity: 0;
+        transform: translateY(20px);
+    }
+    to {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
 @font-face {
     font-family: "Novem";
-    src: url("novem.regular.ttf") format("truetype");
+    src: url(novem.regular.ttf) format("truetype");
 }
 
 @font-face {
     font-family: "Dited";
-    src: url("dited.regular.ttf") format("truetype");
+    src: url(dited.regular.ttf) format("truetype");
 }
 
 h1 {
@@ -13,9 +76,9 @@ h1 {
     letter-spacing: 10px;
 }
 
-h2,
 .book-id,
 .book-status,
+h2,
 nav ul li a {
     font-family: "Dited", sans-serif;
     letter-spacing: 2.5px;
@@ -73,7 +136,7 @@ nav ul li a {
     top: 6px;
     width: 4px;
     height: 8px;
-    border: solid white;
+    border: solid #fff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
@@ -96,17 +159,6 @@ button:disabled {
     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);
 }
@@ -115,30 +167,10 @@ button:disabled {
     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-digit,
 #req-length,
-#req-upper,
 #req-lower,
-#req-digit {
+#req-upper {
     transition: color 0.2s ease;
 }
 
@@ -153,17 +185,6 @@ button:disabled {
     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;
@@ -175,17 +196,6 @@ button:disabled {
     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);
 }
@@ -198,16 +208,6 @@ button:disabled {
     min-width: 140px;
 }
 
-@keyframes pulse-soft {
-    0%,
-    100% {
-        opacity: 1;
-    }
-    50% {
-        opacity: 0.7;
-    }
-}
-
 .animate-pulse-soft {
     animation: pulse-soft 2s ease-in-out infinite;
 }
@@ -216,32 +216,21 @@ button:disabled {
     filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
 }
 
-@keyframes fadeInUp {
-    from {
-        opacity: 0;
-        transform: translateY(20px);
-    }
-    to {
-        opacity: 1;
-        transform: translateY(0);
-    }
-}
-
 .animate-fade-in-up {
     animation: fadeInUp 0.5s ease-out forwards;
 }
 
 .stat-card:hover svg {
     transform: scale(1.1);
-    transition: transform 0.3s ease;
 }
 
-.stat-card svg {
+.stat-card svg,
+.stat-card:hover svg {
     transition: transform 0.3s ease;
 }
 
 .gradient-text {
-    background: linear-gradient(135deg, #374151 0%, #6b7280 100%);
+    background: linear-gradient(135deg, #374151 0, #6b7280 100%);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
diff --git a/library_service/static/utils.js b/library_service/static/utils.js
index 369ebe7..93476a5 100644
--- a/library_service/static/utils.js
+++ b/library_service/static/utils.js
@@ -1,3 +1,22 @@
+const StorageHelper = {
+  get: (key) => {
+    return localStorage.getItem(key) || sessionStorage.getItem(key);
+  },
+  getCurrentStorage: () => {
+    return localStorage.getItem("refresh_token")
+      ? localStorage
+      : sessionStorage;
+  },
+  clearAll: () => {
+    localStorage.removeItem("access_token");
+    localStorage.removeItem("refresh_token");
+    localStorage.removeItem("user");
+    sessionStorage.removeItem("access_token");
+    sessionStorage.removeItem("refresh_token");
+    sessionStorage.removeItem("user");
+  },
+};
+
 const Utils = {
   escapeHtml: (text) => {
     if (!text) return "";
@@ -59,7 +78,8 @@ const Api = {
 
   async request(endpoint, options = {}) {
     const fullUrl = this.getBaseUrl() + endpoint;
-    const token = localStorage.getItem("access_token");
+    const token = StorageHelper.get("access_token");
+
     const headers = {
       "Content-Type": "application/json",
       ...options.headers,
@@ -74,11 +94,13 @@ const Api = {
     try {
       const response = await fetch(fullUrl, config);
 
-      if (response.status === 401) {
+      const isLoginRequest = endpoint.includes("/auth/token");
+
+      if (response.status === 401 && !isLoginRequest) {
         const refreshed = await Auth.tryRefresh();
         if (refreshed) {
           headers["Authorization"] =
-            `Bearer ${localStorage.getItem("access_token")}`;
+            `Bearer ${StorageHelper.get("access_token")}`;
           const retryResponse = await fetch(fullUrl, { ...options, headers });
           if (retryResponse.ok) {
             return retryResponse.json();
@@ -90,7 +112,11 @@ const Api = {
 
       if (!response.ok) {
         const errorData = await response.json().catch(() => ({}));
-        throw new Error(errorData.detail || `Error ${response.status}`);
+        throw new Error(
+          errorData.detail ||
+            errorData.error_description ||
+            `Ошибка ${response.status}`,
+        );
       }
       return response.json();
     } catch (error) {
@@ -131,16 +157,16 @@ const Api = {
 
 const Auth = {
   logout: () => {
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("refresh_token");
-    localStorage.removeItem("user");
+    StorageHelper.clearAll();
     window.location.href = "/";
   },
 
   tryRefresh: async () => {
-    const refreshToken = localStorage.getItem("refresh_token");
+    const refreshToken = StorageHelper.get("refresh_token");
     if (!refreshToken) return false;
 
+    const activeStorage = StorageHelper.getCurrentStorage();
+
     try {
       const response = await fetch("/api/auth/refresh", {
         method: "POST",
@@ -150,8 +176,8 @@ const Auth = {
 
       if (response.ok) {
         const data = await response.json();
-        localStorage.setItem("access_token", data.access_token);
-        localStorage.setItem("refresh_token", data.refresh_token);
+        activeStorage.setItem("access_token", data.access_token);
+        activeStorage.setItem("refresh_token", data.refresh_token);
         return true;
       }
     } catch (e) {
@@ -161,14 +187,17 @@ const Auth = {
   },
 
   init: async () => {
-    const token = localStorage.getItem("access_token");
-    const refreshToken = localStorage.getItem("refresh_token");
+    const token = StorageHelper.get("access_token");
+    const refreshToken = StorageHelper.get("refresh_token");
 
     if (!token && !refreshToken) {
       localStorage.removeItem("user");
+      sessionStorage.removeItem("user");
       return null;
     }
 
+    const activeStorage = StorageHelper.getCurrentStorage();
+
     try {
       let response = await fetch("/api/auth/me", {
         headers: { Authorization: "Bearer " + token },
@@ -179,7 +208,7 @@ const Auth = {
         if (refreshed) {
           response = await fetch("/api/auth/me", {
             headers: {
-              Authorization: "Bearer " + localStorage.getItem("access_token"),
+              Authorization: "Bearer " + StorageHelper.get("access_token"),
             },
           });
         }
@@ -187,7 +216,7 @@ const Auth = {
 
       if (response.ok) {
         const user = await response.json();
-        localStorage.setItem("user", JSON.stringify(user));
+        activeStorage.setItem("user", JSON.stringify(user));
         document.dispatchEvent(new CustomEvent("auth:login", { detail: user }));
         return user;
       }
@@ -195,15 +224,13 @@ const Auth = {
       console.error("Auth check failed", e);
     }
 
-    localStorage.removeItem("access_token");
-    localStorage.removeItem("refresh_token");
-    localStorage.removeItem("user");
+    StorageHelper.clearAll();
     return null;
   },
 };
 
 window.getUser = function () {
-  const userJson = localStorage.getItem("user");
+  const userJson = StorageHelper.get("user");
   if (!userJson) return null;
   try {
     return JSON.parse(userJson);
diff --git a/library_service/templates/auth.html b/library_service/templates/auth.html
index b73cf24..3c93e5b 100644
--- a/library_service/templates/auth.html
+++ b/library_service/templates/auth.html
@@ -53,7 +53,6 @@ block content %}
                         <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"
@@ -190,7 +189,6 @@ block content %}
                         <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"
@@ -259,7 +257,6 @@ block content %}
                         <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"