mirror of
https://github.com/wowlikon/LiB.git
synced 2026-02-04 12:31:09 +00:00
434 lines
20 KiB
HTML
434 lines
20 KiB
HTML
{% extends "base.html" %} {% block title %}Пользователи - LiB{% endblock %} {%
|
||
block content %}
|
||
<div class="container mx-auto p-4">
|
||
<div class="flex justify-between items-center mb-6">
|
||
<h1 class="text-2xl font-bold text-gray-800">
|
||
Управление пользователями
|
||
</h1>
|
||
<div class="text-sm text-gray-500">
|
||
Всего: <span id="total-users-count">0</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="bg-white p-4 rounded-lg shadow-md mb-6">
|
||
<div class="flex flex-col md:flex-row gap-4">
|
||
<div class="flex-1 relative">
|
||
<input
|
||
type="text"
|
||
id="user-search-input"
|
||
placeholder="Поиск по имени, username или email..."
|
||
class="w-full border rounded-lg pl-10 pr-4 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400 transition"
|
||
/>
|
||
<svg
|
||
class="absolute left-3 top-2.5 h-5 w-5 text-gray-400"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div class="relative">
|
||
<input
|
||
type="text"
|
||
id="role-filter-input"
|
||
placeholder="Фильтр по роли..."
|
||
class="w-full md:w-56 border rounded-lg px-3 py-2 text-sm focus:outline-none focus:ring-1 focus:ring-gray-400"
|
||
autocomplete="off"
|
||
/>
|
||
<div
|
||
id="role-filter-dropdown"
|
||
class="hidden absolute z-50 w-full bg-white border border-gray-200 rounded-lg shadow-lg max-h-48 overflow-y-auto mt-1"
|
||
></div>
|
||
</div>
|
||
<button
|
||
id="reset-filters-btn"
|
||
class="px-4 py-2 bg-white text-gray-600 border border-gray-300 rounded-lg hover:bg-gray-50 transition"
|
||
>
|
||
Сбросить
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="users-container" class="space-y-4"></div>
|
||
|
||
<div id="pagination-container"></div>
|
||
</div>
|
||
|
||
<template id="user-card-template">
|
||
<div
|
||
class="bg-white p-4 rounded-lg shadow-md hover:shadow-lg transition-shadow duration-200 user-card"
|
||
>
|
||
<div class="flex items-start gap-4">
|
||
<img
|
||
class="user-avatar w-14 h-14 rounded-full border-2 border-gray-200 object-cover bg-gray-100"
|
||
src=""
|
||
alt=""
|
||
/>
|
||
<div class="flex-1 min-w-0">
|
||
<div
|
||
class="flex flex-col sm:flex-row sm:justify-between sm:items-start gap-2"
|
||
>
|
||
<div class="min-w-0 flex-1">
|
||
<div class="flex items-center gap-2">
|
||
<h3
|
||
class="user-fullname text-lg font-bold text-gray-900 truncate"
|
||
></h3>
|
||
<span
|
||
class="user-verified-badge hidden inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800"
|
||
>
|
||
<svg
|
||
class="w-3 h-3 mr-1"
|
||
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"
|
||
></path>
|
||
</svg>
|
||
Подтвержден
|
||
</span>
|
||
</div>
|
||
<p class="user-username text-sm text-gray-500"></p>
|
||
<p
|
||
class="user-email text-sm text-gray-600 truncate"
|
||
></p>
|
||
</div>
|
||
<div class="flex items-center gap-2">
|
||
<span
|
||
class="user-active-badge hidden inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800"
|
||
>
|
||
Активен
|
||
</span>
|
||
<span
|
||
class="user-inactive-badge hidden inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800"
|
||
>
|
||
Неактивен
|
||
</span>
|
||
<button
|
||
class="edit-user-btn p-2 text-gray-400 hover:text-blue-600 hover:bg-blue-50 rounded-lg transition-colors"
|
||
title="Редактировать"
|
||
>
|
||
<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="M15.232 5.232l3.536 3.536m-2.036-5.036a2.5 2.5 0 113.536 3.536L6.5 21.036H3v-3.572L16.732 3.732z"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
<button
|
||
class="delete-user-btn p-2 text-gray-400 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors"
|
||
title="Удалить"
|
||
>
|
||
<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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"
|
||
></path>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div class="mt-3">
|
||
<div class="flex items-center flex-wrap gap-2">
|
||
<span class="text-sm font-medium text-gray-700"
|
||
>Роли:</span
|
||
>
|
||
<div class="user-roles flex flex-wrap gap-1"></div>
|
||
<div class="relative inline-block">
|
||
<button
|
||
class="add-role-btn p-1 text-gray-400 hover:text-green-600 hover:bg-green-50 rounded transition-colors"
|
||
title="Добавить роль"
|
||
>
|
||
<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 4v16m8-8H4"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="role-badge-template">
|
||
<span
|
||
class="role-badge inline-flex items-center bg-gray-600 text-white text-xs font-medium px-2.5 py-1 rounded-full"
|
||
>
|
||
<span class="role-name"></span>
|
||
<button
|
||
type="button"
|
||
class="remove-role-btn ml-1.5 inline-flex items-center justify-center text-gray-300 hover:text-white hover:bg-red-500 rounded-full w-4 h-4 transition-colors"
|
||
title="Удалить роль"
|
||
>
|
||
<svg
|
||
class="w-3 h-3"
|
||
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"
|
||
/>
|
||
</svg>
|
||
</button>
|
||
</span>
|
||
</template>
|
||
|
||
<template id="empty-state-template">
|
||
<div class="bg-white p-8 rounded-lg shadow-md text-center">
|
||
<svg
|
||
class="mx-auto h-12 w-12 text-gray-400 mb-4"
|
||
fill="none"
|
||
stroke="currentColor"
|
||
viewBox="0 0 24 24"
|
||
>
|
||
<path
|
||
stroke-linecap="round"
|
||
stroke-linejoin="round"
|
||
stroke-width="2"
|
||
d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"
|
||
></path>
|
||
</svg>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-2">
|
||
Пользователи не найдены
|
||
</h3>
|
||
<p class="text-gray-500">Попробуйте изменить параметры поиска</p>
|
||
</div>
|
||
</template>
|
||
|
||
<template id="access-denied-template">
|
||
<div class="bg-white p-8 rounded-lg shadow-md text-center">
|
||
<svg
|
||
class="mx-auto h-12 w-12 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 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"
|
||
></path>
|
||
</svg>
|
||
<h3 class="text-lg font-medium text-gray-900 mb-2">Доступ запрещён</h3>
|
||
<p class="text-gray-500">У вас нет прав для просмотра этой страницы</p>
|
||
<a
|
||
href="/"
|
||
class="inline-block mt-4 px-4 py-2 bg-gray-600 text-white rounded-lg hover:bg-gray-700 transition"
|
||
>
|
||
На главную
|
||
</a>
|
||
</div>
|
||
</template>
|
||
|
||
<div id="edit-user-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
|
||
<div
|
||
class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0"
|
||
>
|
||
<div
|
||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||
id="modal-backdrop"
|
||
></div>
|
||
<div
|
||
class="relative inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full"
|
||
>
|
||
<form id="edit-user-form">
|
||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||
<h3 class="text-lg font-medium text-gray-900 mb-4">
|
||
Редактирование пользователя
|
||
</h3>
|
||
<input type="hidden" id="edit-user-id" />
|
||
|
||
<div class="space-y-4">
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Email</label
|
||
>
|
||
<input
|
||
type="email"
|
||
id="edit-user-email"
|
||
class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Полное имя</label
|
||
>
|
||
<input
|
||
type="text"
|
||
id="edit-user-fullname"
|
||
class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||
/>
|
||
</div>
|
||
<div>
|
||
<label
|
||
class="block text-sm font-medium text-gray-700 mb-1"
|
||
>Новый пароль (оставьте пустым, чтобы не
|
||
менять)</label
|
||
>
|
||
<input
|
||
type="password"
|
||
id="edit-user-password"
|
||
class="w-full border rounded-lg px-3 py-2 focus:outline-none focus:ring-2 focus:ring-gray-400"
|
||
placeholder="••••••••"
|
||
/>
|
||
</div>
|
||
<div class="flex items-center gap-4">
|
||
<label
|
||
class="flex items-center gap-2 cursor-pointer"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
id="edit-user-active"
|
||
class="w-4 h-4 text-blue-600 rounded focus:ring-blue-500"
|
||
/>
|
||
<span class="text-sm text-gray-700"
|
||
>Активен</span
|
||
>
|
||
</label>
|
||
<label
|
||
class="flex items-center gap-2 cursor-pointer"
|
||
>
|
||
<input
|
||
type="checkbox"
|
||
id="edit-user-verified"
|
||
class="w-4 h-4 text-green-600 rounded focus:ring-green-500"
|
||
/>
|
||
<span class="text-sm text-gray-700"
|
||
>Подтверждён</span
|
||
>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2"
|
||
>
|
||
<button
|
||
type="submit"
|
||
class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-gray-600 text-white font-medium hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition"
|
||
>
|
||
Сохранить
|
||
</button>
|
||
<button
|
||
type="button"
|
||
id="cancel-edit-btn"
|
||
class="mt-3 sm:mt-0 w-full sm:w-auto inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2 bg-white text-gray-700 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="delete-user-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
|
||
<div
|
||
class="flex items-center justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:p-0"
|
||
>
|
||
<div
|
||
class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"
|
||
id="delete-modal-backdrop"
|
||
></div>
|
||
<div
|
||
class="relative inline-block bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:max-w-lg sm:w-full"
|
||
>
|
||
<div class="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
|
||
<div class="sm:flex sm:items-start">
|
||
<div
|
||
class="mx-auto flex-shrink-0 flex items-center justify-center h-12 w-12 rounded-full bg-red-100 sm:mx-0 sm:h-10 sm:w-10"
|
||
>
|
||
<svg
|
||
class="h-6 w-6 text-red-600"
|
||
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"
|
||
></path>
|
||
</svg>
|
||
</div>
|
||
<div class="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left">
|
||
<h3 class="text-lg font-medium text-gray-900">
|
||
Удаление пользователя
|
||
</h3>
|
||
<div class="mt-2">
|
||
<p class="text-sm text-gray-500">
|
||
Вы уверены, что хотите удалить пользователя
|
||
<strong id="delete-user-name"></strong>? Это
|
||
действие необратимо.
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div
|
||
class="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse gap-2"
|
||
>
|
||
<button
|
||
type="button"
|
||
id="confirm-delete-btn"
|
||
class="w-full sm:w-auto inline-flex justify-center rounded-lg border border-transparent shadow-sm px-4 py-2 bg-red-600 text-white font-medium hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-red-500 transition"
|
||
>
|
||
Удалить
|
||
</button>
|
||
<button
|
||
type="button"
|
||
id="cancel-delete-btn"
|
||
class="mt-3 sm:mt-0 w-full sm:w-auto inline-flex justify-center rounded-lg border border-gray-300 shadow-sm px-4 py-2 bg-white text-gray-700 font-medium hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-500 transition"
|
||
>
|
||
Отмена
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
{% endblock %} {% block scripts %}
|
||
<script src="/static/users.js"></script>
|
||
{% endblock %}
|