AI Implementation feature(845): First-Start Create Admin Modal 1.04 (#7)

frontend/src/app/features/setup/setup-create-admin.component.ts

@@ -17,6 +17,11 @@ import { AuthService } from '../../core/services/auth.service';
 import { BootstrapService } from '../../core/services/bootstrap.service';
 import { SetupCreateAdminService, CreateAdminFailure } from './setup-create-admin.service';
 import { passwordMatchValidator } from './setup-create-admin.validators';
+import {
+  usernameError as computeUsernameError,
+  passwordError as computePasswordError,
+  confirmError as computeConfirmError,
+} from './setup-create-admin.field-errors';
 
 @Component({
   selector: 'app-setup-create-admin',
@@ -67,24 +72,33 @@ export class SetupCreateAdminComponent {
     () => !this.submitting() && this.serverError() !== null && this.serverErrorCode() !== 'USERNAME_TAKEN',
   );
 
-  readonly usernameErrors = computed(() => {
+  usernameError(): string | null {
     const c = this.form.controls.username;
-    if (!c.touched || c.valid) return null;
-    if (c.errors?.['required']) return 'Username is required';
-    if (c.errors?.['minlength']) return 'Username must be at least 3 characters';
-    if (c.errors?.['maxlength']) return 'Username must be at most 32 characters';
-    if (c.errors?.['pattern']) return 'Username may only contain letters, digits, dot, dash and underscore';
-    return 'Invalid username';
-  });
+    return computeUsernameError({
+      value: c.value,
+      touched: c.touched,
+      errors: (c.errors as { required?: true; minlength?: true; maxlength?: true; pattern?: true } | null) ?? null,
+    });
+  }
 
-  readonly confirmErrors = computed(() => {
+  passwordError(): string | null {
+    const c = this.form.controls.password;
+    return computePasswordError({
+      value: c.value,
+      touched: c.touched,
+      errors: (c.errors as { required?: true } | null) ?? null,
+    });
+  }
+
+  confirmError(): string | null {
     const c = this.form.controls.passwordConfirm;
-    const groupMismatch = this.form.errors?.['passwordMismatch'];
-    if ((!c.touched || c.valid) && !groupMismatch) return null;
-    if (c.errors?.['required']) return 'Please confirm your password';
-    if (groupMismatch) return 'Passwords do not match';
-    return 'Invalid value';
-  });
+    return computeConfirmError({
+      value: c.value,
+      touched: c.touched,
+      errors: (c.errors as { required?: true } | null) ?? null,
+      groupMismatch: !!this.form.errors?.['passwordMismatch'],
+    });
+  }
 
   @HostListener('document:keydown.escape', ['$event'])
   swallowEscape(event: KeyboardEvent): void {