95 lines
4.3 KiB
PHP
95 lines
4.3 KiB
PHP
<div
|
|
x-data="{
|
|
code:['','','','','',''],
|
|
focusNext(i){ if(this.code[i].length===1 && i<5) this.$refs['d'+(i+1)].focus() },
|
|
paste(e){ const t=(e.clipboardData||window.clipboardData).getData('text').replace(/\D/g,'').slice(0,6); t.split('').forEach((c,i)=>this.code[i]=c) }
|
|
}"
|
|
class="p-6 sm:p-8"
|
|
>
|
|
{{-- Header --}}
|
|
<div class="flex items-start justify-between mb-4">
|
|
<div>
|
|
<h3 class="text-2xl font-semibold text-white/95">TOTP einrichten</h3>
|
|
<p class="mt-2 text-sm text-white/70">
|
|
Scanne den QR-Code mit deiner Authenticator-App und gib den 6-stelligen Code zur Bestätigung ein.
|
|
</p>
|
|
</div>
|
|
<button class="text-white/60 hover:text-white" wire:click="$dispatch('closeModal')">
|
|
<i class="ph ph-x text-xl"></i>
|
|
</button>
|
|
</div>
|
|
|
|
{{-- Step 1 --}}
|
|
<div class="mt-4 mb-2 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1">
|
|
<span class="text-xs font-semibold text-white/90">Step 1</span>
|
|
<span class="text-xs text-white/70">QR-Code scannen</span>
|
|
</div>
|
|
|
|
<div class="mt-3 rounded-2xl border border-white/10 bg-white/[0.04] p-3">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3 items-center">
|
|
{{-- QR: perfectly square --}}
|
|
<div class="flex justify-center #max-h-48">
|
|
<img src="{{ $qrPng }}" alt="TOTP QR"
|
|
class="w-48 h-fit rounded-xl border border-white/10 bg-black/20 p-2 object-contain" />
|
|
</div>
|
|
|
|
{{-- Secret + copy (stacked, readable) --}}
|
|
<div class="space-y-3">
|
|
<p class="text-sm font-medium text-white/85">Kannst du nicht scannen?</p>
|
|
<p class="text-xs text-white/60">Gib stattdessen diesen Secret-Key ein:</p>
|
|
|
|
<div class="mt-2 #flex flex-col sm:flex-row sm:items-center gap-2">
|
|
<input readonly value="{{ $secret }}"
|
|
class="nx-input"/>
|
|
</div>
|
|
<button x-data x-on:click="navigator.clipboard.writeText('{{ $secret }}')"
|
|
class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:border-white/20 transition">
|
|
<i class="ph ph-copy"></i> Kopieren
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{{-- Step 2 --}}
|
|
<div class="mt-6 mb-2 inline-flex items-center gap-2 rounded-full bg-white/5 border border-white/10 px-3 py-1">
|
|
<span class="text-xs font-semibold text-white/90">Step 2</span>
|
|
<span class="text-xs text-white/70">Bestätigungscode eingeben</span>
|
|
</div>
|
|
|
|
{{-- 6 small boxes, centered --}}
|
|
<div x-on:paste.prevent="paste($event)"
|
|
class="mt-3 flex justify-center gap-2 sm:gap-3">
|
|
@for($i=0;$i<6;$i++)
|
|
<input x-model="code[{{ $i }}]" x-ref="d{{ $i }}" maxlength="1"
|
|
x-on:input="focusNext({{ $i }})"
|
|
class="nx-input w-10 h-12 sm:w-11 sm:h-12 text-center text-lg" />
|
|
@endfor
|
|
</div>
|
|
|
|
{{-- Footer: hint + CTA --}}
|
|
<div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4">
|
|
<p class="text-xs text-white/55 text-center sm:text-left">
|
|
Achte darauf, dass die Gerätezeit korrekt ist.
|
|
</p>
|
|
{{-- <button class="--}}
|
|
{{-- px-5 py-2.5 rounded-xl font-medium--}}
|
|
{{-- text-white text-sm tracking-wide--}}
|
|
{{-- border border-white/10 shadow-md--}}
|
|
{{-- bg-[linear-gradient(90deg,rgba(34,211,238,0.5)_0%,rgba(16,185,129,0.5)_100%)]--}}
|
|
{{-- hover:bg-[linear-gradient(90deg,rgba(34,211,238,0.7)_0%,rgba(16,185,129,0.7)_100%)]--}}
|
|
{{-- backdrop-blur-md transition-all duration-200--}}
|
|
{{--">--}}
|
|
{{-- Bestätigen & aktivieren--}}
|
|
{{-- </button>--}}
|
|
|
|
<button type="button" class="primary-btn">
|
|
Bestätigen & aktivieren
|
|
</button>
|
|
{{-- <button x-on:click="$wire.verifyAndEnable(code.join(''))"--}}
|
|
{{-- class="btn-ghost" >--}}
|
|
{{-- class="inline-flex items-center gap-2 rounded-xl border border-white/10 bg-white/5 px-3 py-1.5 text-sm text-white/80 hover:text-white hover:border-white/20 transition">--}}
|
|
{{-- Bestätigen & aktivieren--}}
|
|
{{-- </button>--}}
|
|
</div>
|
|
</div>
|