fix(react): Add back arrow for forgot password form

Author: Ehesp

examples/react/src/routes.ts

@@ -15,73 +15,79 @@ import MultiFactorAuthEnrollmentScreenPage from "./screens/mfa-enrollment-screen
 export const routes = [
   {
     name: "Sign In Screen",
-    description: "A simple sign in screen with email and password",
+    description: "A sign in screen with email and password.",
     path: "/screens/sign-in-auth-screen",
     component: SignInAuthScreenPage,
   },
   {
     name: "Sign In Screen (with handlers)",
-    description: "A simple sign in screen with email and password, with forgot password and register handlers",
+    description: "A sign in screen with email and password, with forgot password and register handlers.",
     path: "/screens/sign-in-auth-screen-w-handlers",
     component: SignInAuthScreenWithHandlersPage,
   },
   {
     name: "Sign In Screen (with OAuth)",
-    description: "A simple sign in screen with email and password, with oAuth buttons",
+    description: "A sign in screen with email and password, with oAuth buttons.",
     path: "/screens/sign-in-auth-screen-w-oauth",
     component: SignInAuthScreenWithOAuthPage,
   },
   {
     name: "Sign Up Screen",
-    description: "A simple sign up screen with email and password",
+    description: "A sign up screen with email and password.",
     path: "/screens/sign-up-auth-screen",
     component: SignUpAuthScreenPage,
   },
   {
     name: "Sign Up Screen (with handlers)",
-    description: "A simple sign up screen with email and password, sign in handlers",
+    description: "A sign up screen with email and password, sign in handlers.",
     path: "/screens/sign-up-auth-screen-w-handlers",
     component: SignUpAuthScreenWithHandlersPage,
   },
   {
     name: "Sign Up Screen (with OAuth)",
-    description: "A simple sign in screen with email and password, with oAuth buttons",
+    description: "A sign in screen with email and password, with oAuth buttons.",
     path: "/screens/sign-up-auth-screen-w-oauth",
     component: SignUpAuthScreenWithOAuthPage,
   },
   {
     name: "Email Link Auth Screen",
-    description: "A screen allowing a user to send an email link for sign in",
+    description: "A screen allowing a user to send an email link for sign in.",
     path: "/screens/email-link-auth-screen",
     component: EmailLinkAuthScreenPage,
   },
   {
     name: "Email Link Auth Screen (with OAuth)",
-    description: "A screen allowing a user to send an email link for sign in, with oAuth buttons",
+    description: "A screen allowing a user to send an email link for sign in, with oAuth buttons.",
     path: "/screens/email-link-auth-screen-w-oauth",
     component: EmailLinkAuthScreenWithOAuthPage,
   },
   {
     name: "Forgot Password Screen",
-    description: "A screen allowing a user to reset their password",
+    description: "A screen allowing a user to reset their password.",
     path: "/screens/forgot-password-auth-screen",
     component: ForgotPasswordAuthScreenPage,
   },
+  {
+    name: "Forgot Password Screen (with handlers)",
+    description: "A screen allowing a user to reset their password, with forgot password and register handlers.",
+    path: "/screens/forgot-password-auth-screen-w-handlers",
+    component: ForgotPasswordAuthScreenPage,
+  },
   {
     name: "OAuth Screen",
-    description: "A screen which allows a user to sign in with OAuth only",
+    description: "A screen which allows a user to sign in with OAuth only.",
     path: "/screens/oauth-screen",
     component: OAuthScreenPage,
   },
   {
     name: "Phone Auth Screen",
-    description: "A screen allowing a user to sign in with a phone number",
+    description: "A screen allowing a user to sign in with a phone number.",
     path: "/screens/phone-auth-screen",
     component: PhoneAuthScreenPage,
   },
   {
     name: "Phone Auth Screen (with OAuth)",
-    description: "A screen allowing a user to sign in with a phone number, with oAuth buttons",
+    description: "A screen allowing a user to sign in with a phone number, with oAuth buttons.",
     path: "/screens/phone-auth-screen-w-oauth",
     component: PhoneAuthScreenWithOAuthPage,
   },
@@ -90,7 +96,7 @@ export const routes = [
 export const hiddenRoutes = [
   {
     name: "MFA Enrollment Screen",
-    description: "A screen allowing a user to enroll in multi-factor authentication",
+    description: "A screen allowing a user to enroll in multi-factor authentication.",
     path: "/screens/mfa-enrollment-screen",
     component: MultiFactorAuthEnrollmentScreenPage,
   },

examples/react/src/screens/forgot-password-auth-screen-w-handlers.tsx

@@ -187,9 +187,9 @@ describe("<ForgotPasswordAuthForm />", () => {
       </FirebaseUIProvider>
     );
 
-    const backToSignInButton = screen.getByRole("button", { name: "backToSignIn" });
+    const backToSignInButton = screen.getByRole("button", { name: "← backToSignIn" });
     expect(backToSignInButton).toBeInTheDocument();
-    expect(backToSignInButton).toHaveTextContent("backToSignIn");
+    expect(backToSignInButton).toHaveTextContent("← backToSignIn");
 
     // Make sure it's a button so it doesn't submit the form
     expect(backToSignInButton).toHaveAttribute("type", "button");

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

@@ -102,7 +102,7 @@ export function ForgotPasswordAuthForm({ onBackToSignInClick, onPasswordSent }:
           <form.ErrorMessage />
         </fieldset>
         {onBackToSignInClick ? (
-          <form.Action onClick={onBackToSignInClick}>{getTranslation(ui, "labels", "backToSignIn")}</form.Action>
+          <form.Action onClick={onBackToSignInClick}>&larr; {getTranslation(ui, "labels", "backToSignIn")}</form.Action>
         ) : null}
       </form.AppForm>
     </form>