diff --git a/frontend/components/auth/LoginClient.tsx b/frontend/components/auth/LoginClient.tsx index 25ce5195..edd004af 100644 --- a/frontend/components/auth/LoginClient.tsx +++ b/frontend/components/auth/LoginClient.tsx @@ -7,11 +7,13 @@ import { ArrowRight, ChevronLeft, Chrome, - Cloud, CloudRain, + CloudSun, Lock, Mail, Sun, + Eye, + EyeOff, } from "lucide-react"; import { getSupabaseBrowserClient, @@ -36,12 +38,15 @@ export function LoginClient({ nextPath }: LoginClientProps) { const [errorText, setErrorText] = useState(""); const [infoText, setInfoText] = useState(""); const [resetSent, setResetSent] = useState(false); + const [showPassword, setShowPassword] = useState(false); const supabaseReady = hasSupabasePublicEnv(); + const isLogin = mode === "login"; const siteOrigin = getConfiguredSiteUrl() || (typeof window !== "undefined" ? window.location.origin : PRODUCTION_SITE_URL); const isEn = locale === "en-US"; + const copy = { backHome: isEn ? "Back to Home" : "返回首页", subtitle: isEn @@ -57,7 +62,7 @@ export function LoginClient({ nextPath }: LoginClientProps) { passwordSignupPlaceholder: isEn ? "Set at least 6 characters" : "设置至少 6 位密码", - loginSubmit: isEn ? "Start your weather journey" : "开启天气之旅", + loginSubmit: isEn ? "Start your weather journey" : "开启天气交易之旅", signupSubmit: isEn ? "Create account now" : "立即创建账号", loginHint: isEn ? "After signing in, your homepage will be personalized." @@ -87,6 +92,21 @@ export function LoginClient({ nextPath }: LoginClientProps) { loginFailedHint: isEn ? "If you just signed up, please verify your email first. Check your inbox or spam folder." : "如果刚注册，请先点击邮箱中的验证链接。检查收件箱或垃圾邮件。", + + // New translations for Koyfin-style layouts + workEmail: isEn ? "Work email" : "工作邮箱", + password: isEn ? "Password" : "密码", + welcomeBack: isEn ? "Welcome Back" : "欢迎回来", + signUpTitle: isEn ? "Sign up for your PolyWeather account" : "注册您的 PolyWeather 账户", + newToPoly: isEn ? "New to PolyWeather?" : "还没有 PolyWeather 账号？", + alreadyHave: isEn ? "Already have an account?" : "已经有账号了？", + termsAgreement: isEn + ? "By proceeding, you agree to the Privacy Policy and Terms & Conditions." + : "继续操作即代表您同意隐私政策与服务条款。", + desc: isEn + ? "Access robust METAR observations, advanced DEB forecast blends, and real-time AI decision cards that bring clarity to your weather-market portfolios." + : "提供精准的机场 METAR 实况、先进的 DEB 智能融合预测和实时 AI 决策卡片，助您看清天气市场脉络。", + trusted: isEn ? "Trusted by institutional traders" : "深受机构交易员信赖", } as const; const onResetPassword = async () => { @@ -214,152 +234,299 @@ export function LoginClient({ nextPath }: LoginClientProps) { } }; - const isLogin = mode === "login"; + if (mode === "signup") { + return ( +
+ {/* Left Dark Column */} +
+
+ + + + + PolyWeather + + +
+

+ {isEn ? ( + <> + Weather intelligence and risk management{" "} + + simplified. + + + ) : ( + <> + 天气信息与风险管理{" "} + + 化繁为简。 + + + )} +

+

+ {copy.desc} +

+
+
+ +
+
+

+ {copy.trusted} +

+
+ {[ + "Atmos Capital", + "Celerity Risk", + "Metis Trading", + "Aviation Hedge", + ].map((name) => ( +
+ {name} +
+ ))} +
+
+ +
+ ⭐⭐⭐⭐⭐ + 4.9 out of 5 stars (G2 rating) +
+
+
+ + {/* Right White Column (Signup Form) */} +
+
+

+ {copy.signUpTitle} +

+

+ {copy.subtitle} +

+ +
void onEmailSubmit(event)} className="space-y-4"> +
+ +
+ + 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" + /> +
+
+ +
+ +
+ + setPassword(event.target.value)} + placeholder={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" + /> + +
+
+ +

+ {copy.termsAgreement} +

+ + +
+ +
+
+ + {isEn ? "or" : "或"} + +
+
+ + + + {errorText ?

{errorText}

: null} + {infoText ?

{infoText}

: null} + +

+ {copy.alreadyHave}{" "} + +

+
+
+
+ ); + } return ( -
-
- -
- - - -
-
- -
-

PolyWeather

-

{copy.subtitle}

-
- - - -
-
- - {copy.orEmail} +
+ {/* Top Header */} +
+ + + -
-
- -
- + PolyWeather + +
+ {copy.newToPoly}
+
-
void onEmailSubmit(event)} className="space-y-4"> -
- - setEmail(event.target.value)} - placeholder="you@example.com" - className="w-full rounded-lg border border-slate-300 bg-white py-3.5 pl-12 pr-4 text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20" - /> -
-
- - setPassword(event.target.value)} - placeholder={ - isLogin - ? copy.passwordLoginPlaceholder - : copy.passwordSignupPlaceholder - } - className="w-full rounded-lg border border-slate-300 bg-white py-3.5 pl-12 pr-4 text-slate-950 placeholder:text-slate-400 transition-all focus:border-blue-500 focus:outline-none focus:ring-2 focus:ring-blue-500/20" - /> -
+ {/* Main Login Card Area */} +
+
+

+ {copy.welcomeBack} +

+

+ {copy.subtitle} +

- {isLogin && !resetSent ? ( -
- + void onEmailSubmit(event)} className="space-y-4"> +
+ +
+ + 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" + /> +
- ) : null} + +
+
+ + {isLogin && !resetSent ? ( + + ) : null} +
+
+ + 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" + /> + +
+
+ + + + +
+
+ + {isEn ? "or" : "或"} + +
+
- - {errorText ?

{errorText}

: null} - {infoText ?

{infoText}

: null} - {errorText && isLogin && errorText.includes("Invalid login") ? ( -

{copy.loginFailedHint}

- ) : null} - {infoText === copy.signupCheckEmail ? ( -

{copy.resendVerify}

- ) : null} - -
-

- {isLogin ? copy.loginHint : copy.signupHint} -

+ {errorText ?

{errorText}

: null} + {infoText ?

{infoText}

: null} + {errorText && isLogin && errorText.includes("Invalid login") ? ( +

{copy.loginFailedHint}

+ ) : null} + {infoText === copy.signupCheckEmail ? ( +

{copy.resendVerify}

+ ) : null}
- - {!supabaseReady ? ( -

{copy.supabaseMissing}

- ) : null} -
- -
- - {copy.realtime} - - - {copy.highPrecision} - -
+
); } diff --git a/frontend/components/dashboard/DashboardShellSkeleton.tsx b/frontend/components/dashboard/DashboardShellSkeleton.tsx index f1b78294..8aa059f0 100644 --- a/frontend/components/dashboard/DashboardShellSkeleton.tsx +++ b/frontend/components/dashboard/DashboardShellSkeleton.tsx @@ -4,101 +4,148 @@ import { Skeleton } from "@/components/ui/skeleton"; export function DashboardShellSkeleton() { return ( -
-
-
- - -
-
- - -
-
+
+ {/* Dark Sidebar */} + -
-
- - {Array.from({ length: 6 }).map((_, index) => ( - - ))} -
+ {/* Main Content Area */} +
+ {/* Dark Top Header */} +
+
+ {/* Search Box Skeleton */} +
+ {/* Title Skeleton */} +
+
+
+ {/* Clock & Profile Skeletons */} +
+
+
+
+
-
- - {Array.from({ length: 8 }).map((_, index) => ( - - ))} -
+ {/* Workspace Body Skeletons (3 Columns) */} +
+ {/* Column 1 */} +
+ {/* Card 1 */} +
+
+ +
+
+ +
+ {Array.from({ length: 6 }).map((_, idx) => ( +
+ + +
+ ))} +
+
+ {/* Card 2 */} +
+
+ +
+
+
+ {Array.from({ length: 3 }).map((_, idx) => ( + + ))} +
+
+
-
- - - -
+ {/* Column 2 */} +
+ {/* Card 1 */} +
+
+ +
+
+
+
+ + + +
+ +
+
+ {/* Card 2 */} +
+ +
+ + + +
+
+ {/* Card 3 */} +
+
+ +
+
+
+ {Array.from({ length: 5 }).map((_, idx) => ( + + ))} +
+
+
+ + {/* Column 3 */} +
+ {/* Card 1 */} +
+
+ +
+
+
+ {Array.from({ length: 6 }).map((_, idx) => ( + + ))} +
+
+ {/* Card 2 */} +
+
+ +
+
+
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
); diff --git a/frontend/components/dashboard/HeaderBar.tsx b/frontend/components/dashboard/HeaderBar.tsx index 26ef719d..13496466 100644 --- a/frontend/components/dashboard/HeaderBar.tsx +++ b/frontend/components/dashboard/HeaderBar.tsx @@ -10,6 +10,7 @@ import { RotateCw, BookOpen, MoreHorizontal, + CloudSun, } from "lucide-react"; import { useEffect, useState } from "react"; import { useDashboardStore, useProAccess } from "@/hooks/useDashboardStore"; @@ -95,8 +96,8 @@ export function HeaderBar({ return (
-