82 lines
4.0 KiB
Plaintext
82 lines
4.0 KiB
Plaintext
{block content}
|
|
|
|
<div class="container py-5">
|
|
<div class="row justify-content-center">
|
|
<div class="col-md-10 col-lg-8">
|
|
<div class="card shadow-sm">
|
|
<div class="card-header bg-primary text-white">
|
|
<h2 class="h5 mb-0">Nastavení dvoufázového ověření (2FA)</h2>
|
|
</div>
|
|
|
|
<div class="card-body">
|
|
<div class="row g-4">
|
|
|
|
<div class="col-md-6 border-end">
|
|
<h3 class="h6 fw-bold">1. Přidejte si účet do aplikace</h3>
|
|
<p class="small text-muted">Použijte Google Authenticator, Authy nebo Microsoft Authenticator.</p>
|
|
|
|
<div class="text-center my-3 p-3 border rounded bg-light">
|
|
<img src="{$qrCodeUri|noescape}" alt="QR kód" class="img-fluid">
|
|
</div>
|
|
|
|
<div class="d-grid gap-2 mb-3">
|
|
<a href="{$otpAuthUri|noescape}" class="btn btn-outline-primary d-md-none">
|
|
<i class="bi bi-mobile"></i> Otevřít přímo v aplikaci
|
|
</a>
|
|
</div>
|
|
|
|
<div class="alert alert-secondary py-2">
|
|
<small class="d-block text-uppercase fw-bold text-muted" style="font-size: 0.7rem;">Ruční klíč:</small>
|
|
<code class="user-select-all">{$secretKey}</code>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="col-md-6">
|
|
<h3 class="h6 fw-bold">2. Ověřte nastavení</h3>
|
|
<p class="small text-muted">Zadejte 6místný kód z aplikace pro potvrzení.</p>
|
|
|
|
<div n:foreach="$flashes as $flash" class="alert alert-{$flash->type === 'error' ? 'danger' : $flash->type} alert-dismissible fade show" role="alert">
|
|
{$flash->message}
|
|
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
|
|
</div>
|
|
|
|
<div class="mt-4">
|
|
{form verifyForm}
|
|
<div n:if="$form->hasErrors()" class="alert alert-danger d-flex align-items-center shadow-sm" role="alert">
|
|
<i class="bi bi-exclamation-triangle-fill me-2"></i>
|
|
<div>
|
|
{foreach $form->getErrors() as $error}{$error}{sep}<br>{/sep}{/foreach}
|
|
</div>
|
|
</div>
|
|
<div class="mb-3">
|
|
{label code class => "form-label" /}
|
|
{input code class => "form-control form-control-lg text-center fw-bold", style => "letter-spacing: 0.3rem;", placeholder => "000 000"}
|
|
</div>
|
|
<div class="d-grid">
|
|
{input send class => "btn btn-success btn-lg"}
|
|
</div>
|
|
{/form}
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="card-footer text-center py-3">
|
|
<a n:href=":Home:" class="btn btn-link btn-sm">Zrušit a vrátit se zpět</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
/* Jemné doladění pro lepší čitelnost kódu */
|
|
input[name="code"]::placeholder {
|
|
letter-spacing: normal;
|
|
font-weight: normal;
|
|
opacity: 0.5;
|
|
}
|
|
</style>
|
|
|
|
{/block} |