web: open reset form immediately for reset links

web/src/app/App.tsx

@@ -15,6 +15,15 @@ const PENDING_NOTIFICATION_NAV_KEY = "bm_pending_notification_nav";
 const PENDING_RESET_PASSWORD_TOKEN_KEY = "bm_pending_reset_password_token";
 
 export function App() {
+  const [pendingResetToken, setPendingResetToken] = useState<string | null>(() => {
+    const tokenFromLink = extractPasswordResetTokenFromLocation();
+    if (tokenFromLink) {
+      window.localStorage.setItem(PENDING_RESET_PASSWORD_TOKEN_KEY, tokenFromLink);
+      window.history.replaceState(null, "", "/");
+      return tokenFromLink;
+    }
+    return window.localStorage.getItem(PENDING_RESET_PASSWORD_TOKEN_KEY);
+  });
   const accessToken = useAuthStore((s) => s.accessToken);
   const me = useAuthStore((s) => s.me);
   const loadMe = useAuthStore((s) => s.loadMe);
@@ -71,16 +80,10 @@ export function App() {
   }, []);
 
   useEffect(() => {
-    const resetToken = extractPasswordResetTokenFromLocation();
-    if (!resetToken) {
-      return;
-    }
-    window.localStorage.setItem(PENDING_RESET_PASSWORD_TOKEN_KEY, resetToken);
-    if (accessToken) {
+    if (pendingResetToken && accessToken) {
       logout();
     }
-    window.history.replaceState(null, "", "/");
-  }, [accessToken, logout]);
+  }, [pendingResetToken, accessToken, logout]);
 
   useEffect(() => {
     const nav = extractNotificationNavigationFromLocation();
@@ -154,15 +157,20 @@ export function App() {
     })();
   }, [accessToken, joiningInvite, loadChats, me, setActiveChatId, setFocusedMessage, showToast]);
 
-  if (!accessToken || !me) {
-    const pendingResetToken = window.localStorage.getItem(PENDING_RESET_PASSWORD_TOKEN_KEY);
+  if (pendingResetToken) {
     return (
       <AuthPage
         initialResetToken={pendingResetToken}
-        onResetTokenConsumed={() => window.localStorage.removeItem(PENDING_RESET_PASSWORD_TOKEN_KEY)}
+        onResetTokenConsumed={() => {
+          window.localStorage.removeItem(PENDING_RESET_PASSWORD_TOKEN_KEY);
+          setPendingResetToken(null);
+        }}
       />
     );
   }
+  if (!accessToken || !me) {
+    return <AuthPage />;
+  }
   return (
     <>
       <ChatsPage />

web/src/components/AuthPanel.tsx

@@ -14,7 +14,7 @@ interface AuthPanelProps {
 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");
+  const [step, setStep] = useState<Step>(initialResetToken?.trim() ? "reset" : "email");
   const [email, setEmail] = useState("");
   const [name, setName] = useState("");
   const [username, setUsername] = useState("");
@@ -161,13 +161,21 @@ export function AuthPanel({ initialResetToken = null, onResetTokenConsumed }: Au
   return (
     <div className="mx-auto mt-16 w-full max-w-md rounded-2xl border border-slate-700/70 bg-panel p-6 shadow-xl">
       <p className="mb-1 text-xl font-semibold">
-        {step === "email" ? "Sign in to BenyaMessenger" : step === "register" ? "Create account" : "Enter credentials"}
+        {step === "email"
+          ? "Sign in to BenyaMessenger"
+          : step === "register"
+            ? "Create account"
+            : step === "reset"
+              ? "Reset password"
+              : "Enter credentials"}
       </p>
       <p className="mb-4 text-sm text-slate-400">
         {step === "email"
           ? "Enter your email to continue"
           : step === "register"
             ? "This email is not registered yet. Complete registration."
+            : step === "reset"
+              ? "Enter a new password for your account."
             : step === "password"
               ? "Enter your password"
               : "Two-factor authentication is enabled"}