iulian/fina
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Initial commit

Browse source
This commit is contained in:
iulian 2025-12-26 00:52:56 +00:00
commit 983cee0320
322 changed files with 57174 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

100
backup/fina-2/app/templates/auth/setup_2fa.html Normal file
View 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 %}