import { Head } from '@inertiajs/react'; import { Key, Plus, Trash2 } from 'lucide-react'; import { useState } from 'react'; import { type BreadcrumbItem } from '@/types'; import AppLayout from '@/layouts/app-layout'; import { Button } from '@/components/ui/button'; import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'; import { Input } from '@/components/ui/input'; import { Label } from '@/components/ui/label'; import { Badge } from '@/components/ui/badge'; import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table'; import { usePage } from '@inertiajs/react'; import { SharedData } from '@/types'; const breadcrumbs: BreadcrumbItem[] = [ { title: 'Dashboard', href: '/' }, { title: 'API Tokens', href: '/api-tokens' }, ]; interface Token { id: number; name: string; abilities: string[]; last_used_at: string | null; created_at: string; } export default function ApiTokensIndex() { const [tokens, setTokens] = useState([]); const [loading, setLoading] = useState(false); const [tokenName, setTokenName] = useState(''); const [newToken, setNewToken] = useState(null); const { auth } = usePage().props; const fetchTokens = async () => { setLoading(true); try { const res = await fetch('/api/v1/auth/tokens', { headers: { 'Accept': 'application/json' }, credentials: 'same-origin', }); const json = await res.json(); setTokens(json.data || []); } catch { // ignore } setLoading(false); }; const createToken = async (e: React.FormEvent) => { e.preventDefault(); try { const res = await fetch('/api/v1/auth/tokens', { method: 'POST', headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' }, credentials: 'same-origin', body: JSON.stringify({ name: tokenName }), }); const json = await res.json(); if (json.data?.token) { setNewToken(json.data.token); setTokenName(''); fetchTokens(); } } catch { // ignore } }; const revokeToken = async (id: number) => { if (!confirm('Révoquer ce token ?')) return; try { await fetch(`/api/v1/auth/tokens/${id}`, { method: 'DELETE', headers: { 'Accept': 'application/json' }, credentials: 'same-origin', }); fetchTokens(); } catch { // ignore } }; return (

API Tokens

Tokens Sanctum pour les intégrations externes (accès longue durée)

{/* Create token */} Créer un token Le token ne sera affiché qu'une seule fois. Copiez-le immédiatement. {newToken && (

✓ Token créé ! Copiez-le maintenant (ne sera plus affiché) :


                                    {newToken}

)} {/* Token list */} Tokens actifs Nom Abilities Dernière utilisation Créé le {tokens.length === 0 ? ( Aucun token. Cliquez sur « Rafraîchir » pour charger. ) : ( tokens.map((token) => ( {token.name} {token.abilities?.map((a) => ( {a} ))} {token.last_used_at ? new Date(token.last_used_at).toLocaleString('fr-FR') : 'Jamais'} {new Date(token.created_at).toLocaleDateString('fr-FR')} )) )}

); }