81 lines
5.7 KiB
HTML
81 lines
5.7 KiB
HTML
{% extends "base.html" %}
|
|
{% import "macros/ui.html" as ui %}
|
|
|
|
{% block title %}{{ t(key="security-title", lang=lang | default(value='sk')) }}{% endblock title %}
|
|
|
|
{% block content %}
|
|
<div class="mx-auto max-w-md">
|
|
<h1 class="text-3xl font-bold text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="security-title", lang=lang | default(value='sk')) }}</h1>
|
|
<p class="mt-2 text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-intro", lang=lang | default(value='sk')) }}</p>
|
|
|
|
{% if error == "password" %}
|
|
{{ ui::alert_danger(message=t(key="password-current-wrong", lang=lang | default(value='sk')), extra="mt-4") }}
|
|
{% elif error == "code" %}
|
|
{{ ui::alert_danger(message=t(key="security-2fa-code-wrong", lang=lang | default(value='sk')), extra="mt-4") }}
|
|
{% elif error == "enroll" %}
|
|
{{ ui::alert_danger(message=t(key="security-2fa-enroll-error", lang=lang | default(value='sk')), extra="mt-4") }}
|
|
{% endif %}
|
|
|
|
{# --- One-time backup codes, shown right after enabling / regenerating --- #}
|
|
{% if backup_codes and backup_codes | length > 0 %}
|
|
<div class="mt-6 rounded-radius border border-success bg-success/10 px-4 py-3" role="status">
|
|
<p class="text-sm font-medium text-success">{{ t(key="security-2fa-enabled-ok", lang=lang | default(value='sk')) }}</p>
|
|
<p class="mt-2 text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-backup-intro", lang=lang | default(value='sk')) }}</p>
|
|
<ul class="mt-3 grid grid-cols-2 gap-2 font-mono text-sm text-on-surface-strong dark:text-on-surface-dark-strong">
|
|
{% for code in backup_codes %}
|
|
<li class="rounded-radius bg-surface px-3 py-1.5 text-center tracking-wider dark:bg-surface-dark">{{ code }}</li>
|
|
{% endfor %}
|
|
</ul>
|
|
</div>
|
|
{% endif %}
|
|
|
|
{% if enrolling %}
|
|
{# --- Step 2: scan the QR and confirm a code --- #}
|
|
<div class="mt-6 flex flex-col gap-4 rounded-radius border border-outline bg-surface-alt p-5 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<p class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-scan", lang=lang | default(value='sk')) }}</p>
|
|
<img src="{{ qr }}" alt="TOTP QR" class="mx-auto size-48 rounded-radius bg-white p-2" />
|
|
<div class="text-center">
|
|
<p class="text-xs text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-manual", lang=lang | default(value='sk')) }}</p>
|
|
<code class="mt-1 inline-block break-all font-mono text-sm text-on-surface-strong dark:text-on-surface-dark-strong">{{ secret }}</code>
|
|
</div>
|
|
<form method="post" action="/account/security/confirm" hx-boost="false" class="flex flex-col gap-3">
|
|
<label for="code" class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="security-2fa-enter-code", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="code", id="code", type="text", required=true, autocomplete="one-time-code", attrs='inputmode="numeric" pattern="[0-9]*" maxlength="6" autofocus') }}
|
|
{{ ui::button(label=t(key="security-2fa-confirm", lang=lang | default(value='sk')), type="submit", extra="w-full") }}
|
|
</form>
|
|
</div>
|
|
|
|
{% elif totp_enabled %}
|
|
{# --- Enabled: status + remaining backup codes + disable / regenerate --- #}
|
|
<div class="mt-6 flex items-center gap-2">
|
|
{{ ui::badge(label=t(key="security-2fa-on", lang=lang | default(value='sk')), variant="success") }}
|
|
<span class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-backup-remaining", lang=lang | default(value='sk')) }}: {{ backup_remaining }}</span>
|
|
</div>
|
|
|
|
<form method="post" action="/account/security/backup-codes" hx-boost="false" class="mt-6 flex flex-col gap-3 rounded-radius border border-outline bg-surface-alt p-5 dark:border-outline-dark dark:bg-surface-dark-alt">
|
|
<p class="text-sm font-medium text-on-surface-strong dark:text-on-surface-dark-strong">{{ t(key="security-2fa-regenerate", lang=lang | default(value='sk')) }}</p>
|
|
<label for="regen_pw" class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="password-current", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="current_password", id="regen_pw", type="password", required=true, autocomplete="current-password") }}
|
|
{{ ui::button(label=t(key="security-2fa-regenerate", lang=lang | default(value='sk')), type="submit", variant="outline-secondary", extra="w-full") }}
|
|
</form>
|
|
|
|
<form method="post" action="/account/security/disable" hx-boost="false" class="mt-4 flex flex-col gap-3 rounded-radius border border-danger/40 bg-danger/5 p-5">
|
|
<p class="text-sm font-medium text-danger">{{ t(key="security-2fa-disable", lang=lang | default(value='sk')) }}</p>
|
|
<p class="text-xs text-on-surface dark:text-on-surface-dark">{{ t(key="security-2fa-disable-hint", lang=lang | default(value='sk')) }}</p>
|
|
<label for="disable_pw" class="text-sm text-on-surface dark:text-on-surface-dark">{{ t(key="password-current", lang=lang | default(value='sk')) }}</label>
|
|
{{ ui::input(name="current_password", id="disable_pw", type="password", required=true, autocomplete="current-password") }}
|
|
{{ ui::button(label=t(key="security-2fa-disable", lang=lang | default(value='sk')), type="submit", variant="danger", extra="w-full") }}
|
|
</form>
|
|
|
|
{% else %}
|
|
{# --- Disabled: offer to enable --- #}
|
|
<form method="post" action="/account/security/enable" hx-boost="false" class="mt-6">
|
|
<div class="flex items-center gap-2">
|
|
{{ ui::badge(label=t(key="security-2fa-off", lang=lang | default(value='sk')), variant="neutral") }}
|
|
</div>
|
|
{{ ui::button(label=t(key="security-2fa-enable", lang=lang | default(value='sk')), type="submit", extra="mt-4 w-full") }}
|
|
</form>
|
|
{% endif %}
|
|
</div>
|
|
{% endblock content %}
|