From bc150a38a33e8d6d9dd717416d94793b26041f39 Mon Sep 17 00:00:00 2001
From: Elliot Hesp <elliot.hesp@gmail.com>
Date: Wed, 29 Oct 2025 14:33:02 +0000
Subject: [PATCH 1/2] fix(react,angular): Propagate input type field

---
 packages/angular/src/lib/auth/forms/sign-in-auth-form.ts | 8 +++++++-
 packages/angular/src/lib/auth/forms/sign-up-auth-form.ts | 1 +
 packages/angular/src/lib/components/form.ts              | 2 ++
 packages/react/src/components/form.tsx                   | 1 +
 4 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts b/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts
index 89bd9954d..a024c7661 100644
--- a/packages/angular/src/lib/auth/forms/sign-in-auth-form.ts
+++ b/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() }}
diff --git a/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts b/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts
index 7d3aa01eb..878134592 100644
--- a/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts
+++ b/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts
@@ -57,6 +57,7 @@ import {
           tanstack-app-field
           [tanstackField]="form"
           label="{{ passwordLabel() }}"
+          type="password"
         ></fui-form-input>
       </fieldset>
       @if (requireDisplayNameField()) {
diff --git a/packages/angular/src/lib/components/form.ts b/packages/angular/src/lib/components/form.ts
index 44b23b305..7bcfbe4f5 100644
--- a/packages/angular/src/lib/components/form.ts
+++ b/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({
diff --git a/packages/react/src/components/form.tsx b/packages/react/src/components/form.tsx
index 2cf57dd9a..04b48c9e3 100644
--- a/packages/react/src/components/form.tsx
+++ b/packages/react/src/components/form.tsx
@@ -28,6 +28,7 @@ function Input(props: PropsWithChildren<ComponentProps<"input"> & { label: strin
       <div data-input-group>
         {props.before}
         <input
+          {...props}
           aria-invalid={field.state.meta.isTouched && field.state.meta.errors.length > 0}
           id={field.name}
           name={field.name}

From 5795b4293d686834ac888990367bd9708a793c00 Mon Sep 17 00:00:00 2001
From: Elliot Hesp <elliot.hesp@gmail.com>
Date: Thu, 30 Oct 2025 13:19:44 +0000
Subject: [PATCH 2/2] test: Update tests to check the input by label

---
 .../angular/src/lib/auth/forms/sign-up-auth-form.ts |  8 +++++++-
 .../react/src/auth/forms/sign-in-auth-form.test.tsx |  2 +-
 .../react/src/auth/forms/sign-up-auth-form.test.tsx |  6 +++---
 packages/react/src/components/form.tsx              | 13 +++++++++----
 4 files changed, 20 insertions(+), 9 deletions(-)

diff --git a/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts b/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts
index 13ebaf80c..fba5b9ee0 100644
--- a/packages/angular/src/lib/auth/forms/sign-up-auth-form.ts
+++ b/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>
diff --git a/packages/react/src/auth/forms/sign-in-auth-form.test.tsx b/packages/react/src/auth/forms/sign-in-auth-form.test.tsx
index 1ccc731fc..0788a534c 100644
--- a/packages/react/src/auth/forms/sign-in-auth-form.test.tsx
+++ b/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" });
diff --git a/packages/react/src/auth/forms/sign-up-auth-form.test.tsx b/packages/react/src/auth/forms/sign-up-auth-form.test.tsx
index 7860a1061..8e115f386 100644
--- a/packages/react/src/auth/forms/sign-up-auth-form.test.tsx
+++ b/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();
   });
 
diff --git a/packages/react/src/components/form.tsx b/packages/react/src/components/form.tsx
index 04b48c9e3..00fc5e790 100644
--- a/packages/react/src/components/form.tsx
+++ b/packages/react/src/components/form.tsx
@@ -19,14 +19,19 @@ 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}
@@ -41,7 +46,7 @@ function Input(props: PropsWithChildren<ComponentProps<"input"> & { label: strin
           }}
         />
       </div>
-      {props.children ? <>{props.children}</> : null}
+      {children ? <>{children}</> : null}
       <FieldMetadata field={field} />
     </label>
   );