web: add complete password reset flow with deep link token handling

web/src/components/AuthPanel.tsx

@@ -1,12 +1,17 @@
 import axios from "axios";
 import { FormEvent, useEffect, useState } from "react";
-import { checkEmailStatus, registerRequest } from "../api/auth";
+import { checkEmailStatus, registerRequest, requestPasswordResetRequest, resetPasswordRequest } from "../api/auth";
 import { useAuthStore } from "../store/authStore";
 
-type Step = "email" | "password" | "register" | "otp";
+type Step = "email" | "password" | "register" | "otp" | "forgot" | "reset";
 const AUTH_NOTICE_KEY = "bm_auth_notice";
 
-export function AuthPanel() {
+interface AuthPanelProps {
+  initialResetToken?: string | null;
+  onResetTokenConsumed?: () => void;
+}
+
+export function AuthPanel({ initialResetToken = null, onResetTokenConsumed }: AuthPanelProps) {
   const login = useAuthStore((s) => s.login);
   const loading = useAuthStore((s) => s.loading);
   const [step, setStep] = useState<Step>("email");
@@ -16,6 +21,8 @@ export function AuthPanel() {
   const [password, setPassword] = useState("");
   const [otpCode, setOtpCode] = useState("");
   const [recoveryCode, setRecoveryCode] = useState("");
+  const [resetToken, setResetToken] = useState(initialResetToken || "");
+  const [newPassword, setNewPassword] = useState("");
   const [useRecoveryCode, setUseRecoveryCode] = useState(false);
   const [checkingEmail, setCheckingEmail] = useState(false);
   const [error, setError] = useState<string | null>(null);
@@ -30,6 +37,17 @@ export function AuthPanel() {
     window.localStorage.removeItem(AUTH_NOTICE_KEY);
   }, []);
 
+  useEffect(() => {
+    const prepared = initialResetToken?.trim() || "";
+    if (!prepared) {
+      return;
+    }
+    setResetToken(prepared);
+    setStep("reset");
+    setSuccess("Enter a new password to finish reset.");
+    onResetTokenConsumed?.();
+  }, [initialResetToken, onResetTokenConsumed]);
+
   async function onSubmit(event: FormEvent) {
     event.preventDefault();
     setError(null);
@@ -64,6 +82,35 @@ export function AuthPanel() {
         return;
       }
 
+      if (step === "forgot") {
+        const normalizedEmail = email.trim().toLowerCase();
+        if (!normalizedEmail) {
+          setError("Enter email.");
+          return;
+        }
+        await requestPasswordResetRequest(normalizedEmail);
+        setSuccess("If account exists, reset email was sent.");
+        setStep("password");
+        return;
+      }
+
+      if (step === "reset") {
+        const preparedToken = resetToken.trim();
+        if (!preparedToken) {
+          setError("Reset token is required.");
+          return;
+        }
+        if (newPassword.trim().length < 8) {
+          setError("Password must be at least 8 characters.");
+          return;
+        }
+        await resetPasswordRequest(preparedToken, newPassword.trim());
+        setSuccess("Password reset successful. Sign in with new password.");
+        setStep("password");
+        setNewPassword("");
+        return;
+      }
+
       await login(
         email,
         password,
@@ -91,6 +138,7 @@ export function AuthPanel() {
     setUseRecoveryCode(false);
     setName("");
     setUsername("");
+    setNewPassword("");
     setError(null);
     setSuccess(null);
   }
@@ -100,6 +148,10 @@ export function AuthPanel() {
       ? "Continue"
       : step === "register"
         ? "Create account"
+        : step === "forgot"
+          ? "Send reset email"
+          : step === "reset"
+            ? "Reset password"
         : step === "password"
           ? "Next"
           : "Sign in";
@@ -150,6 +202,10 @@ export function AuthPanel() {
           </>
         ) : null}
 
+        {step === "forgot" ? (
+          <p className="text-xs text-slate-400">We'll send a password reset link if this account exists.</p>
+        ) : null}
+
         {step === "password" || step === "register" || step === "otp" ? (
           <input
             className="w-full rounded bg-slate-800 px-3 py-2"
@@ -160,6 +216,24 @@ export function AuthPanel() {
           />
         ) : null}
 
+        {step === "reset" ? (
+          <>
+            <input
+              className="w-full rounded bg-slate-800 px-3 py-2"
+              placeholder="Reset token"
+              value={resetToken}
+              onChange={(e) => setResetToken(e.target.value)}
+            />
+            <input
+              className="w-full rounded bg-slate-800 px-3 py-2"
+              placeholder="New password"
+              type="password"
+              value={newPassword}
+              onChange={(e) => setNewPassword(e.target.value)}
+            />
+          </>
+        ) : null}
+
         {step === "otp" ? (
           <>
             <button
@@ -190,6 +264,34 @@ export function AuthPanel() {
         <button className="w-full rounded bg-accent px-3 py-2 font-semibold text-black disabled:opacity-50" disabled={isBusy} type="submit">
           {submitLabel}
         </button>
+
+        {step === "password" ? (
+          <button
+            className="text-xs text-sky-300 hover:text-sky-200"
+            onClick={() => {
+              setError(null);
+              setSuccess(null);
+              setStep("forgot");
+            }}
+            type="button"
+          >
+            Forgot password?
+          </button>
+        ) : null}
+
+        {(step === "email" || step === "forgot" || step === "password") ? (
+          <button
+            className="text-xs text-sky-300 hover:text-sky-200"
+            onClick={() => {
+              setError(null);
+              setSuccess(null);
+              setStep("reset");
+            }}
+            type="button"
+          >
+            I have reset token
+          </button>
+        ) : null}
       </form>
       {error ? <p className="mt-3 text-sm text-red-400">{error}</p> : null}
       {success ? <p className="mt-3 text-sm text-emerald-400">{success}</p> : null}