ui: password handling

rabbull · rabbull · commit 3fcf9510a825 · 2025-09-20T00:06:18.000+02:00
diff --git a/next.config.ts b/next.config.ts
@@ -1,11 +1,8 @@
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
-  // Export as a static site for GitHub Pages
-  output: "export",
-  // Helps GitHub Pages serve directories as index.html
+  // Keep trailing slash for consistent URLs if desired
   trailingSlash: true,
-  // Avoid image optimization server dependency
   images: { unoptimized: true },
 };
 
diff --git a/src/app/claim/[id]/ClientPage.tsx b/src/app/claim/[id]/ClientPage.tsx
@@ -2,17 +2,23 @@
 
 import { useEffect, useRef, useState, useCallback } from "react";
 import Link from "next/link";
-import { useParams, useSearchParams } from "next/navigation";
+import { useParams, useSearchParams, useRouter } from "next/navigation";
 import { Api, HttpError } from "@/lib/api";
 import type { ClaimResponse, ClaimStatus } from "@/lib/types";
-import { getClaimPassword, setClaimPassword } from "@/lib/auth";
+import { clearClaimPassword, getClaimPassword, setClaimPassword } from "@/lib/auth";
 import { useI18n } from "@/lib/i18n";
 import { ClaimFlowchart } from "@/components/ClaimFlowchart";
 
 export default function ClientPage() {
   const params = useParams<{ id?: string }>();
   const searchParams = useSearchParams();
-  const id = (params?.id as string) || searchParams?.get("id") || "";
+  const paramsId = params?.id as string | undefined;
+  const queryId = searchParams?.get("id") || undefined;
+  const origin = searchParams?.get("origin") || undefined;
+  const id = paramsId || queryId || "";
+  const isLegacyViewMode = !paramsId && !!queryId;
+  const isEntryFlow = origin === "entry" || isLegacyViewMode;
+  const router = useRouter();
   const { t } = useI18n();
 
   const [claim, setClaim] = useState<ClaimResponse | null>(null);
@@ -25,6 +31,8 @@ export default function ClientPage() {
   type DownUrl = { url: string; expiresAt?: string };
   const [downUrls, setDownUrls] = useState<Record<string, DownUrl>>({});
   const [updating, setUpdating] = useState(false);
+  const passwordSubmittedRef = useRef(false);
+  const pendingPasswordRef = useRef<string | undefined>(undefined);
 
   useEffect(() => {
     if (!id) return;
@@ -35,14 +43,19 @@ export default function ClientPage() {
 
   const lastLoadIdRef = useRef(0);
   const load = useCallback(async () => {
-    if (!id || !passwordChecked) return;
+    if (!id || !passwordChecked || askPassword) return;
     const thisLoadId = ++lastLoadIdRef.current;
     setLoading(true);
     setError(undefined);
     try {
       const c = await Api.getClaim(id, effectivePassword || undefined);
       if (lastLoadIdRef.current !== thisLoadId) return;
       setClaim(c);
+      passwordSubmittedRef.current = false;
+      if (pendingPasswordRef.current !== undefined) {
+        setClaimPassword(id, pendingPasswordRef.current);
+        pendingPasswordRef.current = undefined;
+      }
       // Fetch download URLs for each photo
       if (c.photos && c.photos.length) {
         const entries = await Promise.all(
@@ -61,11 +74,28 @@ export default function ClientPage() {
         setDownUrls({});
       }
     } catch (e: unknown) {
-      if (e instanceof HttpError && (e.status === 401 || e.status === 403)) {
-        // Need or wrong password → open modal
-        setAskPassword(true);
-        // If we already tried with a password, mark error to display feedback
-        setPasswordError(!!effectivePassword);
+      if (e instanceof HttpError && (e.status === 401 || e.status === 403 || e.status === 404)) {
+        // Behavior differs for entry flows (home/new) vs direct link
+        if (isEntryFlow) {
+          // Entry flow from /claim without password → redirect home with unified error
+          router.push(`/?error=idOrPassword&id=${encodeURIComponent(id)}`);
+          return;
+        }
+        // Direct /claim/[id]
+        if (e.status === 401 || e.status === 403) {
+          const hadPasswordAttempt = passwordSubmittedRef.current || !!effectivePassword;
+          passwordSubmittedRef.current = false;
+          pendingPasswordRef.current = undefined;
+          if (hadPasswordAttempt) {
+            clearClaimPassword(id);
+          }
+          setAskPassword(true);
+          setPasswordError(hadPasswordAttempt);
+        } else if (e.status === 404) {
+          // Unknown ID: keep prompt, but don't show wrong-password error
+          setAskPassword(true);
+          setPasswordError(false);
+        }
       } else {
         const msg = e instanceof Error ? e.message : '加载失败';
         setError(msg);
@@ -74,7 +104,7 @@ export default function ClientPage() {
     } finally {
       if (lastLoadIdRef.current === thisLoadId) setLoading(false);
     }
-  }, [id, effectivePassword, passwordChecked]);
+  }, [id, effectivePassword, passwordChecked, isEntryFlow, router, askPassword]);
 
   useEffect(() => {
     void load();
@@ -135,19 +165,25 @@ export default function ClientPage() {
       setClaim(updated);
     } catch (e: unknown) {
       if (e instanceof HttpError && e.status === 403) {
+        const hadPasswordAttempt = !!effectivePassword;
+        passwordSubmittedRef.current = false;
+        pendingPasswordRef.current = undefined;
+        if (hadPasswordAttempt) {
+          clearClaimPassword(id);
+        }
         setAskPassword(true);
-        setPasswordError(!!effectivePassword);
+        setPasswordError(hadPasswordAttempt);
       } else setError(e instanceof Error ? e.message : '更新失败');
     } finally {
       setUpdating(false);
     }
   }
 
   function copyLink() {
-    if (typeof window === 'undefined') return;
-    const u = new URL(window.location.href);
-    u.searchParams.delete('password');
-    navigator.clipboard?.writeText(u.toString()).catch(() => {});
+    if (typeof window === 'undefined' || !id) return;
+    const link = new URL(window.location.origin);
+    link.pathname = `/claim/${encodeURIComponent(id)}`;
+    navigator.clipboard?.writeText(link.toString()).catch(() => {});
   }
 
   // Require password: render only the password prompt, hide page content
@@ -159,8 +195,9 @@ export default function ClientPage() {
           <PasswordPrompt
             onSubmit={(pwd) => {
               if (!id) return;
-              setClaimPassword(id, pwd);
+              pendingPasswordRef.current = pwd;
               setEffectivePassword(pwd);
+              passwordSubmittedRef.current = true;
               setAskPassword(false);
               setPasswordError(false);
             }}
diff --git a/src/app/claim/[id]/page.tsx b/src/app/claim/[id]/page.tsx
@@ -0,0 +1,9 @@
+import ClientPage from "./ClientPage";
+
+export function generateStaticParams() {
+  return [];
+}
+
+export default function Page() {
+  return <ClientPage />;
+}
diff --git a/src/app/claim/new/page.tsx b/src/app/claim/new/page.tsx
@@ -124,7 +124,7 @@ export default function NewClaimPage() {
         }
       } catch {}
       // Navigate to detail without exposing password in URL
-      router.push(`/claim/view?id=${encodeURIComponent(created.id)}`);
+      router.push(`/claim/${encodeURIComponent(created.id)}?origin=entry`);
     } catch (e: unknown) {
       setError(e instanceof Error ? e.message : "提交失败");
     } finally {
diff --git a/src/app/claim/view/page.tsx b/src/app/claim/view/page.tsx
@@ -1,6 +1,14 @@
-import ClientPage from "../[id]/ClientPage";
+import { redirect } from "next/navigation";
 
-export default function Page() {
-  return <ClientPage />;
+type PageProps = {
+  searchParams?: { id?: string };
+};
+
+export default function Page({ searchParams }: PageProps) {
+  const id = searchParams?.id;
+  if (!id) {
+    redirect("/");
+  }
+  redirect(`/claim/${encodeURIComponent(id)}?origin=entry`);
 }
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -31,16 +31,15 @@ export default function RootLayout({
         <I18nProvider>
           <header className="w-full border-b border-black/10 dark:border-white/20 sticky top-0 bg-background/80 backdrop-blur z-10">
             <div className="mx-auto max-w-4xl px-4 py-3 flex items-center justify-between">
-              <Link href="/" className="font-semibold tracking-tight">ACSSZ</Link>
+              <Link href="/" className="font-semibold tracking-tight">ACSSZ EzClaim</Link>
               <nav className="flex items-center gap-4">
-                <Link className="hover:underline" href="/claim/new">New Claim</Link>
                 <LangSwitcher />
               </nav>
             </div>
           </header>
           <main className="mx-auto max-w-4xl px-4 py-6">{children}</main>
           <footer className="mx-auto max-w-4xl px-4 py-8 text-sm text-black/60 dark:text-white/60">
-            © {new Date().getFullYear()} ACSSZ
+            Built with ♥️ by  © {new Date().getFullYear()} ACSSZ
           </footer>
         </I18nProvider>
       </body>
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,12 +1,16 @@
 "use client";
 import { useState } from "react";
+import { useSearchParams } from "next/navigation";
 import Link from "next/link";
 import { useI18n } from "@/lib/i18n";
 import { setClaimPassword } from "@/lib/auth";
 
 export default function Home() {
   const { t } = useI18n();
-  const [claimId, setClaimId] = useState("");
+  const searchParams = useSearchParams();
+  const initialId = searchParams?.get('id') || '';
+  const errorKey = searchParams?.get('error');
+  const [claimId, setClaimId] = useState(initialId);
   const [pwd, setPwd] = useState("");
 
   function openClaim(e: React.FormEvent) {
@@ -16,35 +20,37 @@ export default function Home() {
     try {
       if (pwd.trim()) setClaimPassword(id, pwd.trim());
     } catch {}
-    window.location.href = `/claim/view?id=${encodeURIComponent(id)}`;
+    window.location.href = `/claim/${encodeURIComponent(id)}?origin=entry`;
   }
   return (
-    <div className="space-y-6">
-      <section className="space-y-3">
-        <h1 className="text-3xl font-semibold tracking-tight">{t('welcome')}</h1>
-        <p className="text-black/70 dark:text-white/70">{t('tagline')}</p>
-        <div className="flex gap-3">
-          <Link href="/claim/new" className="px-4 py-2 rounded bg-foreground text-background font-medium">{t('newClaim')}</Link>
-          <a href="#" className="px-4 py-2 rounded border" onClick={(e) => { e.preventDefault(); alert(t('adminSoon')); }}>{t('adminSoon')}</a>
+    <div className="flex items-center justify-center min-h-[60vh]">
+      <div className="w-full max-w-md border rounded p-6 bg-background space-y-6">
+        <div className="space-y-1">
+          <h1 className="text-2xl font-semibold tracking-tight text-center">{t('brand')}</h1>
         </div>
-      </section>
-
-      <section className="space-y-3">
-        <h2 className="text-xl font-medium">{t('openExisting')}</h2>
-        <form onSubmit={openClaim} className="grid gap-3 sm:grid-cols-3 items-end">
-          <div className="sm:col-span-2">
-            <label className="block text-sm mb-1">{t('claimId')}</label>
-            <input value={claimId} onChange={(e) => setClaimId(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('claimId')} />
-          </div>
-          <div className="sm:col-span-1">
-            <label className="block text-sm mb-1">{t('passwordOptional')}</label>
-            <input type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('passwordOptional')} />
-          </div>
-          <div className="sm:col-span-3">
-            <button type="submit" className="px-4 py-2 rounded bg-foreground text-background">{t('openClaim')}</button>
-          </div>
-        </form>
-      </section>
+        <div className="grid gap-4">
+          {errorKey === 'idOrPassword' && (
+            <div className="text-sm rounded border border-red-200 bg-red-50 text-red-700 dark:bg-red-900/20 dark:border-red-900/40 dark:text-red-200 px-3 py-2">
+              {t('idOrPasswordError')}
+            </div>
+          )}
+          <form onSubmit={openClaim} className="grid gap-3">
+            <div>
+              <label className="block text-sm mb-1">{t('claimId')}</label>
+              <input value={claimId} onChange={(e) => setClaimId(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('claimId')} />
+            </div>
+            <div>
+              <label className="block text-sm mb-1">{t('passwordOptional')}</label>
+              <input type="password" value={pwd} onChange={(e) => setPwd(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('passwordOptional')} />
+            </div>
+            <button type="submit" className="w-full px-4 py-2 rounded border hover:bg-black/5 dark:hover:bg-white/10">{t('openExisting')}</button>
+          </form>
+          <div>{t('newClaimPrompt')}</div>
+          <Link href="/claim/new" className="w-full inline-flex items-center justify-center px-4 py-2 rounded bg-foreground text-background font-medium">
+            {t('newClaim')}
+          </Link>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/src/lib/i18n.tsx b/src/lib/i18n.tsx
@@ -14,15 +14,15 @@ const I18nContext = createContext<Ctx | null>(null);
 
 const dict: Record<Lang, Record<string, string>> = {
   zh: {
-    brand: "ACSSZ 报销系统",
+    brand: "ACSSZ EzClaim",
     welcome: "欢迎使用 ACSSZ 报销系统",
-    tagline: "一套简单、专业、适配手机与桌面的 ACSSZ 报销系统。",
     newClaim: "新建报销单",
-    adminSoon: "管理端（即将提供）",
     openExisting: "打开已有报销单",
+    newClaimPrompt: "想要报销新项目？",
     claimId: "报销单ID",
     passwordOptional: "密码（可选）",
     openClaim: "打开报销单",
+    idOrPasswordError: "报销单 ID 不存在或密码错误",
     createTitle: "新建报销单",
     fieldTitle: "标题",
     fieldDescription: "说明",
@@ -74,13 +74,13 @@ const dict: Record<Lang, Record<string, string>> = {
   en: {
     brand: "ACSSZ Reimbursement",
     welcome: "Welcome to the ACSSZ Reimbursement System",
-    tagline: "A simple, professional ACSSZ reimbursement system for mobile and desktop.",
-    newClaim: "New Claim (anonymous)",
-    adminSoon: "Admin (coming soon)",
+    newClaim: "New Claim",
     openExisting: "Open Existing Claim",
+    newClaimPrompt: "Want to submit a new claim?",
     claimId: "Claim ID",
     passwordOptional: "Password (optional)",
     openClaim: "Open Claim",
+    idOrPasswordError: "Claim ID does not exist or password is incorrect.",
     createTitle: "Create Claim",
     fieldTitle: "Title",
     fieldDescription: "Description",
@@ -132,13 +132,13 @@ const dict: Record<Lang, Record<string, string>> = {
   "de-CH": {
     brand: "ACSSZ Spesen",
     welcome: "Willkommen beim ACSSZ-Spesensystem",
-    tagline: "Ein einfaches, professionelles ACSSZ-Spesensystem für Mobil und Desktop.",
     newClaim: "Neue Spesen",
-    adminSoon: "Admin (bald verfügbar)",
     openExisting: "Vorhandene Spesen öffnen",
+    newClaimPrompt: "Neue Spesen einreichen?",
     claimId: "Spesen-ID",
     passwordOptional: "Passwort (optional)",
     openClaim: "Spesen öffnen",
+    idOrPasswordError: "Spesen-ID existiert nicht oder Passwort ist falsch.",
     createTitle: "Spesen erfassen",
     fieldTitle: "Titel",
     fieldDescription: "Beschreibung",
@@ -190,13 +190,13 @@ const dict: Record<Lang, Record<string, string>> = {
   fr: {
     brand: "Remboursement ACSSZ",
     welcome: "Bienvenue sur le système de remboursement ACSSZ",
-    tagline: "Un système de remboursement ACSSZ simple et professionnel pour mobile et desktop.",
     newClaim: "Nouvelle note",
-    adminSoon: "Admin (bientôt)",
     openExisting: "Ouvrir une note existante",
+    newClaimPrompt: "Vous voulez créer une nouvelle note ?",
     claimId: "ID de note",
     passwordOptional: "Mot de passe (optionnel)",
     openClaim: "Ouvrir la note",
+    idOrPasswordError: "L'ID de note n'existe pas ou le mot de passe est incorrect.",
     createTitle: "Créer une note",
     fieldTitle: "Titre",
     fieldDescription: "Description",
@@ -248,13 +248,13 @@ const dict: Record<Lang, Record<string, string>> = {
   it: {
     brand: "Rimborsi ACSSZ",
     welcome: "Benvenuto nel sistema di rimborsi ACSSZ",
-    tagline: "Un sistema di rimborsi ACSSZ semplice e professionale per mobile e desktop.",
     newClaim: "Nuova nota",
-    adminSoon: "Admin (presto)",
     openExisting: "Apri una nota esistente",
+    newClaimPrompt: "Vuoi creare una nuova nota?",
     claimId: "ID nota",
     passwordOptional: "Password (opzionale)",
     openClaim: "Apri la nota",
+    idOrPasswordError: "L'ID nota non esiste o la password è errata.",
     createTitle: "Crea nota",
     fieldTitle: "Titolo",
     fieldDescription: "Descrizione",

Original file line number	Diff line number	Diff line change
`@@ -124,7 +124,7 @@ export default function NewClaimPage() {`
`124`	`124`	`}`
`125`	`125`	`} catch {}`
`126`	`126`	`// Navigate to detail without exposing password in URL`
`127`		- router.push(`/claim/view?id=${encodeURIComponent(created.id)}`);
	`127`	+ router.push(`/claim/${encodeURIComponent(created.id)}?origin=entry`);
`128`	`128`	`} catch (e: unknown) {`
`129`	`129`	`setError(e instanceof Error ? e.message : "提交失败");`
`130`	`130`	`} finally {`