LoginClient 细节调整
This commit is contained in:
2569718930@qq.com
@@ -235,97 +235,116 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
|
||||
}
|
||||
};
|
||||
|
||||
if (mode === "signup") {
|
||||
return (
|
||||
<div className="flex min-h-screen w-full flex-col lg:flex-row bg-[#f8fafc] font-sans text-slate-900">
|
||||
{/* Left Dark Column */}
|
||||
<div className="relative flex flex-col justify-between bg-[#0b0f19] p-8 text-white lg:w-[480px] xl:w-[540px] shrink-0 overflow-hidden border-r border-white/5">
|
||||
{/* Ambient Glows */}
|
||||
<div className="absolute -left-20 -top-20 h-80 w-80 rounded-full bg-blue-600/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute right-0 bottom-0 h-[300px] w-[300px] rounded-full bg-indigo-500/10 blur-[120px] pointer-events-none" />
|
||||
{/* Grid overlay */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
|
||||
return (
|
||||
<div className="flex min-h-screen w-full flex-col lg:flex-row bg-[#f8fafc] font-sans text-slate-900">
|
||||
{/* Left Column (Shared Dark Column with Illustrative Widget) */}
|
||||
<div className="relative flex flex-col justify-between bg-[#0b0f19] p-8 text-white lg:w-[480px] xl:w-[540px] shrink-0 overflow-hidden border-r border-white/5">
|
||||
{/* Ambient Glows */}
|
||||
<div className="absolute -left-20 -top-20 h-80 w-80 rounded-full bg-blue-600/15 blur-[100px] pointer-events-none" />
|
||||
<div className="absolute right-0 bottom-0 h-[300px] w-[300px] rounded-full bg-indigo-500/10 blur-[120px] pointer-events-none" />
|
||||
{/* Grid overlay */}
|
||||
<div className="absolute inset-0 bg-[linear-gradient(to_right,#ffffff03_1px,transparent_1px),linear-gradient(to_bottom,#ffffff03_1px,transparent_1px)] bg-[size:24px_24px] pointer-events-none" />
|
||||
|
||||
<div className="relative z-10 flex flex-col gap-12">
|
||||
<Link href="/" className="flex items-center hover:opacity-90">
|
||||
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
|
||||
</Link>
|
||||
<div className="relative z-10 flex flex-col gap-12">
|
||||
<Link href="/" className="flex items-center hover:opacity-90">
|
||||
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain brightness-0 invert" />
|
||||
</Link>
|
||||
|
||||
<div className="mt-8 space-y-6">
|
||||
<h2 className="text-3xl font-black leading-[1.2] tracking-tight">
|
||||
{isEn ? (
|
||||
<>
|
||||
Weather intelligence and risk management{" "}
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
|
||||
simplified.
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
天气信息与风险管理{" "}
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
|
||||
化繁为简。
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-sm leading-7 text-slate-400 max-w-md">
|
||||
{copy.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sleek Terminal Preview Widget */}
|
||||
<div className="relative z-10 my-8 rounded-xl border border-white/10 bg-white/[0.02] p-5 backdrop-blur-md shadow-2xl max-w-sm">
|
||||
<div className="flex items-center justify-between border-b border-white/10 pb-3 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="font-mono text-[10px] uppercase tracking-wider text-slate-400">
|
||||
{isEn ? "Runway 02L Settlement" : "跑道 02L 官方结算"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-mono text-[9px] font-black text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">LIVE</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 font-mono text-[11px]">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Current Temp:" : "当前气温:"}</span>
|
||||
<span className="font-bold text-white">28.8°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "UMA Threshold:" : "UMA 结算阈值:"}</span>
|
||||
<span className="font-bold text-rose-400">30.0°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Model Probability:" : "模型预测概率:"}</span>
|
||||
<span className="font-bold text-blue-400">88.5%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Market Price:" : "市场买卖价差:"}</span>
|
||||
<span className="font-bold text-white">$10.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sparkline visualization */}
|
||||
<div className="mt-4 pt-3 border-t border-white/5">
|
||||
<div className="flex items-end justify-between gap-1.5 h-12">
|
||||
{[30, 45, 38, 52, 68, 85, 78, 92, 88].map((h, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 rounded-t bg-gradient-to-t from-blue-600/30 to-blue-500/90 transition-all duration-300"
|
||||
style={{ height: `${h}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className="mt-8 space-y-6">
|
||||
<h2 className="text-3xl font-black leading-[1.2] tracking-tight">
|
||||
{isEn ? (
|
||||
<>
|
||||
Weather intelligence and risk management{" "}
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
|
||||
simplified.
|
||||
</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
天气信息与风险管理{" "}
|
||||
<span className="inline-block px-2 py-0.5 rounded bg-blue-600 text-white font-bold text-[0.95em]">
|
||||
化繁为简。
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</h2>
|
||||
<p className="text-sm leading-7 text-slate-400 max-w-md">
|
||||
{copy.desc}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right White Column (Signup Form) */}
|
||||
<div className="flex flex-1 flex-col items-center justify-center p-8 bg-white">
|
||||
{/* Sleek Terminal Preview Widget */}
|
||||
<div className="relative z-10 my-8 rounded-xl border border-white/10 bg-white/[0.02] p-5 backdrop-blur-md shadow-2xl max-w-sm">
|
||||
<div className="flex items-center justify-between border-b border-white/10 pb-3 mb-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="h-2 w-2 rounded-full bg-emerald-500 animate-pulse" />
|
||||
<span className="font-mono text-[10px] uppercase tracking-wider text-slate-400">
|
||||
{isEn ? "Runway 02L Settlement" : "跑道 02L 官方结算"}
|
||||
</span>
|
||||
</div>
|
||||
<span className="font-mono text-[9px] font-black text-emerald-400 bg-emerald-500/10 px-1.5 py-0.5 rounded border border-emerald-500/20">LIVE</span>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3 font-mono text-[11px]">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Current Temp:" : "当前气温:"}</span>
|
||||
<span className="font-bold text-white">28.8°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "UMA Threshold:" : "UMA 结算阈值:"}</span>
|
||||
<span className="font-bold text-rose-400">30.0°C</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Model Probability:" : "模型预测概率:"}</span>
|
||||
<span className="font-bold text-blue-400">88.5%</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-slate-400">{isEn ? "Market Price:" : "市场买卖价差:"}</span>
|
||||
<span className="font-bold text-white">$10.00</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sparkline visualization */}
|
||||
<div className="mt-4 pt-3 border-t border-white/5">
|
||||
<div className="flex items-end justify-between gap-1.5 h-12">
|
||||
{[30, 45, 38, 52, 68, 85, 78, 92, 88].map((h, i) => (
|
||||
<div
|
||||
key={i}
|
||||
className="flex-1 rounded-t bg-gradient-to-t from-blue-600/30 to-blue-500/90 transition-all duration-300"
|
||||
style={{ height: `${h}%` }}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Right Column (Forms) */}
|
||||
<div className="flex flex-1 flex-col justify-between p-6 sm:p-8 bg-white min-h-[calc(100vh-100px)] lg:min-h-screen">
|
||||
{/* Top bar switch */}
|
||||
<div className="flex justify-end items-center gap-3">
|
||||
<span className="text-xs text-slate-500">
|
||||
{isLogin ? copy.newToPoly : copy.alreadyHave}
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
setErrorText("");
|
||||
setInfoText("");
|
||||
setMode(isLogin ? "signup" : "login");
|
||||
}}
|
||||
className="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-bold text-slate-700 shadow-sm transition hover:border-slate-400 hover:text-slate-950"
|
||||
>
|
||||
{isLogin ? copy.signup : copy.login}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Center Form Card */}
|
||||
<div className="flex flex-1 items-center justify-center my-8">
|
||||
<div className="w-full max-w-[400px]">
|
||||
<h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
|
||||
{copy.signUpTitle}
|
||||
{isLogin ? copy.welcomeBack : copy.signUpTitle}
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 mb-6">
|
||||
{copy.subtitle}
|
||||
@@ -350,9 +369,21 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
|
||||
{copy.password}
|
||||
</label>
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
|
||||
{copy.password}
|
||||
</label>
|
||||
{isLogin && !resetSent ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void onResetPassword()}
|
||||
disabled={loading}
|
||||
className="text-xs text-slate-500 hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{copy.reset}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
@@ -361,7 +392,7 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
|
||||
minLength={6}
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder={copy.passwordSignupPlaceholder}
|
||||
placeholder={isLogin ? copy.passwordLoginPlaceholder : copy.passwordSignupPlaceholder}
|
||||
className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-10 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
/>
|
||||
<button
|
||||
@@ -374,16 +405,18 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p className="text-[11px] leading-5 text-slate-500 mt-2">
|
||||
{copy.termsAgreement}
|
||||
</p>
|
||||
{!isLogin && (
|
||||
<p className="text-[11px] leading-5 text-slate-500 mt-2">
|
||||
{copy.termsAgreement}
|
||||
</p>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center rounded-lg bg-blue-600 py-3 text-sm font-bold text-white shadow-sm transition hover:bg-blue-700 disabled:opacity-50"
|
||||
className="flex w-full items-center justify-center rounded-lg bg-[#11161d] py-3 text-sm font-bold text-white shadow-sm transition hover:bg-[#1f2937] disabled:opacity-50 mt-6"
|
||||
>
|
||||
{copy.signupSubmit}
|
||||
{isLogin ? (isEn ? "Sign In" : "开启天气决策之旅") : (isEn ? "Sign Up" : "立即创建账号")}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
@@ -407,144 +440,20 @@ export function LoginClient({ nextPath, initialMode }: LoginClientProps) {
|
||||
|
||||
{errorText ? <p className="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">{errorText}</p> : null}
|
||||
{infoText ? <p className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">{infoText}</p> : null}
|
||||
|
||||
<p className="mt-6 text-center text-xs text-slate-500">
|
||||
{copy.alreadyHave}{" "}
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode("login")}
|
||||
className="font-bold text-blue-600 hover:underline"
|
||||
>
|
||||
{copy.login}
|
||||
</button>
|
||||
</p>
|
||||
{errorText && isLogin && errorText.includes("Invalid login") ? (
|
||||
<p className="mt-2 text-center text-xs text-slate-500">{copy.loginFailedHint}</p>
|
||||
) : null}
|
||||
{infoText === copy.signupCheckEmail ? (
|
||||
<p className="mt-2 text-center text-xs text-slate-500">{copy.resendVerify}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="text-[10px] text-slate-400 text-center">
|
||||
© {new Date().getFullYear()} PolyWeather. All rights reserved.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex min-h-screen w-full flex-col bg-[#f8fafc] font-sans text-slate-900">
|
||||
{/* Top Header */}
|
||||
<header className="flex h-16 items-center justify-between border-b border-slate-200 bg-white px-6">
|
||||
<Link href="/" className="flex items-center hover:opacity-90">
|
||||
<img src="/logo.png" alt="PolyWeather" className="h-8 w-auto object-contain" />
|
||||
</Link>
|
||||
<div className="flex items-center gap-3">
|
||||
<span className="text-xs text-slate-500 hidden sm:inline">{copy.newToPoly}</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setMode("signup")}
|
||||
className="rounded-lg border border-slate-300 bg-white px-3 py-1.5 text-xs font-bold text-slate-700 shadow-sm transition hover:border-slate-400 hover:text-slate-950"
|
||||
>
|
||||
{copy.signup}
|
||||
</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Main Login Card Area */}
|
||||
<main className="flex flex-1 items-center justify-center p-6">
|
||||
<div className="w-full max-w-[400px] rounded-2xl border border-slate-200 bg-white p-8 shadow-[0_12px_40px_rgba(15,23,42,0.06)]">
|
||||
<h1 className="text-2xl font-black tracking-tight text-slate-900 mb-2">
|
||||
{copy.welcomeBack}
|
||||
</h1>
|
||||
<p className="text-xs text-slate-500 mb-6">
|
||||
{copy.subtitle}
|
||||
</p>
|
||||
|
||||
<form onSubmit={(event) => void onEmailSubmit(event)} className="space-y-4">
|
||||
<div className="space-y-1.5">
|
||||
<label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
|
||||
{copy.workEmail}
|
||||
</label>
|
||||
<div className="relative">
|
||||
<Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type="email"
|
||||
required
|
||||
value={email}
|
||||
onChange={(event) => setEmail(event.target.value)}
|
||||
placeholder="yourname@email.com"
|
||||
className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-4 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-1.5">
|
||||
<div className="flex justify-between items-center">
|
||||
<label className="text-xs font-bold text-slate-700 uppercase tracking-wide">
|
||||
{copy.password}
|
||||
</label>
|
||||
{isLogin && !resetSent ? (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void onResetPassword()}
|
||||
disabled={loading}
|
||||
className="text-xs text-slate-500 hover:text-blue-600 transition-colors"
|
||||
>
|
||||
{copy.reset}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<div className="relative">
|
||||
<Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" />
|
||||
<input
|
||||
type={showPassword ? "text" : "password"}
|
||||
required
|
||||
minLength={6}
|
||||
value={password}
|
||||
onChange={(event) => setPassword(event.target.value)}
|
||||
placeholder={copy.passwordLoginPlaceholder}
|
||||
className="w-full rounded-lg border border-slate-300 bg-white py-2.5 pl-10 pr-10 text-sm text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowPassword(!showPassword)}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-slate-400 hover:text-slate-600"
|
||||
>
|
||||
{showPassword ? <EyeOff size={16} /> : <Eye size={16} />}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center rounded-lg bg-[#11161d] py-3 text-sm font-bold text-white shadow-sm transition hover:bg-[#1f2937] disabled:opacity-50 mt-6"
|
||||
>
|
||||
{copy.loginSubmit}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div className="my-5 flex items-center">
|
||||
<div className="h-px flex-grow bg-slate-200" />
|
||||
<span className="px-3 text-[10px] font-semibold uppercase text-slate-400">
|
||||
{isEn ? "or" : "或"}
|
||||
</span>
|
||||
<div className="h-px flex-grow bg-slate-200" />
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => void onGoogleSignIn()}
|
||||
disabled={loading}
|
||||
className="flex w-full items-center justify-center rounded-lg border border-slate-300 bg-white px-4 py-2.5 text-sm font-semibold text-slate-700 shadow-sm transition hover:bg-slate-50 disabled:opacity-50"
|
||||
>
|
||||
<Chrome className="mr-2 h-4 w-4 text-blue-600" />
|
||||
{copy.googleOneClick}
|
||||
</button>
|
||||
|
||||
{errorText ? <p className="mt-4 rounded-lg border border-rose-200 bg-rose-50 px-3 py-2 text-xs text-rose-700">{errorText}</p> : null}
|
||||
{infoText ? <p className="mt-4 rounded-lg border border-emerald-200 bg-emerald-50 px-3 py-2 text-xs text-emerald-700">{infoText}</p> : null}
|
||||
{errorText && isLogin && errorText.includes("Invalid login") ? (
|
||||
<p className="mt-2 text-center text-xs text-slate-500">{copy.loginFailedHint}</p>
|
||||
) : null}
|
||||
{infoText === copy.signupCheckEmail ? (
|
||||
<p className="mt-2 text-center text-xs text-slate-500">{copy.resendVerify}</p>
|
||||
) : null}
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user