$(document).ready(() => { let currentUser = null; let allRoles = []; const token = localStorage.getItem("access_token"); if (!token) { window.location.href = "/login"; return; } loadProfile(); function loadProfile() { showLoadingState(); Promise.all([ fetch("/api/auth/me", { headers: { Authorization: "Bearer " + token }, }).then((response) => { if (!response.ok) { if (response.status === 401) { throw new Error("Unauthorized"); } throw new Error(`HTTP error! status: ${response.status}`); } return response.json(); }), fetch("/api/auth/roles", { headers: { Authorization: "Bearer " + token }, }).then((response) => { if (response.ok) return response.json(); return { roles: [] }; }), ]) .then(([user, rolesData]) => { currentUser = user; allRoles = rolesData.roles || []; renderProfile(user); renderAccountInfo(user); renderRoles(user.roles, allRoles); renderActions(); document.title = `LiB - ${user.full_name || user.username}`; }) .catch((error) => { console.error("Error loading profile:", error); if (error.message === "Unauthorized") { localStorage.removeItem("access_token"); localStorage.removeItem("refresh_token"); window.location.href = "/login"; } else { showErrorState(error.message); } }); } function renderProfile(user) { const $card = $("#profile-card"); const displayName = user.full_name || user.username; const firstLetter = displayName.charAt(0).toUpperCase(); const emailHash = sha256(user.email.trim().toLowerCase()); const avatarUrl = `https://www.gravatar.com/avatar/${emailHash}?d=identicon&s=200`; $card.html(`
Аватар ${user.is_verified ? `
` : ''}

${escapeHtml(displayName)}

@${escapeHtml(user.username)}

${user.is_active ? ` Активен ` : ` Заблокирован `} ${user.is_verified ? ` Подтверждён ` : ` Не подтверждён `}
`); } function renderAccountInfo(user) { const $container = $("#account-container"); $container.html(`

ID пользователя

${user.id}

Имя пользователя

@${escapeHtml(user.username)}

Полное имя

${escapeHtml(user.full_name || "Не указано")}

Email

${escapeHtml(user.email)}

`); } function renderRoles(userRoles, allRoles) { const $container = $("#roles-container"); if (!userRoles || userRoles.length === 0) { $container.html(`

У вас нет назначенных ролей

`); return; } const roleDescriptions = {}; allRoles.forEach((role) => { roleDescriptions[role.name] = role.description; }); const roleIcons = { admin: ` `, librarian: ` `, member: ` `, }; const roleColors = { admin: "bg-red-100 text-red-800 border-red-200", librarian: "bg-blue-100 text-blue-800 border-blue-200", member: "bg-green-100 text-green-800 border-green-200", }; let rolesHtml = '
'; userRoles.forEach((roleName) => { const description = roleDescriptions[roleName] || "Описание недоступно"; const icon = roleIcons[roleName] || roleIcons.member; const colorClass = roleColors[roleName] || roleColors.member; rolesHtml += `
${icon}

${escapeHtml(roleName)}

${escapeHtml(description)}

`; }); rolesHtml += '
'; $container.html(rolesHtml); } function renderActions() { const $container = $("#actions-container"); $container.html(`
`); $("#change-password-btn").on("click", openPasswordModal); $("#logout-profile-btn").on("click", logout); } function openPasswordModal() { $("#password-modal").removeClass("hidden").addClass("flex"); $("#current-password").focus(); } function closePasswordModal() { $("#password-modal").removeClass("flex").addClass("hidden"); $("#password-form")[0].reset(); $("#password-error").addClass("hidden").text(""); } $("#close-password-modal, #cancel-password").on("click", closePasswordModal); $("#password-modal").on("click", function (e) { if (e.target === this) { closePasswordModal(); } }); $(document).on("keydown", function (e) { if (e.key === "Escape" && $("#password-modal").hasClass("flex")) { closePasswordModal(); } }); $("#password-form").on("submit", function (e) { e.preventDefault(); const currentPassword = $("#current-password").val(); const newPassword = $("#new-password").val(); const confirmPassword = $("#confirm-password").val(); const $error = $("#password-error"); if (newPassword !== confirmPassword) { $error.text("Пароли не совпадают").removeClass("hidden"); return; } if (newPassword.length < 6) { $error.text("Пароль должен содержать минимум 6 символов").removeClass("hidden"); return; } // TODO: смена пароля, 2FA // fetch("/api/auth/change-password", { // method: "POST", // headers: { // "Content-Type": "application/json", // Authorization: "Bearer " + token, // }, // body: JSON.stringify({ // current_password: currentPassword, // new_password: newPassword, // }), // }) // .then((response) => { // if (!response.ok) throw new Error("Ошибка смены пароля"); // return response.json(); // }) // .then(() => { // closePasswordModal(); // showNotification("Пароль успешно изменён", "success"); // }) // .catch((error) => { // $error.text(error.message).removeClass("hidden"); // }); $error.text("Функция смены пароля временно недоступна").removeClass("hidden"); }); function logout() { localStorage.removeItem("access_token"); localStorage.removeItem("refresh_token"); window.location.href = "/login"; } function showLoadingState() { const $profileCard = $("#profile-card"); const $accountContainer = $("#account-container"); const $rolesContainer = $("#roles-container"); const $actionsContainer = $("#actions-container"); $profileCard.html(`
`); $accountContainer.html(`
${Array(4) .fill() .map( () => `
` ) .join("")}
`); $rolesContainer.html(`
`); $actionsContainer.html(`
`); } function showErrorState(message) { const $profileCard = $("#profile-card"); const $accountSection = $("#account-section"); const $rolesSection = $("#roles-section"); const $actionsSection = $("#actions-section"); $accountSection.hide(); $rolesSection.hide(); $actionsSection.hide(); $profileCard.html(`

${escapeHtml(message)}

Не удалось загрузить профиль

На главную
`); $("#retry-btn").on("click", function () { $accountSection.show(); $rolesSection.show(); $actionsSection.show(); loadProfile(); }); } function escapeHtml(text) { if (!text) return ""; const div = document.createElement("div"); div.textContent = text; return div.innerHTML; } 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(); } }); $logoutBtn.on("click", logout); 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); } if (currentUser) { showUser(currentUser); } });