User profile

UserProfileFormComponent renders and edits the current user's profile; the Settings callable dialog hosts it in its Account panel. The form edits one property at a time — each row is read-only until its edit button is pressed, and saving sends a PATCH for that single property only, never the whole profile.

Minimal example

import { Component, inject, Injector } from "@angular/core";
import { Settings } from "@sinequa/atomic-angular";

@Component({
  selector: "sample-component",
  template: `<button type="button" (click)="openProfile()">Account</button>`,
})
export class SampleComponent {
  private readonly injector = inject(Injector);

  protected async openProfile() {
    await Settings.call({ panel: "account" }, { injector: this.injector });
  }
}

UserProfileFormComponent can also be embedded directly (<user-profile-form />, no inputs — it resolves the profile itself from PrincipalStore and UserProfileService) when a host wants it inline rather than in a dialog.

How it works

Which properties appear is configuration-driven: general.features.userProfile.data selects the standard profile keys, customData adds free-form ones. The form model is a linkedSignal — a successful save, a deletion or a profile reload re-seeds every field from server state, which is what discards a cancelled draft with no manual DOM restore.

Where the focus lands

A dialog announces itself, then lets Tab walk in: with nothing more, a keyboard user opening the account panel would press Tab through the close button and the panel navigation before reaching the profile they came to edit. So when the dialog opens on the account panel, the focus goes straight to its first control — the photo, else the password button, else the first field. It waits for the profile to load, and never takes the focus back from a user who has already moved on.

It happens once. As soon as the user picks a panel in the dialog's navigation, the account panel stops claiming the focus: after that it belongs to the navigation button they just pressed.

Options

UserProfileFormComponent takes no input and has no output — everything else is protected, internal wiring.

Pitfalls

What's next