feat: Implement account management center with authentication and subscription features, supported by new backend, i18n, and Supabase integration.

frontend/.env.example

@@ -3,6 +3,8 @@ POLYWEATHER_API_BASE_URL=http://127.0.0.1:8000
 NEXT_PUBLIC_SUPABASE_URL=
 NEXT_PUBLIC_SUPABASE_ANON_KEY=
 POLYWEATHER_AUTH_ENABLED=false
+# If true: middleware forces login; if false: optional login mode (guests allowed).
+POLYWEATHER_AUTH_REQUIRED=false
 # Optional dashboard guard (Next.js middleware)
 # If set, open dashboard with: /?access_token=<token>
 POLYWEATHER_DASHBOARD_ACCESS_TOKEN=

frontend/components/account/AccountCenter.tsx

@@ -11,6 +11,7 @@ import {
   Copy,
   KeyRound,
   Loader2,
+  LogIn,
   LogOut,
   RefreshCw,
   ShieldCheck,
@@ -28,6 +29,7 @@ type AuthMeResponse = {
   user_id?: string | null;
   email?: string | null;
   entitlement_mode?: string | null;
+  auth_required?: boolean;
   subscription_required?: boolean;
   subscription_active?: boolean | null;
 };
@@ -130,6 +132,7 @@ export function AccountCenter() {
   };
 
   const userId = backend?.user_id || user?.id || "";
+  const isAuthenticated = Boolean(userId);
   const email = backend?.email || user?.email || "";
   const providerRaw = normalizeProvider(user);
   const provider = providerRaw ? providerRaw.toUpperCase() : t("account.na");
@@ -143,6 +146,8 @@ export function AccountCenter() {
 
   const modeLabel = useMemo(() => {
     const mode = String(backend?.entitlement_mode || "").trim().toLowerCase();
+    if (mode === "supabase_required") return t("account.mode.supabaseRequired");
+    if (mode === "supabase_optional") return t("account.mode.supabaseOptional");
     if (mode === "supabase") return t("account.mode.supabase");
     if (mode === "legacy_token") return t("account.mode.legacy");
     if (mode === "disabled") return t("account.mode.disabled");
@@ -192,10 +197,17 @@ export function AccountCenter() {
               {refreshing ? <Loader2 size={15} className={styles.spin} /> : <RefreshCw size={15} />}
               {t("account.refresh")}
             </button>
-            <button type="button" className={styles.primaryBtn} onClick={() => void onSignOut()}>
-              <LogOut size={15} />
-              {t("account.signOut")}
-            </button>
+            {isAuthenticated ? (
+              <button type="button" className={styles.primaryBtn} onClick={() => void onSignOut()}>
+                <LogOut size={15} />
+                {t("account.signOut")}
+              </button>
+            ) : (
+              <Link className={styles.primaryBtn} href="/auth/login?next=%2Faccount">
+                <LogIn size={15} />
+                {t("account.signIn")}
+              </Link>
+            )}
           </div>
         </header>
 
@@ -205,24 +217,33 @@ export function AccountCenter() {
             <h2>{displayName}</h2>
             <p>{email || t("account.na")}</p>
             <div className={styles.badges}>
-              <span className={styles.badge}>
-                <CheckCircle2 size={14} />
-                {t("account.authenticated")}
-              </span>
-              {backend?.subscription_active ? (
-                <span className={styles.badge}>
-                  <ShieldCheck size={14} />
-                  {t("account.subscriptionActive")}
-                </span>
-              ) : backend?.subscription_required ? (
-                <span className={styles.badgeWarn}>
-                  <KeyRound size={14} />
-                  {t("account.subscriptionRequired")}
-                </span>
+              {isAuthenticated ? (
+                <>
+                  <span className={styles.badge}>
+                    <CheckCircle2 size={14} />
+                    {t("account.authenticated")}
+                  </span>
+                  {backend?.subscription_active ? (
+                    <span className={styles.badge}>
+                      <ShieldCheck size={14} />
+                      {t("account.subscriptionActive")}
+                    </span>
+                  ) : backend?.subscription_required ? (
+                    <span className={styles.badgeWarn}>
+                      <KeyRound size={14} />
+                      {t("account.subscriptionRequired")}
+                    </span>
+                  ) : (
+                    <span className={styles.badgeGhost}>
+                      <ShieldCheck size={14} />
+                      {t("account.subscriptionUnknown")}
+                    </span>
+                  )}
+                </>
               ) : (
                 <span className={styles.badgeGhost}>
                   <ShieldCheck size={14} />
-                  {t("account.subscriptionUnknown")}
+                  {t("account.guest")}
                 </span>
               )}
             </div>
@@ -259,7 +280,9 @@ export function AccountCenter() {
                 <dd>
                   {backend?.authenticated
                     ? t("account.backend.ok")
-                    : t("account.backend.fail")}
+                    : backend?.auth_required
+                    ? t("account.backend.fail")
+                    : t("account.guest")}
                 </dd>
               </div>
               <div>
@@ -328,4 +351,3 @@ export function AccountCenter() {
     </main>
   );
 }
-

frontend/lib/i18n.ts

@@ -114,12 +114,14 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "account.subtitle": "查看身份、权限与 Bot 绑定信息",
     "account.backDashboard": "返回看板",
     "account.refresh": "刷新",
+    "account.signIn": "登录 / 注册",
     "account.signOut": "退出登录",
     "account.loading": "正在同步账户信息...",
     "account.error": "加载失败: {message}",
     "account.updatedAt": "最近同步: {time}",
     "account.guestName": "PolyWeather 用户",
     "account.authenticated": "已登录",
+    "account.guest": "游客模式",
     "account.subscriptionActive": "订阅有效",
     "account.subscriptionRequired": "需要订阅",
     "account.subscriptionUnknown": "订阅状态未知",
@@ -138,6 +140,8 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "account.field.bindCommand": "绑定命令",
     "account.field.bindHint":
       "将下面命令发送到 Telegram Bot，可把网页账户与机器人权限绑定。",
+    "account.mode.supabaseRequired": "Supabase 强制登录",
+    "account.mode.supabaseOptional": "Supabase 可选登录",
     "account.mode.supabase": "Supabase 会话鉴权",
     "account.mode.legacy": "Legacy Token 鉴权",
     "account.mode.disabled": "未启用权限校验",
@@ -266,12 +270,14 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "account.subtitle": "Review identity, access status, and bot binding info",
     "account.backDashboard": "Back to Dashboard",
     "account.refresh": "Refresh",
+    "account.signIn": "Sign in / Sign up",
     "account.signOut": "Sign out",
     "account.loading": "Syncing account snapshot...",
     "account.error": "Failed to load: {message}",
     "account.updatedAt": "Last synced: {time}",
     "account.guestName": "PolyWeather User",
     "account.authenticated": "Authenticated",
+    "account.guest": "Guest Mode",
     "account.subscriptionActive": "Subscription active",
     "account.subscriptionRequired": "Subscription required",
     "account.subscriptionUnknown": "Subscription unknown",
@@ -290,6 +296,8 @@ const MESSAGES: Record<Locale, Record<string, string>> = {
     "account.field.bindCommand": "Binding command",
     "account.field.bindHint":
       "Send this command to the Telegram bot to bind web account identity.",
+    "account.mode.supabaseRequired": "Supabase required auth",
+    "account.mode.supabaseOptional": "Supabase optional auth",
     "account.mode.supabase": "Supabase session auth",
     "account.mode.legacy": "Legacy token auth",
     "account.mode.disabled": "Auth guard disabled",

frontend/middleware.ts

@@ -5,10 +5,19 @@ import {
 } from "@/lib/supabase/server";
 
 const SESSION_COOKIE = "polyweather_entitlement";
+
+function readEnvBool(name: string, fallback: boolean) {
+  const raw = process.env[name];
+  if (raw == null) return fallback;
+  return String(raw).trim().toLowerCase() === "true";
+}
+
 const SUPABASE_AUTH_ENABLED =
-  String(process.env.POLYWEATHER_AUTH_ENABLED || "")
-    .trim()
-    .toLowerCase() === "true";
+  readEnvBool("POLYWEATHER_AUTH_ENABLED", false);
+const SUPABASE_AUTH_REQUIRED = readEnvBool(
+  "POLYWEATHER_AUTH_REQUIRED",
+  SUPABASE_AUTH_ENABLED,
+);
 
 function isStaticAsset(pathname: string) {
   return (
@@ -114,6 +123,17 @@ async function handleSupabaseAuthGate(request: NextRequest) {
   return NextResponse.redirect(loginUrl);
 }
 
+async function handleSupabaseOptionalSession(request: NextRequest) {
+  const response = NextResponse.next({
+    request: {
+      headers: request.headers,
+    },
+  });
+  const supabase = createSupabaseMiddlewareClient(request, response);
+  await supabase.auth.getUser();
+  return response;
+}
+
 export async function middleware(request: NextRequest) {
   const { pathname } = request.nextUrl;
   if (isStaticAsset(pathname)) {
@@ -121,7 +141,10 @@ export async function middleware(request: NextRequest) {
   }
 
   if (SUPABASE_AUTH_ENABLED && hasSupabaseServerEnv()) {
-    return handleSupabaseAuthGate(request);
+    if (SUPABASE_AUTH_REQUIRED) {
+      return handleSupabaseAuthGate(request);
+    }
+    return handleSupabaseOptionalSession(request);
   }
   return handleLegacyTokenGate(request);
 }