@aurorajs.dev/catalyst-cli 1.0.2 → 2.0.0

package/dist/templates/frontend/packages/iam/src/app/domains/admin/apps/iam/account/features/account-form.component.ts

@@ -0,0 +1,896 @@
+/**
+ * Combined account + user form for iam/account.
+ * Overrides the codegen scaffold (cliter/iam/account.aurora.yaml — see excludedFiles).
+ * See `openspec/specs/iam-account-form/spec.md` for the behavioral contract.
+ *
+ * Migration: Reactive Forms → Angular Signal Forms (@angular/forms/signals).
+ * D1 path: native validateAsync + rxResource for email/username async uniqueness.
+ * D2: nested `user` kept always-present in the model; nulled only at submit.
+ * D3: edit-mode type lock via disabled().
+ * D4: custom validate() callbacks for passwordRule + matchOther.
+ * D5: au-multiple-search-select for tenantIds/roleIds/tags/scopes.
+ */
+import { Component, computed, effect, inject, input, linkedSignal, output } from '@angular/core';
+import { rxResource } from '@angular/core/rxjs-interop';
+import {
+  debounce,
+  disabled,
+  email,
+  form,
+  FormField,
+  maxLength,
+  minLength,
+  required,
+  submit,
+  validate,
+  validateAsync,
+} from '@angular/forms/signals';
+import {
+  AuroraPasswordInput,
+  HlmPasswordStrength,
+  HlmPasswordStrengthRules,
+  itemLabelOf,
+  MultipleSearchSelect,
+  ToOptionsPipe,
+  ValidationMessagePipe,
+} from '@aurora';
+import { provideTranslocoScope, TranslocoDirective } from '@jsverse/transloco';
+import { HlmFieldImports } from '@spartan-ng/helm/field';
+import { HlmInputImports } from '@spartan-ng/helm/input';
+import { HlmSelectImports } from '@spartan-ng/helm/select';
+import { HlmSwitchImports } from '@spartan-ng/helm/switch';
+import {
+  IamAccountTypeEnum,
+  OAuthClientGrantTypeEnum,
+  type CoreLang,
+  type IamAccount,
+  type IamRole,
+  type IamTag,
+  type IamTenant,
+  type OAuthClient,
+} from '@src/src/app/aurora.types';
+import { Apollo } from 'apollo-angular';
+import { map } from 'rxjs';
+import {
+  checkUniqueEmailAccountQuery,
+  checkUniqueUsernameAccountQuery,
+} from '../../account/data-access/account.graphql';
+
+// ─── Constants ──────────────────────────────────────────────────────────────
+
+const PASSWORD_RULES: HlmPasswordStrengthRules = {
+  minLength: 8,
+  digit: true,
+  specialCharacter: true,
+  lowerCase: true,
+  upperCase: true,
+};
+
+const SPECIAL_CHAR_REGEX = /[!@#$%^&*()+_\-=}{[\]|:;"/?.><,`~]/;
+
+// ─── Model shape ────────────────────────────────────────────────────────────
+
+interface AccountFormUser {
+  id: string | null;
+  name: string;
+  surname: string;
+  langId: string | null;
+  password: string;
+  repeatPassword: string;
+  isTwoFactorAuthenticationEnabled: boolean;
+}
+
+interface AccountFormModel {
+  id: string | null;
+  type: IamAccountTypeEnum | null;
+  code: string;
+  email: string;
+  username: string;
+  isActive: boolean;
+  clientId: string | null;
+  tags: string[];
+  scopes: string[];
+  tenantIds: string[];
+  hasAddChildTenants: boolean;
+  roleIds: string[];
+  user: AccountFormUser;
+}
+
+@Component({
+  selector: 'au-account-form',
+  imports: [
+    FormField,
+    TranslocoDirective,
+    ValidationMessagePipe,
+    AuroraPasswordInput,
+    HlmFieldImports,
+    HlmInputImports,
+    HlmSelectImports,
+    HlmSwitchImports,
+    HlmPasswordStrength,
+    MultipleSearchSelect,
+    ToOptionsPipe,
+  ],
+  providers: [provideTranslocoScope('iam')],
+  template: `
+    <ng-container *transloco="let t; scope: 'iam'">
+      <form
+        id="account-form"
+        class="grid grid-cols-1 gap-x-4 gap-y-5 md:grid-cols-12"
+        novalidate
+        (submit)="$event.preventDefault(); submit()"
+      >
+        <!-- #region ACCOUNT block ─────────────────────────────────────────── -->
+        <hlm-field class="col-span-12 md:col-span-8">
+          <label hlmFieldLabel>
+            {{ t('iam.account.Type') }}
+            <span
+              aria-hidden="true"
+              class="text-muted-foreground/70 align-top text-xs"
+            >
+              *
+            </span>
+          </label>
+          <hlm-select
+            [formField]="signalForm.type"
+            (valueChange)="onTypeChange($event)"
+          >
+            <hlm-select-trigger
+              class="w-full"
+              [attr.aria-required]="true"
+              buttonId="type"
+            >
+              <hlm-select-placeholder>{{ t('Select') }}</hlm-select-placeholder>
+              <ng-template
+                hlmSelectValueTemplate
+                let-value
+              >
+                {{ t('iam.account.Type.' + value) }}
+              </ng-template>
+            </hlm-select-trigger>
+            <hlm-select-content *hlmSelectPortal>
+              <hlm-select-item value="USER">{{ t('iam.account.Type.USER') }}</hlm-select-item>
+              <hlm-select-item value="SERVICE">{{ t('iam.account.Type.SERVICE') }}</hlm-select-item>
+            </hlm-select-content>
+          </hlm-select>
+          @for (error of signalForm.type().errors(); track error.kind) {
+            <hlm-field-error [validator]="error.kind">
+              {{ error | validationMessage }}
+            </hlm-field-error>
+          }
+        </hlm-field>
+
+        <hlm-field class="col-span-12 md:col-span-4">
+          <label hlmFieldLabel>
+            {{ t('iam.account.Code') }}
+          </label>
+          <input
+            id="code"
+            [formField]="signalForm.code"
+            hlmInput
+          />
+          @for (error of signalForm.code().errors(); track error.kind) {
+            <hlm-field-error [validator]="error.kind">
+              {{ error | validationMessage }}
+            </hlm-field-error>
+          }
+        </hlm-field>
+
+        @if (showClientSelector()) {
+          <hlm-field class="col-span-12 md:col-span-8">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Client') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <hlm-select
+              [itemToString]="clientItemToString"
+              [formField]="signalForm.clientId"
+              (valueChange)="onClientChange($event)"
+            >
+              <hlm-select-trigger
+                class="w-full"
+                buttonId="clientId"
+              >
+                <hlm-select-value placeholder="{{ t('Select') }}" />
+              </hlm-select-trigger>
+              <hlm-select-content *hlmSelectPortal>
+                @for (client of filteredClients(); track client.id) {
+                  <hlm-select-item [value]="client.id">{{ client.name }}</hlm-select-item>
+                }
+              </hlm-select-content>
+            </hlm-select>
+            @for (error of signalForm.clientId().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+        }
+
+        <hlm-field class="col-span-12">
+          <label hlmFieldLabel>
+            {{ t('iam.account.Email') }}
+          </label>
+          <input
+            id="email"
+            [formField]="signalForm.email"
+            hlmInput
+            autocomplete="username"
+            style="text-transform: lowercase"
+          />
+          @for (error of signalForm.email().errors(); track error.kind) {
+            <hlm-field-error [validator]="error.kind">
+              {{ error | validationMessage }}
+            </hlm-field-error>
+          }
+        </hlm-field>
+
+        @if (model().type === 'SERVICE') {
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Username') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <input
+              id="username-service"
+              [formField]="signalForm.username"
+              hlmInput
+              autocomplete="username"
+              style="text-transform: lowercase"
+            />
+            @for (error of signalForm.username().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+        }
+
+        @if (showTenantsInput()) {
+          <hlm-field class="col-span-12 md:col-span-8">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Tenants') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <au-multiple-search-select
+              [inputId]="'tenantIds'"
+              [formField]="signalForm.tenantIds"
+              [options]="tenantOptions() | toOptions: '{name}'"
+              [placeholder]="t('Select')"
+              [emptyMessage]="t('NoResults')"
+            />
+            @for (error of signalForm.tenantIds().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+
+          <hlm-field class="col-span-12 pt-9 md:col-span-4">
+            <label
+              class="flex items-center has-data-checked:bg-transparent dark:has-data-checked:bg-transparent"
+              hlmFieldLabel
+            >
+              <hlm-switch
+                class="mr-2"
+                [formField]="signalForm.hasAddChildTenants"
+                inputId="hasAddChildTenants"
+              />
+              {{ t('iam.account.AddChildTenants') }}
+            </label>
+          </hlm-field>
+        }
+
+        @if (tagOptions().length > 0) {
+          <hlm-field class="col-span-12 md:col-span-4">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Tags') }}
+            </label>
+            <au-multiple-search-select
+              [inputId]="'tags'"
+              [formField]="signalForm.tags"
+              [options]="tagOptionsList()"
+              [placeholder]="t('Select')"
+              [emptyMessage]="t('NoResults')"
+            />
+          </hlm-field>
+        }
+
+        @if (scopeOptions().length > 0) {
+          <hlm-field class="col-span-12 md:col-span-3">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Scopes') }}
+            </label>
+            <au-multiple-search-select
+              [inputId]="'scopes'"
+              [formField]="signalForm.scopes"
+              [options]="scopeOptionsList()"
+              [placeholder]="t('Select')"
+              [emptyMessage]="t('NoResults')"
+            />
+          </hlm-field>
+        }
+
+        @if (roleOptions().length > 0) {
+          <hlm-field class="col-span-12 md:col-span-4">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Roles') }}
+            </label>
+            <au-multiple-search-select
+              [inputId]="'roleIds'"
+              [formField]="signalForm.roleIds"
+              [options]="roleOptions() | toOptions: '{name}'"
+              [placeholder]="t('Select')"
+              [emptyMessage]="t('NoResults')"
+            />
+          </hlm-field>
+        }
+
+        <hlm-field class="col-span-12 pt-9 md:col-span-3">
+          <label
+            class="flex items-center has-data-checked:bg-transparent dark:has-data-checked:bg-transparent"
+            hlmFieldLabel
+          >
+            <hlm-switch
+              class="mr-2"
+              [formField]="signalForm.isActive"
+              inputId="isActive"
+            />
+            {{ t('iam.account.IsActive') }}
+          </label>
+        </hlm-field>
+        <!-- #endregion ACCOUNT block -->
+
+        <!-- #region USER block ────────────────────────────────────────────── -->
+        @if (model().type === 'USER') {
+          <div class="col-span-12 mt-4 flex items-center gap-2 border-b pb-2 text-sm font-semibold">
+            {{ t('iam.account.User') }}
+          </div>
+
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Name') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <input
+              id="user-name"
+              aria-required="true"
+              [formField]="signalForm.user.name"
+              hlmInput
+            />
+            @for (error of signalForm.user.name().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Surname') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <input
+              id="user-surname"
+              aria-required="true"
+              [formField]="signalForm.user.surname"
+              hlmInput
+            />
+            @for (error of signalForm.user.surname().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Username') }}
+              <span
+                aria-hidden="true"
+                class="text-muted-foreground/70 align-top text-xs"
+              >
+                *
+              </span>
+            </label>
+            <input
+              id="username-user"
+              aria-required="true"
+              [formField]="signalForm.username"
+              hlmInput
+              autocomplete="username"
+              style="text-transform: lowercase"
+            />
+            @for (error of signalForm.username().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+
+          @if (langOptions().length > 0) {
+            <hlm-field class="col-span-12 md:col-span-6">
+              <label hlmFieldLabel>
+                {{ t('iam.account.Language') }}
+              </label>
+              <hlm-select
+                [itemToString]="langItemToString"
+                [formField]="signalForm.user.langId"
+              >
+                <hlm-select-trigger
+                  class="w-full"
+                  buttonId="user-langId"
+                >
+                  <hlm-select-value placeholder="{{ t('Select') }}" />
+                </hlm-select-trigger>
+                <hlm-select-content *hlmSelectPortal>
+                  @for (lang of langOptions(); track lang.id) {
+                    <hlm-select-item [value]="lang.id">{{ lang.name }}</hlm-select-item>
+                  }
+                </hlm-select-content>
+              </hlm-select>
+            </hlm-field>
+          }
+
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.Password') }}
+              @if (mode() === 'new') {
+                <span
+                  aria-hidden="true"
+                  class="text-muted-foreground/70 align-top text-xs"
+                >
+                  *
+                </span>
+              }
+            </label>
+            <aurora-password-input
+              [inputId]="'user-password'"
+              [formField]="signalForm.user.password"
+              [showPasswordLabel]="t('ShowPassword')"
+              [hidePasswordLabel]="t('HidePassword')"
+              [generatePasswordLabel]="t('GeneratePassword')"
+              (generated)="onGeneratePassword($event)"
+            />
+            @for (error of signalForm.user.password().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+
+          <div class="col-span-12 md:col-span-6">
+            <au-hlm-password-strength
+              [password]="model().user.password"
+              [rules]="passwordRules"
+            />
+          </div>
+
+          <hlm-field class="col-span-12 md:col-span-6">
+            <label hlmFieldLabel>
+              {{ t('iam.account.RepeatPassword') }}
+            </label>
+            <input
+              id="user-repeatPassword"
+              type="password"
+              [formField]="signalForm.user.repeatPassword"
+              hlmInput
+              autocomplete="new-password"
+            />
+            @for (error of signalForm.user.repeatPassword().errors(); track error.kind) {
+              <hlm-field-error [validator]="error.kind">
+                {{ error | validationMessage }}
+              </hlm-field-error>
+            }
+          </hlm-field>
+        }
+        <!-- #endregion USER block -->
+      </form>
+    </ng-container>
+  `,
+})
+export class AccountFormComponent {
+  // injections
+  private readonly apollo = inject(Apollo);
+
+  // inputs
+  readonly initial = input<IamAccount | null>(null);
+  // `input` with a default (NOT `input.required`): the schema's `disabled(type)`
+  // reads mode() during eager form construction, before inputs bind — a required
+  // input would throw NG0950 there. Defaulting to 'new' keeps that early read safe;
+  // the real value ('new'|'edit') is always provided by the host before render.
+  readonly mode = input<'new' | 'edit'>('new');
+  readonly tenantOptions = input<IamTenant[]>([]);
+  readonly roleOptions = input<IamRole[]>([]);
+  readonly tagOptions = input<IamTag[]>([]);
+  readonly clientOptions = input<OAuthClient[]>([]);
+  readonly langOptions = input<CoreLang[]>([]);
+
+  // outputs
+  readonly save = output<IamAccount>();
+  readonly cancel = output<void>();
+
+  // constants
+  protected readonly passwordRules = PASSWORD_RULES;
+
+  // ─── Model (D2: user always present, nulled only at submit) ─────────────
+
+  protected readonly model = linkedSignal<AccountFormModel>(() => {
+    const init = this.initial();
+    const userInit = (init as IamAccount & { user?: Record<string, unknown> | null })?.user ?? null;
+
+    return {
+      id: init?.id ?? null,
+      type: (init?.type as IamAccountTypeEnum | null) ?? null,
+      code: init?.code ?? '',
+      email: init?.email ?? '',
+      username: init?.username ?? '',
+      isActive: init?.isActive ?? true,
+      clientId: init?.clientId ?? null,
+      tags: (init?.tags ?? []).filter((v): v is string => typeof v === 'string'),
+      scopes: (init?.scopes ?? []).filter((v): v is string => typeof v === 'string'),
+      tenantIds: (init?.tenants ?? []).flatMap((t) => (t?.id ? [t.id] : [])),
+      hasAddChildTenants: init?.hasAddChildTenants ?? false,
+      roleIds: (init?.roles ?? []).flatMap((r) => (r?.id ? [r.id] : [])),
+      user: {
+        id: (userInit?.['id'] as string | null) ?? null,
+        name: (userInit?.['name'] as string) ?? '',
+        surname: (userInit?.['surname'] as string) ?? '',
+        langId: (userInit?.['langId'] as string | null) ?? null,
+        password: '',
+        repeatPassword: '',
+        isTwoFactorAuthenticationEnabled:
+          (userInit?.['isTwoFactorAuthenticationEnabled'] as boolean) ?? false,
+      },
+    };
+  });
+
+  // ─── Avoid-values for edit mode (async uniqueness) ───────────────────────
+
+  private readonly avoidEmail = computed<string[]>(() => {
+    const init = this.initial();
+    if (this.mode() === 'edit' && init?.email) return [init.email.toLowerCase()];
+    return [];
+  });
+
+  private readonly avoidUsername = computed<string[]>(() => {
+    const init = this.initial();
+    if (this.mode() === 'edit' && init?.username) return [init.username.toLowerCase()];
+    return [];
+  });
+
+  // ─── Schema (D3, D4, D1 native validateAsync) ───────────────────────────
+
+  readonly signalForm = form(this.model, (path) => {
+    // type: required + D3 edit-mode lock via SF `disabled()`, NOT `readonly()`.
+    // `hlm-select` is a non-native control: Signal Forms reaches it through
+    // `host.setInputOnDirectives(...)`, which only lands a flag on the host
+    // element if some directive there actually declares an input with that
+    // exact name. `HlmSelect` forwards `disabled` from `BrnSelect` but never
+    // declares `readonly` — so `readonly()` is silently dropped and the native
+    // `<button>` stays enabled. `disabled()` is structural logic SF evaluates
+    // EAGERLY at form construction, before inputs bind — which is why `mode` is
+    // a defaulted `input` ('new'), NOT `input.required`: an early read of a
+    // required input throws NG0950 and blanks the form. Neither flag strips the
+    // value from the model, so it stays present and is submitted regardless.
+    required(path.type);
+    disabled(path.type, { when: () => this.mode() === 'edit' });
+
+    // code
+    maxLength(path.code, 64);
+
+    // email: sync format validation + blur-debounced async uniqueness (D1 native)
+    maxLength(path.email, 128);
+    email(path.email);
+    debounce(path.email, 'blur');
+    validateAsync(path.email, {
+      params: (ctx) => ({
+        email: (ctx.value() ?? '').toLowerCase(),
+        avoidEmails: this.avoidEmail(),
+      }),
+      factory: (paramsSignal) =>
+        rxResource({
+          params: paramsSignal,
+          stream: ({ params: p }) => {
+            if (!p || !p.email) return undefined as never;
+            return this.apollo
+              .query<{ iamCheckUniqueEmailAccount: boolean }>({
+                query: checkUniqueEmailAccountQuery,
+                variables: { email: p.email, avoidEmails: p.avoidEmails },
+                fetchPolicy: 'no-cache',
+              })
+              .pipe(map((result) => result.data?.iamCheckUniqueEmailAccount ?? true));
+          },
+        }),
+      onSuccess: (isAvailable) => (isAvailable ? [] : [{ kind: 'uniqueEmail' }]),
+      onError: () => [],
+    });
+
+    // username: required + blur-debounced async uniqueness
+    required(path.username);
+    maxLength(path.username, 128);
+    debounce(path.username, 'blur');
+    validateAsync(path.username, {
+      params: (ctx) => ({
+        username: (ctx.value() ?? '').toLowerCase(),
+        avoidUsernames: this.avoidUsername(),
+      }),
+      factory: (paramsSignal) =>
+        rxResource({
+          params: paramsSignal,
+          stream: ({ params: p }) => {
+            if (!p || !p.username) return undefined as never;
+            return this.apollo
+              .query<{ iamCheckUniqueUsernameAccount: boolean }>({
+                query: checkUniqueUsernameAccountQuery,
+                variables: { username: p.username, avoidUsernames: p.avoidUsernames },
+                fetchPolicy: 'no-cache',
+              })
+              .pipe(map((result) => result.data?.iamCheckUniqueUsernameAccount ?? true));
+          },
+        }),
+      onSuccess: (isAvailable) => (isAvailable ? [] : [{ kind: 'uniqueUsername' }]),
+      onError: () => [],
+    });
+
+    // clientId: required for creation (any new account, including the zero-matching-client
+    // case where the selector is hidden), not required in edit (it is a hidden field there).
+    required(path.clientId, { when: () => this.mode() === 'new' });
+
+    // tenantIds: at least one required when multiple options are shown.
+    // Signal Forms `required` uses isEmpty() which only flags null/undefined/''/false/NaN;
+    // an empty array [] is truthy so `required` does not fire. Use `validate()` instead.
+    validate(path.tenantIds, () => {
+      if (!this.showTenantsInput()) return [];
+      const ids = this.model().tenantIds;
+      if (!ids || ids.length === 0) return [{ kind: 'required' }];
+      return [];
+    });
+
+    // user.name + user.surname: required only for USER type (D4)
+    required(path.user.name, { when: () => this.model().type === IamAccountTypeEnum.USER });
+    maxLength(path.user.name, 128);
+    required(path.user.surname, { when: () => this.model().type === IamAccountTypeEnum.USER });
+    maxLength(path.user.surname, 255);
+
+    // user.password: required + rules only for new USER account (D4)
+    required(path.user.password, {
+      when: () => this.model().type === IamAccountTypeEnum.USER && this.mode() === 'new',
+    });
+    minLength(path.user.password, 8, {
+      when: () => this.model().type === IamAccountTypeEnum.USER,
+    });
+    maxLength(path.user.password, 30);
+    validate(path.user.password, () => {
+      if (this.model().type !== IamAccountTypeEnum.USER) return [];
+      const value = this.model().user.password;
+      if (!value) return [];
+      const failed: string[] = [];
+      if (!/[0-9]/.test(value)) failed.push('digit');
+      if (!SPECIAL_CHAR_REGEX.test(value)) failed.push('specialCharacter');
+      if (!/[a-z]/.test(value)) failed.push('lowerCase');
+      if (!/[A-Z]/.test(value)) failed.push('upperCase');
+      if (failed.length > 0) return [{ kind: 'passwordRule', failed }];
+      return [];
+    });
+
+    // user.repeatPassword: required + match check (D4)
+    required(path.user.repeatPassword, {
+      when: () => this.model().type === IamAccountTypeEnum.USER && this.mode() === 'new',
+    });
+    maxLength(path.user.repeatPassword, 30);
+    validate(path.user.repeatPassword, () => {
+      if (this.model().type !== IamAccountTypeEnum.USER) return [];
+      const pw = this.model().user.password;
+      const repeat = this.model().user.repeatPassword;
+      if (repeat === '' && pw === '') return [];
+      if (pw !== repeat) return [{ kind: 'matchOther' }];
+      return [];
+    });
+  });
+
+  // ─── Derived state ───────────────────────────────────────────────────────
+
+  // Memoize `type` so derived state (and the auto-select effect) react ONLY to
+  // type changes — not to every model write. Otherwise `filteredClients` tracks
+  // the whole `model` signal and returns a NEW array on each recompute, so the
+  // auto-select effect writing `model.clientId` → model emits → filteredClients
+  // re-emits (new ref) → effect re-fires → infinite loop that freezes the page
+  // when exactly one client matches the selected type.
+  private readonly accountType = computed(() => this.model().type);
+
+  protected readonly filteredClients = computed<OAuthClient[]>(() => {
+    const type = this.accountType();
+    if (!type) return this.clientOptions();
+    const wantedGrantType =
+      type === IamAccountTypeEnum.USER
+        ? OAuthClientGrantTypeEnum.PASSWORD
+        : OAuthClientGrantTypeEnum.CLIENT_CREDENTIALS;
+    return this.clientOptions().filter((client) => client.grantType === wantedGrantType);
+  });
+
+  readonly showClientSelector = computed(() => {
+    if (this.mode() !== 'new') return false;
+    return this.filteredClients().length > 1;
+  });
+
+  readonly showTenantsInput = computed(() => this.tenantOptions().length > 1);
+
+  protected readonly clientItemToString = itemLabelOf(this.clientOptions);
+  protected readonly langItemToString = itemLabelOf(this.langOptions);
+
+  // scopeOptions derived from the selected client. linkedSignal (not signal+effect): the
+  // edit-mode initial value is computed declaratively from initial().client; user-driven
+  // writes (onClientChange / onTypeChange / single-client auto-select) override it between
+  // recomputations, and it re-seeds if `initial()` changes — same pattern as `model`.
+  protected readonly scopeOptions = linkedSignal<string[]>(() => {
+    const init = this.initial();
+    if (init && this.mode() === 'edit') {
+      const client = (init as IamAccount & { client?: OAuthClient | null }).client;
+      if (client) return this.extractScopeOptions(client);
+    }
+    return [];
+  });
+
+  protected readonly scopeOptionsList = computed(() =>
+    this.scopeOptions().map((s) => ({ value: s, label: s })),
+  );
+
+  // tags are stored as a string[] of NAMES (the model hydrates `tags` from name strings,
+  // and the submit payload must carry names). The `toOptions` pipe would set value=id (UUID),
+  // which breaks edit hydration and corrupts the payload — so map name → value explicitly.
+  protected readonly tagOptionsList = computed(() =>
+    this.tagOptions().map((tag) => ({ value: tag.name, label: tag.name })),
+  );
+
+  // ─── Auto-select effects ─────────────────────────────────────────────────
+
+  constructor() {
+    // Auto-select single tenant in new mode
+    effect(() => {
+      const tenants = this.tenantOptions();
+      if (tenants.length === 1 && this.mode() === 'new') {
+        this.model.update((m) => ({ ...m, tenantIds: [tenants[0].id] }));
+      }
+    });
+
+    // Auto-select single client in new mode. The model write is a no-op when
+    // clientId is already set (returns the same `m`, so the signal does not
+    // emit) — defense-in-depth against the auto-select feedback loop.
+    effect(() => {
+      const clients = this.filteredClients();
+      if (clients.length === 1 && this.mode() === 'new') {
+        const id = clients[0].id;
+        this.model.update((m) => (m.clientId === id ? m : { ...m, clientId: id }));
+        this.scopeOptions.set(this.extractScopeOptions(clients[0]));
+      }
+    });
+  }
+
+  // ─── Event handlers ──────────────────────────────────────────────────────
+
+  protected onTypeChange(value: IamAccountTypeEnum | null | undefined): void {
+    if (!value || this.mode() !== 'new') return;
+    // Idempotent writes: when clientId is already correct we return the SAME
+    // model object so the signal does not emit. Without this, the [formField]
+    // re-sync re-emits the select's (valueChange) → onTypeChange → model write
+    // → re-sync → ... an infinite loop that freezes the page on type selection.
+    const filtered = this.filteredClients();
+    if (filtered.length === 1) {
+      const id = filtered[0].id;
+      this.model.update((m) => (m.clientId === id ? m : { ...m, clientId: id }));
+      this.scopeOptions.set(this.extractScopeOptions(filtered[0]));
+    } else if (filtered.length === 0) {
+      this.model.update((m) => (m.clientId === null ? m : { ...m, clientId: null }));
+      if (this.scopeOptions().length) this.scopeOptions.set([]);
+    }
+  }
+
+  protected onClientChange(clientId: string | null | undefined): void {
+    const client = this.clientOptions().find((option) => option.id === clientId);
+    this.scopeOptions.set(client ? this.extractScopeOptions(client) : []);
+  }
+
+  protected onGeneratePassword(generated: string): void {
+    // The <aurora-password-input> component already wrote `generated` into
+    // signalForm.user.password (via formField().value.set). Mirror the same
+    // value into repeatPassword so the confirm field stays in sync.
+    this.model.update((m) => ({
+      ...m,
+      user: { ...m.user, repeatPassword: generated },
+    }));
+  }
+
+  // ─── Submit (D2, UUID generation, sanitization) ──────────────────────────
+
+  submit(): void {
+    // `ignoreValidators: 'none'` makes submit() gate on valid() (no errors AND no pending
+    // validators). The default ('pending') only checks invalid(), so an in-flight async
+    // uniqueness validator — which leaves the field `unknown`, not `invalid` — would let a
+    // duplicate slip through in the race window before the debounced query resolves.
+    submit(this.signalForm, {
+      ignoreValidators: 'none',
+      action: async () => {
+        // Build a mutable snapshot; cast to allow user → null for SERVICE accounts (D2).
+        const snapshot = this.model();
+        const raw: Omit<AccountFormModel, 'user'> & { user: AccountFormUser | null } = {
+          ...snapshot,
+          user: { ...snapshot.user },
+        };
+
+        // Generate UUIDs for new mode
+        if (this.mode() === 'new') {
+          if (!raw.id) raw.id = crypto.randomUUID();
+          if (raw.type === IamAccountTypeEnum.USER && raw.user) {
+            const userId = raw.user.id ?? crypto.randomUUID();
+            raw.user = { ...raw.user, id: userId, accountId: raw.id } as AccountFormUser & {
+              accountId: string;
+            };
+          }
+        }
+
+        // Sanitize: lowercase email/username
+        if (typeof raw.email === 'string') raw.email = raw.email.toLowerCase();
+        if (typeof raw.username === 'string') raw.username = raw.username.toLowerCase();
+
+        // Sanitize: null user for SERVICE (D2)
+        if (raw.type !== IamAccountTypeEnum.USER) {
+          raw.user = null;
+        } else if (raw.user) {
+          // Strip repeatPassword (never part of the API payload).
+          const { repeatPassword: _stripped, ...userWithoutRepeat } =
+            raw.user as AccountFormUser & {
+              accountId?: string;
+              repeatPassword?: string;
+            };
+          raw.user = userWithoutRepeat as AccountFormUser;
+
+          // Edit mode + empty password = "keep the current password". The key must be
+          // ABSENT from the payload: sending '' hits the backend password validator
+          // (min length 8) and 400s before the handler's own skip-empty guard runs.
+          // Omitting it leaves the stored password untouched (the field is optional on
+          // the update input and sanitizeRecord skips absent fields).
+          if (this.mode() === 'edit' && !raw.user.password) {
+            const { password: _omittedPassword, ...userWithoutPassword } = raw.user;
+            raw.user = userWithoutPassword as AccountFormUser;
+          }
+        }
+
+        this.save.emit(raw as unknown as IamAccount);
+      },
+    });
+  }
+
+  // ─── Private helpers ─────────────────────────────────────────────────────
+
+  private extractScopeOptions(client: OAuthClient): string[] {
+    const raw = (client as OAuthClient & { scopeOptions?: unknown }).scopeOptions;
+    if (Array.isArray(raw)) return raw.filter((item): item is string => typeof item === 'string');
+    return [];
+  }
+}