refactor(react): Align ForgotPasswordAuth{Screen,Form} with API spec

Author: Ehesp

packages/react/src/auth/forms/forgot-password-form.test.tsx renamed to packages/react/src/auth/forms/forgot-password-auth-form.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, vi, beforeEach, Mock } from "vitest";
 import { render, screen, fireEvent } from "@testing-library/react";
-import { ForgotPasswordForm } from "./forgot-password-form";
+import { ForgotPasswordForm } from "./forgot-password-auth-form";
 import { act } from "react";
 
 // Mock the dependencies

packages/react/src/auth/forms/forgot-password-form.tsx renamed to packages/react/src/auth/forms/forgot-password-auth-form.tsx

@@ -30,11 +30,12 @@ import { Button } from "../../components/button";
 import { FieldInfo } from "../../components/field-info";
 import { Policies } from "../../components/policies";
 
-interface ForgotPasswordFormProps {
+export type ForgotPasswordAuthFormProps = {
+  onPasswordSent?: () => void;
   onBackToSignInClick?: () => void;
 }
 
-export function ForgotPasswordForm({ onBackToSignInClick }: ForgotPasswordFormProps) {
+export function ForgotPasswordAuthForm({ onBackToSignInClick, onPasswordSent }: ForgotPasswordAuthFormProps) {
   const ui = useUI();
 
   const [formError, setFormError] = useState<string | null>(null);
@@ -55,6 +56,7 @@ export function ForgotPasswordForm({ onBackToSignInClick }: ForgotPasswordFormPr
       try {
         await sendPasswordResetEmail(ui, value.email);
         setEmailSent(true);
+        onPasswordSent?.();
       } catch (error) {
         if (error instanceof FirebaseUIError) {
           setFormError(error.message);

packages/react/src/auth/index.ts

@@ -24,7 +24,7 @@ export { SignUpAuthScreen, type SignUpAuthScreenProps } from "./screens/sign-up-
 
 export { OAuthScreen, type OAuthScreenProps } from "./screens/oauth-screen";
 
-export { PasswordResetScreen, type PasswordResetScreenProps } from "./screens/password-reset-screen";
+export { ForgotPasswordAuthScreen, type ForgotPasswordAuthScreenProps } from "./screens/forgot-password-auth-screen";
 
 /** Export forms */
 export { EmailPasswordForm, type EmailPasswordFormProps } from "./forms/email-password-form";

packages/react/src/auth/screens/password-reset-screen.test.tsx renamed to packages/react/src/auth/screens/forgot-password-auth-screen.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, vi, afterEach } from "vitest";
 import { render, fireEvent } from "@testing-library/react";
-import { PasswordResetScreen } from "~/auth/screens/password-reset-screen";
+import { PasswordResetScreen } from "~/auth/screens/forgot-password-auth-screen";
 import * as hooks from "~/hooks";
 
 // Mock the hooks

packages/react/src/auth/screens/password-reset-screen.tsx renamed to packages/react/src/auth/screens/forgot-password-auth-screen.tsx

@@ -16,14 +16,12 @@
 
 import { getTranslation } from "@firebase-ui/core";
 import { useUI } from "~/hooks";
-import { Card, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
-import { ForgotPasswordForm } from "../forms/forgot-password-form";
+import { Card, CardContent, CardHeader, CardSubtitle, CardTitle } from "../../components/card";
+import { ForgotPasswordAuthForm, type ForgotPasswordAuthFormProps } from "../forms/forgot-password-auth-form";
 
-export type PasswordResetScreenProps = {
-  onBackToSignInClick?: () => void;
-};
+export type ForgotPasswordAuthScreenProps = ForgotPasswordAuthFormProps;
 
-export function PasswordResetScreen({ onBackToSignInClick }: PasswordResetScreenProps) {
+export function ForgotPasswordAuthScreen(props: ForgotPasswordAuthScreenProps) {
   const ui = useUI();
 
   const titleText = getTranslation(ui, "labels", "resetPassword");
@@ -36,7 +34,9 @@ export function PasswordResetScreen({ onBackToSignInClick }: PasswordResetScreen
           <CardTitle>{titleText}</CardTitle>
           <CardSubtitle>{subtitleText}</CardSubtitle>
         </CardHeader>
-        <ForgotPasswordForm onBackToSignInClick={onBackToSignInClick} />
+        <CardContent>
+          <ForgotPasswordAuthForm {...props} />
+        </CardContent>
       </Card>
     </div>
   );

packages/react/tests/integration/auth/forgot-password.integration.test.tsx

@@ -16,7 +16,7 @@
 
 import { describe, it, expect, afterAll, beforeEach } from "vitest";
 import { fireEvent, waitFor, act, render } from "@testing-library/react";
-import { ForgotPasswordForm } from "../../../src/auth/forms/forgot-password-form";
+import { ForgotPasswordForm } from "../../../src/auth/forms/forgot-password-auth-form";
 import { initializeApp } from "firebase/app";
 import {
   getAuth,