From 69c0b632df81e1c36dd0990501ed2d9a96b21baa Mon Sep 17 00:00:00 2001 From: Codex Date: Mon, 9 Mar 2026 16:09:17 +0300 Subject: [PATCH] web: add complete password reset flow with deep link token handling --- web/src/api/auth.ts | 8 +++ web/src/app/App.tsx | 29 ++++++++- web/src/components/AuthPanel.tsx | 108 ++++++++++++++++++++++++++++++- web/src/pages/AuthPage.tsx | 9 ++- 4 files changed, 148 insertions(+), 6 deletions(-) diff --git a/web/src/api/auth.ts b/web/src/api/auth.ts index 333776c..14b3cb0 100644 --- a/web/src/api/auth.ts +++ b/web/src/api/auth.ts @@ -9,6 +9,14 @@ export async function verifyEmailRequest(token: string): Promise { await http.post("/auth/verify-email", { token }); } +export async function requestPasswordResetRequest(email: string): Promise { + await http.post("/auth/request-password-reset", { email }); +} + +export async function resetPasswordRequest(token: string, password: string): Promise { + await http.post("/auth/reset-password", { token, password }); +} + export async function loginRequest(email: string, password: string, otpCode?: string, recoveryCode?: string): Promise { const { data } = await http.post("/auth/login", { email, diff --git a/web/src/app/App.tsx b/web/src/app/App.tsx index cbd09d1..f40f8f1 100644 --- a/web/src/app/App.tsx +++ b/web/src/app/App.tsx @@ -12,6 +12,7 @@ import { applyAppearancePreferences, getAppPreferences } from "../utils/preferen const PENDING_INVITE_TOKEN_KEY = "bm_pending_invite_token"; const AUTH_NOTICE_KEY = "bm_auth_notice"; const PENDING_NOTIFICATION_NAV_KEY = "bm_pending_notification_nav"; +const PENDING_RESET_PASSWORD_TOKEN_KEY = "bm_pending_reset_password_token"; export function App() { const accessToken = useAuthStore((s) => s.accessToken); @@ -69,6 +70,15 @@ export function App() { window.history.replaceState(null, "", "/"); }, []); + useEffect(() => { + const resetToken = extractPasswordResetTokenFromLocation(); + if (!resetToken) { + return; + } + window.localStorage.setItem(PENDING_RESET_PASSWORD_TOKEN_KEY, resetToken); + window.history.replaceState(null, "", "/"); + }, []); + useEffect(() => { const nav = extractNotificationNavigationFromLocation(); if (!nav) { @@ -142,7 +152,13 @@ export function App() { }, [accessToken, joiningInvite, loadChats, me, setActiveChatId, setFocusedMessage, showToast]); if (!accessToken || !me) { - return ; + const pendingResetToken = window.localStorage.getItem(PENDING_RESET_PASSWORD_TOKEN_KEY); + return ( + window.localStorage.removeItem(PENDING_RESET_PASSWORD_TOKEN_KEY)} + /> + ); } return ( <> @@ -200,6 +216,17 @@ function extractNotificationNavigationFromLocation(): { chatId: number; messageI return { chatId, messageId }; } +function extractPasswordResetTokenFromLocation(): string | null { + if (typeof window === "undefined") { + return null; + } + const url = new URL(window.location.href); + if (!/^\/reset-password\/?$/i.test(url.pathname)) { + return null; + } + return url.searchParams.get("token")?.trim() || null; +} + function inviteJoinErrorMessage(error: unknown): string { const status = getHttpStatusCode(error); if (status === 404) { diff --git a/web/src/components/AuthPanel.tsx b/web/src/components/AuthPanel.tsx index 95073c9..5544b60 100644 --- a/web/src/components/AuthPanel.tsx +++ b/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("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(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" ? ( +

We'll send a password reset link if this account exists.

+ ) : null} + {step === "password" || step === "register" || step === "otp" ? ( ) : null} + {step === "reset" ? ( + <> + setResetToken(e.target.value)} + /> + setNewPassword(e.target.value)} + /> + + ) : null} + {step === "otp" ? ( <> + + {step === "password" ? ( + + ) : null} + + {(step === "email" || step === "forgot" || step === "password") ? ( + + ) : null} {error ?

{error}

: null} {success ?

{success}

: null} diff --git a/web/src/pages/AuthPage.tsx b/web/src/pages/AuthPage.tsx index 5112abd..28eade2 100644 --- a/web/src/pages/AuthPage.tsx +++ b/web/src/pages/AuthPage.tsx @@ -1,9 +1,14 @@ import { AuthPanel } from "../components/AuthPanel"; -export function AuthPage() { +interface AuthPageProps { + initialResetToken?: string | null; + onResetTokenConsumed?: () => void; +} + +export function AuthPage({ initialResetToken = null, onResetTokenConsumed }: AuthPageProps) { return (
- +
); }