Adding login admin, fix ipv6 Vienamese version, add env example

2026-05-15 19:52:34 +07:00
parent 31aebc40f0
commit c7f09d941e
15 changed files with 334 additions and 66 deletions
@@ -0,0 +1,119 @@
+"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>
+  );
+}