Initial commit
This commit is contained in:
iulian
commit
983cee0320
322 changed files with 57174 additions and 0 deletions
126
backup/fina-2/app/templates/auth/backup_codes.html
Normal file
126
backup/fina-2/app/templates/auth/backup_codes.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Backup Codes - FINA{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center p-4 bg-background-light dark:bg-background-dark">
|
||||
<div class="max-w-2xl w-full">
|
||||
<!-- Success Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-green-100 dark:bg-green-500/20 rounded-full mb-4">
|
||||
<span class="material-symbols-outlined text-green-600 dark:text-green-400 text-[32px]">verified_user</span>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-text-main dark:text-white mb-2" data-translate="twofa.setupSuccess">Two-Factor Authentication Enabled!</h1>
|
||||
<p class="text-text-muted dark:text-[#92adc9]" data-translate="twofa.backupCodesDesc">Save these backup codes in a secure location</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl p-6 md:p-8 shadow-sm">
|
||||
<!-- Warning Alert -->
|
||||
<div class="bg-yellow-50 dark:bg-yellow-500/10 border border-yellow-200 dark:border-yellow-500/30 rounded-lg p-4 mb-6">
|
||||
<div class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-yellow-600 dark:text-yellow-400 text-[20px] flex-shrink-0">warning</span>
|
||||
<div class="flex-1">
|
||||
<h3 class="font-semibold text-yellow-800 dark:text-yellow-400 mb-1" data-translate="twofa.important">Important!</h3>
|
||||
<p class="text-sm text-yellow-700 dark:text-yellow-300" data-translate="twofa.backupCodesWarning">Each backup code can only be used once. Store them securely - you'll need them if you lose access to your authenticator app.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Backup Codes Grid -->
|
||||
<div class="bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-xl p-6 mb-6">
|
||||
<h3 class="text-sm font-medium text-text-muted dark:text-[#92adc9] uppercase tracking-wide mb-4" data-translate="twofa.yourBackupCodes">Your Backup Codes</h3>
|
||||
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
||||
{% for code in backup_codes %}
|
||||
<div class="flex items-center gap-3 bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-lg p-3">
|
||||
<span class="text-text-muted dark:text-[#92adc9] text-sm font-medium">{{ loop.index }}.</span>
|
||||
<code class="flex-1 text-primary font-mono font-bold text-base tracking-wider">{{ code }}</code>
|
||||
<button onclick="copyCode('{{ code }}')" class="text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors" title="Copy">
|
||||
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="flex flex-col sm:flex-row gap-3">
|
||||
<a href="{{ url_for('auth.download_backup_codes_pdf') }}" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-primary text-white rounded-lg font-medium hover:bg-primary/90 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">download</span>
|
||||
<span data-translate="twofa.downloadPDF">Download as PDF</span>
|
||||
</a>
|
||||
<button onclick="printCodes()" class="flex-1 inline-flex items-center justify-center gap-2 px-6 py-3 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] text-text-main dark:text-white rounded-lg font-medium hover:bg-slate-100 dark:hover:bg-white/5 transition-colors">
|
||||
<span class="material-symbols-outlined text-[20px]">print</span>
|
||||
<span data-translate="twofa.print">Print Codes</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a href="{{ url_for('main.settings') }}" class="inline-flex items-center gap-2 text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors text-sm font-medium">
|
||||
<span data-translate="twofa.continueToSettings">Continue to Settings</span>
|
||||
<span class="material-symbols-outlined text-[16px]">arrow_forward</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info Section -->
|
||||
<div class="mt-6 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
|
||||
<div class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-blue-600 dark:text-blue-400 text-[20px] flex-shrink-0">info</span>
|
||||
<div class="text-sm text-blue-700 dark:text-blue-300">
|
||||
<p class="font-medium mb-1" data-translate="twofa.howToUse">How to use backup codes:</p>
|
||||
<ul class="list-disc list-inside space-y-1 text-blue-600 dark:text-blue-400">
|
||||
<li data-translate="twofa.useWhen">Use a backup code when you can't access your authenticator app</li>
|
||||
<li data-translate="twofa.enterCode">Enter the code in the 2FA field when logging in</li>
|
||||
<li data-translate="twofa.oneTimeUse">Each code works only once - it will be deleted after use</li>
|
||||
<li data-translate="twofa.regenerate">You can regenerate codes anytime from Settings</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function copyCode(code) {
|
||||
navigator.clipboard.writeText(code).then(() => {
|
||||
// Show success notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 bg-green-500 text-white animate-slideIn';
|
||||
notification.innerHTML = `
|
||||
<span class="material-symbols-outlined text-[20px]">check_circle</span>
|
||||
<span class="text-sm font-medium">Code copied to clipboard!</span>
|
||||
`;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.classList.add('animate-slideOut');
|
||||
setTimeout(() => document.body.removeChild(notification), 300);
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
|
||||
function printCodes() {
|
||||
window.print();
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
@media print {
|
||||
body * {
|
||||
visibility: hidden;
|
||||
}
|
||||
.bg-card-light, .bg-card-dark {
|
||||
visibility: visible;
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
.bg-card-light *, .bg-card-dark * {
|
||||
visibility: visible;
|
||||
}
|
||||
button, .mt-6, .bg-blue-50, .dark\:bg-blue-500\/10 {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
257
backup/fina-2/app/templates/auth/login.html
Normal file
257
backup/fina-2/app/templates/auth/login.html
Normal file
|
|
@ -0,0 +1,257 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Login - FINA{% endblock %}
|
||||
|
||||
{% block extra_css %}
|
||||
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
|
||||
<style>
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
text-transform: none;
|
||||
letter-spacing: normal;
|
||||
word-wrap: normal;
|
||||
white-space: nowrap;
|
||||
direction: ltr;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-feature-settings: 'liga';
|
||||
}
|
||||
|
||||
.radial-blue-bg {
|
||||
background: radial-gradient(circle, #1e3a8a 0%, #1e293b 50%, #0f172a 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.radial-blue-bg::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background:
|
||||
repeating-conic-gradient(from 0deg at 50% 50%,
|
||||
transparent 0deg,
|
||||
rgba(43, 140, 238, 0.1) 2deg,
|
||||
transparent 4deg);
|
||||
animation: rotate 60s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes rotate {
|
||||
from { transform: rotate(0deg); }
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.login-input {
|
||||
border-radius: 25px;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.light .login-input {
|
||||
background: #f8fafc;
|
||||
border: 1px solid #e2e8f0;
|
||||
color: #0f172a;
|
||||
}
|
||||
|
||||
.dark .login-input,
|
||||
:root:not(.light) .login-input {
|
||||
background: #1e293b;
|
||||
border: 1px solid #334155;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.login-input:focus {
|
||||
outline: none;
|
||||
border-color: #3b82f6;
|
||||
}
|
||||
|
||||
.light .login-input:focus {
|
||||
background: #ffffff;
|
||||
}
|
||||
|
||||
.dark .login-input:focus,
|
||||
:root:not(.light) .login-input:focus {
|
||||
background: #1e293b;
|
||||
}
|
||||
|
||||
.light .login-input::placeholder {
|
||||
color: #94a3b8;
|
||||
}
|
||||
|
||||
.dark .login-input::placeholder,
|
||||
:root:not(.light) .login-input::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.login-input:-webkit-autofill,
|
||||
.login-input:-webkit-autofill:hover,
|
||||
.login-input:-webkit-autofill:focus {
|
||||
transition: background-color 5000s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.light .login-input:-webkit-autofill,
|
||||
.light .login-input:-webkit-autofill:hover,
|
||||
.light .login-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #0f172a;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #f8fafc inset;
|
||||
}
|
||||
|
||||
.dark .login-input:-webkit-autofill,
|
||||
.dark .login-input:-webkit-autofill:hover,
|
||||
.dark .login-input:-webkit-autofill:focus,
|
||||
:root:not(.light) .login-input:-webkit-autofill,
|
||||
:root:not(.light) .login-input:-webkit-autofill:hover,
|
||||
:root:not(.light) .login-input:-webkit-autofill:focus {
|
||||
-webkit-text-fill-color: #ffffff;
|
||||
-webkit-box-shadow: 0 0 0px 1000px #1e293b inset;
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
background: #3b82f6;
|
||||
color: white;
|
||||
border: none;
|
||||
border-radius: 25px;
|
||||
padding: 12px 40px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
|
||||
}
|
||||
|
||||
.login-btn:hover {
|
||||
background: #2563eb;
|
||||
transform: translateX(2px);
|
||||
box-shadow: 0 0 30px rgba(59, 130, 246, 0.5);
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex">
|
||||
<!-- Left Side - Logo with Radial Background -->
|
||||
<div class="hidden lg:flex lg:w-1/2 radial-blue-bg items-center justify-center relative">
|
||||
<div class="relative z-10">
|
||||
<img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-96 h-96 rounded-full shadow-2xl">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Right Side - Login Form -->
|
||||
<div class="w-full lg:w-1/2 flex items-center justify-center bg-background-light dark:bg-slate-900 p-8">
|
||||
<div class="w-full max-w-md">
|
||||
<!-- Mobile Logo -->
|
||||
<div class="lg:hidden flex justify-center mb-8">
|
||||
<img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-24 h-24 rounded-full shadow-lg">
|
||||
</div>
|
||||
|
||||
<!-- Login Header -->
|
||||
<h1 class="text-3xl font-bold text-text-main dark:text-white mb-8">Login Here!</h1>
|
||||
|
||||
<!-- Login Form -->
|
||||
<form id="login-form" class="space-y-6">
|
||||
<!-- Username Field -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-icons text-text-muted dark:text-slate-400 text-[24px]">person</span>
|
||||
<input type="text" name="username" required autofocus
|
||||
class="login-input flex-1"
|
||||
placeholder="username or email">
|
||||
</div>
|
||||
|
||||
<!-- Password Field -->
|
||||
<div class="flex items-center gap-3">
|
||||
<span class="material-icons text-text-muted dark:text-slate-400 text-[24px]">lock</span>
|
||||
<div class="flex-1 relative">
|
||||
<input type="password" name="password" id="password" required
|
||||
class="login-input w-full pr-12"
|
||||
placeholder="password">
|
||||
<button type="button" onclick="togglePassword()" class="absolute right-4 top-1/2 -translate-y-1/2 text-text-muted dark:text-slate-400 hover:text-primary dark:hover:text-blue-400">
|
||||
<span class="material-icons text-[20px]" id="eye-icon">visibility</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 2FA Field (hidden by default) -->
|
||||
<div id="2fa-field" class="hidden flex items-center gap-3">
|
||||
<span class="material-icons text-text-muted dark:text-slate-400 text-[24px]">security</span>
|
||||
<input type="text" name="two_factor_code"
|
||||
class="login-input flex-1"
|
||||
placeholder="2FA code">
|
||||
</div>
|
||||
|
||||
<!-- Remember Password & Login Button -->
|
||||
<div class="flex items-center justify-between">
|
||||
<label class="flex items-center text-sm text-text-muted dark:text-slate-300">
|
||||
<input type="checkbox" name="remember" id="remember" class="mr-2 rounded border-border-light dark:border-slate-500 bg-background-light dark:bg-slate-700 text-blue-600">
|
||||
<span>Remember Password</span>
|
||||
</label>
|
||||
|
||||
<button type="submit" class="login-btn">
|
||||
<span>LOGIN</span>
|
||||
<span class="material-icons text-[18px]">arrow_forward</span>
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
<!-- Register Link -->
|
||||
<div class="mt-8 text-center text-sm text-text-muted dark:text-slate-300">
|
||||
Don't have an account?
|
||||
<a href="{{ url_for('auth.register') }}" class="text-primary dark:text-blue-400 hover:text-primary/80 dark:hover:text-blue-300 hover:underline font-medium">Create your account <span class="underline">here</span>!</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function togglePassword() {
|
||||
const passwordInput = document.getElementById('password');
|
||||
const eyeIcon = document.getElementById('eye-icon');
|
||||
|
||||
if (passwordInput.type === 'password') {
|
||||
passwordInput.type = 'text';
|
||||
eyeIcon.textContent = 'visibility_off';
|
||||
} else {
|
||||
passwordInput.type = 'password';
|
||||
eyeIcon.textContent = 'visibility';
|
||||
}
|
||||
}
|
||||
|
||||
document.getElementById('login-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
try {
|
||||
const response = await fetch('/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.requires_2fa) {
|
||||
document.getElementById('2fa-field').classList.remove('hidden');
|
||||
showToast('Please enter your 2FA code', 'info');
|
||||
} else if (result.success) {
|
||||
window.location.href = result.redirect;
|
||||
} else {
|
||||
showToast(result.message || 'Login failed', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('An error occurred', 'error');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
93
backup/fina-2/app/templates/auth/register.html
Normal file
93
backup/fina-2/app/templates/auth/register.html
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Register - FINA{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center p-4 bg-background-light dark:bg-background-dark">
|
||||
<div class="max-w-md w-full">
|
||||
<!-- Logo/Brand -->
|
||||
<div class="text-center mb-8">
|
||||
<img src="{{ url_for('static', filename='icons/logo.png') }}" alt="FINA Logo" class="w-32 h-32 mx-auto mb-4 rounded-full shadow-lg shadow-primary/30">
|
||||
<h1 class="text-4xl font-bold text-text-main dark:text-white mb-2">FINA</h1>
|
||||
<p class="text-text-muted dark:text-[#92adc9]" data-translate="register.tagline">Start managing your finances today</p>
|
||||
</div>
|
||||
|
||||
<!-- Register Form -->
|
||||
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl p-8">
|
||||
<h2 class="text-2xl font-bold text-text-main dark:text-white mb-6" data-translate="register.title">Create Account</h2>
|
||||
|
||||
<form id="register-form" class="space-y-4">
|
||||
<div>
|
||||
<label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.username">Username</label>
|
||||
<input type="text" name="username" required class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.email">Email</label>
|
||||
<input type="email" name="email" required class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.password">Password</label>
|
||||
<input type="password" name="password" required minlength="8" class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
|
||||
</div>
|
||||
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
<div>
|
||||
<label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.language">Language</label>
|
||||
<select name="language" class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
|
||||
<option value="en">English</option>
|
||||
<option value="ro">Română</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label class="text-text-muted dark:text-[#92adc9] text-sm mb-2 block" data-translate="form.currency">Currency</label>
|
||||
<select name="currency" class="w-full bg-background-light dark:bg-[#111a22] border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white focus:border-primary focus:ring-1 focus:ring-primary">
|
||||
<option value="USD">USD ($)</option>
|
||||
<option value="EUR">EUR (€)</option>
|
||||
<option value="GBP">GBP (£)</option>
|
||||
<option value="RON">RON (lei)</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition-colors" data-translate="register.create_account">Create Account</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<p class="text-text-muted dark:text-[#92adc9] text-sm">
|
||||
<span data-translate="register.have_account">Already have an account?</span>
|
||||
<a href="{{ url_for('auth.login') }}" class="text-primary hover:underline ml-1" data-translate="register.login">Login</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.getElementById('register-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(e.target);
|
||||
const data = Object.fromEntries(formData);
|
||||
|
||||
try {
|
||||
const response = await fetch('/auth/register', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/json'},
|
||||
body: JSON.stringify(data)
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
window.location.href = result.redirect;
|
||||
} else {
|
||||
showToast(result.message || 'Registration failed', 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
showToast('An error occurred', 'error');
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
100
backup/fina-2/app/templates/auth/setup_2fa.html
Normal file
100
backup/fina-2/app/templates/auth/setup_2fa.html
Normal file
|
|
@ -0,0 +1,100 @@
|
|||
{% extends "base.html" %}
|
||||
|
||||
{% block title %}Setup 2FA - FINA{% endblock %}
|
||||
|
||||
{% block body %}
|
||||
<div class="min-h-screen flex items-center justify-center p-4 bg-background-light dark:bg-background-dark">
|
||||
<div class="max-w-md w-full">
|
||||
<!-- Header -->
|
||||
<div class="text-center mb-8">
|
||||
<div class="inline-flex items-center justify-center w-16 h-16 bg-primary/10 rounded-full mb-4">
|
||||
<span class="material-symbols-outlined text-primary text-[32px]">lock</span>
|
||||
</div>
|
||||
<h1 class="text-2xl font-bold text-text-main dark:text-white mb-2" data-translate="twofa.setupTitle">Setup Two-Factor Authentication</h1>
|
||||
<p class="text-text-muted dark:text-[#92adc9]" data-translate="twofa.setupDesc">Scan the QR code with your authenticator app</p>
|
||||
</div>
|
||||
|
||||
<div class="bg-card-light dark:bg-card-dark border border-border-light dark:border-[#233648] rounded-2xl p-6 md:p-8 shadow-sm">
|
||||
<!-- Instructions -->
|
||||
<div class="mb-6">
|
||||
<h3 class="text-sm font-semibold text-text-main dark:text-white mb-3" data-translate="twofa.step1">Step 1: Scan QR Code</h3>
|
||||
<p class="text-sm text-text-muted dark:text-[#92adc9] mb-4" data-translate="twofa.step1Desc">Open your authenticator app (Google Authenticator, Authy, etc.) and scan this QR code:</p>
|
||||
|
||||
<!-- QR Code -->
|
||||
<div class="bg-white p-4 rounded-xl flex justify-center border border-border-light">
|
||||
<img src="data:image/png;base64,{{ qr_code }}" alt="2FA QR Code" class="max-w-full h-auto" style="max-width: 200px;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Manual Entry -->
|
||||
<div class="mb-6">
|
||||
<details class="group">
|
||||
<summary class="cursor-pointer list-none flex items-center justify-between text-sm font-medium text-text-main dark:text-white mb-2">
|
||||
<span data-translate="twofa.manualEntry">Can't scan? Enter code manually</span>
|
||||
<span class="material-symbols-outlined text-[20px] group-open:rotate-180 transition-transform">expand_more</span>
|
||||
</summary>
|
||||
<div class="mt-3 bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg p-4">
|
||||
<p class="text-xs text-text-muted dark:text-[#92adc9] mb-2" data-translate="twofa.enterManually">Enter this code in your authenticator app:</p>
|
||||
<div class="flex items-center gap-2">
|
||||
<code id="secret-code" class="flex-1 text-primary font-mono text-sm break-all">{{ secret }}</code>
|
||||
<button onclick="copySecret()" class="p-2 text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors" title="Copy">
|
||||
<span class="material-symbols-outlined text-[20px]">content_copy</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
|
||||
<!-- Verification -->
|
||||
<form method="POST" class="space-y-4">
|
||||
<div>
|
||||
<h3 class="text-sm font-semibold text-text-main dark:text-white mb-3" data-translate="twofa.step2">Step 2: Verify Code</h3>
|
||||
<p class="text-sm text-text-muted dark:text-[#92adc9] mb-3" data-translate="twofa.step2Desc">Enter the 6-digit code from your authenticator app:</p>
|
||||
<input type="text" name="code" maxlength="6" pattern="[0-9]{6}" required
|
||||
class="w-full bg-background-light dark:bg-background-dark border border-border-light dark:border-[#233648] rounded-lg px-4 py-3 text-text-main dark:text-white text-center text-2xl tracking-widest font-mono focus:border-primary focus:ring-2 focus:ring-primary/20 outline-none transition-all"
|
||||
placeholder="000000"
|
||||
autocomplete="off">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="w-full bg-primary hover:bg-primary/90 text-white py-3 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2">
|
||||
<span class="material-symbols-outlined text-[20px]">verified_user</span>
|
||||
<span data-translate="twofa.enable">Enable 2FA</span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="mt-6 text-center">
|
||||
<a href="{{ url_for('main.settings') }}" class="text-text-muted dark:text-[#92adc9] hover:text-primary transition-colors text-sm" data-translate="actions.cancel">Cancel</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Info -->
|
||||
<div class="mt-6 bg-blue-50 dark:bg-blue-500/10 border border-blue-200 dark:border-blue-500/30 rounded-lg p-4">
|
||||
<div class="flex gap-3">
|
||||
<span class="material-symbols-outlined text-blue-600 dark:text-blue-400 text-[20px] flex-shrink-0">info</span>
|
||||
<p class="text-sm text-blue-700 dark:text-blue-300" data-translate="twofa.infoText">After enabling 2FA, you'll receive backup codes that you can use if you lose access to your authenticator app. Keep them in a safe place!</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function copySecret() {
|
||||
const secretCode = document.getElementById('secret-code').textContent;
|
||||
navigator.clipboard.writeText(secretCode).then(() => {
|
||||
// Show success notification
|
||||
const notification = document.createElement('div');
|
||||
notification.className = 'fixed top-4 right-4 z-50 px-4 py-3 rounded-lg shadow-lg flex items-center gap-3 bg-green-500 text-white animate-slideIn';
|
||||
notification.innerHTML = `
|
||||
<span class="material-symbols-outlined text-[20px]">check_circle</span>
|
||||
<span class="text-sm font-medium">Secret code copied!</span>
|
||||
`;
|
||||
document.body.appendChild(notification);
|
||||
|
||||
setTimeout(() => {
|
||||
notification.classList.add('animate-slideOut');
|
||||
setTimeout(() => document.body.removeChild(notification), 300);
|
||||
}, 2000);
|
||||
});
|
||||
}
|
||||
</script>
|
||||
{% endblock %}
|
||||
Loading…
Add table
Add a link
Reference in a new issue