12-05-2026 Frontend dev
This commit is contained in:
parent
405df0a122
commit
5b8bdf4182
779 changed files with 480564 additions and 6241 deletions
212
resources/views/livewire/customer/tokens.blade.php
Normal file
212
resources/views/livewire/customer/tokens.blade.php
Normal file
|
|
@ -0,0 +1,212 @@
|
|||
<?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-6">
|
||||
<flux:card>
|
||||
<div class="flex flex-wrap items-start justify-between gap-3">
|
||||
<div>
|
||||
<flux:heading size="lg">{{ __('API-Tokens') }}</flux:heading>
|
||||
<flux:subheading>{{ __('Erstellen und widerrufen Sie persönliche Tokens für die neue API v1.') }}</flux:subheading>
|
||||
</div>
|
||||
<flux:button href="{{ route('docs.api.v1') }}" variant="subtle">
|
||||
{{ __('API-Dokumentation') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</flux:card>
|
||||
|
||||
@if($notification)
|
||||
<flux:callout color="green" icon="check-circle">
|
||||
{{ $notification }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
@if($eligibilityMessage || $apiTokenDenialReason)
|
||||
<flux:callout color="yellow" icon="lock-closed">
|
||||
{{ $eligibilityMessage ?? $apiTokenDenialReason }}
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
@if($plainTextToken)
|
||||
<flux:callout color="yellow" icon="key">
|
||||
<div class="space-y-3">
|
||||
<flux:text weight="semibold">{{ __('Neuer Token') }}</flux:text>
|
||||
<code class="block overflow-x-auto rounded-md bg-zinc-950 px-3 py-2 text-sm text-white">{{ $plainTextToken }}</code>
|
||||
</div>
|
||||
</flux:callout>
|
||||
@endif
|
||||
|
||||
<form wire:submit="createToken">
|
||||
<flux:card class="space-y-5">
|
||||
<div>
|
||||
<flux:heading size="sm">{{ __('Neuen Token erstellen') }}</flux:heading>
|
||||
<flux:text class="mt-1 text-sm text-zinc-500">
|
||||
{{ __('Wählen Sie nur die Berechtigungen aus, die der jeweilige API-Client wirklich benötigt.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
|
||||
<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">
|
||||
<flux:button type="submit" variant="primary" icon="key" :disabled="! $canCreateApiToken">
|
||||
{{ __('Token erstellen') }}
|
||||
</flux:button>
|
||||
</div>
|
||||
</flux:card>
|
||||
</form>
|
||||
|
||||
<flux:card class="p-0">
|
||||
<div class="p-4">
|
||||
<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>
|
||||
<flux:text weight="semibold">{{ $token->name }}</flux:text>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
<div class="flex flex-wrap gap-1">
|
||||
@foreach($token->abilities ?? [] as $ability)
|
||||
<flux:badge size="sm" color="zinc">{{ $ability }}</flux:badge>
|
||||
@endforeach
|
||||
</div>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
<flux:text class="text-sm text-zinc-500">{{ $token->created_at?->format('d.m.Y H:i') }}</flux:text>
|
||||
</flux:table.cell>
|
||||
<flux:table.cell>
|
||||
<flux:text class="text-sm text-zinc-500">{{ $token->last_used_at?->format('d.m.Y H:i') ?? __('Nie') }}</flux:text>
|
||||
</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">
|
||||
<flux:icon.key class="size-10 text-zinc-300" />
|
||||
<flux:text weight="semibold" class="mt-3">{{ __('Keine API-Tokens vorhanden') }}</flux:text>
|
||||
<flux:text class="mt-1 max-w-md text-sm text-zinc-500">
|
||||
{{ __('Erstellen Sie erst dann einen Token, wenn eine konkrete API-Integration ihn benötigt.') }}
|
||||
</flux:text>
|
||||
</div>
|
||||
</flux:table.cell>
|
||||
</flux:table.row>
|
||||
@endforelse
|
||||
</flux:table>
|
||||
</div>
|
||||
</flux:card>
|
||||
</div>
|
||||
Loading…
Add table
Add a link
Reference in a new issue