79 lines
3.7 KiB
HTML
79 lines
3.7 KiB
HTML
|
{% extends "base.html" %}
|
||
|
|
|
||
|
|
{% block title %}Setup 2FA - Finance Tracker{% endblock %}
|
||
|
|
|
||
|
|
{% block content %}
|
||
|
|
<div class="form-container">
|
||
|
|
<div class="glass-card form-card">
|
||
|
|
<h1>🔐 Setup Two-Factor Authentication</h1>
|
||
|
|
|
||
|
|
<div style="margin: 2rem 0;">
|
||
|
|
<h3>Step 1: Scan QR Code</h3>
|
||
|
|
<p style="color: var(--text-secondary); margin-bottom: 1rem;">
|
||
|
|
Scan this QR code with your authenticator app (Google Authenticator, Authy, Microsoft Authenticator, etc.)
|
||
|
|
</p>
|
||
|
|
|
||
|
|
{% if qr_code %}
|
||
|
|
<div style="text-align: center; padding: 2rem; background: white; border-radius: 15px; margin: 1rem 0;">
|
||
|
|
<img src="data:image/png;base64,{{ qr_code }}" alt="2FA QR Code" style="max-width: 300px; display: block; margin: 0 auto;">
|
||
|
|
</div>
|
||
|
|
{% else %}
|
||
|
|
<div style="padding: 2rem; background: rgba(239, 68, 68, 0.1); border: 1px solid var(--danger); border-radius: 15px; margin: 1rem 0;">
|
||
|
|
<p style="color: var(--danger); margin: 0;">❌ QR code generation failed. Please use manual entry below.</p>
|
||
|
|
</div>
|
||
|
|
{% endif %}
|
||
|
|
|
||
|
|
<details style="margin-top: 1rem;">
|
||
|
|
<summary style="cursor: pointer; color: var(--text-secondary); font-weight: 500;">Can't scan? Enter manually</summary>
|
||
|
|
<div style="margin-top: 1rem; padding: 1.5rem; background: rgba(255, 255, 255, 0.05); border-radius: 10px;">
|
||
|
|
<p style="margin-bottom: 0.5rem;"><strong>Secret Key:</strong></p>
|
||
|
|
<code style="font-size: 1.2rem; color: #10b981; word-break: break-all; display: block; padding: 1rem; background: rgba(0, 0, 0, 0.2); border-radius: 8px;">{{ secret }}</code>
|
||
|
|
<p style="margin-top: 1rem; color: var(--text-secondary); font-size: 0.9rem;">
|
||
|
|
Enter this key manually in your authenticator app under "Enter a setup key" or "Manual entry"
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</details>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin: 2rem 0;">
|
||
|
|
<h3>Step 2: Verify Code</h3>
|
||
|
|
<p style="color: var(--text-secondary); margin-bottom: 1rem;">
|
||
|
|
Enter the 6-digit code from your authenticator app to complete setup
|
||
|
|
</p>
|
||
|
|
|
||
|
|
<form method="POST" class="form">
|
||
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
|
||
|
|
|
||
|
|
<div class="form-group">
|
||
|
|
<label for="token">Authentication Code *</label>
|
||
|
|
<input type="text" id="token" name="token" required autofocus
|
||
|
|
pattern="[0-9]{6}" maxlength="6" placeholder="000000"
|
||
|
|
style="font-size: 2rem; text-align: center; letter-spacing: 0.8rem; font-weight: 600;">
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="form-actions">
|
||
|
|
<a href="{{ url_for('settings.index') }}" class="btn btn-secondary">Cancel</a>
|
||
|
|
<button type="submit" class="btn btn-primary">✅ Enable 2FA</button>
|
||
|
|
</div>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div style="margin-top: 2rem; padding: 1.5rem; background: rgba(99, 102, 241, 0.1); border: 1px solid var(--primary); border-radius: 10px;">
|
||
|
|
<p style="margin: 0;">
|
||
|
|
<strong>💡 Important:</strong> Save your secret key in a secure location. You'll need it if you lose access to your authenticator app.
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
details summary:hover {
|
||
|
|
color: var(--text-primary);
|
||
|
|
}
|
||
|
|
|
||
|
|
input[type="text"]#token {
|
||
|
|
background: rgba(255, 255, 255, 0.15);
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
{% endblock %}
|