Dojo to Angular: Users Management Portlet

Overview

Deliver a modern Angular Users management portlet with a table listing all system users and a tabbed dialog for user detail, role assignment, permissions, and API token management.

The Angular build ships as an opt-in Beta portlet (users-beta / "Users (Beta)"). It is registered in portlet.xml and Language.properties only — not added to any default layout, SQL migration, or UpgradeTask. Admins opt in via "Add Portlet" in Tools. Promotion to the primary users portletId is out of scope for this Epic and handled separately.

Scope

List view

• Search by name or email; Filter by dropdown; New button
• Columns: User (avatar + name + userId), Email, Roles (comma-list, truncated with "and N more"), Access (chips Back-end / Front-end), Last login (default sort DESC)
• Inactive users show an Inactive chip inline with the name
• Row click opens the Edit User dialog
• Multi-select with bulk actions: Delete, Add to Bundle
• Paginated with page-size selector

Edit / Create User dialog (4 tabs)

Profile — Header (avatar, name, Active status chip); metadata card (User ID, Last login + IP, Failed logins); Account (First/Last name*, Email*, Password + confirm with "Generate secure password" and "Leave blank to keep current password", Active toggle); Additional information (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).

Roles — Dual-list AVAILABLE ↔ GRANTED with independent filters; hierarchical role tree on Available; flat list with role name + origin on Granted; transfer buttons between panels.

Permissions — Renders the existing permissions UI inside an iframe. Dedicated Angular designs are pending; the iframe is the interim solution for this Epic.

API Tokens — Table (Token ID, Label, Issued, Expires, Requested By, Network CIDR); Show inactive filter; Request New Token action; per-row Revoke. Request dialog: Label, Expires Date, Allow Network CIDR (default 0.0.0.0/0).

Registration (Beta pattern)

• Register users-beta in dotCMS/src/main/webapp/WEB-INF/portlet.xml and Language.properties
• Route wired at users-beta in core-web/apps/dotcms-ui/src/app/app.routes.ts
• Not added to any default layout or UpgradeTask — admins opt in via "Add Portlet" in Tools

Out of scope

• Redesigned Permissions tab UI (iframe is the interim solution)
• Promotion of the Angular build to the primary users portletId

Design references

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

The prototype covers: list view (default + bulk selection), Edit User dialog (Profile, Roles, API Tokens tabs), Request New Token sub-dialog, and Create User dialog. Permissions tab designs are pending — that tab embeds the existing UI via iframe.

Subtasks

Tracked in the sub-issues panel.