fix: Fix multiple bugs with new authentication flow

toju-app/src/app/domains/authentication/feature/register/register.component.html

@@ -8,7 +8,10 @@
       <h1 class="text-lg font-semibold text-foreground">{{ 'auth.register.title' | translate }}</h1>
     </div>
 
-    <div class="space-y-3">
+    <form
+      class="space-y-3"
+      (ngSubmit)="submit()"
+    >
       <div>
         <label
           for="register-username"
@@ -19,6 +22,9 @@
           [(ngModel)]="username"
           type="text"
           id="register-username"
+          name="username"
+          appAutoFocus
+          appSelectOnFocus
           class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
         />
       </div>
@@ -32,6 +38,8 @@
           [(ngModel)]="displayName"
           type="text"
           id="register-display-name"
+          name="displayName"
+          appSelectOnFocus
           class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
         />
       </div>
@@ -45,6 +53,7 @@
           [(ngModel)]="password"
           type="password"
           id="register-password"
+          name="password"
           class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
         />
       </div>
@@ -57,6 +66,7 @@
         <select
           [(ngModel)]="serverId"
           id="register-server"
+          name="serverId"
           class="w-full px-3 py-2 rounded border border-border bg-secondary text-foreground"
         >
           @for (s of servers(); track s.id) {
@@ -68,22 +78,21 @@
         <p class="text-xs text-destructive">{{ error() }}</p>
       }
       <button
-        (click)="submit()"
-        type="button"
+        type="submit"
         class="w-full px-3 py-2 rounded bg-primary text-primary-foreground hover:bg-primary/90"
       >
         {{ 'auth.register.submit' | translate }}
       </button>
-      <div class="text-xs text-muted-foreground text-center mt-2">
-        {{ 'auth.register.haveAccount' | translate }}
-        <button
-          type="button"
-          (click)="goLogin()"
-          class="text-primary hover:underline"
-        >
-          {{ 'auth.register.loginLink' | translate }}
-        </button>
-      </div>
+    </form>
+    <div class="text-xs text-muted-foreground text-center mt-2">
+      {{ 'auth.register.haveAccount' | translate }}
+      <button
+        type="button"
+        (click)="goLogin()"
+        class="text-primary hover:underline"
+      >
+        {{ 'auth.register.loginLink' | translate }}
+      </button>
     </div>
   </div>
 </div>