Merge pull request #1239 from firebase/@invertase/bb-30

Author: Ehesp

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

@@ -43,35 +43,23 @@ 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() }}" />
+      </fieldset>
       <fui-policies />
-
       <fieldset>
         <fui-form-submit [state]="state()">
           {{ createAccountLabel() }}

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

@@ -95,6 +95,13 @@ export function SignUpAuthForm({ onBackToSignInClick, onSignUp }: SignUpAuthForm
       }}
     >
       <form.AppForm>
+        {requireDisplayName ? (
+          <fieldset>
+            <form.AppField name="displayName">
+              {(field) => <field.Input label={getTranslation(ui, "labels", "displayName")} />}
+            </form.AppField>
+          </fieldset>
+        ) : null}
         <fieldset>
           <form.AppField name="email">
             {(field) => <field.Input label={getTranslation(ui, "labels", "emailAddress")} type="email" />}
@@ -105,13 +112,6 @@ export function SignUpAuthForm({ onBackToSignInClick, onSignUp }: SignUpAuthForm
             {(field) => <field.Input label={getTranslation(ui, "labels", "password")} type="password" />}
           </form.AppField>
         </fieldset>
-        {requireDisplayName ? (
-          <fieldset>
-            <form.AppField name="displayName">
-              {(field) => <field.Input label={getTranslation(ui, "labels", "displayName")} />}
-            </form.AppField>
-          </fieldset>
-        ) : null}
         <Policies />
         <fieldset>
           <form.SubmitButton>{getTranslation(ui, "labels", "createAccount")}</form.SubmitButton>