251 lines
11 KiB
PHP
251 lines
11 KiB
PHP
<?php
|
|
|
|
use App\Services\Api\ApiAccessEligibilityService;
|
|
use Illuminate\Validation\Rule;
|
|
use Livewire\Attributes\Layout;
|
|
use Livewire\Attributes\Title;
|
|
use Livewire\Volt\Component;
|
|
|
|
new #[Layout('components.layouts.app'), Title('API-Tokens')] class extends Component
|
|
{
|
|
public string $tokenName = '';
|
|
|
|
/** @var list<string> */
|
|
public array $selectedAbilities = ['press-releases:read'];
|
|
|
|
public ?string $plainTextToken = null;
|
|
|
|
public ?string $notification = null;
|
|
|
|
public ?string $eligibilityMessage = null;
|
|
|
|
private const ABILITIES = [
|
|
'press-releases:read' => 'Pressemitteilungen lesen',
|
|
'press-releases:write' => 'Pressemitteilungen erstellen und bearbeiten',
|
|
'press-release-images:write' => 'Bilder zu Pressemitteilungen verwalten',
|
|
'companies:read' => 'Firmendaten lesen',
|
|
'newsletter:subscribe' => 'Newsletter-Anmeldungen auslösen',
|
|
];
|
|
|
|
public function createToken(): void
|
|
{
|
|
$eligibility = app(ApiAccessEligibilityService::class);
|
|
$denialReason = $eligibility->denialReason(auth()->user());
|
|
|
|
if ($denialReason !== null) {
|
|
$this->plainTextToken = null;
|
|
$this->eligibilityMessage = __($denialReason);
|
|
|
|
return;
|
|
}
|
|
|
|
$validated = $this->validate([
|
|
'tokenName' => ['required', 'string', 'max:80'],
|
|
'selectedAbilities' => ['required', 'array', 'min:1'],
|
|
'selectedAbilities.*' => ['required', 'string', Rule::in(array_keys(self::ABILITIES))],
|
|
]);
|
|
|
|
$token = auth()->user()->createToken(
|
|
$validated['tokenName'],
|
|
$validated['selectedAbilities'],
|
|
);
|
|
|
|
$this->plainTextToken = $token->plainTextToken;
|
|
$this->notification = __('Token wurde erstellt. Bitte kopieren Sie ihn jetzt, er wird später nicht erneut angezeigt.');
|
|
$this->eligibilityMessage = null;
|
|
$this->tokenName = '';
|
|
$this->selectedAbilities = ['press-releases:read'];
|
|
}
|
|
|
|
public function revokeToken(int $tokenId): void
|
|
{
|
|
auth()->user()
|
|
->tokens()
|
|
->whereKey($tokenId)
|
|
->delete();
|
|
|
|
$this->plainTextToken = null;
|
|
$this->notification = __('Token wurde widerrufen.');
|
|
}
|
|
|
|
public function with(): array
|
|
{
|
|
$eligibility = app(ApiAccessEligibilityService::class);
|
|
$denialReason = $eligibility->denialReason(auth()->user());
|
|
|
|
return [
|
|
'abilityOptions' => self::ABILITIES,
|
|
'canCreateApiToken' => $denialReason === null,
|
|
'apiTokenDenialReason' => $denialReason,
|
|
'tokens' => auth()->user()
|
|
->tokens()
|
|
->latest()
|
|
->get(['id', 'name', 'abilities', 'last_used_at', 'created_at']),
|
|
];
|
|
}
|
|
}; ?>
|
|
|
|
<div class="space-y-8">
|
|
{{-- ============== PAGE HEADER ============== --}}
|
|
<header class="page-header">
|
|
<div class="min-w-0">
|
|
<div class="flex items-center gap-3 mb-3 flex-wrap">
|
|
<span class="badge hub dot">{{ __('User Backend') }}</span>
|
|
<span class="eyebrow muted">{{ __('Mein Bereich · API') }}</span>
|
|
</div>
|
|
<h1 class="text-[30px] font-bold tracking-[-0.6px] leading-[1.15] m-0 text-[color:var(--color-ink)]">
|
|
{{ __('API-Tokens') }}
|
|
</h1>
|
|
<p class="text-[13px] leading-[1.55] mt-2 m-0 max-w-[640px] text-[color:var(--color-ink-2)]">
|
|
{{ __('Erstellen und widerrufen Sie persönliche Tokens für die neue API v1.') }}
|
|
</p>
|
|
</div>
|
|
|
|
<div class="flex items-center gap-2 flex-shrink-0">
|
|
<flux:button href="{{ route('docs.api.v1') }}" variant="filled" icon="book-open">
|
|
{{ __('API-Dokumentation') }}
|
|
</flux:button>
|
|
</div>
|
|
</header>
|
|
|
|
@if ($notification)
|
|
<div class="px-4 py-3 rounded-[5px] border text-[12.5px] flex items-center gap-2
|
|
bg-[color:var(--color-ok-soft)] border-[color:var(--color-ok)]/30 text-[color:var(--color-gain-deep)]">
|
|
<flux:icon.check-circle class="size-[16px] flex-shrink-0" />
|
|
{{ $notification }}
|
|
</div>
|
|
@endif
|
|
|
|
@if ($eligibilityMessage || $apiTokenDenialReason)
|
|
<div class="px-4 py-3 rounded-[5px] border text-[12.5px] flex items-start gap-3
|
|
bg-[color:var(--color-warn-soft)] border-[color:var(--color-warn)]/30 text-[color:var(--color-ink-2)]">
|
|
<flux:icon.lock-closed class="size-[16px] flex-shrink-0 mt-0.5 text-[color:var(--color-accent-deep)]" />
|
|
<div class="flex-1">{{ $eligibilityMessage ?? $apiTokenDenialReason }}</div>
|
|
</div>
|
|
@endif
|
|
|
|
@if ($plainTextToken)
|
|
<article class="panel" style="border-left:3px solid var(--color-warn);">
|
|
<div class="panel-head">
|
|
<span class="section-eyebrow">{{ __('Neuer Token') }}</span>
|
|
<span class="badge warn">{{ __('Nur jetzt sichtbar') }}</span>
|
|
</div>
|
|
<div class="p-5 space-y-3">
|
|
<p class="text-[12.5px] text-[color:var(--color-ink-2)] m-0">
|
|
{{ __('Bitte kopieren Sie ihn jetzt, er wird später nicht erneut angezeigt.') }}
|
|
</p>
|
|
{{-- Token-Anzeige: dunkler Hintergrund konstant in Light + Dark
|
|
(deshalb panel-dark-2 statt --color-ink, das im Dark Mode hell wird). --}}
|
|
<code class="block overflow-x-auto rounded-[5px] bg-[color:var(--color-panel-dark-2)] px-3 py-2 text-[12px] text-white font-mono">{{ $plainTextToken }}</code>
|
|
</div>
|
|
</article>
|
|
@endif
|
|
|
|
{{-- ============== FORM-PANEL ============== --}}
|
|
<form wire:submit="createToken">
|
|
<article class="panel">
|
|
<div class="panel-head">
|
|
<span class="section-eyebrow">{{ __('Neuen Token erstellen') }}</span>
|
|
</div>
|
|
<div class="p-5 space-y-5">
|
|
<p class="text-[12.5px] text-[color:var(--color-ink-3)] m-0">
|
|
{{ __('Wählen Sie nur die Berechtigungen aus, die der jeweilige API-Client wirklich benötigt.') }}
|
|
</p>
|
|
|
|
<flux:field>
|
|
<flux:label>{{ __('Name') }}</flux:label>
|
|
<flux:input wire:model="tokenName" placeholder="{{ __('z.B. Website-Integration') }}" />
|
|
<flux:error name="tokenName" />
|
|
</flux:field>
|
|
|
|
<div>
|
|
<flux:label>{{ __('Berechtigungen') }}</flux:label>
|
|
<div class="mt-3 grid gap-3 md:grid-cols-2">
|
|
@foreach ($abilityOptions as $ability => $label)
|
|
<flux:checkbox wire:model="selectedAbilities" value="{{ $ability }}" label="{{ $label }}" />
|
|
@endforeach
|
|
</div>
|
|
<flux:error name="selectedAbilities" class="mt-3" />
|
|
</div>
|
|
|
|
<div class="flex justify-end pt-3 border-t border-[color:var(--color-bg-rule)]">
|
|
<flux:button type="submit" variant="primary" icon="key" :disabled="! $canCreateApiToken">
|
|
{{ __('Token erstellen') }}
|
|
</flux:button>
|
|
</div>
|
|
</div>
|
|
</article>
|
|
</form>
|
|
|
|
{{-- ============== TABELLE ============== --}}
|
|
<article class="panel overflow-hidden">
|
|
<div class="panel-head">
|
|
<span class="section-eyebrow">{{ __('Bestehende Tokens') }}</span>
|
|
<span class="text-[11.5px] text-[color:var(--color-ink-3)]">
|
|
{{ __(':count Einträge', ['count' => $tokens->count()]) }}
|
|
</span>
|
|
</div>
|
|
<flux:table>
|
|
<flux:table.columns>
|
|
<flux:table.column>{{ __('Name') }}</flux:table.column>
|
|
<flux:table.column>{{ __('Berechtigungen') }}</flux:table.column>
|
|
<flux:table.column>{{ __('Erstellt') }}</flux:table.column>
|
|
<flux:table.column>{{ __('Zuletzt genutzt') }}</flux:table.column>
|
|
<flux:table.column>{{ __('Aktionen') }}</flux:table.column>
|
|
</flux:table.columns>
|
|
|
|
@forelse ($tokens as $token)
|
|
<flux:table.row wire:key="token-{{ $token->id }}">
|
|
<flux:table.cell>
|
|
<span class="text-[13px] font-semibold text-[color:var(--color-ink)]">{{ $token->name }}</span>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
<div class="flex flex-wrap gap-1">
|
|
@foreach ($token->abilities ?? [] as $ability)
|
|
<span class="badge hub">{{ $ability }}</span>
|
|
@endforeach
|
|
</div>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
<span class="text-[12px] text-[color:var(--color-ink-3)]">
|
|
{{ $token->created_at?->format('d.m.Y H:i') }}
|
|
</span>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
<span class="text-[12px] text-[color:var(--color-ink-3)]">
|
|
{{ $token->last_used_at?->format('d.m.Y H:i') ?? __('Nie') }}
|
|
</span>
|
|
</flux:table.cell>
|
|
<flux:table.cell>
|
|
<flux:button
|
|
size="sm"
|
|
variant="danger"
|
|
icon="trash"
|
|
wire:click="revokeToken({{ $token->id }})"
|
|
wire:confirm="{{ __('Diesen API-Token wirklich widerrufen?') }}"
|
|
>
|
|
{{ __('Widerrufen') }}
|
|
</flux:button>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@empty
|
|
<flux:table.row>
|
|
<flux:table.cell colspan="5">
|
|
<div class="flex flex-col items-center justify-center px-4 py-10 text-center">
|
|
<div class="w-14 h-14 rounded-[6px] flex items-center justify-center mb-3
|
|
bg-[color:var(--color-hub-soft)] border border-[color:var(--color-hub-soft-2)] text-[color:var(--color-hub)]">
|
|
<flux:icon.key class="size-6" />
|
|
</div>
|
|
<div class="text-[14px] font-semibold text-[color:var(--color-ink)] mb-1">
|
|
{{ __('Keine API-Tokens vorhanden') }}
|
|
</div>
|
|
<p class="text-[12px] text-[color:var(--color-ink-3)] max-w-md m-0">
|
|
{{ __('Erstellen Sie erst dann einen Token, wenn eine konkrete API-Integration ihn benötigt.') }}
|
|
</p>
|
|
</div>
|
|
</flux:table.cell>
|
|
</flux:table.row>
|
|
@endforelse
|
|
</flux:table>
|
|
</article>
|
|
</div>
|