Merge branch '@invertase/v7-development' of https://github.com/firebase/firebaseui-web into @invertase/bb-7

Author: Ehesp

examples/shadcn/src/components/sign-in-auth-form.tsx

@@ -80,7 +80,7 @@ export function SignInAuthForm(props: SignInAuthFormProps) {
         {props.onRegisterClick ? (
           <>
             <Button type="button" variant="secondary" onClick={props.onRegisterClick}>
-              {getTranslation(ui, "prompts", "noAccount")} {getTranslation(ui, "labels", "register")}
+              {getTranslation(ui, "prompts", "noAccount")} {getTranslation(ui, "labels", "signUp")}
             </Button>
           </>
         ) : null}

examples/shadcn/src/components/sign-up-auth-screen.tsx

@@ -12,7 +12,7 @@ export type { SignUpAuthScreenProps };
 export function SignUpAuthScreen({ children, ...props }: SignUpAuthScreenProps) {
   const ui = useUI();
 
-  const titleText = getTranslation(ui, "labels", "register");
+  const titleText = getTranslation(ui, "labels", "signUp");
   const subtitleText = getTranslation(ui, "prompts", "enterDetailsToCreate");
 
   return (

packages/angular/src/lib/auth/forms/sign-in-auth-form.spec.ts

@@ -78,7 +78,7 @@ describe("<fui-sign-in-auth-form />", () => {
     expect(screen.getByRole("button", { name: "Sign In" })).toBeInTheDocument();
     expect(screen.getByText("By continuing, you agree to our")).toBeInTheDocument();
     expect(screen.getByRole("button", { name: "Forgot Password" })).toBeInTheDocument();
-    expect(screen.getByRole("button", { name: "Don't have an account? Register" })).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Don't have an account? Sign Up" })).toBeInTheDocument();
   });
 
   it("should have correct translation labels", async () => {
@@ -102,7 +102,7 @@ describe("<fui-sign-in-auth-form />", () => {
     expect(component.forgotPasswordLabel()).toBe("Forgot Password");
     expect(component.signInLabel()).toBe("Sign In");
     expect(component.noAccountLabel()).toBe("Don't have an account?");
-    expect(component.registerLabel()).toBe("Register");
+    expect(component.signUpLabel()).toBe("Sign Up");
     expect(component.unknownErrorLabel()).toBe("An unknown error occurred");
   });
 
@@ -164,7 +164,7 @@ describe("<fui-sign-in-auth-form />", () => {
     const component = fixture.componentInstance;
     const signUpSpy = jest.spyOn(component.signUp, "emit");
 
-    const signUpButton = screen.getByRole("button", { name: "Don't have an account? Register" });
+    const signUpButton = screen.getByRole("button", { name: "Don't have an account? Sign Up" });
     fireEvent.click(signUpButton);
     expect(signUpSpy).toHaveBeenCalled();
   });

packages/angular/src/lib/auth/forms/sign-in-auth-form.ts

@@ -53,7 +53,13 @@ import {
         ></fui-form-input>
       </fieldset>
       <fieldset>
-        <fui-form-input name="password" tanstack-app-field [tanstackField]="form" label="{{ passwordLabel() }}">
+        <fui-form-input
+          name="password"
+          tanstack-app-field
+          [tanstackField]="form"
+          label="{{ passwordLabel() }}"
+          type="password"
+        >
           @if (forgotPassword) {
             <button ngProjectAs="input-action" fui-form-action (click)="forgotPassword.emit()">
               {{ forgotPasswordLabel() }}
@@ -72,7 +78,7 @@ import {
       </fieldset>
 
       @if (signUp) {
-        <button fui-form-action (click)="signUp.emit()">{{ noAccountLabel() }} {{ registerLabel() }}</button>
+        <button fui-form-action (click)="signUp.emit()">{{ noAccountLabel() }} {{ signUpLabel() }}</button>
       }
     </form>
   `,
@@ -86,7 +92,7 @@ export class SignInAuthFormComponent {
   forgotPasswordLabel = injectTranslation("labels", "forgotPassword");
   signInLabel = injectTranslation("labels", "signIn");
   noAccountLabel = injectTranslation("prompts", "noAccount");
-  registerLabel = injectTranslation("labels", "register");
+  signUpLabel = injectTranslation("labels", "signUp");
   unknownErrorLabel = injectTranslation("errors", "unknownError");
 
   forgotPassword = output<void>();

packages/angular/src/lib/auth/forms/sign-up-auth-form.ts

@@ -43,35 +43,29 @@ import {
   ],
   template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
-      <fieldset>
-        <fui-form-input
-          name="email"
-          tanstack-app-field
-          [tanstackField]="form"
-          label="{{ emailLabel() }}"
-        ></fui-form-input>
-      </fieldset>
-      <fieldset>
-        <fui-form-input
-          name="password"
-          tanstack-app-field
-          [tanstackField]="form"
-          label="{{ passwordLabel() }}"
-        ></fui-form-input>
-      </fieldset>
       @if (requireDisplayNameField()) {
         <fieldset>
           <fui-form-input
             name="displayName"
             tanstack-app-field
             [tanstackField]="form"
             label="{{ displayNameLabel() }}"
-          ></fui-form-input>
+          />
         </fieldset>
       }
-
+      <fieldset>
+        <fui-form-input name="email" tanstack-app-field [tanstackField]="form" label="{{ emailLabel() }}" />
+      </fieldset>
+      <fieldset>
+        <fui-form-input
+          name="password"
+          tanstack-app-field
+          [tanstackField]="form"
+          label="{{ passwordLabel() }}"
+          type="password"
+        />
+      </fieldset>
       <fui-policies />
-
       <fieldset>
         <fui-form-submit [state]="state()">
           {{ createAccountLabel() }}

packages/angular/src/lib/auth/screens/sign-up-auth-screen.spec.ts

@@ -73,7 +73,7 @@ describe("<fui-sign-up-auth-screen>", () => {
     injectTranslation.mockImplementation((category: string, key: string) => {
       const mockTranslations: Record<string, Record<string, string>> = {
         labels: {
-          register: "Create Account",
+          signUp: "Create Account",
         },
         prompts: {
           enterDetailsToCreate: "Enter your details to create an account",
@@ -205,7 +205,7 @@ describe("<fui-sign-up-auth-screen>", () => {
       ],
     });
 
-    expect(injectTranslation).toHaveBeenCalledWith("labels", "register");
+    expect(injectTranslation).toHaveBeenCalledWith("labels", "signUp");
     expect(injectTranslation).toHaveBeenCalledWith("prompts", "enterDetailsToCreate");
   });
 

packages/angular/src/lib/auth/screens/sign-up-auth-screen.ts

@@ -69,7 +69,7 @@ export class SignUpAuthScreenComponent {
 
   mfaResolver = computed(() => this.ui().multiFactorResolver);
 
-  titleText = injectTranslation("labels", "register");
+  titleText = injectTranslation("labels", "signUp");
   subtitleText = injectTranslation("prompts", "enterDetailsToCreate");
 
   signUp = output<UserCredential>();

packages/angular/src/lib/components/form.ts

@@ -43,6 +43,7 @@ export class FormMetadataComponent {
           [value]="field.api.state.value"
           (blur)="field.api.handleBlur()"
           (input)="field.api.handleChange($any($event).target.value)"
+          [type]="type()"
         />
       </div>
       <ng-content></ng-content>
@@ -53,6 +54,7 @@ export class FormMetadataComponent {
 export class FormInputComponent {
   field = injectField<string>();
   label = input.required<string>();
+  type = input<string>("text");
 }
 
 @Component({
@@ -102,9 +104,12 @@ export class FormErrorMessageComponent {
 
   errorMessage = computed(() => {
     const error = this.state().errorMap?.onSubmit;
-    if (!error) return undefined;
 
-    // Handle string errors
-    return String(error);
+    // We only care about errors thrown from the form submission, rather than validation errors
+    if (error && typeof error === "string") {
+      return error;
+    }
+
+    return undefined;
   });
 }

packages/angular/src/lib/tests/test-helpers.ts

@@ -75,7 +75,6 @@ export const injectUI = jest.fn().mockReturnValue(() => ({
         sendSignInLink: "Send Sign In Link",
         resetPassword: "Reset Password",
         backToSignIn: "Back to Sign In",
-        register: "Register",
         termsOfService: "Terms of Service",
         privacyPolicy: "Privacy Policy",
       },
@@ -109,7 +108,6 @@ export const injectTranslation = jest.fn().mockImplementation((category: string,
       sendSignInLink: "Send Sign In Link",
       resetPassword: "Reset Password",
       backToSignIn: "Back to Sign In",
-      register: "Register",
       termsOfService: "Terms of Service",
       privacyPolicy: "Privacy Policy",
       phoneNumber: "Phone Number",

packages/react/src/auth/forms/sign-in-auth-form.test.tsx

@@ -193,7 +193,7 @@ describe("<SignInAuthForm />", () => {
 
     // Make sure we have an email and password input
     expect(screen.getByRole("textbox", { name: /email/i })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: /password/i })).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/i)).toBeInTheDocument();
 
     // Ensure the "Sign In" button is present and is a submit button
     const signInButton = screen.getByRole("button", { name: "signIn" });
@@ -229,23 +229,23 @@ describe("<SignInAuthForm />", () => {
     expect(onForgotPasswordClickMock).toHaveBeenCalled();
   });
 
-  it("should render the register button callback when onRegisterClick is provided", () => {
+  it("should render the register button callback when onSignUpClick is provided", () => {
     const mockUI = createMockUI({
       locale: registerLocale("test", {
         prompts: {
           noAccount: "foo",
         },
         labels: {
-          register: "bar",
+          signUp: "bar",
         },
       }),
     });
 
-    const onRegisterClickMock = vi.fn();
+    const onSignUpClick = vi.fn();
 
     render(
       <FirebaseUIProvider ui={mockUI}>
-        <SignInAuthForm onRegisterClick={onRegisterClickMock} />
+        <SignInAuthForm onSignUpClick={onSignUpClick} />
       </FirebaseUIProvider>
     );
 
@@ -259,7 +259,7 @@ describe("<SignInAuthForm />", () => {
     expect(registerButton).toHaveAttribute("type", "button");
 
     fireEvent.click(registerButton);
-    expect(onRegisterClickMock).toHaveBeenCalled();
+    expect(onSignUpClick).toHaveBeenCalled();
   });
 
   it("should trigger validation errors when the form is blurred", () => {