83 lines
3.8 KiB
PHP
83 lines
3.8 KiB
PHP
<div class="p-6">
|
||
{{-- Header --}}
|
||
<div class="flex items-center justify-between mb-4">
|
||
<div class="inline-flex items-center gap-2">
|
||
<i class="ph ph-shield-check text-white/70 text-lg"></i>
|
||
<h3 class="text-base font-semibold tracking-tight text-white/95">Recovery-Codes</h3>
|
||
</div>
|
||
<button class="text-white/60 hover:text-white" wire:click="$dispatch('closeModal')">
|
||
<i class="ph ph-x text-xl"></i>
|
||
</button>
|
||
</div>
|
||
|
||
@if(empty($plainCodes))
|
||
{{-- KEINE Klartextcodes sichtbar (entweder noch nie erzeugt ODER bereits vorhanden) --}}
|
||
<div class="rounded-xl border border-white/10 bg-white/[0.04] p-4 mb-5">
|
||
@if($hasExisting)
|
||
<div class="flex items-start gap-3">
|
||
<i class="ph ph-info text-white/60 text-lg"></i>
|
||
<div class="text-sm text-white/80">
|
||
Für deinen Account existieren bereits Recovery-Codes.
|
||
Aus Sicherheitsgründen können sie <span class="font-semibold">nicht erneut angezeigt</span> werden.
|
||
Du kannst sie jedoch <span class="font-semibold">neu erzeugen (rotieren)</span>.
|
||
</div>
|
||
</div>
|
||
@else
|
||
<div class="text-sm text-white/80">
|
||
Recovery-Codes sind Einmal-Notfallcodes, falls du z. B. den Zugriff auf deine 2FA-App verlierst.
|
||
Sie werden <span class="font-semibold">nur direkt nach der Erstellung</span> angezeigt – bitte
|
||
speichere oder drucke sie sofort.
|
||
</div>
|
||
@endif
|
||
</div>
|
||
|
||
<div class="flex items-center justify-end gap-2">
|
||
<button wire:click="$dispatch('closeModal')"
|
||
class="rounded-xl border border-white/10 bg-white/[0.06] text-white/80 hover:border-white/20 px-4 py-2">
|
||
Abbrechen
|
||
</button>
|
||
<button wire:click="generate" class="primary-btn">
|
||
{{ $hasExisting ? 'Neu erstellen & anzeigen' : 'Erstellen & anzeigen' }}
|
||
</button>
|
||
</div>
|
||
@else
|
||
{{-- EINMALIGE ANZEIGE NACH GENERIERUNG --}}
|
||
<div class="mb-3 text-sm text-white/70">
|
||
Hier sind deine neuen Recovery-Codes. Sie werden <span class="font-semibold">nur jetzt</span> angezeigt.
|
||
Bewahre sie offline & sicher auf.
|
||
</div>
|
||
|
||
<div class="rounded-xl border border-white/10 bg-white/[0.04] p-4 mb-4">
|
||
<div class="grid grid-cols-2 md:grid-cols-3 gap-2">
|
||
@foreach($plainCodes as $c)
|
||
<div class="rounded-lg border border-white/10 bg-white/[0.06] px-3 py-2 font-mono text-white/90 tracking-wider text-center">
|
||
{{ chunk_split($c, 5, ' ') }}
|
||
</div>
|
||
@endforeach
|
||
</div>
|
||
</div>
|
||
|
||
<div class="flex flex-wrap items-center gap-2">
|
||
<button
|
||
x-data
|
||
x-on:click="navigator.clipboard.writeText(@js(implode(PHP_EOL, $plainCodes)))"
|
||
class="rounded-xl border border-white/10 bg-white/[0.06] text-white/80 hover:border-white/20 px-4 py-2">
|
||
In Zwischenablage
|
||
</button>
|
||
|
||
<button wire:click="downloadTxt"
|
||
class="rounded-xl border border-white/10 bg-white/[0.06] text-white/80 hover:border-white/20 px-4 py-2">
|
||
Als .txt speichern
|
||
</button>
|
||
|
||
<button wire:click="$dispatch('closeModal')" class="primary-btn ml-auto">
|
||
Fertig
|
||
</button>
|
||
</div>
|
||
|
||
<div class="mt-4 text-xs text-white/50">
|
||
Tipp: Aktiviere TOTP als Hauptmethode, nutze E-Mail-Codes als Fallback und drucke diese Codes aus.
|
||
</div>
|
||
@endif
|
||
</div>
|