first commit

apps/frontend/app/admin/oauth/page.tsx

@@ -0,0 +1,262 @@
+'use client';
+
+import { useCallback, useEffect, useState } from 'react';
+import { Copy, KeyRound, Loader2, LockKeyhole, Plus, RefreshCw } from 'lucide-react';
+import { AdminShell } from '@/components/id/admin-shell';
+import { useAuth } from '@/components/id/auth-provider';
+import { useToast } from '@/components/id/toast-provider';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { OAuthClient, OAuthScope, apiFetch } from '@/lib/api';
+
+export default function AdminOAuthPage() {
+  const { token } = useAuth();
+  const { showToast } = useToast();
+  const [clients, setClients] = useState<OAuthClient[]>([]);
+  const [scopes, setScopes] = useState<OAuthScope[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [creating, setCreating] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [secretDialog, setSecretDialog] = useState<{ clientId: string; clientSecret: string } | null>(null);
+  const [form, setForm] = useState({ name: '', redirectUris: '', type: 'CONFIDENTIAL', selectedScopes: ['openid', 'profile', 'email'] as string[] });
+
+  const loadData = useCallback(async () => {
+    if (!token) return;
+    setLoading(true);
+    try {
+      const [clientsResponse, scopesResponse] = await Promise.all([
+        apiFetch<{ clients: OAuthClient[] }>('/admin/rbac/oauth-clients', {}, token),
+        apiFetch<{ scopes: OAuthScope[] }>('/admin/rbac/oauth-scopes', {}, token)
+      ]);
+      setClients(clientsResponse.clients ?? []);
+      setScopes(scopesResponse.scopes ?? []);
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось загрузить OAuth-приложения');
+    } finally {
+      setLoading(false);
+    }
+  }, [showToast, token]);
+
+  useEffect(() => {
+    void loadData();
+  }, [loadData]);
+
+  async function handleCreate() {
+    if (!token) return;
+    const redirectUris = form.redirectUris
+      .split('\n')
+      .map((item) => item.trim())
+      .filter(Boolean);
+    if (!form.name.trim() || !redirectUris.length || !form.selectedScopes.length) {
+      showToast('Заполните название, redirect URI и scopes');
+      return;
+    }
+
+    setCreating(true);
+    try {
+      const created = await apiFetch<OAuthClient>('/admin/rbac/oauth-clients', {
+        method: 'POST',
+        body: JSON.stringify({
+          name: form.name.trim(),
+          redirectUris,
+          scopes: form.selectedScopes,
+          type: form.type
+        })
+      }, token);
+      showToast('OAuth-приложение создано');
+      setDialogOpen(false);
+      setForm({ name: '', redirectUris: '', type: 'CONFIDENTIAL', selectedScopes: ['openid', 'profile', 'email'] });
+      if (created.clientSecret) {
+        setSecretDialog({ clientId: created.clientId, clientSecret: created.clientSecret });
+      }
+      await loadData();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось создать приложение');
+    } finally {
+      setCreating(false);
+    }
+  }
+
+  async function handleRotateSecret(clientId: string) {
+    if (!token) return;
+    try {
+      const response = await apiFetch<{ clientId: string; clientSecret: string }>(`/admin/rbac/oauth-clients/${clientId}/rotate-secret`, { method: 'POST' }, token);
+      setSecretDialog(response);
+      showToast('Новый client secret сгенерирован');
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось перевыпустить secret');
+    }
+  }
+
+  async function handleToggleActive(client: OAuthClient) {
+    if (!token) return;
+    try {
+      await apiFetch(`/admin/rbac/oauth-clients/${client.clientId}`, {
+        method: 'PATCH',
+        body: JSON.stringify({ isActive: !client.isActive })
+      }, token);
+      showToast(client.isActive ? 'Приложение отключено' : 'Приложение включено');
+      await loadData();
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Не удалось обновить приложение');
+    }
+  }
+
+  function copyText(value: string, label: string) {
+    void navigator.clipboard.writeText(value);
+    showToast(`${label} скопирован`);
+  }
+
+  return (
+    <AdminShell active="/admin/oauth">
+      <div className="mb-6 flex items-center justify-between gap-4">
+        <div>
+          <h2 className="text-2xl font-medium">OAuth-приложения</h2>
+          <p className="text-sm text-[#667085]">Создание клиентов как на oauth.yandex.ru: client_id, secret, redirect URI и scopes</p>
+        </div>
+        <Button onClick={() => setDialogOpen(true)}>
+          <Plus className="h-4 w-4" />
+          Новое приложение
+        </Button>
+      </div>
+
+      {loading ? (
+        <div className="flex items-center justify-center gap-2 py-16 text-[#667085]">
+          <Loader2 className="h-5 w-5 animate-spin" />
+          Загрузка...
+        </div>
+      ) : (
+        <div className="grid gap-4 md:grid-cols-2">
+          {clients.map((client) => (
+            <Card key={client.id} className={client.isActive ? '' : 'opacity-70'}>
+              <CardHeader>
+                <LockKeyhole className="h-6 w-6" />
+                <CardTitle>{client.name}</CardTitle>
+                <CardDescription>{client.type === 'PUBLIC' ? 'Публичное приложение' : 'Confidential приложение'}</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-3">
+                <div className="rounded-2xl bg-[#f4f5f8] p-4 text-sm">
+                  <div className="mb-2 flex items-center justify-between gap-2">
+                    <span className="font-medium">Client ID</span>
+                    <Button variant="ghost" size="icon" aria-label="Скопировать client id" onClick={() => copyText(client.clientId, 'Client ID')}>
+                      <Copy className="h-4 w-4" />
+                    </Button>
+                  </div>
+                  <code className="break-all text-xs">{client.clientId}</code>
+                </div>
+                <div className="rounded-2xl bg-[#f4f5f8] p-4 text-sm">
+                  <div className="mb-2 font-medium">Redirect URI</div>
+                  {client.redirectUris.map((uri) => (
+                    <div key={uri} className="break-all text-xs text-[#667085]">
+                      {uri}
+                    </div>
+                  ))}
+                </div>
+                <div className="rounded-2xl bg-[#f4f5f8] p-4 text-sm">
+                  <div className="mb-2 flex items-center gap-2 font-medium">
+                    <KeyRound className="h-4 w-4" />
+                    Scopes
+                  </div>
+                  <p>{client.scopes.join(', ')}</p>
+                </div>
+                <div className="flex flex-wrap gap-2">
+                  {client.type !== 'PUBLIC' ? (
+                    <Button variant="secondary" size="sm" onClick={() => void handleRotateSecret(client.clientId)}>
+                      <RefreshCw className="h-4 w-4" />
+                      Новый secret
+                    </Button>
+                  ) : null}
+                  <Button variant="secondary" size="sm" onClick={() => void handleToggleActive(client)}>
+                    {client.isActive ? 'Отключить' : 'Включить'}
+                  </Button>
+                </div>
+              </CardContent>
+            </Card>
+          ))}
+          {!clients.length ? <p className="text-[#667085]">OAuth-приложения ещё не созданы</p> : null}
+        </div>
+      )}
+
+      <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
+        <DialogContent className="max-h-[90vh] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>Новое OAuth-приложение</DialogTitle>
+          </DialogHeader>
+          <div className="space-y-4">
+            <div>
+              <label className="mb-2 block text-sm font-medium">Название</label>
+              <Input value={form.name} onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))} placeholder="Lendry Docs" />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium">Тип клиента</label>
+              <select
+                value={form.type}
+                onChange={(event) => setForm((current) => ({ ...current, type: event.target.value }))}
+                className="h-11 w-full rounded-xl border border-[#eceef4] bg-white px-3 text-sm"
+              >
+                <option value="CONFIDENTIAL">Confidential (с client secret)</option>
+                <option value="PUBLIC">Public (без secret)</option>
+              </select>
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium">Redirect URI (по одному на строку)</label>
+              <textarea
+                value={form.redirectUris}
+                onChange={(event) => setForm((current) => ({ ...current, redirectUris: event.target.value }))}
+                placeholder="https://app.example.com/oauth/callback"
+                className="min-h-[96px] w-full rounded-xl border border-[#eceef4] bg-white px-3 py-2 text-sm"
+              />
+            </div>
+            <div>
+              <label className="mb-2 block text-sm font-medium">Scopes</label>
+              <div className="space-y-2">
+                {scopes.map((scope) => (
+                  <label key={scope.id} className="flex items-center gap-2 rounded-xl bg-[#f4f5f8] px-3 py-2 text-sm">
+                    <input
+                      type="checkbox"
+                      checked={form.selectedScopes.includes(scope.slug)}
+                      onChange={(event) =>
+                        setForm((current) => ({
+                          ...current,
+                          selectedScopes: event.target.checked
+                            ? [...current.selectedScopes, scope.slug]
+                            : current.selectedScopes.filter((item) => item !== scope.slug)
+                        }))
+                      }
+                    />
+                    <span className="font-medium">{scope.name}</span>
+                    <span className="text-[#667085]">({scope.slug})</span>
+                  </label>
+                ))}
+              </div>
+            </div>
+            <Button className="w-full" disabled={creating} onClick={() => void handleCreate()}>
+              {creating ? <Loader2 className="h-4 w-4 animate-spin" /> : 'Создать приложение'}
+            </Button>
+          </div>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={Boolean(secretDialog)} onOpenChange={(open) => !open && setSecretDialog(null)}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Client Secret</DialogTitle>
+          </DialogHeader>
+          <p className="text-sm text-[#667085]">Сохраните secret сейчас — он больше не будет показан полностью.</p>
+          <div className="rounded-2xl bg-[#f4f5f8] p-4">
+            <p className="mb-1 text-xs text-[#667085]">Client ID</p>
+            <code className="break-all text-sm">{secretDialog?.clientId}</code>
+            <p className="mb-1 mt-4 text-xs text-[#667085]">Client Secret</p>
+            <code className="break-all text-sm">{secretDialog?.clientSecret}</code>
+          </div>
+          <Button className="w-full" onClick={() => secretDialog && copyText(secretDialog.clientSecret, 'Client Secret')}>
+            <Copy className="h-4 w-4" />
+            Скопировать secret
+          </Button>
+        </DialogContent>
+      </Dialog>
+    </AdminShell>
+  );
+}