mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 04:31:09 +00:00
Добавление зарплаты для ролей, добавление статусов книг, обновление фронтэнда
This commit is contained in:
+123
-501
@@ -1,509 +1,131 @@
|
||||
$(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(`
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-start">
|
||||
<!-- Аватар -->
|
||||
<div class="relative mb-4 sm:mb-0 sm:mr-6">
|
||||
<img src="${avatarUrl}" alt="Аватар"
|
||||
class="w-24 h-24 rounded-full object-cover border-4 border-gray-200"
|
||||
onerror="this.style.display='none'; this.nextElementSibling.style.display='flex';">
|
||||
<div class="w-24 h-24 bg-gray-500 text-white rounded-full items-center justify-center text-4xl font-bold hidden">
|
||||
${firstLetter}
|
||||
</div>
|
||||
<!-- Статус верификации -->
|
||||
${user.is_verified ? `
|
||||
<div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1" title="Подтверждённый аккаунт">
|
||||
<svg class="w-4 h-4 text-white" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
</div>
|
||||
` : ''}
|
||||
</div>
|
||||
|
||||
<!-- Информация -->
|
||||
<div class="flex-1 text-center sm:text-left">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1">${escapeHtml(displayName)}</h1>
|
||||
<p class="text-gray-500 mb-3">@${escapeHtml(user.username)}</p>
|
||||
|
||||
<!-- Статусы -->
|
||||
<div class="flex flex-wrap justify-center sm:justify-start gap-2">
|
||||
${user.is_active ? `
|
||||
<span class="inline-flex items-center bg-green-100 text-green-800 text-sm px-3 py-1 rounded-full">
|
||||
<span class="w-2 h-2 bg-green-500 rounded-full mr-2"></span>
|
||||
Активен
|
||||
</span>
|
||||
` : `
|
||||
<span class="inline-flex items-center bg-red-100 text-red-800 text-sm px-3 py-1 rounded-full">
|
||||
<span class="w-2 h-2 bg-red-500 rounded-full mr-2"></span>
|
||||
Заблокирован
|
||||
</span>
|
||||
`}
|
||||
${user.is_verified ? `
|
||||
<span class="inline-flex items-center bg-blue-100 text-blue-800 text-sm px-3 py-1 rounded-full">
|
||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M6.267 3.455a3.066 3.066 0 001.745-.723 3.066 3.066 0 013.976 0 3.066 3.066 0 001.745.723 3.066 3.066 0 012.812 2.812c.051.643.304 1.254.723 1.745a3.066 3.066 0 010 3.976 3.066 3.066 0 00-.723 1.745 3.066 3.066 0 01-2.812 2.812 3.066 3.066 0 00-1.745.723 3.066 3.066 0 01-3.976 0 3.066 3.066 0 00-1.745-.723 3.066 3.066 0 01-2.812-2.812 3.066 3.066 0 00-.723-1.745 3.066 3.066 0 010-3.976 3.066 3.066 0 00.723-1.745 3.066 3.066 0 012.812-2.812zm7.44 5.252a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Подтверждён
|
||||
</span>
|
||||
` : `
|
||||
<span class="inline-flex items-center bg-yellow-100 text-yellow-800 text-sm px-3 py-1 rounded-full">
|
||||
<svg class="w-4 h-4 mr-1" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
Не подтверждён
|
||||
</span>
|
||||
`}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function renderAccountInfo(user) {
|
||||
const $container = $("#account-container");
|
||||
|
||||
$container.html(`
|
||||
<div class="space-y-4">
|
||||
<!-- ID пользователя -->
|
||||
<div class="flex items-center justify-between py-3 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 20l4-16m2 16l4-16M6 9h14M4 15h14"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">ID пользователя</p>
|
||||
<p class="text-gray-900">${user.id}</p>
|
||||
const token = localStorage.getItem("access_token");
|
||||
if (!token) {
|
||||
window.location.href = "/auth";
|
||||
return;
|
||||
}
|
||||
|
||||
loadProfile();
|
||||
|
||||
function loadProfile() {
|
||||
Promise.all([
|
||||
Api.get("/api/auth/me"),
|
||||
Api.get("/api/auth/roles").catch(() => ({ roles: [] })),
|
||||
])
|
||||
.then(async ([user, rolesData]) => {
|
||||
document.title = `LiB - ${user.full_name || user.username}`;
|
||||
await renderProfileHeader(user);
|
||||
renderInfo(user);
|
||||
renderRoles(user.roles || [], rolesData.roles || []);
|
||||
|
||||
$("#account-section, #roles-section").removeClass("hidden");
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error(error);
|
||||
Utils.showToast("Ошибка загрузки профиля", "error");
|
||||
});
|
||||
}
|
||||
|
||||
async function renderProfileHeader(user) {
|
||||
const avatarUrl = await Utils.getGravatarUrl(user.email);
|
||||
const displayName = Utils.escapeHtml(user.full_name || user.username);
|
||||
|
||||
$("#profile-card").html(`
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-start">
|
||||
<div class="relative mb-4 sm:mb-0 sm:mr-6">
|
||||
<img src="${avatarUrl}" class="w-24 h-24 rounded-full object-cover border-4 border-gray-200">
|
||||
${user.is_verified ? '<div class="absolute -bottom-1 -right-1 bg-green-500 rounded-full p-1 border-2 border-white"><svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"/></svg></div>' : ""}
|
||||
</div>
|
||||
<div class="flex-1 text-center sm:text-left">
|
||||
<h1 class="text-2xl font-bold text-gray-900 mb-1">${displayName}</h1>
|
||||
<p class="text-gray-500 mb-3">@${Utils.escapeHtml(user.username)}</p>
|
||||
<span class="inline-flex items-center px-3 py-1 rounded-full text-sm ${user.is_active ? "bg-green-100 text-green-800" : "bg-red-100 text-red-800"}">
|
||||
${user.is_active ? "Активен" : "Заблокирован"}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Имя пользователя -->
|
||||
<div class="flex items-center justify-between py-3 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-gray-400 mr-3" 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"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Имя пользователя</p>
|
||||
<p class="text-gray-900">@${escapeHtml(user.username)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Полное имя -->
|
||||
<div class="flex items-center justify-between py-3 border-b border-gray-100">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V8a2 2 0 00-2-2h-5m-4 0V5a2 2 0 114 0v1m-4 0a2 2 0 104 0m-5 8a2 2 0 100-4 2 2 0 000 4zm0 0c1.306 0 2.417.835 2.83 2M9 14a3.001 3.001 0 00-2.83 2M15 11h3m-3 4h2"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Полное имя</p>
|
||||
<p class="text-gray-900">${escapeHtml(user.full_name || "Не указано")}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Email -->
|
||||
<div class="flex items-center justify-between py-3">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-gray-400 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"/>
|
||||
</svg>
|
||||
<div>
|
||||
<p class="text-sm text-gray-500">Email</p>
|
||||
<p class="text-gray-900">${escapeHtml(user.email)}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
function renderRoles(userRoles, allRoles) {
|
||||
const $container = $("#roles-container");
|
||||
|
||||
if (!userRoles || userRoles.length === 0) {
|
||||
$container.html(`
|
||||
<p class="text-gray-500">У вас нет назначенных ролей</p>
|
||||
`);
|
||||
return;
|
||||
}
|
||||
|
||||
const roleDescriptions = {};
|
||||
allRoles.forEach((role) => {
|
||||
roleDescriptions[role.name] = role.description;
|
||||
});
|
||||
|
||||
const roleIcons = {
|
||||
admin: `<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"/>
|
||||
</svg>`,
|
||||
librarian: `<svg class="w-5 h-5" 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"/>
|
||||
</svg>`,
|
||||
member: `<svg class="w-5 h-5" 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"/>
|
||||
</svg>`,
|
||||
};
|
||||
|
||||
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 = '<div class="space-y-3">';
|
||||
|
||||
userRoles.forEach((roleName) => {
|
||||
const description = roleDescriptions[roleName] || "Описание недоступно";
|
||||
const icon = roleIcons[roleName] || roleIcons.member;
|
||||
const colorClass = roleColors[roleName] || roleColors.member;
|
||||
|
||||
rolesHtml += `
|
||||
<div class="flex items-center p-4 rounded-lg border ${colorClass}">
|
||||
<div class="flex-shrink-0 mr-4">
|
||||
${icon}
|
||||
}
|
||||
|
||||
function renderInfo(user) {
|
||||
const fields = [
|
||||
{ label: "ID пользователя", value: user.id },
|
||||
{ label: "Email", value: user.email },
|
||||
{ label: "Полное имя", value: user.full_name || "Не указано" },
|
||||
];
|
||||
|
||||
const html = fields
|
||||
.map(
|
||||
(f) => `
|
||||
<div class="flex justify-between py-2 border-b last:border-0">
|
||||
<span class="text-gray-500">${f.label}</span>
|
||||
<span class="font-medium text-gray-900">${Utils.escapeHtml(String(f.value))}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h4 class="font-medium capitalize">${escapeHtml(roleName)}</h4>
|
||||
<p class="text-sm opacity-75">${escapeHtml(description)}</p>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
});
|
||||
|
||||
rolesHtml += '</div>';
|
||||
|
||||
$container.html(rolesHtml);
|
||||
}
|
||||
|
||||
function renderActions() {
|
||||
const $container = $("#actions-container");
|
||||
|
||||
$container.html(`
|
||||
<div class="space-y-3">
|
||||
<!-- Смена пароля -->
|
||||
<button id="change-password-btn" class="w-full flex items-center justify-between p-4 bg-gray-50 hover:bg-gray-100 rounded-lg transition-colors">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-gray-500 mr-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z"/>
|
||||
</svg>
|
||||
<span class="text-gray-700">Сменить пароль</span>
|
||||
</div>
|
||||
<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 id="logout-profile-btn" class="w-full flex items-center justify-between p-4 bg-red-50 hover:bg-red-100 rounded-lg transition-colors">
|
||||
<div class="flex items-center">
|
||||
<svg class="w-5 h-5 text-red-500 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"/>
|
||||
</svg>
|
||||
<span class="text-red-700">Выйти из аккаунта</span>
|
||||
</div>
|
||||
<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="M9 5l7 7-7 7"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$("#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(`
|
||||
<div class="flex flex-col sm:flex-row items-center sm:items-start animate-pulse">
|
||||
<div class="w-24 h-24 bg-gray-200 rounded-full mb-4 sm:mb-0 sm:mr-6"></div>
|
||||
<div class="flex-1 text-center sm:text-left">
|
||||
<div class="h-7 bg-gray-200 rounded w-48 mx-auto sm:mx-0 mb-2"></div>
|
||||
<div class="h-5 bg-gray-200 rounded w-32 mx-auto sm:mx-0 mb-3"></div>
|
||||
<div class="flex justify-center sm:justify-start gap-2">
|
||||
<div class="h-7 bg-gray-200 rounded-full w-20"></div>
|
||||
<div class="h-7 bg-gray-200 rounded-full w-28"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$accountContainer.html(`
|
||||
<div class="space-y-4 animate-pulse">
|
||||
${Array(4)
|
||||
.fill()
|
||||
.map(
|
||||
() => `
|
||||
<div class="flex items-center py-3 border-b border-gray-100">
|
||||
<div class="w-5 h-5 bg-gray-200 rounded mr-3"></div>
|
||||
<div>
|
||||
<div class="h-3 bg-gray-200 rounded w-16 mb-2"></div>
|
||||
<div class="h-4 bg-gray-200 rounded w-40"></div>
|
||||
</div>
|
||||
</div>
|
||||
`
|
||||
)
|
||||
.join("")}
|
||||
</div>
|
||||
`);
|
||||
|
||||
$rolesContainer.html(`
|
||||
<div class="space-y-3 animate-pulse">
|
||||
<div class="h-16 bg-gray-200 rounded-lg"></div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$actionsContainer.html(`
|
||||
<div class="space-y-3 animate-pulse">
|
||||
<div class="h-14 bg-gray-200 rounded-lg"></div>
|
||||
<div class="h-14 bg-gray-200 rounded-lg"></div>
|
||||
</div>
|
||||
`);
|
||||
}
|
||||
|
||||
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(`
|
||||
<div class="text-center py-8">
|
||||
<svg class="mx-auto h-16 w-16 text-red-400 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"/>
|
||||
</svg>
|
||||
<h3 class="text-xl font-medium text-gray-900 mb-2">${escapeHtml(message)}</h3>
|
||||
<p class="text-gray-500 mb-6">Не удалось загрузить профиль</p>
|
||||
<div class="flex justify-center gap-4">
|
||||
<button id="retry-btn" class="bg-gray-500 text-white px-6 py-2 rounded-lg hover:bg-gray-600 transition-colors">
|
||||
Попробовать снова
|
||||
</button>
|
||||
<a href="/" class="bg-white text-gray-700 px-6 py-2 rounded-lg border border-gray-300 hover:bg-gray-50 transition-colors">
|
||||
На главную
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
`);
|
||||
|
||||
$("#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);
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
$("#account-info").html(html);
|
||||
}
|
||||
|
||||
function renderRoles(userRoles, allRoles) {
|
||||
const $container = $("#roles-container");
|
||||
if (userRoles.length === 0) {
|
||||
$container.html('<p class="text-gray-500">Нет ролей</p>');
|
||||
return;
|
||||
}
|
||||
|
||||
if (currentUser) {
|
||||
showUser(currentUser);
|
||||
const roleMap = {};
|
||||
allRoles.forEach((r) => (roleMap[r.name] = r.description));
|
||||
|
||||
const html = userRoles
|
||||
.map(
|
||||
(role) => `
|
||||
<div class="p-3 bg-blue-50 border border-blue-100 rounded text-blue-800">
|
||||
<div class="font-bold capitalize">${Utils.escapeHtml(role)}</div>
|
||||
<div class="text-xs opacity-75">${Utils.escapeHtml(roleMap[role] || "")}</div>
|
||||
</div>
|
||||
`,
|
||||
)
|
||||
.join("");
|
||||
|
||||
$container.html(html);
|
||||
}
|
||||
|
||||
$("#submit-password-btn").on("click", async function () {
|
||||
const $btn = $(this);
|
||||
const newPass = $("#new-password").val();
|
||||
const confirm = $("#confirm-password").val();
|
||||
|
||||
if (newPass !== confirm) {
|
||||
Utils.showToast("Пароли не совпадают", "error");
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
if (newPass.length < 4) {
|
||||
Utils.showToast("Пароль слишком короткий", "error");
|
||||
return;
|
||||
}
|
||||
|
||||
$btn.prop("disabled", true).text("Меняем...");
|
||||
|
||||
try {
|
||||
await Api.request("/api/auth/me", {
|
||||
method: "PUT",
|
||||
body: JSON.stringify({
|
||||
password: newPass,
|
||||
}),
|
||||
});
|
||||
|
||||
Utils.showToast("Пароль успешно изменен", "success");
|
||||
window.dispatchEvent(new CustomEvent("close-modal"));
|
||||
|
||||
$("#change-password-form")[0].reset();
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
Utils.showToast(error.message || "Ошибка смены пароля", "error");
|
||||
} finally {
|
||||
$btn.prop("disabled", false).text("Сменить");
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user