263 lines
12 KiB
TypeScript
263 lines
12 KiB
TypeScript
'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>
|
||
);
|
||
}
|