update

templates/accounts/mfa_setup.html

@@ -0,0 +1,81 @@
+{% extends 'base.html' %}
+
+{% block title %}Настройка на Двуфакторна Автентификация - Официален Портал{% endblock %}
+
+{% block content %}
+<div class="form-container">
+    <h2>Настройка на Двуфакторна Автентификация</h2>
+    
+    {% if mfa_enabled %}
+    <div class="gov-alert gov-alert-info">
+        <div class="alert-icon">ℹ</div>
+        <div class="alert-content">
+            <p>Двуфакторната автентификация вече е активирана за вашия акаунт.</p>
+            <a href="{% url 'accounts:mfa_disable' %}" class="btn btn-danger" style="margin-top: 1rem;">Деактивиране</a>
+        </div>
+    </div>
+    {% else %}
+    <div class="mfa-setup-steps">
+        <div class="step">
+            <h3>Стъпка 1: Инсталиране на Приложение за Автентификация</h3>
+            <p>Ако все още нямате такова, инсталирайте приложение за автентификация на вашето мобилно устройство:</p>
+            <ul>
+                <li><strong>Google Authenticator</strong> (iOS, Android)</li>
+                <li><strong>Microsoft Authenticator</strong> (iOS, Android)</li>
+                <li><strong>Authy</strong> (iOS, Android)</li>
+                <li><strong>1Password</strong> (iOS, Android, Desktop)</li>
+            </ul>
+        </div>
+        
+        <div class="step">
+            <h3>Стъпка 2: Сканиране на QR Код</h3>
+            <p>Отворете вашето приложение за автентификация и сканирайте този QR код:</p>
+            {% if qr_code %}
+            <div class="qr-code-container">
+                <img src="{{ qr_code }}" alt="QR Code" class="qr-code">
+            </div>
+            <div class="secret-key">
+                <p><strong>Или въведете този ключ ръчно:</strong></p>
+                <div class="secret-code">{{ secret_key }}</div>
+                <button type="button" class="btn btn-sm btn-secondary" onclick="copySecretKey('{{ secret_key }}')" style="margin-top: 1rem;" data-tooltip="Копиране на секретния ключ">
+                    Копиране на Ключ
+                </button>
+            </div>
+            {% else %}
+            <p>Генериране на QR код...</p>
+            {% endif %}
+        </div>
+        
+        <div class="step">
+            <h3>Стъпка 3: Потвърждаване на Настройката</h3>
+            <p>Въведете 6-цифрения код от вашето приложение за автентификация, за да потвърдите настройката:</p>
+            <div style="text-align: center; margin-top: 1.5rem;">
+                <a href="{% url 'accounts:mfa_enable' %}" class="btn btn-primary" data-tooltip="Продължете към страницата за потвърждаване">Продължи към Потвърждаване</a>
+            </div>
+        </div>
+    </div>
+    {% endif %}
+    
+    <div class="form-actions">
+        <a href="{% url 'accounts:profile' %}" class="btn btn-secondary">Обратно към Профил</a>
+    </div>
+</div>
+
+<script>
+function copySecretKey(key) {
+    navigator.clipboard.writeText(key).then(function() {
+        if (typeof Toast !== 'undefined') {
+            Toast.success('Секретният ключ е копиран в клипборда!');
+        } else {
+            alert('Секретният ключ е копиран в клипборда!');
+        }
+    }, function(err) {
+        console.error('Failed to copy: ', err);
+        if (typeof Toast !== 'undefined') {
+            Toast.error('Неуспешно копиране. Моля, копирайте ръчно.');
+        }
+    });
+}
+</script>
+{% endblock %}
+