85 lines
5.2 KiB
PHP
85 lines
5.2 KiB
PHP
<div class="flex items-center justify-center min-h-screen p-6">
|
|
<div style="width:100%;max-width:380px">
|
|
|
|
{{-- Logo --}}
|
|
<div style="text-align:center;margin-bottom:28px">
|
|
<div style="display:inline-flex;align-items:center;gap:10px;margin-bottom:8px">
|
|
<div style="width:32px;height:32px;background:var(--mw-v);border-radius:8px;display:flex;align-items:center;justify-content:center">
|
|
<svg width="16" height="16" viewBox="0 0 18 18" fill="none">
|
|
<path d="M9 2L15.5 5.5v7L9 16 2.5 12.5v-7L9 2Z" stroke="white" stroke-width="1.5" stroke-linejoin="round"/>
|
|
<path d="M9 6L12 7.5v3L9 12 6 10.5v-3L9 6Z" fill="white" opacity=".9"/>
|
|
</svg>
|
|
</div>
|
|
<span style="font-size:16px;font-weight:700;color:var(--mw-t1);letter-spacing:1px">MAILWOLT</span>
|
|
</div>
|
|
<div style="font-size:13px;color:var(--mw-t4)">Zwei-Faktor-Authentifizierung</div>
|
|
</div>
|
|
|
|
<div class="mbx-section" style="padding:24px">
|
|
|
|
@if(!$useRecovery)
|
|
<div style="text-align:center;margin-bottom:20px">
|
|
<div style="width:48px;height:48px;background:var(--mw-vbg);border:1px solid var(--mw-vbd);border-radius:12px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:12px">
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none">
|
|
<rect x="5" y="11" width="14" height="10" rx="2" stroke="var(--mw-v2)" stroke-width="1.5"/>
|
|
<path d="M8 11V7a4 4 0 1 1 8 0v4" stroke="var(--mw-v2)" stroke-width="1.5" stroke-linecap="round"/>
|
|
<circle cx="12" cy="16" r="1.2" fill="var(--mw-v2)"/>
|
|
</svg>
|
|
</div>
|
|
<div style="font-size:13.5px;font-weight:600;color:var(--mw-t1)">Authenticator-Code</div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:4px">6-stelligen Code aus deiner Authenticator-App eingeben</div>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="text" wire:model.defer="code" wire:keydown.enter="verify"
|
|
inputmode="numeric" pattern="[0-9]*" maxlength="6" autocomplete="one-time-code"
|
|
style="text-align:center;font-size:22px;font-family:monospace;letter-spacing:8px;padding:12px 16px;width:100%;border-radius:8px;border:1px solid var(--mw-b2);background:var(--mw-bg4);color:var(--mw-t1)"
|
|
placeholder="000000" autofocus>
|
|
@error('code') <div style="color:#fca5a5;font-size:11px;margin-top:6px;text-align:center">{{ $message }}</div> @enderror
|
|
@if($error) <div style="color:#fca5a5;font-size:11px;margin-top:6px;text-align:center">{{ $error }}</div> @endif
|
|
</div>
|
|
|
|
<button wire:click="verify"
|
|
style="width:100%;margin-top:14px;padding:10px;border-radius:8px;background:var(--mw-v);border:none;color:#fff;font-size:13px;font-weight:600;cursor:pointer">
|
|
<span wire:loading.remove wire:target="verify">Verifizieren</span>
|
|
<span wire:loading wire:target="verify">Prüfe…</span>
|
|
</button>
|
|
|
|
<div style="text-align:center;margin-top:14px">
|
|
<button wire:click="$set('useRecovery',true)" style="background:none;border:none;font-size:11.5px;color:var(--mw-t4);cursor:pointer;text-decoration:underline">
|
|
Recovery-Code verwenden
|
|
</button>
|
|
</div>
|
|
|
|
@else
|
|
|
|
<div style="text-align:center;margin-bottom:20px">
|
|
<div style="font-size:13.5px;font-weight:600;color:var(--mw-t1)">Recovery-Code</div>
|
|
<div style="font-size:11.5px;color:var(--mw-t4);margin-top:4px">Einen deiner gespeicherten Recovery-Codes eingeben</div>
|
|
</div>
|
|
|
|
<div>
|
|
<input type="text" wire:model.defer="code" wire:keydown.enter="verify"
|
|
style="font-family:monospace;font-size:14px;letter-spacing:2px;padding:10px 14px;width:100%;border-radius:8px;border:1px solid var(--mw-b2);background:var(--mw-bg4);color:var(--mw-t1)"
|
|
placeholder="XXXXXXXXXX" autocomplete="off">
|
|
@error('code') <div style="color:#fca5a5;font-size:11px;margin-top:6px">{{ $message }}</div> @enderror
|
|
@if($error) <div style="color:#fca5a5;font-size:11px;margin-top:6px">{{ $error }}</div> @endif
|
|
</div>
|
|
|
|
<button wire:click="verify"
|
|
style="width:100%;margin-top:14px;padding:10px;border-radius:8px;background:rgba(239,68,68,.8);border:1px solid rgba(239,68,68,.4);color:#fff;font-size:13px;font-weight:600;cursor:pointer">
|
|
Recovery-Code einlösen
|
|
</button>
|
|
|
|
<div style="text-align:center;margin-top:14px">
|
|
<button wire:click="$set('useRecovery',false)" style="background:none;border:none;font-size:11.5px;color:var(--mw-t4);cursor:pointer;text-decoration:underline">
|
|
← Zurück zum Authenticator-Code
|
|
</button>
|
|
</div>
|
|
@endif
|
|
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|