93 lines
5.3 KiB
HTML
93 lines
5.3 KiB
HTML
{% 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 %}
|