Warn users before destructive password reset

frontend/package.json

@@ -31,7 +31,7 @@
     "yaml": "^2.8.3"
   },
   "dependencies": {
-    "@opensecret/react": "3.1.1",
+    "@opensecret/react": "3.2.0",
     "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-avatar": "^1.1.11",
     "@radix-ui/react-checkbox": "^1.3.3",

frontend/src/components/PasswordResetConfirmForm.tsx

@@ -6,7 +6,8 @@ import { AlertDestructive } from "@/components/AlertDestructive";
 import { useOpenSecret } from "@opensecret/react";
 import { useNavigate } from "@tanstack/react-router";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
-import { Loader2 } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Info, Loader2 } from "lucide-react";
 
 interface PasswordResetConfirmFormProps {
   email: string;
@@ -21,6 +22,7 @@ export function PasswordResetConfirmForm({ email, secret }: PasswordResetConfirm
   const [error, setError] = useState<string | null>(null);
   const [success, setSuccess] = useState(false);
   const [redirecting, setRedirecting] = useState(false);
+  const [showCodeHelp, setShowCodeHelp] = useState(false);
   const navigate = useNavigate();
   const os = useOpenSecret();
 
@@ -34,6 +36,19 @@ export function PasswordResetConfirmForm({ email, secret }: PasswordResetConfirm
     }
   }, [success, navigate]);
 
+  useEffect(() => {
+    if (success || code) {
+      setShowCodeHelp(false);
+      return;
+    }
+
+    const timer = setTimeout(() => {
+      setShowCodeHelp(true);
+    }, 30000);
+
+    return () => clearTimeout(timer);
+  }, [success, code]);
+
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     setIsLoading(true);
@@ -86,6 +101,17 @@ export function PasswordResetConfirmForm({ email, secret }: PasswordResetConfirm
       <CardContent>
         <form onSubmit={handleSubmit}>
           <div className="grid gap-4">
+            {showCodeHelp && (
+              <Alert>
+                <Info className="h-4 w-4" aria-hidden="true" />
+                <AlertTitle>No code yet?</AlertTitle>
+                <AlertDescription>
+                  If no code arrives after a few minutes, this account might not use password login.
+                  Try signing in with Apple, Google, or GitHub, or check spam before requesting
+                  another reset.
+                </AlertDescription>
+              </Alert>
+            )}
             <div className="grid gap-2">
               <Label htmlFor="code">Reset Code</Label>
               <Input

frontend/src/components/PasswordResetRequestForm.tsx

@@ -6,25 +6,42 @@ import { AlertDestructive } from "@/components/AlertDestructive";
 import { generateSecureSecret, hashSecret, useOpenSecret } from "@opensecret/react";
 import { PasswordResetConfirmForm } from "./PasswordResetConfirmForm";
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle
+} from "@/components/ui/alert-dialog";
+import { AlertTriangle } from "lucide-react";
+import { isPasswordResetHardeningNoticeEnabled } from "@/utils/passwordResetHardeningFlag";
 
 export function PasswordResetRequestForm() {
   const [email, setEmail] = useState("");
+  const [requestedEmail, setRequestedEmail] = useState("");
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [showConfirmForm, setShowConfirmForm] = useState(false);
+  const [showResetWarning, setShowResetWarning] = useState(false);
   const [secret, setSecret] = useState("");
   const os = useOpenSecret();
 
-  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
+  const requestPasswordReset = async () => {
+    const nextEmail = email.trim();
+
     setIsLoading(true);
     setError(null);
+    setShowResetWarning(false);
+    setRequestedEmail(nextEmail);
 
     try {
       // TODO: move this logic to the library
       const generatedSecret = generateSecureSecret();
       const hashedSecret = await hashSecret(generatedSecret);
-      await os.requestPasswordReset(email, hashedSecret);
+      await os.requestPasswordReset(nextEmail, hashedSecret);
       setSecret(generatedSecret);
       setShowConfirmForm(true);
     } catch (err) {
@@ -35,36 +52,80 @@ export function PasswordResetRequestForm() {
     }
   };
 
+  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    setError(null);
+
+    if (isPasswordResetHardeningNoticeEnabled()) {
+      setShowResetWarning(true);
+      return;
+    }
+
+    void requestPasswordReset();
+  };
+
   if (showConfirmForm) {
-    return <PasswordResetConfirmForm email={email} secret={secret} />;
+    return <PasswordResetConfirmForm email={requestedEmail} secret={secret} />;
   }
 
   return (
-    <Card className="bg-card/70 backdrop-blur-sm mx-auto max-w-[45rem]">
-      <CardHeader>
-        <CardTitle className="text-xl">Reset Password</CardTitle>
-        <CardDescription>Enter your email address to request a password reset.</CardDescription>
-      </CardHeader>
-      <CardContent>
-        <form onSubmit={handleSubmit}>
-          <div className="grid gap-4">
-            <div className="grid gap-2">
-              <Label htmlFor="email">Email</Label>
-              <Input
-                id="email"
-                type="email"
-                value={email}
-                onChange={(e) => setEmail(e.target.value)}
-                required
-              />
+    <>
+      <Card className="bg-card/70 backdrop-blur-sm mx-auto max-w-[45rem]">
+        <CardHeader>
+          <CardTitle className="text-xl">Reset Password</CardTitle>
+          <CardDescription>Enter your email address to request a password reset.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form onSubmit={handleSubmit}>
+            <div className="grid gap-4">
+              <div className="grid gap-2">
+                <Label htmlFor="email">Email</Label>
+                <Input
+                  id="email"
+                  type="email"
+                  value={email}
+                  onChange={(e) => setEmail(e.target.value)}
+                  disabled={isLoading}
+                  required
+                />
+              </div>
+              {error && <AlertDestructive title="Error" description={error} />}
+              <Button type="submit" className="w-full" disabled={isLoading}>
+                {isLoading ? "Requesting..." : "Request Password Reset"}
+              </Button>
+            </div>
+          </form>
+        </CardContent>
+      </Card>
+      <AlertDialog open={showResetWarning} onOpenChange={setShowResetWarning}>
+        <AlertDialogContent className="max-w-[calc(100vw-2rem)] sm:max-w-lg">
+          <AlertDialogHeader>
+            <div className="mb-2 flex h-10 w-10 items-center justify-center rounded-full bg-destructive/10 text-destructive">
+              <AlertTriangle className="h-5 w-5" aria-hidden="true" />
             </div>
-            {error && <AlertDestructive title="Error" description={error} />}
-            <Button type="submit" className="w-full" disabled={isLoading}>
-              {isLoading ? "Requesting..." : "Request Password Reset"}
-            </Button>
-          </div>
-        </form>
-      </CardContent>
-    </Card>
+            <AlertDialogTitle>Resetting your password deletes private data</AlertDialogTitle>
+            <AlertDialogDescription className="space-y-3">
+              <span className="block">
+                Password reset is account access recovery. It creates a new private key and removes
+                private encrypted content such as chats and saved data.
+              </span>
+              <span className="block">
+                Before continuing, try signing in with your current password or with Apple, Google,
+                or GitHub if that is how you created the account.
+              </span>
+              <span className="block">
+                If you can sign in another way, change your password from account settings instead.
+              </span>
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel disabled={isLoading}>Cancel</AlertDialogCancel>
+            <AlertDialogAction onClick={() => void requestPasswordReset()} disabled={isLoading}>
+              {isLoading ? "Requesting..." : "Continue with Reset"}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
   );
 }

frontend/src/utils/passwordResetHardeningFlag.ts

@@ -0,0 +1,5 @@
+const PASSWORD_RESET_HARDENING_NOTICE_ENABLED_AT_MS = Date.parse("2026-06-18T06:00:00.000Z");
+
+export function isPasswordResetHardeningNoticeEnabled(nowMs = Date.now()) {
+  return nowMs >= PASSWORD_RESET_HARDENING_NOTICE_ENABLED_AT_MS;
+}