4818172bc6
Migrate many view templates from raw PHP to Twig and modernize UI/UX for 2FA and settings. Controllers updated to provide avatar data and two-factor info (ProfileController, UserController) and SettingsController now includes timezone lists, notification preset selection, cron path, cached update state and rollback availability. ErrorHandler now attempts to render error pages via a new Core\TwigService with a safe fallback to raw PHP views. TwoFactorService generation silences deprecated warnings during QR code creation. Numerous .php view files were removed and replaced with .twig equivalents (2fa setup/verify/backup-codes and many auth, dashboard, domains, errors, layout, users, tags, tld-registry, etc.), and core/TwigService was added. These changes move the app toward a Twig-based templating system, improve 2FA flows, surface avatar images in lists/profiles, and make error rendering more robust.
117 lines
6.8 KiB
Twig
117 lines
6.8 KiB
Twig
{% extends 'layout/base.twig' %}
|
|
|
|
{% set title = 'Setup Two-Factor Authentication' %}
|
|
{% set pageTitle = 'Setup 2FA' %}
|
|
{% set pageDescription = 'Configure two-factor authentication for your account' %}
|
|
{% set pageIcon = 'fas fa-shield-alt' %}
|
|
|
|
{% block content %}
|
|
<div class="max-w-3xl mx-auto">
|
|
<div class="bg-white dark:bg-slate-800 rounded-lg border border-gray-200 dark:border-slate-700 overflow-hidden">
|
|
<div class="px-6 py-4 border-b border-gray-200 dark:border-slate-700">
|
|
<h2 class="text-lg font-semibold text-gray-900 dark:text-white flex items-center">
|
|
<i class="fas fa-shield-alt text-gray-400 dark:text-slate-500 mr-2 text-sm"></i>
|
|
Setup Two-Factor Authentication
|
|
</h2>
|
|
</div>
|
|
|
|
<div class="p-6 space-y-5">
|
|
{# Step 1: Download Authenticator App #}
|
|
<div class="border-l-4 border-blue-500 pl-4">
|
|
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 1: Install an Authenticator App</h4>
|
|
<p class="text-sm text-gray-600 dark:text-slate-400 mb-3">Download one of these apps on your mobile device:</p>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-3">
|
|
<div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
|
|
<i class="fab fa-google text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">Google Authenticator</p>
|
|
<p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
|
|
<i class="fas fa-mobile-alt text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">Authy</p>
|
|
<p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
|
|
</div>
|
|
<div class="bg-gray-50 dark:bg-slate-700/50 rounded-lg p-3 text-center">
|
|
<i class="fab fa-microsoft text-2xl text-blue-600 dark:text-blue-400 mb-2"></i>
|
|
<p class="text-sm font-medium text-gray-900 dark:text-white">Microsoft Authenticator</p>
|
|
<p class="text-xs text-gray-500 dark:text-slate-400">iOS & Android</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Step 2: Scan QR Code #}
|
|
<div class="border-l-4 border-green-500 pl-4">
|
|
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 2: Scan QR Code</h4>
|
|
<p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Open your authenticator app and scan this QR code:</p>
|
|
|
|
<div class="flex flex-col items-center space-y-4">
|
|
<div class="bg-white border-2 border-gray-200 dark:border-slate-600 rounded-lg p-4">
|
|
<img src="{{ qrCodeUrl }}" alt="QR Code for 2FA setup" class="w-48 h-48">
|
|
</div>
|
|
|
|
<div class="text-center">
|
|
<p class="text-xs text-gray-500 dark:text-slate-400 mb-2">Can't scan? Enter this code manually:</p>
|
|
<div class="bg-gray-100 dark:bg-slate-700 rounded-lg p-3 font-mono text-sm">
|
|
<code class="text-gray-800 dark:text-slate-200">{{ secret }}</code>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{# Step 3: Verify Code #}
|
|
<div class="border-l-4 border-yellow-500 pl-4">
|
|
<h4 class="text-base font-semibold text-gray-900 dark:text-white mb-2">Step 3: Verify Setup</h4>
|
|
<p class="text-sm text-gray-600 dark:text-slate-400 mb-4">Enter the 6-digit code from your authenticator app:</p>
|
|
|
|
<form method="POST" action="/2fa/verify-setup" id="verifyForm">
|
|
{{ csrf_field() }}
|
|
|
|
<div class="max-w-xs mx-auto">
|
|
<input type="text" name="verification_code" id="verification_code" maxlength="6" pattern="[0-9]{6}" placeholder="123456"
|
|
class="w-full px-4 py-3 text-center text-2xl font-mono border border-gray-300 dark:border-slate-600 rounded-lg bg-white dark:bg-slate-700 text-gray-900 dark:text-white placeholder-gray-400 dark:placeholder-slate-500 focus:ring-2 focus:ring-primary focus:border-primary" required>
|
|
<p class="text-xs text-gray-500 dark:text-slate-400 mt-2 text-center">Enter 6-digit code</p>
|
|
</div>
|
|
|
|
<div class="flex flex-col sm:flex-row gap-3 pt-3">
|
|
<button type="submit" class="inline-flex items-center justify-center px-5 py-2.5 bg-primary hover:bg-primary-dark text-white rounded-lg font-medium text-sm">
|
|
<i class="fas fa-check mr-2"></i>Verify & Enable 2FA
|
|
</button>
|
|
<a href="/2fa/cancel-setup" class="inline-flex items-center justify-center px-5 py-2.5 border border-gray-300 dark:border-slate-600 text-gray-700 dark:text-slate-300 rounded-lg font-medium hover:bg-gray-50 dark:hover:bg-slate-700 text-sm">
|
|
<i class="fas fa-times mr-2"></i>Cancel
|
|
</a>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{# Security Notice #}
|
|
<div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/20 rounded-lg p-4">
|
|
<div class="flex">
|
|
<i class="fas fa-exclamation-triangle text-yellow-600 dark:text-yellow-400 mt-0.5 mr-3"></i>
|
|
<div>
|
|
<p class="text-sm font-medium text-yellow-900 dark:text-yellow-300">Important Security Notice</p>
|
|
<p class="text-sm text-yellow-700 dark:text-yellow-400/80 mt-1">
|
|
Once 2FA is enabled, you'll need your authenticator app to log in.
|
|
Make sure to save your backup codes in a secure location.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const codeInput = document.getElementById('verification_code');
|
|
codeInput.focus();
|
|
codeInput.addEventListener('input', function() {
|
|
this.value = this.value.replace(/[^0-9]/g, '');
|
|
if (this.value.length === 6) {
|
|
setTimeout(() => document.getElementById('verifyForm').submit(), 500);
|
|
}
|
|
});
|
|
});
|
|
</script>
|
|
{% endblock %}
|