From c770b9ec22b89551f57aa5051fc7f15f96de5d8d Mon Sep 17 00:00:00 2001
From: Henry Wilkinson <henry@wilkinson.graphics>
Date: Thu, 20 Mar 2025 19:50:43 -0400
Subject: [PATCH] frontend: move name field to the top of the signup form
 (#2508)

Fixes #2507

Does what it says on the tin!
---
 .../src/features/accounts/sign-up-form.ts     | 34 +++++++++----------
 1 file changed, 17 insertions(+), 17 deletions(-)

diff --git a/frontend/src/features/accounts/sign-up-form.ts b/frontend/src/features/accounts/sign-up-form.ts
index 349e4a13..1f0e5410 100644
--- a/frontend/src/features/accounts/sign-up-form.ts
+++ b/frontend/src/features/accounts/sign-up-form.ts
@@ -85,6 +85,23 @@ export class SignUpForm extends LiteElement {
       <form @submit=${this.onSubmit} aria-describedby="formError">
         ${serverError}
 
+        <div class="mb-5">
+          <sl-input
+            id="name"
+            name="name"
+            label=${msg("Your name")}
+            autocomplete="nickname"
+            minlength="2"
+            class="hide-required-content"
+            required
+          >
+          </sl-input>
+          <p class="mt-2 text-xs text-neutral-500">
+            ${msg(
+              "Your full name, nickname, or another name that org collaborators can see.",
+            )}
+          </p>
+        </div>
         <div class="mb-5">
           ${this.email
             ? html`
@@ -136,23 +153,6 @@ export class SignUpForm extends LiteElement {
           </p>
           ${when(this.pwStrengthResults, this.renderPasswordStrength)}
         </div>
-        <div class="mb-5">
-          <sl-input
-            id="name"
-            name="name"
-            label=${msg("Your name")}
-            autocomplete="nickname"
-            minlength="2"
-            class="hide-required-content"
-            required
-          >
-          </sl-input>
-          <p class="mt-2 text-xs text-neutral-500">
-            ${msg(
-              "Your full name, nickname, or another name that org collaborators can see.",
-            )}
-          </p>
-        </div>
 
         <sl-button
           class="w-full"