Users portlet: Profile tab (Create and Edit dialog)

[hmoreras]

Goal

Deliver the Profile tab of the Create / Edit User dialog, plus the dialog shell that hosts all four tabs.

Scope

Dialog shell

• 4 tabs: Profile, Roles, Permissions, API Tokens
• Header, footer, Save Changes / Create User CTA
• Sibling tasks deliver Roles, Permissions, and API Tokens tab content

Profile tab

• Header: avatar + name + Active status chip; NU (initials) placeholder in create mode
• Metadata card: User ID, Last login (timestamp + IP), Failed logins — hidden in create mode
• Account section:
  • First name*, Last name*
  • Email* (format validated)
  • Password / Confirm password with Generate secure password action
  • "Leave blank to keep current password" helper text in edit mode
  • Active toggle
• Additional information section: Prefix, Suffix, Title, Company, Website
• Access toggles: CMS Administrator, Back-end User, Front-end User, Can Login to Admin UI, Show Getting Started
• Delete User destructive action — edit mode only, requires typed confirmation

Acceptance criteria

• Required fields validated; email format enforced
• Password + Confirm password match required when set
• "Leave blank to keep current password" behavior works in edit mode
• Generate secure password populates both fields
• Delete User visible only in edit mode; requires confirmation
• Access toggles map to endpoints identified by the Spike
• All fields persist and reload correctly after save
• Unit + integration tests via Spectator

QA

• Manual: create, edit, delete flow end-to-end
• Manual: verify Active toggle prevents login for the affected user
• Manual: verify each Access toggle produces expected effective access

Design references

Interactive prototype: https://claude.ai/design/p/324a0e09-34dc-4925-a7fa-24f39fdafa54?via=share&file=Users.html

[github-actions]

PRs linked to this issue

• feat(users): Profile tab, dialog shell & list CRUD wiring (#36717) by @AP2300