Spaces:
Runtime error
Runtime error
File size: 5,506 Bytes
92db116 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 |
{% extends "base.html" %}
{% block title %}Register - Rating Predictor{% endblock %}
{% block content %}
<div class="flex items-center justify-center min-h-[calc(100vh-200px)]">
<div class="bg-white dark:bg-slate-800 rounded-2xl shadow-xl p-8 w-full max-w-md fade-in">
<div class="text-center mb-8">
<i class="fas fa-user-plus text-5xl text-indigo-600 mb-4"></i>
<h2 class="text-3xl font-bold text-gray-800 dark:text-gray-100">Đăng Ký</h2>
<p class="text-gray-600 dark:text-gray-400 mt-2">Create your Rating Predictor account</p>
</div>
<form id="registerForm" class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-user mr-2"></i>Username
</label>
<input
type="text"
id="username"
name="username"
required
minlength="3"
maxlength="50"
class="w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100"
placeholder="Choose a username (3-50 characters)"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-envelope mr-2"></i>Email
</label>
<input
type="email"
id="email"
name="email"
required
class="w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100"
placeholder="Enter your email"
>
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
<i class="fas fa-lock mr-2"></i>Password
</label>
<input
type="password"
id="password"
name="password"
required
minlength="6"
class="w-full px-4 py-3 border border-gray-300 dark:border-slate-600 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-transparent transition bg-white dark:bg-slate-700 text-gray-900 dark:text-gray-100"
placeholder="Enter password (minimum 6 characters)"
>
</div>
<button
type="submit"
id="register-btn"
class="w-full bg-indigo-600 text-white py-3 rounded-lg hover:bg-indigo-700 transition font-medium shadow-lg hover:shadow-xl"
>
<i class="fas fa-user-plus mr-2"></i>Register
</button>
</form>
<div class="mt-6 text-center">
<p class="text-gray-600 dark:text-gray-400">
Already have an account?
<a href="/login" class="text-indigo-600 hover:text-indigo-800 dark:text-indigo-400 dark:hover:text-indigo-300 font-medium">
Login here
</a>
</p>
</div>
</div>
</div>
{% endblock %}
{% block scripts %}
<script>
document.getElementById('registerForm').addEventListener('submit', async (e) => {
e.preventDefault();
const username = document.getElementById('username').value;
const email = document.getElementById('email').value;
const password = document.getElementById('password').value;
const registerBtn = document.getElementById('register-btn');
// Show loading state
registerBtn.disabled = true;
registerBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i>Creating account...';
try {
const response = await fetch('/api/auth/register', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ username, email, password })
});
const data = await response.json();
if (response.ok) {
// Show success toast
toast.success('Registration Successful', 'Your account has been created. Redirecting to login...');
// Redirect to login
setTimeout(() => {
window.location.href = '/login';
}, 1500);
} else {
// Show error toast
toast.error('Registration Failed', data.detail || 'Please try again.');
registerBtn.disabled = false;
registerBtn.innerHTML = '<i class="fas fa-user-plus mr-2"></i>Register';
}
} catch (error) {
toast.error('Error', 'An error occurred. Please try again.');
registerBtn.disabled = false;
registerBtn.innerHTML = '<i class="fas fa-user-plus mr-2"></i>Register';
}
});
</script>
{% endblock %}
|