131 lines
4.6 KiB
TypeScript
131 lines
4.6 KiB
TypeScript
"use client";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { authAPI } from "../../lib/api";
|
|
import { setAuth } from "../../lib/auth";
|
|
import { toast } from "react-toastify";
|
|
import { Globe, Loader2 } from "lucide-react";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const [isLogin, setIsLogin] = useState(true);
|
|
const [loading, setLoading] = useState(false);
|
|
const [form, setForm] = useState({ email: "", password: "", first_name: "", last_name: "" });
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
try {
|
|
const res = isLogin
|
|
? await authAPI.login(form.email, form.password)
|
|
: await authAPI.register(form);
|
|
const { token, user } = res.data.data;
|
|
setAuth(token, user);
|
|
toast.success(isLogin ? "Welcome back!" : "Account created!");
|
|
router.push("/dashboard");
|
|
} catch (error: any) {
|
|
toast.error(error.response?.data?.message || "Authentication failed");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="min-h-screen bg-dark-900 flex items-center justify-center p-4">
|
|
<div className="w-full max-w-md">
|
|
<div className="text-center mb-8">
|
|
<div className="w-16 h-16 bg-gradient-to-br from-accent-blue to-accent-purple rounded-2xl flex items-center justify-center mx-auto mb-4">
|
|
<Globe className="w-8 h-8 text-white" />
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white mb-1">Tinovisas</h1>
|
|
<p className="text-gray-500">Visa Operations Platform</p>
|
|
</div>
|
|
|
|
<div className="card">
|
|
<div className="flex mb-6">
|
|
<button
|
|
onClick={() => setIsLogin(true)}
|
|
className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors ${
|
|
isLogin ? "bg-accent-blue text-white" : "text-gray-400 hover:text-white"
|
|
}`}
|
|
>
|
|
Sign In
|
|
</button>
|
|
<button
|
|
onClick={() => setIsLogin(false)}
|
|
className={`flex-1 py-2 text-sm font-medium rounded-lg transition-colors ${
|
|
!isLogin ? "bg-accent-blue text-white" : "text-gray-400 hover:text-white"
|
|
}`}
|
|
>
|
|
Sign Up
|
|
</button>
|
|
</div>
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-4">
|
|
{!isLogin && (
|
|
<>
|
|
<div>
|
|
<label className="label">First Name</label>
|
|
<input
|
|
type="text"
|
|
value={form.first_name}
|
|
onChange={(e) => setForm({ ...form, first_name: e.target.value })}
|
|
className="input w-full"
|
|
placeholder="John"
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="label">Last Name</label>
|
|
<input
|
|
type="text"
|
|
value={form.last_name}
|
|
onChange={(e) => setForm({ ...form, last_name: e.target.value })}
|
|
className="input w-full"
|
|
placeholder="Doe"
|
|
/>
|
|
</div>
|
|
</>
|
|
)}
|
|
<div>
|
|
<label className="label">Email</label>
|
|
<input
|
|
type="email"
|
|
value={form.email}
|
|
onChange={(e) => setForm({ ...form, email: e.target.value })}
|
|
className="input w-full"
|
|
placeholder="admin@tinovisas.com"
|
|
required
|
|
/>
|
|
</div>
|
|
<div>
|
|
<label className="label">Password</label>
|
|
<input
|
|
type="password"
|
|
value={form.password}
|
|
onChange={(e) => setForm({ ...form, password: e.target.value })}
|
|
className="input w-full"
|
|
placeholder="••••••••"
|
|
required
|
|
minLength={6}
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="btn-primary w-full flex items-center justify-center gap-2"
|
|
>
|
|
{loading && <Loader2 className="w-4 h-4 animate-spin" />}
|
|
{isLogin ? "Sign In" : "Create Account"}
|
|
</button>
|
|
</form>
|
|
|
|
<p className="text-xs text-gray-600 text-center mt-4">
|
|
Default admin: admin@tinovisas.com / Admin123!
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|