94 lines
4.6 KiB
PHP
94 lines
4.6 KiB
PHP
@push('modal.header')
|
||
<div class="px-5 pt-5 pb-3 border-b border-white/10
|
||
backdrop-blur rounded-t-2xl relative">
|
||
<div class="flex items-center justify-between">
|
||
<h2 class="text-lg font-semibold text-white">
|
||
<i class="ph ph-shield-check text-white/70 text-lg"></i>
|
||
Recovery-Codes</h2>
|
||
<button wire:click="$dispatch('closeModal')" class="text-white/60 hover:text-white text-lg">
|
||
<i class="ph ph-x"></i>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
@endpush
|
||
|
||
<div class="p-6">
|
||
<div class="space-y-4">
|
||
@if(empty($plainCodes))
|
||
<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>
|
||
@else
|
||
<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">
|
||
<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="text-xs text-white/50 rounded-xl border border-white/10 bg-white/[0.04] p-2">
|
||
<b>Tipp</b>: Aktiviere TOTP als Hauptmethode, nutze E-Mail-Codes als Fallback und drucke diese Codes aus.
|
||
</div>
|
||
@endif
|
||
</div>
|
||
</div>
|
||
|
||
@push('modal.footer')
|
||
<div class="px-5 py-3 border-t border-white/10 backdrop-blur rounded-b-2xl">
|
||
@if(empty($plainCodes))
|
||
<div class="flex items-center justify-end gap-2">
|
||
<button wire:click="$dispatch('closeModal')"
|
||
class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
|
||
Abbrechen
|
||
</button>
|
||
<button wire:click="generate"
|
||
class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
|
||
{{ $hasExisting ? 'Neu erstellen & anzeigen' : 'Erstellen & anzeigen' }}
|
||
</button>
|
||
</div>
|
||
@else
|
||
<div class="flex flex-wrap items-center justify-end gap-2">
|
||
<button
|
||
x-data
|
||
x-on:click="navigator.clipboard.writeText(@js(implode(PHP_EOL, $plainCodes)))"
|
||
class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
|
||
In Zwischenablage
|
||
</button>
|
||
|
||
<button wire:click="downloadTxt"
|
||
class="px-4 py-2 rounded-lg text-sm border border-white/10 text-white/70 hover:text-white hover:border-white/20">
|
||
Als .txt speichern
|
||
</button>
|
||
|
||
<button wire:click="$dispatch('closeModal')"
|
||
class="px-4 py-2 rounded-lg text-sm bg-emerald-500/20 text-emerald-300 border border-emerald-400/30 hover:bg-emerald-500/30">
|
||
Fertig
|
||
</button>
|
||
</div>
|
||
@endif
|
||
</div>
|
||
@endpush
|