fix(react,angular): Propagate input type field

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

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/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}