Добавление зарплаты для ролей, добавление статусов книг, обновление фронтэнда

library_service/templates/profile.html

@@ -1,69 +1,159 @@
-{% extends "base.html" %} {% block title %}LiB - Профиль{% endblock %} {% block
-content %}
-
-<div class="flex flex-1 mt-4 p-4">
-    <main class="flex-1 max-w-2xl mx-auto">
-        <div id="profile-card" class="bg-white p-6 rounded-lg shadow-md mb-6">
+{% extends "base.html" %} {% block content %}
+<div
+    class="container mx-auto p-4 max-w-2xl"
+    x-data="{ showPasswordModal: false }"
+    @close-modal.window="showPasswordModal = false"
+>
+    <div id="profile-card" class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div class="animate-pulse flex items-center">
+            <div class="w-24 h-24 bg-gray-200 rounded-full mr-6"></div>
+            <div class="h-6 bg-gray-200 w-48 rounded"></div>
         </div>
-        <div id="account-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
-            <h2 class="text-xl font-semibold mb-4">Информация об аккаунте</h2>
-            <div id="account-container">
-            </div>
-        </div>
-        <div id="roles-section" class="bg-white p-6 rounded-lg shadow-md mb-6">
-            <h2 class="text-xl font-semibold mb-4">Роли и права</h2>
-            <div id="roles-container">
-            </div>
-        </div>
-        <div id="actions-section" class="bg-white p-6 rounded-lg shadow-md">
-            <h2 class="text-xl font-semibold mb-4">Действия</h2>
-            <div id="actions-container">
-            </div>
-        </div>
-    </main>
-</div>
-<div id="password-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden items-center justify-center z-50">
-    <div class="bg-white rounded-lg shadow-xl p-6 w-full max-w-md mx-4">
-        <div class="flex justify-between items-center mb-4">
-            <h3 class="text-xl font-semibold">Смена пароля</h3>
-            <button id="close-password-modal" class="text-gray-400 hover:text-gray-600">
-                <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+    </div>
+    <div
+        id="account-section"
+        class="bg-white rounded-lg shadow-md p-6 mb-6 hidden"
+    >
+        <h2 class="text-xl font-bold mb-4 border-b pb-2">Информация</h2>
+        <div id="account-info" class="space-y-4"></div>
+    </div>
+    <div
+        id="roles-section"
+        class="bg-white rounded-lg shadow-md p-6 mb-6 hidden"
+    >
+        <h2 class="text-xl font-bold mb-4 border-b pb-2">Роли</h2>
+        <div id="roles-container" class="space-y-3"></div>
+    </div>
+    <div class="bg-white rounded-lg shadow-md p-6 mb-6">
+        <div class="space-y-3">
+            <button
+                @click="showPasswordModal = true"
+                class="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors"
+            >
+                <span class="text-gray-700 font-medium">Сменить пароль</span>
+                <svg
+                    class="w-5 h-5 text-gray-400"
+                    fill="none"
+                    stroke="currentColor"
+                    viewBox="0 0 24 24"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="2"
+                        d="M9 5l7 7-7 7"
+                    />
+                </svg>
+            </button>
+            <button
+                onclick="Auth.logout()"
+                class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors"
+            >
+                <span class="text-red-700 font-medium">Выйти из аккаунта</span>
+                <svg
+                    class="w-5 h-5 text-red-400"
+                    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"
+                    />
                 </svg>
             </button>
         </div>
-        <form id="password-form">
-            <div class="mb-4">
-                <label class="block text-gray-700 text-sm font-medium mb-2">Текущий пароль</label>
-                <input type="password" id="current-password" 
-                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
-                    required minlength="6">
+    </div>
+    <div
+        x-show="showPasswordModal"
+        class="fixed inset-0 z-50 overflow-y-auto"
+        style="display: none"
+    >
+        <div
+            class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0"
+        >
+            <div
+                x-show="showPasswordModal"
+                x-transition.opacity
+                class="fixed inset-0 transition-opacity"
+                aria-hidden="true"
+            >
+                <div
+                    class="absolute inset-0 bg-gray-500 opacity-75"
+                    @click="showPasswordModal = false"
+                ></div>
             </div>
-            <div class="mb-4">
-                <label class="block text-gray-700 text-sm font-medium mb-2">Новый пароль</label>
-                <input type="password" id="new-password" 
-                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
-                    required minlength="6">
+            <div
+                x-show="showPasswordModal"
+                x-transition.scale
+                class="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg w-full"
+            >
+                <div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+                    <h3
+                        class="text-lg leading-6 font-medium text-gray-900 mb-4"
+                    >
+                        Смена пароля
+                    </h3>
+                    <form id="change-password-form">
+                        <div class="mb-4">
+                            <label
+                                class="block text-gray-700 text-sm font-bold mb-2"
+                                >Текущий пароль</label
+                            >
+                            <input
+                                type="password"
+                                id="current-password"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            />
+                        </div>
+                        <div class="mb-4">
+                            <label
+                                class="block text-gray-700 text-sm font-bold mb-2"
+                                >Новый пароль</label
+                            >
+                            <input
+                                type="password"
+                                id="new-password"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            />
+                        </div>
+                        <div class="mb-4">
+                            <label
+                                class="block text-gray-700 text-sm font-bold mb-2"
+                                >Подтвердите пароль</label
+                            >
+                            <input
+                                type="password"
+                                id="confirm-password"
+                                class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+                            />
+                        </div>
+                    </form>
+                </div>
+                <div
+                    class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse"
+                >
+                    <button
+                        type="button"
+                        id="submit-password-btn"
+                        class="w-full inline-flex justify-center rounded-md border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-base font-medium text-white hover:bg-gray-700 sm:ml-3 sm:w-auto sm:text-sm"
+                    >
+                        Сменить
+                    </button>
+                    <button
+                        type="button"
+                        @click="showPasswordModal = false"
+                        class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-base font-medium text-gray-700 hover:bg-gray-50 sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm"
+                    >
+                        Отмена
+                    </button>
+                </div>
             </div>
-            <div class="mb-6">
-                <label class="block text-gray-700 text-sm font-medium mb-2">Подтвердите новый пароль</label>
-                <input type="password" id="confirm-password" 
-                    class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:border-gray-500"
-                    required minlength="6">
-            </div>
-            <div id="password-error" class="mb-4 text-red-600 text-sm hidden"></div>
-            <div class="flex gap-3">
-                <button type="submit" class="flex-1 bg-gray-500 text-white py-2 px-4 rounded-lg hover:bg-gray-600 transition-colors">
-                    Сменить пароль
-                </button>
-                <button type="button" id="cancel-password" class="flex-1 bg-white text-gray-700 py-2 px-4 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
-                    Отмена
-                </button>
-            </div>
-        </form>
+        </div>
     </div>
 </div>
-
 {% endblock %} {% block scripts %}
-<script type="text/javascript" src="/static/profile.js"></script>
-{% endblock %}
+<script src="/static/profile.js"></script>
+{% endblock %}