roles update

2026-06-25 15:14:50 +03:00
parent 9671fe458b
commit 1c55c871fc
21 changed files with 721 additions and 93 deletions
--- a/apps/frontend/app/admin/oauth/page.tsx
+++ b/apps/frontend/app/admin/oauth/page.tsx
@@ -133,6 +133,19 @@ export default function AdminOAuthPage() {
    }
  }

+  async function handleDeleteClient(client: OAuthClient) {
+    if (!token) return;
+    if (!window.confirm(`Удалить приложение «${client.name}»? Это действие необратимо.`)) return;
+    try {
+      await apiFetch(`/admin/rbac/oauth-clients/${client.clientId}`, { method: 'DELETE' }, token);
+      showToast('Приложение удалено');
+      setSelectedClient(null);
+      await loadData();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось удалить приложение');
+    }
+  }
+
  function copyText(value: string, label: string) {
    void navigator.clipboard.writeText(value);
    showToast(`${label} скопирован`);
@@ -213,6 +226,7 @@ export default function AdminOAuthPage() {
        onCopy={copyText}
        onRotateSecret={(clientId) => void handleRotateSecret(clientId)}
        onToggleActive={(client) => void handleToggleActive(client)}
+        onDelete={(client) => void handleDeleteClient(client)}
      />

      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
--- a/apps/frontend/app/admin/rbac/page.tsx
+++ b/apps/frontend/app/admin/rbac/page.tsx
@@ -1,7 +1,7 @@
 'use client';

 import { useEffect, useState } from 'react';
-import { Loader2, Plus, ShieldCheck } from 'lucide-react';
+import { Loader2, Pencil, Plus, ShieldCheck, Trash2 } from 'lucide-react';
 import { AdminShell } from '@/components/id/admin-shell';
 import { useAuth } from '@/components/id/auth-provider';
 import { useToast } from '@/components/id/toast-provider';
@@ -11,15 +11,31 @@ import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/u
 import { Input } from '@/components/ui/input';
 import { AdminPermission, AdminRole, apiFetch } from '@/lib/api';

+type RoleFormState = {
+  slug: string;
+  name: string;
+  description: string;
+  permissionSlugs: string[];
+};
+
+const emptyForm: RoleFormState = { slug: '', name: '', description: '', permissionSlugs: [] };
+
 export default function AdminRbacPage() {
  const { token, user } = useAuth();
  const { showToast } = useToast();
  const [roles, setRoles] = useState<AdminRole[]>([]);
  const [permissions, setPermissions] = useState<AdminPermission[]>([]);
  const [loading, setLoading] = useState(true);
-  const [creating, setCreating] = useState(false);
+  const [saving, setSaving] = useState(false);
  const [dialogOpen, setDialogOpen] = useState(false);
-  const [form, setForm] = useState({ slug: '', name: '', description: '', permissionSlugs: [] as string[] });
+  const [editingRole, setEditingRole] = useState<AdminRole | null>(null);
+  const [form, setForm] = useState<RoleFormState>(emptyForm);
+
+  async function reloadRoles() {
+    if (!token) return;
+    const response = await apiFetch<{ roles: AdminRole[] }>('/admin/rbac/roles', {}, token);
+    setRoles(response.roles ?? []);
+  }

  useEffect(() => {
    if (!token || !user?.canManageRoles) return;
@@ -35,30 +51,74 @@ export default function AdminRbacPage() {
      .finally(() => setLoading(false));
  }, [showToast, token, user?.canManageRoles]);

-  async function handleCreateRole() {
+  function openCreateDialog() {
+    setEditingRole(null);
+    setForm(emptyForm);
+    setDialogOpen(true);
+  }
+
+  function openEditDialog(role: AdminRole) {
+    setEditingRole(role);
+    setForm({
+      slug: role.slug,
+      name: role.name,
+      description: role.description ?? '',
+      permissionSlugs: role.permissions.map((permission) => permission.slug)
+    });
+    setDialogOpen(true);
+  }
+
+  async function handleSaveRole() {
    if (!token) return;
-    setCreating(true);
+    setSaving(true);
    try {
-      await apiFetch('/admin/rbac/roles', {
-        method: 'POST',
-        body: JSON.stringify(form)
-      }, token);
-      showToast('Роль создана');
+      if (editingRole) {
+        await apiFetch(`/admin/rbac/roles/${editingRole.slug}`, {
+          method: 'PATCH',
+          body: JSON.stringify({
+            name: form.name,
+            description: form.description || undefined,
+            permissionSlugs: form.permissionSlugs
+          })
+        }, token);
+        showToast('Роль обновлена');
+      } else {
+        await apiFetch('/admin/rbac/roles', {
+          method: 'POST',
+          body: JSON.stringify(form)
+        }, token);
+        showToast('Роль создана');
+      }
      setDialogOpen(false);
-      setForm({ slug: '', name: '', description: '', permissionSlugs: [] });
-      const response = await apiFetch<{ roles: AdminRole[] }>('/admin/rbac/roles', {}, token);
-      setRoles(response.roles ?? []);
+      setForm(emptyForm);
+      setEditingRole(null);
+      await reloadRoles();
    } catch (error) {
-      showToast(error instanceof Error ? error.message : 'Не удалось создать роль');
+      showToast(error instanceof Error ? error.message : 'Не удалось сохранить роль');
    } finally {
-      setCreating(false);
+      setSaving(false);
+    }
+  }
+
+  async function handleDeleteRole(role: AdminRole) {
+    if (!token || role.isSystem) return;
+    if (!window.confirm(`Удалить роль «${role.name}»? Она будет снята со всех пользователей.`)) return;
+    setSaving(true);
+    try {
+      await apiFetch(`/admin/rbac/roles/${role.slug}`, { method: 'DELETE' }, token);
+      showToast('Роль удалена');
+      await reloadRoles();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось удалить роль');
+    } finally {
+      setSaving(false);
    }
  }

  if (!user?.canManageRoles) {
    return (
      <AdminShell active="/admin/rbac">
-        <p className="text-[#667085]">Управление ролями доступно только супер-администратору.</p>
+        <p className="text-[#667085]">Управление ролями доступно пользователям с правом rbac.manage.</p>
      </AdminShell>
    );
  }
@@ -68,9 +128,9 @@ export default function AdminRbacPage() {
      <div className="mb-6 flex items-center justify-between gap-4">
        <div>
          <h2 className="text-2xl font-medium">Роли и права</h2>
-          <p className="text-sm text-[#667085]">Только супер-администратор может создавать роли и назначать их пользователям</p>
+          <p className="text-sm text-[#667085]">Редактируйте роли, назначайте права всем пользователям или отдельным аккаунтам</p>
        </div>
-        <Button onClick={() => setDialogOpen(true)}>
+        <Button onClick={openCreateDialog}>
          <Plus className="h-4 w-4" />
          Создать роль
        </Button>
@@ -86,17 +146,37 @@ export default function AdminRbacPage() {
          {roles.map((role) => (
            <Card key={role.id} className="bg-[#f8f9fb] shadow-none">
              <CardHeader>
-                <ShieldCheck className="h-6 w-6" />
+                <div className="flex items-start justify-between gap-2">
+                  <ShieldCheck className="h-6 w-6 shrink-0" />
+                  <div className="flex gap-1">
+                    <Button variant="ghost" size="icon" aria-label="Редактировать роль" onClick={() => openEditDialog(role)}>
+                      <Pencil className="h-4 w-4" />
+                    </Button>
+                    {!role.isSystem ? (
+                      <Button variant="ghost" size="icon" aria-label="Удалить роль" disabled={saving} onClick={() => void handleDeleteRole(role)}>
+                        <Trash2 className="h-4 w-4 text-red-600" />
+                      </Button>
+                    ) : null}
+                  </div>
+                </div>
                <CardTitle>{role.name}</CardTitle>
-                <CardDescription>{role.permissions.length} прав · {role.slug}</CardDescription>
+                <CardDescription>
+                  {role.permissions.length} прав · {role.slug}
+                  {role.isSystem ? ' · системная' : ''}
+                  {role.isDefault ? ' · по умолчанию' : ''}
+                </CardDescription>
              </CardHeader>
              <CardContent className="space-y-2">
-                {role.permissions.map((permission) => (
-                  <div key={permission.id} className="rounded-xl bg-white px-3 py-2 text-sm">
-                    <div className="font-medium">{permission.name}</div>
-                    <div className="text-xs text-[#667085]">{permission.slug}</div>
-                  </div>
-                ))}
+                {role.permissions.length ? (
+                  role.permissions.map((permission) => (
+                    <div key={permission.id} className="rounded-xl bg-white px-3 py-2 text-sm">
+                      <div className="font-medium">{permission.name}</div>
+                      <div className="text-xs text-[#667085]">{permission.slug}</div>
+                    </div>
+                  ))
+                ) : (
+                  <p className="text-sm text-[#667085]">Права не назначены</p>
+                )}
              </CardContent>
            </Card>
          ))}
@@ -106,10 +186,14 @@ export default function AdminRbacPage() {
      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
        <DialogContent className="max-h-[90vh] overflow-y-auto">
          <DialogHeader>
-            <DialogTitle>Новая роль</DialogTitle>
+            <DialogTitle>{editingRole ? `Редактирование: ${editingRole.name}` : 'Новая роль'}</DialogTitle>
          </DialogHeader>
          <div className="space-y-4">
-            <Input value={form.slug} onChange={(event) => setForm((current) => ({ ...current, slug: event.target.value }))} placeholder="slug, например support" />
+            {!editingRole ? (
+              <Input value={form.slug} onChange={(event) => setForm((current) => ({ ...current, slug: event.target.value }))} placeholder="slug, например support" />
+            ) : (
+              <p className="rounded-xl bg-[#f4f5f8] px-3 py-2 text-sm text-[#667085]">Slug: {editingRole.slug}</p>
+            )}
            <Input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} placeholder="Название роли" />
            <Input value={form.description} onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))} placeholder="Описание" />
            <div className="space-y-2">
@@ -132,8 +216,8 @@ export default function AdminRbacPage() {
                </label>
              ))}
            </div>
-            <Button className="w-full" disabled={creating} onClick={() => void handleCreateRole()}>
-              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Создать роль'}
+            <Button className="w-full" disabled={saving || !form.name.trim() || (!editingRole && !form.slug.trim())} onClick={() => void handleSaveRole()}>
+              {saving ? <Loader2 className="h-4 w-4 animate-spin" /> : editingRole ? 'Сохранить изменения' : 'Создать роль'}
            </Button>
          </div>
        </DialogContent>
--- a/apps/frontend/app/admin/users/page.tsx
+++ b/apps/frontend/app/admin/users/page.tsx
@@ -11,7 +11,7 @@ import { Button } from '@/components/ui/button';
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
 import { Input } from '@/components/ui/input';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
-import { AdminRole, AdminUser, apiFetch } from '@/lib/api';
+import { AdminPermission, AdminRole, AdminUser, apiFetch } from '@/lib/api';
 import { getAdminLandingPath } from '@/lib/admin-access';

 const statusLabels: Record<string, string> = {
@@ -21,18 +21,22 @@ const statusLabels: Record<string, string> = {
 };

 const roleLabels: Record<string, string> = {
+  user: 'Пользователь',
  admin: 'Администратор',
  moderator: 'Модератор',
  manager: 'Менеджер',
  'super-admin': 'Супер-админ'
 };

+const DEFAULT_USER_ROLE = 'user';
+
 export default function AdminUsersPage() {
  const router = useRouter();
  const { token, user: currentUser } = useAuth();
  const { showToast } = useToast();
  const [users, setUsers] = useState<AdminUser[]>([]);
  const [roles, setRoles] = useState<AdminRole[]>([]);
+  const [permissions, setPermissions] = useState<AdminPermission[]>([]);
  const [search, setSearch] = useState('');
  const [loading, setLoading] = useState(true);
  const [selectedUser, setSelectedUser] = useState<AdminUser | null>(null);
@@ -68,12 +72,26 @@ export default function AdminUsersPage() {

  useEffect(() => {
    if (!token || !currentUser?.canManageRoles) return;
-    apiFetch<{ roles: AdminRole[] }>('/admin/rbac/roles', {}, token)
-      .then((response) => setRoles(response.roles ?? []))
+    Promise.all([
+      apiFetch<{ roles: AdminRole[] }>('/admin/rbac/roles', {}, token),
+      apiFetch<{ permissions: AdminPermission[] }>('/admin/rbac/permissions', {}, token)
+    ])
+      .then(([rolesResponse, permissionsResponse]) => {
+        setRoles(rolesResponse.roles ?? []);
+        setPermissions(permissionsResponse.permissions ?? []);
+      })
      .catch(() => undefined);
  }, [currentUser?.canManageRoles, token]);

-  const assignableRoles = useMemo(() => roles.filter((role) => role.slug !== 'super-admin'), [roles]);
+  const assignableRoles = useMemo(
+    () => roles.filter((role) => role.slug !== 'super-admin' && !role.isDefault),
+    [roles]
+  );
+
+  const permissionLabelBySlug = useMemo(
+    () => Object.fromEntries(permissions.map((permission) => [permission.slug, permission.name])),
+    [permissions]
+  );

  async function handleSuspend(user: AdminUser) {
    if (!token) return;
@@ -171,11 +189,52 @@ export default function AdminUsersPage() {
    }
  }

+  async function handleAssignPermission(permissionSlug: string) {
+    if (!token || !selectedUser) return;
+    setActionLoading(true);
+    try {
+      const response = await apiFetch<{ permissions: string[] }>(`/admin/rbac/users/${selectedUser.id}/permissions`, {
+        method: 'POST',
+        body: JSON.stringify({ permissionSlug })
+      }, token);
+      setSelectedUser({ ...selectedUser, directPermissions: response.permissions ?? [] });
+      showToast('Право назначено');
+      await loadUsers();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось назначить право');
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
+  async function handleRemovePermission(permissionSlug: string) {
+    if (!token || !selectedUser) return;
+    setActionLoading(true);
+    try {
+      const response = await apiFetch<{ permissions: string[] }>(`/admin/rbac/users/${selectedUser.id}/permissions/${permissionSlug}`, {
+        method: 'DELETE'
+      }, token);
+      setSelectedUser({ ...selectedUser, directPermissions: response.permissions ?? [] });
+      showToast('Право снято');
+      await loadUsers();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось снять право');
+    } finally {
+      setActionLoading(false);
+    }
+  }
+
  function renderRoles(user: AdminUser) {
    const userRoles = user.roles ?? [];
-    const labels = user.isSuperAdmin ? ['Супер-админ', ...userRoles.map((role) => roleLabels[role] ?? role)] : userRoles.map((role) => roleLabels[role] ?? role);
-    if (!labels.length) return 'Пользователь';
-    return labels.join(', ');
+    const extraRoles = userRoles.filter((role) => role !== DEFAULT_USER_ROLE);
+    const direct = user.directPermissions ?? [];
+    const labels = user.isSuperAdmin
+      ? ['Супер-админ', ...extraRoles.map((role) => roleLabels[role] ?? role)]
+      : extraRoles.map((role) => roleLabels[role] ?? role);
+    const directLabels = direct.map((slug) => permissionLabelBySlug[slug] ?? slug);
+    const parts = [...labels, ...directLabels.map((label) => `+ ${label}`)];
+    if (!parts.length) return roleLabels.user;
+    return parts.join(', ');
  }

  return (
@@ -312,10 +371,14 @@ export default function AdminUsersPage() {
          <div className="space-y-2">
            {(selectedUser?.roles ?? []).map((role) => (
              <div key={role} className="flex items-center justify-between rounded-xl bg-[#f4f5f8] px-3 py-2">
-                <span>{roleLabels[role] ?? role}</span>
-                <Button variant="ghost" size="sm" disabled={actionLoading} onClick={() => void handleRemoveRole(role)}>
-                  Снять
-                </Button>
+                <span>{roleLabels[role] ?? role}{role === DEFAULT_USER_ROLE ? ' (стандартная)' : ''}</span>
+                {role === DEFAULT_USER_ROLE ? (
+                  <span className="text-xs text-[#667085]">Нельзя снять</span>
+                ) : (
+                  <Button variant="ghost" size="sm" disabled={actionLoading} onClick={() => void handleRemoveRole(role)}>
+                    Снять
+                  </Button>
+                )}
              </div>
            ))}
            {!(selectedUser?.roles ?? []).length ? <p className="text-sm text-[#667085]">Роли не назначены</p> : null}
@@ -335,6 +398,37 @@ export default function AdminUsersPage() {
              </Button>
            ))}
          </div>
+          <div className="mt-6 space-y-2 border-t border-[#eceef4] pt-4">
+            <p className="text-sm font-medium">Прямые права</p>
+            <p className="text-xs text-[#667085]">Дополнительные permissions без смены роли. Например, oauth.manage для одного пользователя.</p>
+            {(selectedUser?.directPermissions ?? []).map((permissionSlug) => (
+              <div key={permissionSlug} className="flex items-center justify-between rounded-xl bg-[#eef4ff] px-3 py-2">
+                <span className="text-sm">{permissionLabelBySlug[permissionSlug] ?? permissionSlug}</span>
+                <Button variant="ghost" size="sm" disabled={actionLoading} onClick={() => void handleRemovePermission(permissionSlug)}>
+                  Снять
+                </Button>
+              </div>
+            ))}
+            {!(selectedUser?.directPermissions ?? []).length ? (
+              <p className="text-sm text-[#667085]">Прямые права не назначены</p>
+            ) : null}
+            <div className="max-h-48 space-y-1 overflow-y-auto pt-2">
+              {permissions
+                .filter((permission) => !(selectedUser?.directPermissions ?? []).includes(permission.slug))
+                .map((permission) => (
+                  <Button
+                    key={permission.id}
+                    variant="secondary"
+                    size="sm"
+                    className="w-full justify-start"
+                    disabled={actionLoading}
+                    onClick={() => void handleAssignPermission(permission.slug)}
+                  >
+                    + {permission.name}
+                  </Button>
+                ))}
+            </div>
+          </div>
        </DialogContent>
      </Dialog>