113 lines
4.0 KiB
TypeScript
113 lines
4.0 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { FormEvent, useState } from "react";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import { Loader2, LogIn } from "lucide-react";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Card, CardContent, CardHeader } from "@/components/ui/card";
|
|
import { Input } from "@/components/ui/input";
|
|
import { Label } from "@/components/ui/label";
|
|
import { BrandLogo, BrandMark } from "@/components/brand/logo";
|
|
import { ThemeToggle } from "@/components/theme-toggle";
|
|
import { BRAND_ASSETS } from "@/lib/brand";
|
|
import { notify } from "@/lib/notifications/store";
|
|
|
|
export default function LoginPage() {
|
|
const router = useRouter();
|
|
const searchParams = useSearchParams();
|
|
const [email, setEmail] = useState("");
|
|
const [password, setPassword] = useState("");
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
async function handleSubmit(event: FormEvent) {
|
|
event.preventDefault();
|
|
setLoading(true);
|
|
|
|
try {
|
|
const res = await fetch("/api/auth/login", {
|
|
method: "POST",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ email, password }),
|
|
});
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
notify({ type: "error", title: data.error ?? "登入失敗" });
|
|
setLoading(false);
|
|
return;
|
|
}
|
|
|
|
const next = searchParams.get("next");
|
|
if (data.needsThreadsBind) {
|
|
router.replace("/matrix?bind_threads=1");
|
|
return;
|
|
}
|
|
router.replace(next && next.startsWith("/") ? next : "/matrix");
|
|
} catch {
|
|
notify({ type: "error", title: "連線失敗，請稍後再試" });
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="relative flex min-h-[100dvh] flex-col lg:min-h-screen">
|
|
<div className="absolute right-4 top-4 z-20 safe-bottom sm:right-5 sm:top-5">
|
|
<ThemeToggle compact />
|
|
</div>
|
|
<div className="relative h-36 shrink-0 sm:h-44 lg:absolute lg:inset-y-0 lg:left-0 lg:z-0 lg:h-full lg:w-[52%]">
|
|
<Image
|
|
src={BRAND_ASSETS.loginBg}
|
|
alt=""
|
|
fill
|
|
priority
|
|
className="object-cover object-center"
|
|
sizes="(max-width: 1024px) 100vw, 52vw"
|
|
/>
|
|
<div className="login-hero-overlay absolute inset-0" />
|
|
</div>
|
|
|
|
<div className="login-form-panel relative z-10 flex flex-1 items-center justify-center px-4 py-6 pb-8 safe-bottom sm:px-5 sm:py-10 lg:ml-[52%]">
|
|
<Card className="w-full max-w-md">
|
|
<CardHeader className="pb-4">
|
|
<div className="flex items-center gap-3">
|
|
<BrandLogo size="lg" />
|
|
<BrandMark />
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form className="space-y-4" onSubmit={handleSubmit}>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="email">Email</Label>
|
|
<Input
|
|
id="email"
|
|
type="email"
|
|
value={email}
|
|
onChange={(event) => setEmail(event.target.value)}
|
|
placeholder="you@example.com"
|
|
autoComplete="email"
|
|
required
|
|
/>
|
|
</div>
|
|
<div className="space-y-2">
|
|
<Label htmlFor="password">密碼</Label>
|
|
<Input
|
|
id="password"
|
|
type="password"
|
|
value={password}
|
|
onChange={(event) => setPassword(event.target.value)}
|
|
placeholder="••••••••"
|
|
autoComplete="current-password"
|
|
required
|
|
/>
|
|
</div>
|
|
<Button className="w-full" type="submit" disabled={loading} aria-label="登入">
|
|
{loading ? <Loader2 className="h-4 w-4 animate-spin" /> : <LogIn className="h-4 w-4" />}
|
|
</Button>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
</div>
|
|
);
|
|
} |