225 lines
10 KiB
TypeScript
225 lines
10 KiB
TypeScript
"use client"
|
||
|
||
import type { FormEvent } from "react"
|
||
import { useState } from "react"
|
||
import {
|
||
AlertCircle,
|
||
ArrowRight,
|
||
BadgeCheck,
|
||
CheckCircle2,
|
||
Eye,
|
||
EyeOff,
|
||
LockKeyhole,
|
||
ShieldCheck,
|
||
Sparkles,
|
||
UserRound,
|
||
} from "lucide-react"
|
||
|
||
type LoginStatus = "idle" | "loading" | "success"
|
||
|
||
const PRODUCT_IMAGE =
|
||
"https://www.skg.com/cdn/shop/files/17531530438558.png?v=1754462861&width=900"
|
||
|
||
export default function LoginPage() {
|
||
const [username, setUsername] = useState("")
|
||
const [password, setPassword] = useState("")
|
||
const [remember, setRemember] = useState(true)
|
||
const [showPassword, setShowPassword] = useState(false)
|
||
const [error, setError] = useState("")
|
||
const [status, setStatus] = useState<LoginStatus>("idle")
|
||
|
||
const disabled = status === "loading" || status === "success"
|
||
|
||
async function onSubmit(event: FormEvent<HTMLFormElement>) {
|
||
event.preventDefault()
|
||
setError("")
|
||
if (!username.trim() || !password) {
|
||
setError("请输入账号和密码")
|
||
return
|
||
}
|
||
setStatus("loading")
|
||
try {
|
||
const res = await fetch("/api/auth/login", {
|
||
method: "POST",
|
||
credentials: "include",
|
||
headers: { "Content-Type": "application/json" },
|
||
body: JSON.stringify({ username, password, remember }),
|
||
})
|
||
if (!res.ok) {
|
||
let message = "账号或密码不正确"
|
||
try {
|
||
const data = await res.json()
|
||
message = data?.detail || data?.error || message
|
||
} catch {
|
||
// keep default message
|
||
}
|
||
throw new Error(message)
|
||
}
|
||
setStatus("success")
|
||
window.setTimeout(() => {
|
||
window.location.href = "/"
|
||
}, 420)
|
||
} catch (err) {
|
||
setStatus("idle")
|
||
setError(err instanceof Error ? err.message : "登录失败，请稍后再试")
|
||
}
|
||
}
|
||
|
||
return (
|
||
<main className="login-page relative min-h-screen overflow-hidden px-5 py-6 text-white sm:px-8 lg:px-10">
|
||
<div className="relative z-10 mx-auto flex min-h-[calc(100vh-3rem)] w-full max-w-7xl items-center">
|
||
<div className="grid w-full gap-5 lg:grid-cols-[minmax(0,1.16fr)_minmax(380px,440px)] lg:items-stretch">
|
||
<section className="login-hero order-2 relative min-h-[540px] overflow-hidden rounded-[8px] p-6 text-[#171717] sm:p-8 lg:order-1 lg:min-h-[660px]">
|
||
<div className="relative z-10 flex h-full flex-col">
|
||
<div className="flex flex-wrap items-center justify-between gap-4">
|
||
<div className="login-wordmark">
|
||
<span className="login-wordmark__logo">SKG</span>
|
||
<span className="login-wordmark__sub">未来健康</span>
|
||
</div>
|
||
<div className="login-secure-pill">
|
||
<ShieldCheck className="h-4 w-4" />
|
||
<span>Secure Studio</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-10 max-w-[620px]">
|
||
<p className="login-kicker">MARKETING CONTENT STUDIO</p>
|
||
<h1 className="login-premium-title">营销内容工作台</h1>
|
||
<p className="login-premium-copy">SKG 健康科技素材、产品视觉与广告视频生产入口</p>
|
||
</div>
|
||
|
||
<div className="login-product-stage" aria-label="SKG product visual">
|
||
<div className="login-product-stage__halo" />
|
||
<img className="login-product-image" src={PRODUCT_IMAGE} alt="SKG neck massager" />
|
||
<div className="login-product-caption">
|
||
<span>G7 Pro Fold</span>
|
||
<b>Neck Massager</b>
|
||
</div>
|
||
<div className="login-studio-chip login-studio-chip--visual">
|
||
<Sparkles className="h-4 w-4" />
|
||
<span>Visual Asset Flow</span>
|
||
</div>
|
||
<div className="login-studio-chip login-studio-chip--review">
|
||
<BadgeCheck className="h-4 w-4" />
|
||
<span>Brand Review Ready</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="login-premium-metrics">
|
||
{[
|
||
["Visual", "素材"],
|
||
["Audio", "声音"],
|
||
["Video", "成片"],
|
||
].map(([label, value]) => (
|
||
<div key={label} className="login-premium-metric">
|
||
<span>{label}</span>
|
||
<b>{value}</b>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
|
||
<section className="login-auth-panel order-1 flex min-h-[470px] items-center rounded-[8px] p-5 sm:p-8 lg:order-2 lg:min-h-[660px]">
|
||
<form className="w-full" onSubmit={onSubmit}>
|
||
<div className="mb-8">
|
||
<div className="login-auth-icon mb-4 inline-flex h-12 w-12 items-center justify-center rounded-[8px] text-white">
|
||
<LockKeyhole className="h-5 w-5" />
|
||
</div>
|
||
<h2 className="text-2xl font-semibold text-white">登录</h2>
|
||
<p className="mt-2 text-sm leading-6 text-white/55">进入 SKG 营销内容工作台</p>
|
||
</div>
|
||
|
||
<div className="space-y-4">
|
||
<label className="block">
|
||
<span className="mb-2 block text-sm font-medium text-white/70">账号</span>
|
||
<span className="flex h-12 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
|
||
<UserRound className="h-4 w-4 text-white/45" />
|
||
<input
|
||
className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
|
||
value={username}
|
||
disabled={disabled}
|
||
autoComplete="username"
|
||
placeholder="请输入账号"
|
||
onChange={(event) => {
|
||
setUsername(event.target.value)
|
||
if (error) setError("")
|
||
}}
|
||
/>
|
||
</span>
|
||
</label>
|
||
|
||
<label className="block">
|
||
<span className="mb-2 block text-sm font-medium text-white/70">密码</span>
|
||
<span className="flex h-12 items-center gap-3 rounded-[8px] border border-white/10 bg-black/25 px-3 text-white transition focus-within:border-[#d6b36a] focus-within:bg-black/35 focus-within:ring-2 focus-within:ring-[#d6b36a]/25">
|
||
<LockKeyhole className="h-4 w-4 text-white/45" />
|
||
<input
|
||
className="h-full min-w-0 flex-1 bg-transparent text-base text-white outline-none placeholder:text-white/30"
|
||
value={password}
|
||
disabled={disabled}
|
||
type={showPassword ? "text" : "password"}
|
||
autoComplete="current-password"
|
||
placeholder="请输入密码"
|
||
onChange={(event) => {
|
||
setPassword(event.target.value)
|
||
if (error) setError("")
|
||
}}
|
||
/>
|
||
<button
|
||
className="grid h-9 w-9 place-items-center rounded-[8px] text-white/55 transition hover:bg-white/10 hover:text-white focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/45 disabled:opacity-50"
|
||
type="button"
|
||
disabled={disabled}
|
||
aria-label={showPassword ? "隐藏密码" : "显示密码"}
|
||
onMouseDown={(event) => event.preventDefault()}
|
||
onClick={() => setShowPassword((value) => !value)}
|
||
>
|
||
{showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
|
||
</button>
|
||
</span>
|
||
</label>
|
||
</div>
|
||
|
||
<div className="mt-4 flex items-center justify-between gap-4">
|
||
<label className="flex cursor-pointer items-center gap-2 text-sm text-white/60">
|
||
<input
|
||
className="h-4 w-4 rounded border-white/20 bg-black/30 accent-[#c89b3c]"
|
||
type="checkbox"
|
||
checked={remember}
|
||
disabled={disabled}
|
||
onChange={(event) => setRemember(event.target.checked)}
|
||
/>
|
||
<span>保持登录</span>
|
||
</label>
|
||
<span className="text-xs text-white/35">marketing.skg.com</span>
|
||
</div>
|
||
|
||
<div className="mt-5 min-h-11" aria-live="polite">
|
||
{error ? (
|
||
<div className="flex items-start gap-2 rounded-[8px] border border-red-400/30 bg-red-500/10 px-3 py-2 text-sm text-red-100">
|
||
<AlertCircle className="mt-0.5 h-4 w-4 shrink-0" />
|
||
<span>{error}</span>
|
||
</div>
|
||
) : status === "success" ? (
|
||
<div className="flex items-start gap-2 rounded-[8px] border border-emerald-300/30 bg-emerald-400/10 px-3 py-2 text-sm text-emerald-100">
|
||
<CheckCircle2 className="mt-0.5 h-4 w-4 shrink-0" />
|
||
<span>登录成功，正在进入工作台</span>
|
||
</div>
|
||
) : null}
|
||
</div>
|
||
|
||
<button
|
||
className="mt-2 flex h-12 w-full items-center justify-center gap-2 rounded-[8px] bg-white px-4 text-base font-semibold text-black shadow-xl shadow-black/25 transition hover:bg-[#f5efe3] focus:outline-none focus:ring-2 focus:ring-[#d6b36a]/60 disabled:cursor-wait disabled:opacity-70"
|
||
type="submit"
|
||
disabled={disabled}
|
||
>
|
||
<span>{status === "loading" ? "正在登录" : status === "success" ? "已通过" : "进入工作台"}</span>
|
||
<ArrowRight className="h-4 w-4" />
|
||
</button>
|
||
</form>
|
||
</section>
|
||
</div>
|
||
</div>
|
||
</main>
|
||
)
|
||
}
|