75 lines
3.9 KiB
PHP
75 lines
3.9 KiB
PHP
<div class="mw-modal-frame">
|
|
|
|
<div class="mw-modal-head">
|
|
<div style="display:flex;align-items:center;gap:7px">
|
|
<span class="mbx-badge-mute">2FA</span>
|
|
<span style="font-size:12px;color:var(--mw-t3)">— TOTP einrichten</span>
|
|
</div>
|
|
<button wire:click="$dispatch('closeModal')" class="mw-modal-close">
|
|
<svg width="13" height="13" viewBox="0 0 13 13" fill="none"><path d="M1 1l11 11M12 1L1 12" stroke="currentColor" stroke-width="1.4" stroke-linecap="round"/></svg>
|
|
</button>
|
|
</div>
|
|
|
|
<div class="mw-modal-body">
|
|
|
|
@if($step === 'scan')
|
|
<div style="text-align:center;margin-bottom:16px">
|
|
<div style="font-size:12.5px;color:var(--mw-t2);margin-bottom:14px">QR-Code mit Google Authenticator, Authy oder einer TOTP-App scannen.</div>
|
|
|
|
{{-- QR Code --}}
|
|
<div style="display:inline-block;background:#fff;padding:10px;border-radius:10px;margin-bottom:14px">
|
|
{!! $qrSvg !!}
|
|
</div>
|
|
|
|
{{-- Manual secret --}}
|
|
<div style="font-size:11px;color:var(--mw-t4);margin-bottom:4px">Manueller Schlüssel</div>
|
|
<div style="font-family:monospace;font-size:12px;color:var(--mw-t2);background:var(--mw-bg4);border:1px solid var(--mw-b2);border-radius:6px;padding:6px 12px;word-break:break-all;letter-spacing:2px">
|
|
{{ chunk_split($secret, 4, ' ') }}
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="mw-modal-label">Code zur Bestätigung eingeben</label>
|
|
<input type="text" wire:model.defer="code" wire:keydown.enter="verify"
|
|
inputmode="numeric" maxlength="6" autocomplete="one-time-code"
|
|
class="mw-modal-input" style="text-align:center;font-size:18px;letter-spacing:6px;font-family:monospace"
|
|
placeholder="000000">
|
|
@error('code') <div class="mw-modal-error">{{ $message }}</div> @enderror
|
|
<div class="mw-modal-hint">6-stelligen Code aus deiner App eingeben um die Einrichtung abzuschließen.</div>
|
|
</div>
|
|
|
|
@elseif($step === 'codes')
|
|
<div>
|
|
<div style="padding:10px 12px;border-radius:8px;border:1px solid rgba(245,158,11,.3);background:rgba(245,158,11,.06);margin-bottom:14px">
|
|
<div style="font-size:11.5px;color:#fcd34d;font-weight:500">Recovery-Codes — jetzt speichern!</div>
|
|
<div style="font-size:11px;color:rgba(252,211,77,.7);margin-top:3px">Diese Codes werden nur einmal angezeigt. Bewahre sie sicher auf.</div>
|
|
</div>
|
|
<div style="display:grid;grid-template-columns:1fr 1fr;gap:6px">
|
|
@foreach($recoveryCodes as $rc)
|
|
<div style="font-family:monospace;font-size:12px;color:var(--mw-t1);background:var(--mw-bg4);border:1px solid var(--mw-b2);border-radius:6px;padding:6px 10px;letter-spacing:1.5px">
|
|
{{ $rc }}
|
|
</div>
|
|
@endforeach
|
|
</div>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
<div class="mw-modal-foot">
|
|
@if($step === 'scan')
|
|
<button wire:click="$dispatch('closeModal')" class="mw-btn-cancel">Abbrechen</button>
|
|
<button wire:click="verify" class="mw-btn-primary">
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Bestätigen
|
|
</button>
|
|
@elseif($step === 'codes')
|
|
<button wire:click="done" class="mw-btn-primary" style="width:100%">
|
|
<svg width="11" height="11" viewBox="0 0 12 12" fill="none"><path d="M2 6l3 3 5-5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
|
Codes gespeichert — Fertig
|
|
</button>
|
|
@endif
|
|
</div>
|
|
|
|
</div>
|