refactor(angular): Upgrade tanstack form

packages/angular/package.json

@@ -29,7 +29,7 @@
     "@firebase-ui/translations": "workspace:*"
   },
   "dependencies": {
-    "@tanstack/angular-form": "^1.1.0",
+    "@tanstack/angular-form": "^1.21.1",
     "@firebase-ui/styles": "workspace:*",
     "tslib": "^2.8.1",
     "clsx": "^2.1.1",

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

@@ -14,91 +14,68 @@
  * limitations under the License.
  */
 
-import { Component, EventEmitter, Output } from "@angular/core";
+import { Component, EventEmitter, Output, OnInit } from "@angular/core";
 import { CommonModule } from "@angular/common";
-import { injectForm, TanStackField } from "@tanstack/angular-form";
+import { injectForm, TanStackField, TanStackAppField } from "@tanstack/angular-form";
 import { injectSignInAuthFormSchema, injectTranslation, injectUI } from "../../../provider";
-import { ButtonComponent } from "../../../components/button/button.component";
 import { TermsAndPrivacyComponent } from "../../../components/terms-and-privacy/terms-and-privacy.component";
 import { FirebaseUIError, signInWithEmailAndPassword } from "@firebase-ui/core";
 
+import {
+  FormInputComponent,
+  FormSubmitComponent,
+  FormErrorMessageComponent,
+} from "../../../components/form/form.component";
+import { UserCredential } from "firebase/auth";
+
 @Component({
   selector: "fui-sign-in-auth-form",
   standalone: true,
-  imports: [CommonModule, TanStackField, ButtonComponent, TermsAndPrivacyComponent],
+  imports: [
+    CommonModule,
+    TanStackField,
+    TanStackAppField,
+    TermsAndPrivacyComponent,
+    FormInputComponent,
+    FormSubmitComponent,
+    FormErrorMessageComponent,
+  ],
   template: `
     <form (submit)="handleSubmit($event)" class="fui-form">
       <fieldset>
-        <ng-container [tanstackField]="form" name="email" #email="field">
-          <label [for]="email.api.name">
-            <span>{{ emailLabel | async }}</span>
-            <input
-              type="email"
-              [id]="email.api.name"
-              [name]="email.api.name"
-              [value]="email.api.state.value"
-              (blur)="email.api.handleBlur()"
-              (input)="email.api.handleChange($any($event).target.value)"
-              [attr.aria-invalid]="!!email.api.state.meta.errors.length"
-            />
-            <span role="alert" aria-live="polite" class="fui-form__error" *ngIf="!!email.api.state.meta.errors.length">
-              {{ email.api.state.meta.errors.join(", ") }}
-            </span>
-          </label>
-        </ng-container>
+        <fui-form-input
+          name="email"
+          tanstack-app-field
+          [tanstackField]="form"
+          label="Email Label TODO"
+        ></fui-form-input>
       </fieldset>
       <fieldset>
-        <ng-container [tanstackField]="form" name="password" #password="field">
-          <label [for]="password.api.name">
-            <span class="flex">
-              <span class="flex-grow">{{ passwordLabel() }}</span>
-              @if(forgotPassword) {
-                <button type="button" (click)="forgotPassword.emit()" class="fui-form__action">
-                  {{ forgotPasswordLabel() }}
-                </button>
-              }
-            </span>
-            <input
-              type="password"
-              [id]="password.api.name"
-              [name]="password.api.name"
-              [value]="password.api.state.value"
-              (blur)="password.api.handleBlur()"
-              (input)="password.api.handleChange($any($event).target.value)"
-              [attr.aria-invalid]="!!password.api.state.meta.errors.length"
-            />
-            <span
-              role="alert"
-              aria-live="polite"
-              class="fui-form__error"
-              *ngIf="!!password.api.state.meta.errors.length"
-            >
-              {{ password.api.state.meta.errors.join(", ") }}
-            </span>
-          </label>
-        </ng-container>
+        <fui-form-input name="password" tanstack-app-field [tanstackField]="form" label="Password Label TODO">
+          @if (forgotPassword) {
+            <button fui-form-action (click)="forgotPassword.emit()">
+              {{ forgotPasswordLabel() }}
+            </button>
+          }
+        </fui-form-input>
       </fieldset>
 
       <fui-terms-and-privacy></fui-terms-and-privacy>
 
       <fieldset>
-        <button fui-button type="submit">
+        <fui-form-submit>
           {{ signInLabel() }}
-        </button>
-        <div class="fui-form__error" *ngIf="formError">{{ formError }}</div>
+        </fui-form-submit>
+        <fui-form-error-message></fui-form-error-message>
       </fieldset>
 
-      @if(register) {
-        <div class="flex justify-center items-center">
-          <button type="button" (click)="register.emit()" class="fui-form__action">
-            {{ noAccountLabel() }} {{ registerLabel() }}
-          </button>
-        </div>
+      @if (register) {
+        <button fui-form-action (click)="register.emit()">{{ noAccountLabel() }} {{ registerLabel() }}</button>
       }
     </form>
   `,
 })
-export class SignInAuthFormComponent {
+export class SignInAuthFormComponent implements OnInit {
   private ui = injectUI();
   private formSchema = injectSignInAuthFormSchema();
 
@@ -112,6 +89,7 @@ export class SignInAuthFormComponent {
 
   @Output() forgotPassword = new EventEmitter<void>();
   @Output() register = new EventEmitter<void>();
+  @Output() signIn?: EventEmitter<UserCredential>;
 
   formError: string | null = null;
 
@@ -120,59 +98,32 @@ export class SignInAuthFormComponent {
       email: "",
       password: "",
     },
-    validators: {
-      onBlur: this.formSchema(),
-      onSubmit: this.formSchema(),
-    },
-  }) as any; // TODO(ehesp): Fix this - types go too deep
-
-  async handleSubmit(event: SubmitEvent) {
-    event.preventDefault();
-    event.stopPropagation();
-
-    const email = this.form.state.values.email;
-    const password = this.form.state.values.password;
+  });
 
-    if (!email || !password) {
-      return;
-    }
-
-    await this.validateAndSignIn(email, password);
+  handleSubmit(event: SubmitEvent) {
+    event.preventDefault()
+    event.stopPropagation()
+    this.form.handleSubmit()
   }
 
-  async validateAndSignIn(email: string, password: string) {
-    try {
-      const validationResult = this.formSchema().safeParse({
-        email,
-        password,
-      });
-
-      if (!validationResult.success) {
-        const validationErrors = validationResult.error.format();
-
-        if (validationErrors.email?._errors?.length) {
-          this.formError = validationErrors.email._errors[0];
-          return;
-        }
-
-        if (validationErrors.password?._errors?.length) {
-          this.formError = validationErrors.password._errors[0];
-          return;
-        }
-
-        this.formError = this.unknownErrorLabel();
-        return;
-      }
-
-      this.formError = null;
-      await signInWithEmailAndPassword(this.ui(), email, password);
-    } catch (error) {
-      if (error instanceof FirebaseUIError) {
-        this.formError = error.message;
-        return;
-      }
-
-      this.formError = this.unknownErrorLabel();
-    }
+  ngOnInit() {
+    this.form.update({
+      validators: {
+        onBlur: this.formSchema(),
+        onSubmit: this.formSchema(),
+        onSubmitAsync: async ({ value }) => {
+          try {
+            const credential = await signInWithEmailAndPassword(this.ui(), value.email, value.password);
+            this.signIn?.emit(credential);
+          } catch (error) {
+            if (error instanceof FirebaseUIError) {
+              return error.message;
+            }
+
+            return this.unknownErrorLabel();
+          }
+        },
+      },
+    });
   }
 }

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

@@ -0,0 +1,113 @@
+import { Component, HostBinding, input, Input } from '@angular/core'
+import { AnyFieldApi, injectField, injectForm } from '@tanstack/angular-form'
+import { cn } from '../../utils';
+import { ButtonComponent } from '../button/button.component';
+
+@Component({
+  selector: 'fui-form-metadata',
+  standalone: true,
+  template: `
+    @if(field.state.meta.isTouched && field.state.meta.errors.length > 0) {
+      <div>
+        <div role="alert" aria-live="polite" class="fui-form__error">
+          {{ field.state.meta.errors.join(", ") }}
+        </div>
+      </div>
+    }
+  `,
+})
+export class FormMetadataComponent {
+  @Input() field: AnyFieldApi;
+}
+
+@Component({
+  selector: 'fui-form-input',
+  standalone: true,
+  imports: [FormMetadataComponent],
+  template: `
+    <label [for]="field.api.name">
+      <span>{{ label() }}</span>
+      <input
+        [attr.aria-invalid]="field.api.state.meta.isTouched && field.api.state.meta.errors.length > 0"
+        [id]="field.api.name"
+        [name]="field.api.name"
+        [value]="field.api.state.value"
+        (blur)="field.api.handleBlur()"
+        (input)="field.api.handleChange($any($event).target.value)"
+      />
+      <ng-content></ng-content>
+      <fui-form-metadata [field]="field"></fui-form-metadata>
+    </label>
+  `,
+})
+export class FormInputComponent {
+  field = injectField<string>()
+
+  label = input.required<string>();
+}
+
+@Component({
+  selector: 'button[fui-form-action]',
+  standalone: true,
+  template: `
+    <ng-content></ng-content>
+  `,
+})
+export class FormActionComponent {
+  @Input()
+  @HostBinding("class")
+  className: string = "";
+
+  @HostBinding("attr.class")
+  get getButtonClasses(): string {
+    return cn("fui-form__action", this.className);
+  }
+
+  @HostBinding('attr.type')
+  readonly type = 'button';
+
+  field = injectField<string>()
+}
+
+@Component({
+  selector: 'fui-form-submit',
+  standalone: true,
+  imports: [ButtonComponent],
+  template: `
+    <button fui-button [class]="buttonClasses" [disabled]="isSubmitting">
+      <ng-content></ng-content>
+    </button>
+  `,
+})
+export class FormSubmitComponent {
+  @Input()
+  className: string = "";
+
+  @HostBinding('attr.type')
+  readonly type = 'submit';
+
+  form = injectForm()
+
+  get buttonClasses(): string {
+    return cn("fui-form__action", this.className);
+  }
+
+  get isSubmitting(): boolean {
+    return this.form.state.isSubmitting;
+  }
+}
+
+@Component({
+  selector: 'fui-form-error-message',
+  standalone: true,
+  template: `
+    @if (form.state.errorMap.onSubmit) {
+      <div class="fui-form__error">
+        {{ form.state.errorMap.onSubmit.toString() }}
+      </div>
+    }
+  `,
+})
+export class FormErrorMessageComponent {
+    form = injectForm()
+}