116 lines
3.9 KiB
TypeScript
116 lines
3.9 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { useRouter } from 'next/navigation';
|
|
import { Lock, Send, Loader2 } from 'lucide-react';
|
|
|
|
export default function LoginPage() {
|
|
const [step, setStep] = useState<'initial' | 'verify'>('initial');
|
|
const [code, setCode] = useState('');
|
|
const [loading, setLoading] = useState(false);
|
|
const [error, setError] = useState('');
|
|
const router = useRouter();
|
|
|
|
const sendCode = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const res = await fetch('/api/auth/send', { method: 'POST' });
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error || 'Failed to send code');
|
|
setStep('verify');
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const verifyCode = async () => {
|
|
setLoading(true);
|
|
setError('');
|
|
try {
|
|
const res = await fetch('/api/auth/verify', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ code })
|
|
});
|
|
const data = await res.json();
|
|
if (!res.ok) throw new Error(data.error || 'Invalid code');
|
|
|
|
// Redirect
|
|
router.push('/');
|
|
router.refresh();
|
|
} catch (err: any) {
|
|
setError(err.message);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="flex min-h-screen items-center justify-center bg-gray-900 text-white p-4">
|
|
<div className="w-full max-w-md bg-gray-800 rounded-lg shadow-xl p-8 border border-gray-700">
|
|
<div className="flex flex-col items-center mb-8">
|
|
<div className="bg-blue-600 p-3 rounded-full mb-4">
|
|
<Lock className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold">Secure Access</h1>
|
|
<p className="text-gray-400 mt-2 text-center">
|
|
Finanzas Personales
|
|
</p>
|
|
</div>
|
|
|
|
{error && (
|
|
<div className="bg-red-900/50 border border-red-500 text-red-200 p-3 rounded mb-4 text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
{step === 'initial' ? (
|
|
<div className="space-y-4">
|
|
<p className="text-gray-300 text-center text-sm">
|
|
Click below to receive a login code via Telegram.
|
|
</p>
|
|
<button
|
|
onClick={sendCode}
|
|
disabled={loading}
|
|
className="w-full bg-blue-600 hover:bg-blue-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin" /> : <Send size={20} />}
|
|
Send Code to Telegram
|
|
</button>
|
|
</div>
|
|
) : (
|
|
<div className="space-y-4">
|
|
<p className="text-gray-300 text-center text-sm">
|
|
Enter the 6-digit code sent to your Telegram.
|
|
</p>
|
|
<input
|
|
type="text"
|
|
value={code}
|
|
onChange={(e) => setCode(e.target.value)}
|
|
placeholder="123456"
|
|
className="w-full bg-gray-700 border border-gray-600 rounded-lg px-4 py-3 text-center text-2xl tracking-widest focus:outline-none focus:ring-2 focus:ring-blue-500"
|
|
maxLength={6}
|
|
/>
|
|
<button
|
|
onClick={verifyCode}
|
|
disabled={loading || code.length < 4}
|
|
className="w-full bg-green-600 hover:bg-green-500 text-white font-semibold py-3 px-4 rounded-lg transition flex items-center justify-center gap-2 disabled:opacity-50"
|
|
>
|
|
{loading ? <Loader2 className="animate-spin" /> : 'Verify & Login'}
|
|
</button>
|
|
<button
|
|
onClick={() => setStep('initial')}
|
|
className="w-full text-gray-400 hover:text-white text-sm"
|
|
>
|
|
Cancel
|
|
</button>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|