import React, { useState, useRef, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import toast, { Toaster } from 'react-hot-toast';
import { Eye, EyeOff, Moon, Sun, User, Lock, CheckCircle, Loader2 } from 'lucide-react';
// 2025 UL/UX: Glassmorphism, animated transitions, mobile-first, accessibility, color palette, focus ring, haptic feedback (vibration), and more
const COLORS = {
primary: '#2563eb',
secondary: '#60a5fa',
accent: '#fbbf24',
error: '#ef4444',
bgLight: 'rgba(255,255,255,0.85)',
bgDark: 'rgba(30,41,59,0.92)',
glassLight: 'bg-gradient-to-br from-white/80 via-blue-50/70 to-white/60',
glassDark: 'bg-gradient-to-br from-gray-900/80 via-gray-800/70 to-gray-900/60',
borderLight: 'border-blue-200/60',
borderDark: 'border-gray-700/60',
shadowLight: 'shadow-blue-200/40',
shadowDark: 'shadow-blue-900/30',
};
function Login() {
const [isLoginMode, setIsLoginMode] = useState(true);
const [username, setUsername] = useState('');
const [password, setPassword] = useState('');
const [confirmPassword, setConfirmPassword] = useState('');
const [isDarkMode, setIsDarkMode] = useState(() => {
// Persist dark mode
return localStorage.getItem('ulx2025_dark') === 'true' || window.matchMedia('(prefers-color-scheme: dark)').matches;
});
const [isSubmitting, setIsSubmitting] = useState(false);
const [showPassword, setShowPassword] = useState(false);
const [errors, setErrors] = useState({});
const [animCard, setAnimCard] = useState(false);
const navigate = useNavigate();
const cardRef = useRef(null);
// Animate card on mount
useEffect(() => {
setTimeout(() => setAnimCard(true), 80);
}, []);
// Persist dark mode
useEffect(() => {
localStorage.setItem('ulx2025_dark', isDarkMode);
if (isDarkMode) {
document.documentElement.classList.add('dark');
} else {
document.documentElement.classList.remove('dark');
}
}, [isDarkMode]);
// Haptic feedback for mobile
const vibrate = (pattern = [20]) => {
if (window.navigator.vibrate) window.navigator.vibrate(pattern);
};
// Accessibility: focus first input on mode switch
const userInputRef = useRef(null);
useEffect(() => {
if (userInputRef.current) userInputRef.current.focus();
}, [isLoginMode]);
const validateForm = () => {
const newErrors = {};
if (!username || username.length < 3 || username.length > 20) {
newErrors.username = 'Tên người dùng phải từ 3 đến 20 ký tự';
} else if (!/^[a-zA-Z0-9]+$/.test(username)) {
newErrors.username = 'Tên người dùng chỉ chứa chữ cái và số';
}
if (!password || password.length < 6 || password.length > 20) {
newErrors.password = 'Mật khẩu phải từ 6 đến 20 ký tự';
} else if (!/[0-9]/.test(password)) {
newErrors.password = 'Mật khẩu phải chứa ít nhất một số';
}
if (!isLoginMode && password !== confirmPassword) {
newErrors.confirmPassword = 'Mật khẩu xác nhận không khớp';
}
setErrors(newErrors);
return Object.keys(newErrors).length === 0;
};
const handleSubmit = async (e) => {
e.preventDefault();
vibrate([10, 10]);
if (!validateForm()) {
toast.error('Vui lòng kiểm tra lại thông tin!');
return;
}
setIsSubmitting(true);
try {
const endpoint = isLoginMode
? 'https://backend-rockefeller-finance.onrender.com/api/login'
: 'https://backend-rockefeller-finance.onrender.com/api/register';
const response = await axios.post(endpoint, { username, password });
if (isLoginMode) {
localStorage.setItem('token', response.data.token);
toast.success('Đăng nhập thành công!', { icon:
);
}
export default Login;
{icon}
{rightIcon && (
)}
{error && {error}
}
32 Lá Thư: "Kỷ luật tài chính bắt đầu từ việc quản lý thông tin cá nhân an toàn. Hãy sử dụng mật khẩu mạnh!"
);
// 2025: Submit button with animation
const SubmitButton = () => (
);
// 2025: Forgot password link
const ForgotPassword = () => (
);
// 2025: Responsive, glass, animated, accessible, mobile-first, best-of-the-galaxy login
return (
{isLoginMode ? 'Đăng nhập' : 'Đăng ký'}
© {new Date().getFullYear()} Rockefeller Finance. ULX 2025 – Đỉnh cao nhân loại.