Merge pull request #1234 from firebase/@invertase/bb-17

Author: Ehesp

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 fui-form-action (click)="forgotPassword.emit()">
               {{ forgotPasswordLabel() }}

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

@@ -57,7 +57,13 @@ import {
         <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() }}" />
+        <fui-form-input
+          name="password"
+          tanstack-app-field
+          [tanstackField]="form"
+          label="{{ passwordLabel() }}"
+          type="password"
+        />
       </fieldset>
       <fui-policies />
       <fieldset>

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

@@ -33,6 +33,7 @@ export class FormMetadataComponent {
       <span>{{ label() }}</span>
       <input
         [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
+        [type]="type()"
         [id]="field.api.name"
         [name]="field.api.name"
         [value]="field.api.state.value"
@@ -47,6 +48,7 @@ export class FormMetadataComponent {
 export class FormInputComponent {
   field = injectField<string>();
   label = input.required<string>();
+  type = input<string>("text");
 }
 
 @Component({

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" });

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

@@ -274,7 +274,7 @@ describe("<SignUpAuthForm />", () => {
 
     // Make sure we have an email and password input with translated labels
     expect(screen.getByRole("textbox", { name: /emailAddress/ })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: /password/ })).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/)).toBeInTheDocument();
 
     // Ensure the "Create Account" button is present and is a submit button
     const createAccountButton = screen.getByRole("button", { name: "createAccount" });
@@ -365,7 +365,7 @@ describe("<SignUpAuthForm />", () => {
 
     // Make sure we have all three inputs with translated labels
     expect(screen.getByRole("textbox", { name: /emailAddress/ })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: /password/ })).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/)).toBeInTheDocument();
     expect(screen.getByRole("textbox", { name: /displayName/ })).toBeInTheDocument();
 
     // Ensure the "Create Account" button is present and is a submit button
@@ -397,7 +397,7 @@ describe("<SignUpAuthForm />", () => {
     expect(form.length).toBe(1);
 
     expect(screen.getByRole("textbox", { name: /email/ })).toBeInTheDocument();
-    expect(screen.getByRole("textbox", { name: /password/ })).toBeInTheDocument();
+    expect(screen.getByLabelText(/password/)).toBeInTheDocument();
     expect(screen.queryByRole("textbox", { name: /displayName/ })).not.toBeInTheDocument();
   });
 

packages/react/src/components/form.tsx

@@ -19,15 +19,21 @@ function FieldMetadata({ className, ...props }: ComponentProps<"div"> & { field:
   );
 }
 
-function Input(props: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode }>) {
+function Input({
+  children,
+  before,
+  label,
+  ...props
+}: PropsWithChildren<ComponentProps<"input"> & { label: string; before?: ReactNode }>) {
   const field = useFieldContext<string>();
 
   return (
     <label htmlFor={field.name}>
-      <span>{props.label}</span>
+      <span>{label}</span>
       <div data-input-group>
-        {props.before}
+        {before}
         <input
+          {...props}
           aria-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
           id={field.name}
           name={field.name}
@@ -40,7 +46,7 @@ function Input(props: PropsWithChildren<ComponentProps<"input"> & { label: strin
           }}
         />
       </div>
-      {props.children ? <>{props.children}</> : null}
+      {children ? <>{children}</> : null}
       <FieldMetadata field={field} />
     </label>
   );