@extends('layouts.portal')
@section('title', 'Two-factor authentication')
@section('subtitle', 'Protect your account with a code from an authenticator app every time you sign in.')
@section('content')
<div class="grid g2">
  <section class="panel"><div class="panel-head"><h2>{{ $user->hasTwoFactor() ? 'Two-factor authentication is on' : 'Set up your authenticator app' }}</h2>@if($user->hasTwoFactor())<span class="pill pill-green">Protected</span>@endif</div>
    <div class="panel-body">
      @if($required && ! $user->hasTwoFactor())<div class="callout warn mb-2"><x-icon name="shield" :size="20"/><div>Your account can open the back office ({{ $user->roleLabel() }}), so two-factor authentication is required.</div></div>@endif
      @if(! $user->hasTwoFactor())
        <ol class="op-steps">
          <li>Install <b>Google Authenticator</b>, <b>Microsoft Authenticator</b>, Authy or 1Password on your phone.</li>
          <li>Scan this QR code, or enter the key manually.</li>
          <li>Type the 6-digit code it shows to confirm.</li>
        </ol>
        <div class="row gap-2" style="align-items:center;flex-wrap:wrap">
          <div style="background:#fff;padding:8px;border-radius:10px;border:1px solid var(--line)">{!! $qr !!}</div>
          <div><div class="xs muted">Setup key</div><code style="font-size:1rem;letter-spacing:2px;word-break:break-all">{{ trim(chunk_split($secret, 4, ' ')) }}</code></div>
        </div>
        <form method="post" action="{{ route('two-factor.enable') }}" class="mt-2 row gap-1" style="align-items:flex-end">@csrf
          <div class="field mb-0"><label class="label" for="tf-code">6-digit code</label><input class="input" id="tf-code" name="code" inputmode="numeric" autocomplete="one-time-code" required maxlength="8" style="max-width:180px">@error('code')<div class="field-error">{{ $message }}</div>@enderror</div>
          <button class="btn btn-primary" type="submit">Turn on</button>
        </form>
      @else
        <p class="mb-2">Signed-in sessions ask for a code from your authenticator app. Remaining recovery codes: <b>{{ count((array) $user->two_factor_recovery_codes) }}</b>.</p>
        <form method="post" action="{{ route('two-factor.recovery') }}" class="row gap-1" style="align-items:flex-end">@csrf
          <div class="field mb-0"><label class="label" for="rc-code">Current code</label><input class="input" id="rc-code" name="code" inputmode="numeric" required maxlength="20" style="max-width:180px"></div>
          <button class="btn btn-secondary" type="submit">New recovery codes</button>
        </form>
        @error('code')<div class="field-error">{{ $message }}</div>@enderror
        @unless($required)
        <form method="post" action="{{ route('two-factor.disable') }}" class="row gap-1 mt-2" style="align-items:flex-end" data-confirm="Turn off two-factor authentication?">@csrf
          <div class="field mb-0"><label class="label" for="d-code">Current code</label><input class="input" id="d-code" name="code" required maxlength="20" style="max-width:180px"></div>
          <button class="btn btn-ghost" type="submit">Turn off</button>
        </form>
        @endunless
      @endif
    </div>
  </section>
  @if($codes)
  <section class="panel"><div class="panel-head"><h2>Your recovery codes</h2></div><div class="panel-body">
    <p class="small">Each code works once if you lose your phone. Store them in a password manager. They will not be shown again.</p>
    <div class="grid g2" style="gap:6px">@foreach($codes as $c)<code style="font-size:.95rem">{{ $c }}</code>@endforeach</div>
  </div></section>
  @endif
</div>
@endsection