ui: add prompts

Author: rabbull

src/app/claim/[id]/ClientPage.tsx

@@ -19,6 +19,7 @@ export default function ClientPage() {
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | undefined>();
   const [effectivePassword, setEffectivePassword] = useState<string | undefined>(undefined);
+  const [passwordChecked, setPasswordChecked] = useState(false);
   const [askPassword, setAskPassword] = useState(false);
   const [passwordError, setPasswordError] = useState(false);
   type DownUrl = { url: string; expiresAt?: string };
@@ -29,11 +30,12 @@ export default function ClientPage() {
     if (!id) return;
     const saved = getClaimPassword(id);
     setEffectivePassword(saved);
+    setPasswordChecked(true);
   }, [id]);
 
   const lastLoadIdRef = useRef(0);
   const load = useCallback(async () => {
-    if (!id) return;
+    if (!id || !passwordChecked) return;
     const thisLoadId = ++lastLoadIdRef.current;
     setLoading(true);
     setError(undefined);
@@ -72,7 +74,7 @@ export default function ClientPage() {
     } finally {
       if (lastLoadIdRef.current === thisLoadId) setLoading(false);
     }
-  }, [id, effectivePassword]);
+  }, [id, effectivePassword, passwordChecked]);
 
   useEffect(() => {
     void load();
@@ -149,7 +151,7 @@ export default function ClientPage() {
   }
 
   // Require password: render only the password prompt, hide page content
-  if (askPassword) {
+  if (askPassword && passwordChecked) {
     return (
       <div className="w-full min-h-[50vh] flex items-center justify-center">
         <div className="w-full max-w-sm rounded bg-background p-4 border">
@@ -175,7 +177,7 @@ export default function ClientPage() {
       <div className="flex items-center justify-between gap-3">
         <h1 className="text-2xl font-semibold">{t('detailTitle')}</h1>
         <div className="flex items-center gap-2">
-          <button onClick={copyLink} className="px-3 py-1.5 rounded border text-sm hover:bg-black/5 dark:hover:bg-white/10">{t('copy')}</button>
+          <CopyButton onCopy={copyLink} label={t('copy')} doneLabel={t('copied')} />
           <Link href="/claim/new" className="px-3 py-1.5 rounded border text-sm hover:bg-black/5 dark:hover:bg-white/10">{t('newClaim')}</Link>
         </div>
       </div>
@@ -208,7 +210,7 @@ export default function ClientPage() {
                 <div className="font-mono text-sm break-all">{claim.id}</div>
                 <div className="text-xs text-black/60 dark:text-white/60">{t('claimIdNote')}</div>
               </div>
-              <button onClick={() => navigator.clipboard?.writeText(claim.id)} className="shrink-0 px-3 py-1.5 rounded border text-sm hover:bg-black/5 dark:hover:bg-white/10">{t('copy')}</button>
+              <CopyButton onCopy={() => navigator.clipboard?.writeText(claim.id)} label={t('copy')} doneLabel={t('copied')} className="shrink-0" />
             </div>
             {claim.description && <p className="mt-2 text-sm whitespace-pre-wrap">{claim.description}</p>}
             <div className="mt-3 grid gap-2 sm:grid-cols-2 text-sm">
@@ -328,3 +330,19 @@ function PasswordPrompt({ onSubmit, onCancel, error }: { onSubmit: (pwd: string)
     </form>
   );
 }
+
+function CopyButton({ onCopy, label, doneLabel, className }: { onCopy: () => void | Promise<void>; label: string; doneLabel: string; className?: string }) {
+  const [copied, setCopied] = useState(false);
+  return (
+    <button
+      onClick={async () => {
+        try { await onCopy(); } catch {}
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1200);
+      }}
+      className={(className ? className + ' ' : '') + "px-3 py-1.5 rounded border text-sm hover:bg-black/5 dark:hover:bg-white/10"}
+    >
+      {copied ? doneLabel : label}
+    </button>
+  );
+}

src/app/claim/new/page.tsx

@@ -52,6 +52,7 @@ export default function NewClaimPage() {
   const [expenseAt, setExpenseAt] = useState<string>(""); // yyyy-MM-ddTHH:mm
   const [recipient, setRecipient] = useState<string>("");
   const [password, setPassword] = useState<string>("");
+  const [password2, setPassword2] = useState<string>("");
   const [payout, setPayout] = useState<PayoutInfo>({});
 
   useEffect(() => {
@@ -88,6 +89,8 @@ export default function NewClaimPage() {
     if (!expenseAt) return "请选择消费发生时间";
     // minimal payout validation
     if (!payout.iban && !payout.accountNumber) return "请至少填写 IBAN 或 账户号";
+    // If password set, require confirmation match
+    if (password.trim() && password.trim() !== password2.trim()) return t('passwordMismatch');
   }
 
   async function handleSubmit(e: React.FormEvent) {
@@ -253,6 +256,7 @@ export default function NewClaimPage() {
           <h2 className="text-lg font-medium">{t('password')}</h2>
           <p className="text-sm text-black/60 dark:text-white/60">{t('passwordHint')}</p>
           <input type="password" value={password} onChange={(e) => setPassword(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('password')} />
+          <input type="password" value={password2} onChange={(e) => setPassword2(e.target.value)} className="w-full rounded border px-3 py-2 bg-transparent" placeholder={t('passwordConfirm')} />
         </section>
 
         {error && <div className="text-sm text-red-600">{error}</div>}

src/lib/i18n.tsx

@@ -41,6 +41,8 @@ const dict: Record<Lang, Record<string, string>> = {
     attachments: "附件（发票/小票照片）",
     password: "访问密码（可选）",
     passwordHint: "可为该报销单设置访问密码。设置后，查看或更新需要输入此密码。",
+    passwordConfirm: "再次输入密码",
+    passwordMismatch: "两次输入的密码不一致",
     submit: "提交报销单",
     detailTitle: "报销单详情",
     refresh: "刷新",
@@ -63,6 +65,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_WITHDRAW: "已撤回",
     claimIdNote: "此 ID 类似密码，请妥善保管，不要分享。",
     copy: "复制",
+    copied: "已复制",
     enterPassword: "请输入访问密码",
     passwordWrong: "密码错误，请重试",
     cancel: "取消",
@@ -96,6 +99,8 @@ const dict: Record<Lang, Record<string, string>> = {
     attachments: "Attachments (receipt photos)",
     password: "Password (optional)",
     passwordHint: "You can set a password. Viewing or updating later requires it.",
+    passwordConfirm: "Confirm password",
+    passwordMismatch: "Passwords do not match",
     submit: "Submit Claim",
     detailTitle: "Claim Detail",
     refresh: "Refresh",
@@ -118,6 +123,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_WITHDRAW: "Withdrawn",
     claimIdNote: "Treat this ID like a password. Keep it private.",
     copy: "Copy",
+    copied: "Copied",
     enterPassword: "Enter password",
     passwordWrong: "Incorrect password. Please try again.",
     cancel: "Cancel",
@@ -151,6 +157,8 @@ const dict: Record<Lang, Record<string, string>> = {
     attachments: "Beilagen (Belege/Fotos)",
     password: "Passwort (optional)",
     passwordHint: "Sie können ein Passwort setzen. Ansicht/Änderung erfordert es.",
+    passwordConfirm: "Passwort bestätigen",
+    passwordMismatch: "Passwörter stimmen nicht überein",
     submit: "Spesen einreichen",
     detailTitle: "Spesendetails",
     refresh: "Aktualisieren",
@@ -173,6 +181,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_WITHDRAW: "Zurückgezogen",
     claimIdNote: "Behandeln Sie diese ID wie ein Passwort. Nicht teilen.",
     copy: "Kopieren",
+    copied: "Kopiert",
     enterPassword: "Passwort eingeben",
     passwordWrong: "Falsches Passwort. Bitte erneut versuchen.",
     cancel: "Abbrechen",
@@ -206,6 +215,8 @@ const dict: Record<Lang, Record<string, string>> = {
     attachments: "Pièces jointes (reçus)",
     password: "Mot de passe (optionnel)",
     passwordHint: "Vous pouvez définir un mot de passe. Requis pour consulter/modifier.",
+    passwordConfirm: "Confirmer le mot de passe",
+    passwordMismatch: "Les mots de passe ne correspondent pas",
     submit: "Soumettre la note",
     detailTitle: "Détails de la note",
     refresh: "Actualiser",
@@ -228,6 +239,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_WITHDRAW: "Retiré",
     claimIdNote: "Considérez cet ID comme un mot de passe. Ne le partagez pas.",
     copy: "Copier",
+    copied: "Copié",
     enterPassword: "Saisir le mot de passe",
     passwordWrong: "Mot de passe incorrect. Veuillez réessayer.",
     cancel: "Annuler",
@@ -261,6 +273,8 @@ const dict: Record<Lang, Record<string, string>> = {
     attachments: "Allegati (ricevute/foto)",
     password: "Password (opzionale)",
     passwordHint: "Puoi impostare una password. Sarà richiesta per vedere/modificare in seguito.",
+    passwordConfirm: "Conferma password",
+    passwordMismatch: "Le password non corrispondono",
     submit: "Invia nota",
     detailTitle: "Dettagli della nota",
     refresh: "Aggiorna",
@@ -283,6 +297,7 @@ const dict: Record<Lang, Record<string, string>> = {
     status_WITHDRAW: "Ritirata",
     claimIdNote: "Tratta questo ID come una password. Mantienilo privato.",
     copy: "Copia",
+    copied: "Copiato",
     enterPassword: "Inserisci la password",
     passwordWrong: "Password errata. Riprova.",
     cancel: "Annulla",