forked from UKSOURCE/ipv6
120 lines
4.7 KiB
TypeScript
120 lines
4.7 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { useState } from "react";
|
|
import { useRouter } from "next/navigation";
|
|
import { useLanguage } from "@/app/context/LanguageContext";
|
|
|
|
export default function LoginPageClient() {
|
|
const { lang } = useLanguage();
|
|
const router = useRouter();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [error, setError] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const backLabel = lang === "vi" ? "Quay Về Trang Chủ" : "Back to Home";
|
|
const titleLabel = lang === "vi" ? "Đăng Nhập Quản Trị" : "Admin Login";
|
|
const emailLabel = lang === "vi" ? "Email" : "Email Address";
|
|
const passwordLabel = lang === "vi" ? "Mật Khẩu" : "Password";
|
|
const buttonLabel = lang === "vi" ? "Đăng Nhập" : "Log In";
|
|
const loadingLabel = lang === "vi" ? "Đang xử lý..." : "Processing...";
|
|
|
|
const handleSubmit = async (e: React.FormEvent) => {
|
|
e.preventDefault();
|
|
setLoading(true);
|
|
setError("");
|
|
|
|
try {
|
|
const res = await fetch("/ipv6/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
router.push("/admin");
|
|
} else {
|
|
const data = await res.json();
|
|
setError(data.error || (lang === "vi" ? "Đăng nhập thất bại" : "Login failed"));
|
|
}
|
|
} catch (err) {
|
|
setError(lang === "vi" ? "Đã xảy ra lỗi" : "An error occurred");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<main className="pt-[120px] pb-[80px] px-[var(--spacing-gutter)] flex justify-center min-h-screen">
|
|
<div className="w-full max-w-[1280px]">
|
|
<div className="max-w-[500px] mx-auto">
|
|
<div className="mb-[32px]">
|
|
<Link
|
|
className="group flex items-center gap-2 text-outline hover:text-primary transition-colors"
|
|
href="/"
|
|
>
|
|
<span className="material-symbols-outlined text-[20px] transition-transform group-hover:-translate-x-1">
|
|
arrow_back
|
|
</span>
|
|
{backLabel}
|
|
</Link>
|
|
</div>
|
|
|
|
<div className="mb-[32px]">
|
|
<h1 className="font-[var(--font-display-lg)] text-[clamp(1.75rem,3vw+1rem,3.25rem)] text-on-surface mb-2 leading-[1.1]">
|
|
{titleLabel}
|
|
</h1>
|
|
</div>
|
|
|
|
<div className="glass-panel p-[32px] md:p-12 rounded-xl shadow-2xl relative overflow-hidden">
|
|
<div className="absolute top-0 left-0 w-full h-[1px] bg-gradient-to-r from-transparent via-primary/20 to-transparent" />
|
|
|
|
<form onSubmit={handleSubmit} className="space-y-6">
|
|
{error && (
|
|
<div className="bg-error/10 border border-error/20 text-error px-4 py-3 rounded-lg text-sm">
|
|
{error}
|
|
</div>
|
|
)}
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-outline uppercase tracking-wider text-xs">{emailLabel}</label>
|
|
<input
|
|
type="email"
|
|
required
|
|
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all focus:border-primary/50 outline-none"
|
|
placeholder=""
|
|
value={email}
|
|
onChange={(e) => setEmail(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="space-y-1">
|
|
<label className="text-outline uppercase tracking-wider text-xs">{passwordLabel}</label>
|
|
<input
|
|
type="password"
|
|
required
|
|
className="w-full bg-surface-container-low border border-white/10 rounded-lg px-4 py-3 text-on-surface placeholder:text-outline/40 transition-all focus:border-primary/50 outline-none"
|
|
placeholder=""
|
|
value={password}
|
|
onChange={(e) => setPassword(e.target.value)}
|
|
/>
|
|
</div>
|
|
|
|
<div className="pt-4">
|
|
<button
|
|
type="submit"
|
|
disabled={loading}
|
|
className="gold-gradient-bg text-on-primary w-full px-6 py-4 rounded-xl font-[var(--font-display-lg)] text-lg uppercase tracking-wider hover:shadow-[0_0_30px_rgba(197,160,89,0.4)] transition-all duration-300 active:scale-[0.98] disabled:opacity-60"
|
|
>
|
|
{loading ? loadingLabel : buttonLabel}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
);
|
|
}
|