From c3237e0c7d5cc5674f8d62760e7aa870e810309e Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Mon, 10 Aug 2026 16:12:47 -0400
Subject: [PATCH 1/6] feat(users): Profile tab, dialog shell, list CRUD wiring
 (#36717)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Ships the Users portlet Create/Edit dialog shell with the Profile tab
fully wired and placeholders for the three sibling tabs (delivered by
#36718, #36719, #36720).

Dialog / Profile tab:
- 4-tab strip with Profile as the only functional tab; Roles,
  Permissions, and API Tokens render "Coming soon" placeholders
- Header with avatar + name + Active status chip
- Account section: first/last name, email, password + confirm, Active
- Additional Info section: prefix/suffix/title/company/website
- Access section: disabled (values informational only), shows admin /
  backend / frontend / hasConsoleAccess pulled from the loaded user
- Delete User section (edit mode) with required replacement-user
  picker and email-typed confirmation

List CRUD:
- DotUsersService gains getUser/createUser/updateUser using
  POST/PUT/GET /api/v1/users; roles field intentionally omitted on
  update so backend preserves role membership (see
  UserResource#processRoles)
- DotUsersListStore gains createUser / updateUser / deleteSingleUser
- Bulk delete on the list toolbar now shows the same replacement
  picker instead of the old p-confirmDialog
- /users route now resolves to the new users-beta portlet id

Shared:
- DotUsersReplacementPickerComponent — server-backed autocomplete
  used by both delete flows; excludes the users being deleted from
  suggestions client-side

Test coverage: 56 tests in the portlet + 46 in data-access all pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../lib/dot-router/dot-router.service.spec.ts |   6 +
 .../src/lib/dot-router/dot-router.service.ts  |   7 +-
 ...ot-users-replacement-picker.component.html |  24 ++
 .../dot-users-replacement-picker.component.ts | 110 +++++
 .../dot-users-create.component.html           | 175 +++++++-
 .../dot-users-create.component.scss           |  30 ++
 .../dot-users-create.component.spec.ts        | 255 ++++++++++++
 .../dot-users-create.component.ts             | 379 +++++++++++++++++-
 .../dot-users-create/dot-users-form.model.ts  |  72 ++++
 .../dot-users-profile-tab.component.html      | 320 +++++++++++++++
 .../dot-users-profile-tab.component.scss      |   9 +
 .../dot-users-profile-tab.component.ts        | 112 ++++++
 .../dot-users-list.component.html             |  49 ++-
 .../dot-users-list.component.spec.ts          |  74 +++-
 .../dot-users-list.component.ts               | 134 +++++--
 .../store/dot-users-list.store.spec.ts        | 117 +++++-
 .../store/dot-users-list.store.ts             |  95 ++++-
 .../src/lib/services/dot-users.service.ts     |  91 +++++
 .../libs/portlets/dot-users/src/test-setup.ts |   6 +
 .../WEB-INF/messages/Language.properties      |  72 +++-
 20 files changed, 2058 insertions(+), 79 deletions(-)
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.scss
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.scss
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts

diff --git a/core-web/libs/data-access/src/lib/dot-router/dot-router.service.spec.ts b/core-web/libs/data-access/src/lib/dot-router/dot-router.service.spec.ts
index 0a67d588d8e1..a34350db092f 100644
--- a/core-web/libs/data-access/src/lib/dot-router/dot-router.service.spec.ts
+++ b/core-web/libs/data-access/src/lib/dot-router/dot-router.service.spec.ts
@@ -336,6 +336,12 @@ describe('DotRouterService', () => {
         );
     });
 
+    it('should resolve the /users URL slug to the users-beta portlet ID', () => {
+        expect(service.getPortletId('/users')).toBe('users-beta');
+        expect(service.getPortletId('/c/users')).toBe('users-beta');
+        expect(service.getPortletId('#/users?test=value')).toBe('users-beta');
+    });
+
     it('should navigate replacing URL params', () => {
         const params = { id: 'content' };
         service.replaceQueryParams(params);
diff --git a/core-web/libs/data-access/src/lib/dot-router/dot-router.service.ts b/core-web/libs/data-access/src/lib/dot-router/dot-router.service.ts
index 5c6740239914..c4d6aa2459a4 100644
--- a/core-web/libs/data-access/src/lib/dot-router/dot-router.service.ts
+++ b/core-web/libs/data-access/src/lib/dot-router/dot-router.service.ts
@@ -480,5 +480,10 @@ const PORTLET_ID_RESOLVERS: Record<string, (urlSegments: string[]) => string> =
     // URL is kebab-case; backend portlet-name stays snake_case for DB compat (#35809).
     'velocity-playground': () => {
         return 'velocity_playground';
-    }
+    },
+    // The Angular Users portlet is registered under `users-beta` in portlet.xml
+    // with a `<portlet-url>/users</portlet-url>` override, so the URL is `/users`
+    // while the menu id stays `users-beta`. Without this mapping the
+    // MenuGuardService can't match the menu entry and bounces to Getting Started.
+    users: () => 'users-beta'
 };
diff --git a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
new file mode 100644
index 000000000000..7fd1153bd16b
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
@@ -0,0 +1,24 @@
+<p-autoComplete
+    [inputId]="inputId()"
+    [ngModel]="value()"
+    (ngModelChange)="onSelect($event)"
+    [suggestions]="suggestions()"
+    (completeMethod)="onSearch($event)"
+    optionLabel="fullName"
+    [placeholder]="placeholderKey() | dm"
+    [minLength]="1"
+    [delay]="300"
+    [forceSelection]="true"
+    [showClear]="true"
+    appendTo="body"
+    data-testid="users-replacement-picker">
+    <ng-template let-candidate pTemplate="selectedItem">
+        {{ displayName(candidate) }}
+    </ng-template>
+    <ng-template let-candidate pTemplate="item">
+        <div class="flex flex-col">
+            <span class="font-medium">{{ displayName(candidate) }}</span>
+            <span class="text-color-secondary text-xs">{{ candidate.emailAddress }}</span>
+        </div>
+    </ng-template>
+</p-autoComplete>
diff --git a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
new file mode 100644
index 000000000000..a5d12c09c752
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
@@ -0,0 +1,110 @@
+import {
+    ChangeDetectionStrategy,
+    Component,
+    DestroyRef,
+    inject,
+    input,
+    output,
+    signal
+} from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { FormsModule } from '@angular/forms';
+
+import { AutoCompleteCompleteEvent, AutoCompleteModule } from 'primeng/autocomplete';
+
+import { take } from 'rxjs/operators';
+
+import { DotMessagePipe } from '@dotcms/ui';
+
+import { DotUserListItem, DotUsersService } from '../../services/dot-users.service';
+
+/**
+ * Server-backed replacement-user picker used by the delete flows.
+ * Reused by the single-user delete confirm (inside the profile
+ * dialog) and the bulk-delete confirm (on the list toolbar).
+ *
+ * The excluded-ids input keeps deletion targets out of the
+ * suggestion list on the client — the backend also rejects invalid
+ * replacements, but pre-filtering avoids showing picks that would
+ * fail on submit.
+ */
+@Component({
+    selector: 'dot-users-replacement-picker',
+    standalone: true,
+    imports: [FormsModule, AutoCompleteModule, DotMessagePipe],
+    templateUrl: './dot-users-replacement-picker.component.html',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'block' }
+})
+export class DotUsersReplacementPickerComponent {
+    private readonly usersService = inject(DotUsersService);
+    private readonly destroyRef = inject(DestroyRef);
+
+    /** ID passed to the underlying <input> so an external <label for> hooks up. */
+    readonly inputId = input<string>('users-replacement-picker');
+
+    /** i18n key for the input placeholder. */
+    readonly placeholderKey = input<string>('users.dialog.delete-confirm.replacement-placeholder');
+
+    /** User IDs that must not appear as replacement candidates. */
+    readonly excludedUserIds = input<string[]>([]);
+
+    /** Currently selected user, or null when the picker is empty. */
+    readonly value = input<DotUserListItem | null>(null);
+
+    /** Emits every selection change (user or null when cleared). */
+    readonly selectionChange = output<DotUserListItem | null>();
+
+    protected readonly suggestions = signal<DotUserListItem[]>([]);
+
+    protected onSearch(event: AutoCompleteCompleteEvent): void {
+        this.usersService
+            .getUsersPaginated({
+                filter: event.query,
+                page: 1,
+                perPage: 10
+            })
+            .pipe(take(1), takeUntilDestroyed(this.destroyRef))
+            .subscribe({
+                next: (response) => {
+                    const excluded = new Set(this.excludedUserIds());
+                    this.suggestions.set(
+                        response.entity.filter((user) => !excluded.has(user.userId))
+                    );
+                },
+                error: () => this.suggestions.set([])
+            });
+    }
+
+    protected onSelect(value: DotUserListItem | null): void {
+        this.selectionChange.emit(value);
+    }
+
+    /**
+     * Builds the display string shown inside the input and in each
+     * suggestion row. `fullName` is populated for most accounts but can
+     * be blank for legacy or partially-imported users, so we fall back
+     * to `name`, then to the concatenated first/last, then to the email
+     * to guarantee the row is never rendered as `[object Object]`.
+     */
+    protected displayName(user: DotUserListItem): string {
+        const fullName = (user.fullName ?? '').trim();
+        if (fullName) {
+            return fullName;
+        }
+
+        const name = (user.name ?? '').trim();
+        if (name) {
+            return name;
+        }
+
+        const first = (user.firstName ?? '').trim();
+        const last = (user.lastName ?? '').trim();
+        const combined = `${first} ${last}`.trim();
+        if (combined) {
+            return combined;
+        }
+
+        return user.emailAddress ?? '';
+    }
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
index 0a552fd66bc2..124716c83cc1 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
@@ -1,13 +1,166 @@
-<div class="flex flex-col gap-6 p-2" data-testid="users-create-stub">
-    <p class="text-color-secondary m-0">
-        {{ 'users.dialog.stub.message' | dm }}
-    </p>
-    <div class="flex justify-end">
+<div
+    class="flex min-h-0 flex-1 flex-col border-t border-surface-200"
+    data-testid="users-dialog-body">
+    <p-tabs [(value)]="activeTab" class="flex min-h-0 flex-1 flex-col">
+        <div class="border-b border-surface-200 px-7 pt-6">
+            <p-tablist>
+                <p-tab [value]="0" data-testid="users-dialog-tab-profile">
+                    {{ 'users.dialog.tabs.profile' | dm }}
+                </p-tab>
+                <p-tab [value]="1" data-testid="users-dialog-tab-roles">
+                    {{ 'users.dialog.tabs.roles' | dm }}
+                </p-tab>
+                <p-tab [value]="2" data-testid="users-dialog-tab-permissions">
+                    {{ 'users.dialog.tabs.permissions' | dm }}
+                </p-tab>
+                <p-tab [value]="3" data-testid="users-dialog-tab-api-tokens">
+                    {{ 'users.dialog.tabs.api-tokens' | dm }}
+                </p-tab>
+            </p-tablist>
+        </div>
+
+        <p-tabpanels class="flex min-h-0 flex-1 flex-col">
+            <p-tabpanel [value]="0" class="block min-h-0 flex-1 overflow-auto">
+                <div class="px-7 pt-[22px] pb-7">
+                    <header class="mb-6 flex items-center gap-5" data-testid="users-dialog-header">
+                        <p-avatar
+                            [label]="initials()"
+                            shape="circle"
+                            size="xlarge"
+                            styleClass="bg-primary-100 text-primary"
+                            data-testid="users-dialog-avatar" />
+                        <div class="flex min-w-0 flex-wrap items-center gap-3">
+                            <h2
+                                class="m-0 truncate text-xl font-semibold"
+                                data-testid="users-dialog-title">
+                                {{ displayName() }}
+                            </h2>
+                            @if (isEdit) {
+                                <p-tag
+                                    [value]="
+                                        (isActive()
+                                            ? 'users.dialog.status.active'
+                                            : 'users.dialog.status.inactive'
+                                        ) | dm
+                                    "
+                                    [severity]="isActive() ? 'success' : 'secondary'"
+                                    [rounded]="true"
+                                    data-testid="users-dialog-header-status" />
+                            } @else {
+                                <span
+                                    class="text-color-secondary text-sm"
+                                    data-testid="users-dialog-header-subtitle">
+                                    {{ 'users.dialog.create.subtitle' | dm }}
+                                </span>
+                            }
+                        </div>
+                    </header>
+
+                    <dot-users-profile-tab
+                        [form]="form"
+                        [isEdit]="isEdit"
+                        [user]="user"
+                        (deleteRequested)="openDeleteConfirm()"
+                        data-testid="users-dialog-profile-tab" />
+                </div>
+            </p-tabpanel>
+            <p-tabpanel [value]="1" class="block min-h-0 flex-1 overflow-auto">
+                <div
+                    class="text-color-secondary px-7 pt-[22px] pb-7 text-sm"
+                    data-testid="users-dialog-roles-tab-placeholder">
+                    {{ 'users.dialog.tabs.coming-soon' | dm }}
+                </div>
+            </p-tabpanel>
+            <p-tabpanel [value]="2" class="block min-h-0 flex-1 overflow-auto">
+                <div
+                    class="text-color-secondary px-7 pt-[22px] pb-7 text-sm"
+                    data-testid="users-dialog-permissions-tab-placeholder">
+                    {{ 'users.dialog.tabs.coming-soon' | dm }}
+                </div>
+            </p-tabpanel>
+            <p-tabpanel [value]="3" class="block min-h-0 flex-1 overflow-auto">
+                <div
+                    class="text-color-secondary px-7 pt-[22px] pb-7 text-sm"
+                    data-testid="users-dialog-api-tokens-tab-placeholder">
+                    {{ 'users.dialog.tabs.coming-soon' | dm }}
+                </div>
+            </p-tabpanel>
+        </p-tabpanels>
+    </p-tabs>
+</div>
+
+<footer
+    class="flex items-center justify-end gap-2 border-t border-surface-200 px-6 py-4"
+    data-testid="users-dialog-footer">
+    <p-button
+        [label]="'users.cancel' | dm"
+        severity="secondary"
+        [text]="true"
+        (onClick)="close()"
+        data-testid="users-dialog-cancel-btn" />
+    <p-button
+        [label]="(isEdit ? 'users.dialog.save' : 'users.dialog.create') | dm"
+        (onClick)="save()"
+        data-testid="users-dialog-save-btn" />
+</footer>
+
+<p-dialog
+    [visible]="deleteConfirmVisible()"
+    (visibleChange)="deleteConfirmVisible.set($event)"
+    [modal]="true"
+    [closable]="true"
+    [closeOnEscape]="true"
+    [draggable]="false"
+    [style]="{ width: '500px' }"
+    [header]="'users.dialog.delete-confirm.header' | dm"
+    data-testid="users-delete-confirm-dialog">
+    <div class="flex flex-col gap-4">
+        <p class="m-0 text-color">
+            {{ 'users.dialog.delete-confirm.message' | dm }}
+        </p>
+        <div class="field flex flex-col gap-2">
+            <label for="users-delete-replacement-picker">
+                {{ 'users.dialog.delete-confirm.replacement-label' | dm }}
+                <span class="text-red-500" aria-hidden="true">*</span>
+            </label>
+            <dot-users-replacement-picker
+                inputId="users-delete-replacement-picker"
+                [value]="replacementUser()"
+                [excludedUserIds]="excludedReplacementIds"
+                (selectionChange)="onReplacementSelect($event)"
+                data-testid="users-delete-replacement-picker" />
+            <small class="text-color-secondary">
+                {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
+            </small>
+        </div>
+        <div class="field flex flex-col gap-2">
+            <label for="users-delete-confirm-input">
+                {{ 'users.dialog.delete-confirm.confirm-label' | dm }}
+                @if (user?.emailAddress) {
+                    <span class="font-mono text-sm">&mdash; {{ user?.emailAddress }}</span>
+                }
+            </label>
+            <input
+                pInputText
+                id="users-delete-confirm-input"
+                [ngModel]="deleteConfirmationInput()"
+                (ngModelChange)="onDeleteInputChange($event)"
+                [placeholder]="'users.dialog.delete-confirm.confirm-placeholder' | dm"
+                data-testid="users-delete-confirm-input" />
+        </div>
+    </div>
+    <ng-template pTemplate="footer">
         <p-button
-            [label]="'users.close' | dm"
+            [label]="'users.cancel' | dm"
             severity="secondary"
-            [outlined]="true"
-            (onClick)="close()"
-            data-testid="users-create-stub-close-btn" />
-    </div>
-</div>
+            [text]="true"
+            (onClick)="closeDeleteConfirm()"
+            data-testid="users-delete-confirm-cancel-btn" />
+        <p-button
+            [label]="'users.dialog.delete.button' | dm"
+            severity="danger"
+            [disabled]="!canConfirmDelete()"
+            (onClick)="confirmDelete()"
+            data-testid="users-delete-confirm-btn" />
+    </ng-template>
+</p-dialog>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.scss b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.scss
new file mode 100644
index 000000000000..62d884a0095c
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.scss
@@ -0,0 +1,30 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+// Force the flex-fill chain from the body wrapper down to each p-tabpanel.
+// Tailwind's `flex`/`block` utilities lose against PrimeNG's default block
+// display on `.p-tabpanel` (higher specificity via the injected preset), so
+// we assert the layout explicitly here.
+:host ::ng-deep {
+    p-tabs,
+    p-tabpanels {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+    }
+
+    // Only the active tab receives layout — the others carry the `hidden`
+    // attribute which resolves to `display: none` before this ever applies.
+    p-tabpanel {
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        min-height: 0;
+        padding: 0;
+    }
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
new file mode 100644
index 000000000000..4b92eb0df4c4
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
@@ -0,0 +1,255 @@
+import { byTestId, createComponentFactory, mockProvider, Spectator } from '@openng/spectator/jest';
+import { of } from 'rxjs';
+
+import { NoopAnimationsModule } from '@angular/platform-browser/animations';
+
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+
+import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
+import { MockDotMessageService } from '@dotcms/utils-testing';
+
+import { DotUsersCreateComponent } from './dot-users-create.component';
+
+import { DotUserDetail, DotUserListItem, DotUsersService } from '../services/dot-users.service';
+
+const MOCK_USER: DotUserListItem = {
+    userId: 'user-42',
+    id: 'user-42',
+    firstName: 'Jane',
+    lastName: 'Doe',
+    fullName: 'Jane Doe',
+    name: 'Jane Doe',
+    emailAddress: 'jane@dotcms.com',
+    gravitar: '',
+    active: true,
+    admin: false,
+    backendUser: true,
+    frontendUser: false,
+    hasConsoleAccess: true,
+    lastLoginDate: null,
+    lastLoginIP: null,
+    failedLoginAttempts: 0
+};
+
+const MOCK_USER_DETAIL: DotUserDetail = {
+    ...MOCK_USER,
+    birthday: null,
+    middleName: null,
+    nickname: null,
+    languageId: 'en-US',
+    timeZoneId: null,
+    male: null,
+    female: null,
+    additionalInfo: null,
+    createDate: null,
+    modificationDate: null
+};
+
+const MESSAGES = {
+    'users.dialog.tabs.profile': 'Profile',
+    'users.dialog.tabs.roles': 'Roles',
+    'users.dialog.tabs.permissions': 'Permissions',
+    'users.dialog.tabs.api-tokens': 'API Tokens',
+    'users.dialog.new-user': 'New User',
+    'users.dialog.untitled-user': 'Untitled User',
+    'users.dialog.status.active': 'Active',
+    'users.dialog.status.inactive': 'Inactive',
+    'users.dialog.create.subtitle': 'Fill in the details below to create this user',
+    'users.dialog.save': 'Save Changes',
+    'users.dialog.create': 'Create User',
+    'users.dialog.delete.button': 'Delete User',
+    'users.dialog.delete-confirm.header': 'Delete user',
+    'users.cancel': 'Cancel'
+};
+
+describe('DotUsersCreateComponent', () => {
+    let spectator: Spectator<DotUsersCreateComponent>;
+    let dialogRef: DynamicDialogRef;
+
+    const createComponent = createComponentFactory({
+        component: DotUsersCreateComponent,
+        imports: [NoopAnimationsModule],
+        providers: [
+            { provide: DotMessageService, useValue: new MockDotMessageService(MESSAGES) },
+            mockProvider(DotUsersService, {
+                getUser: jest.fn().mockReturnValue(of(MOCK_USER_DETAIL)),
+                getUsersPaginated: jest.fn().mockReturnValue(
+                    of({
+                        entity: [],
+                        errors: [],
+                        messages: [],
+                        permissions: [],
+                        i18nMessagesMap: {},
+                        pagination: { currentPage: 1, perPage: 10, totalEntries: 0 }
+                    })
+                )
+            }),
+            mockProvider(DotHttpErrorManagerService, { handle: jest.fn() })
+        ]
+    });
+
+    describe('create mode', () => {
+        beforeEach(() => {
+            dialogRef = { close: jest.fn() } as unknown as DynamicDialogRef;
+            spectator = createComponent({
+                providers: [
+                    { provide: DynamicDialogRef, useValue: dialogRef },
+                    { provide: DynamicDialogConfig, useValue: { data: {} } }
+                ]
+            });
+        });
+
+        it('should render the four tabs', () => {
+            expect(spectator.query(byTestId('users-dialog-tab-profile'))).toBeTruthy();
+            expect(spectator.query(byTestId('users-dialog-tab-roles'))).toBeTruthy();
+            expect(spectator.query(byTestId('users-dialog-tab-permissions'))).toBeTruthy();
+            expect(spectator.query(byTestId('users-dialog-tab-api-tokens'))).toBeTruthy();
+        });
+
+        it('should render the create subtitle in the header when no user is provided', () => {
+            expect(spectator.query(byTestId('users-dialog-header-subtitle'))).toBeTruthy();
+            expect(spectator.query(byTestId('users-dialog-header-status'))).toBeFalsy();
+        });
+
+        it('should show NU as the initials placeholder', () => {
+            expect(spectator.component.initials()).toBe('NU');
+        });
+
+        it('should mark password as required in create mode', () => {
+            const password = spectator.component.form.controls.account.controls.password;
+            expect(password.hasError('required')).toBe(true);
+        });
+
+        it('should not close on save when the form is invalid', () => {
+            spectator.component['save']();
+
+            expect(dialogRef.close).not.toHaveBeenCalled();
+        });
+
+        it('should close with the form value on save when valid', () => {
+            spectator.component.form.patchValue({
+                account: {
+                    firstName: 'Ada',
+                    lastName: 'Lovelace',
+                    email: 'ada@dotcms.com',
+                    password: 'Xy7#abcdef',
+                    confirmPassword: 'Xy7#abcdef'
+                }
+            });
+
+            spectator.component['save']();
+
+            expect(dialogRef.close).toHaveBeenCalledWith(
+                expect.objectContaining({ action: 'save' })
+            );
+        });
+
+        it('should surface passwordMismatch when passwords do not match', () => {
+            spectator.component.form.patchValue({
+                account: {
+                    password: 'abc123',
+                    confirmPassword: 'different'
+                }
+            });
+
+            expect(spectator.component.form.controls.account.errors?.['passwordMismatch']).toBe(
+                true
+            );
+        });
+
+        it('should keep canConfirmDelete false when the user is missing', () => {
+            expect(spectator.component['canConfirmDelete']()).toBe(false);
+        });
+    });
+
+    describe('edit mode', () => {
+        beforeEach(() => {
+            dialogRef = { close: jest.fn() } as unknown as DynamicDialogRef;
+            spectator = createComponent({
+                providers: [
+                    { provide: DynamicDialogRef, useValue: dialogRef },
+                    { provide: DynamicDialogConfig, useValue: { data: { user: MOCK_USER } } }
+                ]
+            });
+        });
+
+        it('should hydrate the form from the user data', () => {
+            const account = spectator.component.form.controls.account.value;
+            expect(account.firstName).toBe('Jane');
+            expect(account.lastName).toBe('Doe');
+            expect(account.email).toBe('jane@dotcms.com');
+            expect(account.active).toBe(true);
+        });
+
+        it('should render the status chip in the header', () => {
+            expect(spectator.query(byTestId('users-dialog-header-status'))).toBeTruthy();
+        });
+
+        it('should NOT mark password as required in edit mode', () => {
+            const password = spectator.component.form.controls.account.controls.password;
+            expect(password.hasError('required')).toBe(false);
+        });
+
+        const REPLACEMENT_USER: DotUserListItem = {
+            ...MOCK_USER,
+            userId: 'user-99',
+            id: 'user-99',
+            emailAddress: 'nobody@dotcms.com',
+            firstName: 'Nobody',
+            lastName: 'Else',
+            fullName: 'Nobody Else',
+            name: 'Nobody Else'
+        };
+
+        it('should require both email match AND a replacement user to enable delete confirmation', () => {
+            spectator.component['openDeleteConfirm']();
+            expect(spectator.component['canConfirmDelete']()).toBe(false);
+
+            spectator.component['onDeleteInputChange']('jane@dotcms.com');
+            expect(spectator.component['canConfirmDelete']()).toBe(false);
+
+            spectator.component['onReplacementSelect'](REPLACEMENT_USER);
+            expect(spectator.component['canConfirmDelete']()).toBe(true);
+        });
+
+        it('should keep delete confirmation disabled when the picked replacement is the same user', () => {
+            spectator.component['openDeleteConfirm']();
+            spectator.component['onDeleteInputChange']('jane@dotcms.com');
+            spectator.component['onReplacementSelect'](MOCK_USER);
+
+            expect(spectator.component['canConfirmDelete']()).toBe(false);
+        });
+
+        it('should close with delete action carrying the replacement userId when confirmed', () => {
+            spectator.component['openDeleteConfirm']();
+            spectator.component['onDeleteInputChange']('jane@dotcms.com');
+            spectator.component['onReplacementSelect'](REPLACEMENT_USER);
+            spectator.component['confirmDelete']();
+
+            expect(dialogRef.close).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: 'delete',
+                    userId: 'user-42',
+                    replacementUserId: 'user-99'
+                })
+            );
+        });
+
+        it('should not close when confirmDelete is called without matching input', () => {
+            spectator.component['openDeleteConfirm']();
+            spectator.component['confirmDelete']();
+
+            expect(dialogRef.close).not.toHaveBeenCalled();
+        });
+
+        it('should reset the replacement user when the delete dialog re-opens', () => {
+            spectator.component['openDeleteConfirm']();
+            spectator.component['onReplacementSelect'](REPLACEMENT_USER);
+            spectator.component['closeDeleteConfirm']();
+
+            spectator.component['openDeleteConfirm']();
+
+            expect(spectator.component['replacementUser']()).toBeNull();
+        });
+    });
+});
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
index bea88eaff6f4..4fb8d9f7303a 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
@@ -1,26 +1,389 @@
-import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    DestroyRef,
+    inject,
+    signal
+} from '@angular/core';
+import { takeUntilDestroyed, toSignal } from '@angular/core/rxjs-interop';
+import { FormBuilder, FormsModule, ReactiveFormsModule, Validators } from '@angular/forms';
 
+import { AvatarModule } from 'primeng/avatar';
 import { ButtonModule } from 'primeng/button';
-import { DynamicDialogRef } from 'primeng/dynamicdialog';
+import { DialogModule } from 'primeng/dialog';
+import { DynamicDialogConfig, DynamicDialogRef } from 'primeng/dynamicdialog';
+import { InputTextModule } from 'primeng/inputtext';
+import { TabsModule } from 'primeng/tabs';
+import { TagModule } from 'primeng/tag';
 
+import { finalize, take } from 'rxjs/operators';
+
+import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
 import { DotMessagePipe } from '@dotcms/ui';
 
+import { passwordsMatchValidator } from './dot-users-form.model';
+import { DotUsersProfileTabComponent } from './tabs/dot-users-profile-tab/dot-users-profile-tab.component';
+
+import { DotUsersReplacementPickerComponent } from '../components/dot-users-replacement-picker/dot-users-replacement-picker.component';
+import {
+    DotUserFormPayload,
+    DotUserListItem,
+    DotUsersService
+} from '../services/dot-users.service';
+
+interface DialogData {
+    user?: DotUserListItem;
+}
+
+/**
+ * Payload the list component consumes on `DynamicDialogRef.onClose`.
+ * The `action` discriminant tells the list which store method to
+ * dispatch — the shape stays flat so the list can add cases (e.g.
+ * bulk actions) without breaking the union.
+ */
+export type DotUsersDialogResult =
+    | { action: 'save'; mode: 'create' | 'update'; payload: DotUserFormPayload }
+    | { action: 'delete'; userId: string; replacementUserId?: string };
+
 /**
- * Placeholder Create/Edit User dialog. The four-tab implementation
- * (Profile, Roles, Permissions, API Tokens) is delivered by sibling
- * tickets. The list-view ticket only wires up the entry point.
+ * Additional-info keys the Profile tab surfaces as first-class fields.
+ * These are conventional dotCMS keys — the backend stores them inside
+ * `User.additionalInfo` (a free-form map) and returns them unchanged.
+ */
+const ADDITIONAL_INFO_KEYS = ['prefix', 'suffix', 'title', 'company', 'website'] as const;
+
+/**
+ * Create / Edit User dialog. Hosts the four-tab experience (Profile,
+ * Roles, Permissions, API Tokens) inside the shared PrimeNG dynamic
+ * dialog frame. Owns the top-level reactive form, mode detection
+ * (create vs edit), and orchestrates each tab as a standalone
+ * presentational sub-component.
+ *
+ * Scope for issue #36717 — only the Profile tab is real. Roles,
+ * Permissions, and API Tokens render "Coming soon" placeholders and
+ * are delivered by their sibling issues (#36718, #36719, #36720),
+ * each of which swaps its placeholder for the real tab component.
  */
 @Component({
     selector: 'dot-users-create',
     standalone: true,
-    imports: [ButtonModule, DotMessagePipe],
+    imports: [
+        CommonModule,
+        FormsModule,
+        ReactiveFormsModule,
+        AvatarModule,
+        ButtonModule,
+        DialogModule,
+        InputTextModule,
+        TabsModule,
+        TagModule,
+        DotMessagePipe,
+        DotUsersReplacementPickerComponent,
+        DotUsersProfileTabComponent
+    ],
     templateUrl: './dot-users-create.component.html',
-    changeDetection: ChangeDetectionStrategy.OnPush
+    styleUrl: './dot-users-create.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'flex h-full min-h-0 flex-col block' }
 })
 export class DotUsersCreateComponent {
     private readonly dialogRef = inject(DynamicDialogRef);
+    private readonly config = inject<DynamicDialogConfig<DialogData>>(DynamicDialogConfig);
+    private readonly fb = inject(FormBuilder);
+    private readonly messageService = inject(DotMessageService);
+    private readonly usersService = inject(DotUsersService);
+    private readonly httpErrorManager = inject(DotHttpErrorManagerService);
+    private readonly destroyRef = inject(DestroyRef);
+
+    readonly user = this.config.data?.user ?? null;
+    readonly isEdit = !!this.user;
+
+    readonly form = this.fb.nonNullable.group({
+        account: this.fb.nonNullable.group(
+            {
+                firstName: ['', [Validators.required]],
+                lastName: ['', [Validators.required]],
+                email: ['', [Validators.required, Validators.email]],
+                password: [''],
+                confirmPassword: [''],
+                active: [true]
+            },
+            { validators: [passwordsMatchValidator] }
+        ),
+        additionalInfo: this.fb.nonNullable.group({
+            prefix: [''],
+            suffix: [''],
+            title: [''],
+            company: [''],
+            website: ['']
+        }),
+        access: this.fb.nonNullable.group({
+            cmsAdmin: [false],
+            backend: [true],
+            frontend: [false],
+            canLogin: [true],
+            showGettingStarted: [true]
+        })
+    });
+
+    /**
+     * Signal mirror of `form.controls.account.valueChanges`. Used to
+     * derive the header (name + initials) reactively without wiring up
+     * change detection manually. `toSignal` starts from the current
+     * form value so the very first render already reflects the reset
+     * we ran below.
+     */
+    private readonly accountValue = toSignal(this.form.controls.account.valueChanges, {
+        initialValue: this.form.controls.account.getRawValue()
+    });
+
+    readonly displayName = computed(() => {
+        const account = this.accountValue();
+        const first = (account.firstName ?? '').trim();
+        const last = (account.lastName ?? '').trim();
+        const combined = `${first} ${last}`.trim();
 
-    close(): void {
+        if (combined) {
+            return combined;
+        }
+
+        return this.isEdit
+            ? this.messageService.get('users.dialog.untitled-user')
+            : this.messageService.get('users.dialog.new-user');
+    });
+
+    readonly initials = computed(() => {
+        const account = this.accountValue();
+        const first = (account.firstName ?? '').charAt(0);
+        const last = (account.lastName ?? '').charAt(0);
+        const value = `${first}${last}`.toUpperCase();
+
+        return value || (this.isEdit ? '?' : 'NU');
+    });
+
+    readonly isActive = computed(() => Boolean(this.accountValue().active));
+
+    protected readonly activeTab = signal(0);
+    protected readonly deleteConfirmVisible = signal(false);
+    protected readonly deleteConfirmationInput = signal('');
+    protected readonly replacementUser = signal<DotUserListItem | null>(null);
+    protected readonly isLoading = signal(false);
+
+    /**
+     * ID list handed to the replacement picker so the user being
+     * deleted is filtered out of the suggestion pool. Backed by a
+     * getter so it stays trivially derivable from `this.user`.
+     */
+    protected readonly excludedReplacementIds = this.user?.userId ? [this.user.userId] : [];
+
+    protected readonly canConfirmDelete = computed(() => {
+        const target = (this.user?.emailAddress ?? '').trim().toLowerCase();
+        if (!target) {
+            return false;
+        }
+
+        const emailMatches = this.deleteConfirmationInput().trim().toLowerCase() === target;
+        const replacement = this.replacementUser();
+        const replacementValid = !!replacement && replacement.userId !== this.user?.userId;
+
+        return emailMatches && replacementValid;
+    });
+
+    constructor() {
+        if (this.user) {
+            this.hydrateFromListItem(this.user);
+            this.loadUserDetail(this.user.userId);
+            this.disableAccessSection();
+        } else {
+            this.enableCreatePasswordValidators();
+        }
+    }
+
+    protected close(): void {
         this.dialogRef.close();
     }
+
+    protected save(): void {
+        this.form.markAllAsTouched();
+        if (this.form.invalid) {
+            return;
+        }
+
+        const payload = this.buildPayload();
+        const result: DotUsersDialogResult = {
+            action: 'save',
+            mode: this.isEdit ? 'update' : 'create',
+            payload
+        };
+
+        this.dialogRef.close(result);
+    }
+
+    protected openDeleteConfirm(): void {
+        this.deleteConfirmationInput.set('');
+        this.replacementUser.set(null);
+        this.deleteConfirmVisible.set(true);
+    }
+
+    protected closeDeleteConfirm(): void {
+        this.deleteConfirmVisible.set(false);
+    }
+
+    protected confirmDelete(): void {
+        const replacement = this.replacementUser();
+        if (!this.canConfirmDelete() || !this.user?.userId || !replacement) {
+            return;
+        }
+
+        const result: DotUsersDialogResult = {
+            action: 'delete',
+            userId: this.user.userId,
+            replacementUserId: replacement.userId
+        };
+
+        this.dialogRef.close(result);
+    }
+
+    protected onDeleteInputChange(value: string): void {
+        this.deleteConfirmationInput.set(value);
+    }
+
+    protected onReplacementSelect(user: DotUserListItem | null): void {
+        this.replacementUser.set(user);
+    }
+
+    /**
+     * Fills the form with the fields the list row already knows about so
+     * the dialog opens with the correct name / email / status even
+     * before {@link loadUserDetail} finishes the round-trip.
+     */
+    private hydrateFromListItem(item: DotUserListItem): void {
+        this.form.patchValue({
+            account: {
+                firstName: item.firstName ?? '',
+                lastName: item.lastName ?? '',
+                email: item.emailAddress ?? '',
+                active: item.active ?? true
+            },
+            access: {
+                cmsAdmin: item.admin ?? false,
+                backend: item.backendUser ?? false,
+                frontend: item.frontendUser ?? false,
+                canLogin: item.hasConsoleAccess ?? false,
+                showGettingStarted: false
+            }
+        });
+    }
+
+    /**
+     * Fetches the full user detail — the list row does not carry
+     * `additionalInfo` (prefix/suffix/title/company/website), so we
+     * re-fetch to hydrate those fields. Access section stays disabled,
+     * so no need to reconcile its values against roles yet.
+     */
+    private loadUserDetail(userId: string): void {
+        this.isLoading.set(true);
+        this.usersService
+            .getUser(userId)
+            .pipe(
+                take(1),
+                finalize(() => this.isLoading.set(false)),
+                takeUntilDestroyed(this.destroyRef)
+            )
+            .subscribe({
+                next: (user) => {
+                    const additionalInfo = user.additionalInfo ?? {};
+                    this.form.patchValue({
+                        account: {
+                            firstName: user.firstName ?? '',
+                            lastName: user.lastName ?? '',
+                            email: user.emailAddress ?? '',
+                            active: user.active ?? true
+                        },
+                        additionalInfo: {
+                            prefix: (additionalInfo['prefix'] as string) ?? '',
+                            suffix: (additionalInfo['suffix'] as string) ?? '',
+                            title: (additionalInfo['title'] as string) ?? '',
+                            company: (additionalInfo['company'] as string) ?? '',
+                            website: (additionalInfo['website'] as string) ?? ''
+                        },
+                        access: {
+                            cmsAdmin: user.admin ?? false,
+                            backend: user.backendUser ?? false,
+                            frontend: user.frontendUser ?? false,
+                            canLogin: user.hasConsoleAccess ?? false,
+                            showGettingStarted: false
+                        }
+                    });
+                    this.form.markAsPristine();
+                },
+                error: (error) => this.httpErrorManager.handle(error)
+            });
+    }
+
+    private enableCreatePasswordValidators(): void {
+        const account = this.form.controls.account;
+        account.controls.password.setValidators([Validators.required, Validators.minLength(6)]);
+        account.controls.confirmPassword.setValidators([Validators.required]);
+        account.controls.password.updateValueAndValidity({ emitEvent: false });
+        account.controls.confirmPassword.updateValueAndValidity({ emitEvent: false });
+    }
+
+    /**
+     * Access toggles map to backend roles (CMS Administrator,
+     * DOTCMS_BACK_END_USER, DOTCMS_FRONT_END_USER, hasConsoleAccess).
+     * Path A does not persist those, so the section is disabled at load
+     * to keep the values informational only.
+     */
+    private disableAccessSection(): void {
+        this.form.controls.access.disable({ emitEvent: false });
+    }
+
+    /**
+     * Builds the backend {@link DotUserFormPayload} from the current
+     * form value. Password and additionalInfo are omitted when empty so
+     * the backend keeps the existing values.
+     *
+     * Roles are intentionally NOT sent — the backend interprets a
+     * missing `roles` field as "leave role membership untouched"
+     * (UserResource#processRoles), which is exactly what Path A needs.
+     */
+    private buildPayload(): DotUserFormPayload {
+        const raw = this.form.getRawValue();
+        const account = raw.account;
+        const additionalInfoValue = raw.additionalInfo;
+
+        const additionalInfo = ADDITIONAL_INFO_KEYS.reduce<Record<string, string>>((acc, key) => {
+            const value = (additionalInfoValue[key] ?? '').trim();
+            if (value) {
+                acc[key] = value;
+            }
+
+            return acc;
+        }, {});
+
+        const payload: DotUserFormPayload = {
+            firstName: account.firstName.trim(),
+            lastName: account.lastName.trim(),
+            email: account.email.trim(),
+            active: account.active
+        };
+
+        if (this.user?.userId) {
+            payload.userId = this.user.userId;
+        }
+
+        const password = (account.password ?? '').trim();
+        if (password) {
+            payload.password = password;
+        }
+
+        if (Object.keys(additionalInfo).length > 0) {
+            payload.additionalInfo = additionalInfo;
+        }
+
+        return payload;
+    }
 }
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
new file mode 100644
index 000000000000..57018539a713
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
@@ -0,0 +1,72 @@
+import { AbstractControl, FormGroup, ValidationErrors } from '@angular/forms';
+
+export interface DotUsersAccountForm {
+    firstName: string;
+    lastName: string;
+    email: string;
+    password: string;
+    confirmPassword: string;
+    active: boolean;
+}
+
+export interface DotUsersAdditionalInfoForm {
+    prefix: string;
+    suffix: string;
+    title: string;
+    company: string;
+    website: string;
+}
+
+export interface DotUsersAccessForm {
+    cmsAdmin: boolean;
+    backend: boolean;
+    frontend: boolean;
+    canLogin: boolean;
+    showGettingStarted: boolean;
+}
+
+export interface DotUsersForm {
+    account: DotUsersAccountForm;
+    additionalInfo: DotUsersAdditionalInfoForm;
+    access: DotUsersAccessForm;
+}
+
+/**
+ * Cross-field validator applied to the `account` sub-group. Emits the
+ * `passwordMismatch` error when a password was entered and the confirm
+ * value does not match. An empty password is legal — in edit mode it
+ * signals "keep current password" and skips validation.
+ */
+export function passwordsMatchValidator(control: AbstractControl): ValidationErrors | null {
+    const group = control as FormGroup;
+    const password = group.get('password')?.value ?? '';
+    const confirm = group.get('confirmPassword')?.value ?? '';
+
+    if (!password && !confirm) {
+        return null;
+    }
+
+    return password === confirm ? null : { passwordMismatch: true };
+}
+
+/**
+ * Generates an 12-character password with a mixed character set. Used
+ * by the "Generate secure password" action; kept in a shared module so
+ * the profile tab and the create component agree on the same seed.
+ */
+export function generateSecurePassword(): string {
+    const upper = 'ABCDEFGHJKLMNPQRSTUVWXYZ';
+    const lower = 'abcdefghijkmnopqrstuvwxyz';
+    const digits = '23456789';
+    const symbols = '!@#$%^&*';
+    const all = upper + lower + digits + symbols;
+
+    const pick = (source: string) => source.charAt(Math.floor(Math.random() * source.length));
+
+    const seed = [pick(upper), pick(lower), pick(digits), pick(symbols)];
+    for (let i = 0; i < 8; i++) {
+        seed.push(pick(all));
+    }
+
+    return seed.sort(() => Math.random() - 0.5).join('');
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
new file mode 100644
index 000000000000..2038f4458c09
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
@@ -0,0 +1,320 @@
+@if (isEdit() && user(); as u) {
+    <div
+        class="grid grid-cols-3 gap-4 rounded-lg border border-surface-200 bg-surface-50 p-4"
+        data-testid="users-profile-metadata">
+        <div class="flex flex-col gap-1">
+            <span class="text-color-secondary text-xs tracking-wide uppercase">
+                {{ 'users.dialog.metadata.user-id' | dm }}
+            </span>
+            <span class="font-mono text-sm" data-testid="users-profile-metadata-id">
+                {{ u.userId }}
+            </span>
+        </div>
+        <div class="flex flex-col gap-1">
+            <span class="text-color-secondary text-xs tracking-wide uppercase">
+                {{ 'users.dialog.metadata.last-login' | dm }}
+            </span>
+            <span class="text-sm" data-testid="users-profile-metadata-last-login">
+                @if (u.lastLoginDate) {
+                    {{ u.lastLoginDate | date: 'MM/dd/yyyy HH:mm' }}
+                    @if (u.lastLoginIP) {
+                        <span class="text-color-secondary">&middot; {{ u.lastLoginIP }}</span>
+                    }
+                } @else {
+                    {{ 'users.dialog.metadata.never' | dm }}
+                }
+            </span>
+        </div>
+        <div class="flex flex-col gap-1">
+            <span class="text-color-secondary text-xs tracking-wide uppercase">
+                {{ 'users.dialog.metadata.failed-logins' | dm }}
+            </span>
+            <span class="text-sm" data-testid="users-profile-metadata-failed-logins">
+                {{ u.failedLoginAttempts ?? 0 }}
+            </span>
+        </div>
+    </div>
+}
+
+<form [formGroup]="form()" class="form flex flex-col gap-6">
+    <section
+        [formGroup]="accountGroup()"
+        class="flex flex-col gap-4 rounded-lg border border-surface-200 p-6"
+        data-testid="users-profile-account-section">
+        <header class="flex flex-col gap-1">
+            <h3 class="m-0 text-base font-semibold">
+                {{ 'users.dialog.section.account' | dm }}
+            </h3>
+            <p class="text-color-secondary m-0 text-sm">
+                {{ 'users.dialog.section.account.description' | dm }}
+            </p>
+        </header>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-first-name" dotFieldRequired>
+                    {{ 'users.dialog.field.first-name' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-first-name"
+                    formControlName="firstName"
+                    [placeholder]="'users.dialog.field.first-name.placeholder' | dm"
+                    data-testid="users-profile-first-name" />
+            </div>
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-last-name" dotFieldRequired>
+                    {{ 'users.dialog.field.last-name' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-last-name"
+                    formControlName="lastName"
+                    [placeholder]="'users.dialog.field.last-name.placeholder' | dm"
+                    data-testid="users-profile-last-name" />
+            </div>
+            <div class="field col-span-2 flex flex-col gap-2">
+                <label for="users-profile-email" dotFieldRequired>
+                    {{ 'users.dialog.field.email' | dm }}
+                </label>
+                <p-iconField iconPosition="left" class="w-full">
+                    <p-inputIcon>
+                        <span
+                            class="material-symbols-rounded text-lg! leading-none"
+                            aria-hidden="true">
+                            mail
+                        </span>
+                    </p-inputIcon>
+                    <input
+                        pInputText
+                        id="users-profile-email"
+                        type="email"
+                        formControlName="email"
+                        class="w-full"
+                        [placeholder]="'users.dialog.field.email.placeholder' | dm"
+                        data-testid="users-profile-email" />
+                </p-iconField>
+                @if (
+                    accountGroup().get('email')?.touched &&
+                    accountGroup().get('email')?.errors?.['email']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-email-error">
+                        {{ 'users.dialog.error.email' | dm }}
+                    </small>
+                }
+            </div>
+        </div>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div class="field flex flex-col gap-2">
+                <label
+                    for="users-profile-password"
+                    dotFieldRequired
+                    [checkIsRequiredControl]="'password'">
+                    {{ 'users.dialog.field.password' | dm }}
+                </label>
+                <p-password
+                    inputId="users-profile-password"
+                    formControlName="password"
+                    [toggleMask]="true"
+                    [feedback]="!isEdit()"
+                    styleClass="w-full"
+                    inputStyleClass="w-full"
+                    data-testid="users-profile-password" />
+                @if (isEdit()) {
+                    <small class="text-color-secondary">
+                        {{ 'users.dialog.field.password.help' | dm }}
+                    </small>
+                }
+            </div>
+            <div class="field flex flex-col gap-2">
+                <label
+                    for="users-profile-confirm-password"
+                    dotFieldRequired
+                    [checkIsRequiredControl]="'confirmPassword'">
+                    {{ 'users.dialog.field.confirm-password' | dm }}
+                </label>
+                <p-password
+                    inputId="users-profile-confirm-password"
+                    formControlName="confirmPassword"
+                    [toggleMask]="true"
+                    [feedback]="false"
+                    styleClass="w-full"
+                    inputStyleClass="w-full"
+                    data-testid="users-profile-confirm-password" />
+                @if (accountGroup().errors?.['passwordMismatch']) {
+                    <small class="text-red-600" data-testid="users-profile-password-mismatch-error">
+                        {{ 'users.dialog.error.password-mismatch' | dm }}
+                    </small>
+                }
+            </div>
+        </div>
+
+        <div>
+            <p-button
+                [text]="true"
+                size="small"
+                (onClick)="onGeneratePassword()"
+                data-testid="users-profile-generate-password">
+                <span class="material-symbols-rounded text-base!" aria-hidden="true">
+                    autorenew
+                </span>
+                <span class="ml-1">{{ 'users.dialog.field.generate-password' | dm }}</span>
+            </p-button>
+        </div>
+
+        <div
+            class="flex items-center justify-between gap-4 border-t border-surface-200 pt-4"
+            data-testid="users-profile-active-row">
+            <div class="flex flex-col gap-1">
+                <span class="font-medium">
+                    {{ 'users.dialog.toggle.active.title' | dm }}
+                </span>
+                <span class="text-color-secondary text-sm">
+                    {{ 'users.dialog.toggle.active.description' | dm }}
+                </span>
+            </div>
+            <p-toggleswitch formControlName="active" data-testid="users-profile-active-toggle" />
+        </div>
+    </section>
+
+    <section
+        [formGroup]="additionalInfoGroup()"
+        class="flex flex-col gap-4 rounded-lg border border-surface-200 p-6"
+        data-testid="users-profile-additional-info-section">
+        <header class="flex flex-col gap-1">
+            <h3 class="m-0 text-base font-semibold">
+                {{ 'users.dialog.section.additional-info' | dm }}
+            </h3>
+            <p class="text-color-secondary m-0 text-sm">
+                {{ 'users.dialog.section.additional-info.description' | dm }}
+            </p>
+        </header>
+
+        <div class="grid grid-cols-2 gap-4">
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-prefix">
+                    {{ 'users.dialog.field.prefix' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-prefix"
+                    formControlName="prefix"
+                    [placeholder]="'users.dialog.field.prefix.placeholder' | dm"
+                    data-testid="users-profile-prefix" />
+            </div>
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-suffix">
+                    {{ 'users.dialog.field.suffix' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-suffix"
+                    formControlName="suffix"
+                    [placeholder]="'users.dialog.field.suffix.placeholder' | dm"
+                    data-testid="users-profile-suffix" />
+            </div>
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-title">
+                    {{ 'users.dialog.field.title' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-title"
+                    formControlName="title"
+                    [placeholder]="'users.dialog.field.title.placeholder' | dm"
+                    data-testid="users-profile-title" />
+            </div>
+            <div class="field flex flex-col gap-2">
+                <label for="users-profile-company">
+                    {{ 'users.dialog.field.company' | dm }}
+                </label>
+                <input
+                    pInputText
+                    id="users-profile-company"
+                    formControlName="company"
+                    [placeholder]="'users.dialog.field.company.placeholder' | dm"
+                    data-testid="users-profile-company" />
+            </div>
+            <div class="field col-span-2 flex flex-col gap-2">
+                <label for="users-profile-website">
+                    {{ 'users.dialog.field.website' | dm }}
+                </label>
+                <p-iconField iconPosition="left" class="w-full">
+                    <p-inputIcon>
+                        <span
+                            class="material-symbols-rounded text-lg! leading-none"
+                            aria-hidden="true">
+                            public
+                        </span>
+                    </p-inputIcon>
+                    <input
+                        pInputText
+                        id="users-profile-website"
+                        formControlName="website"
+                        class="w-full"
+                        [placeholder]="'users.dialog.field.website.placeholder' | dm"
+                        data-testid="users-profile-website" />
+                </p-iconField>
+            </div>
+        </div>
+    </section>
+
+    <section
+        [formGroup]="accessGroup()"
+        class="flex flex-col gap-2 rounded-lg border border-surface-200 p-6"
+        data-testid="users-profile-access-section">
+        <header class="mb-2 flex flex-col gap-1">
+            <h3 class="m-0 text-base font-semibold">
+                {{ 'users.dialog.section.access' | dm }}
+            </h3>
+            <p class="text-color-secondary m-0 text-sm">
+                {{ 'users.dialog.section.access.description' | dm }}
+            </p>
+        </header>
+
+        @for (row of accessRows; track row.key) {
+            <div
+                class="flex items-center justify-between gap-4 border-b border-surface-100 py-3 last:border-b-0"
+                [attr.data-testid]="'users-profile-access-row-' + row.key">
+                <div class="flex flex-col gap-1">
+                    <span class="font-medium">{{ row.titleKey | dm }}</span>
+                    <span class="text-color-secondary text-sm">
+                        {{ row.descriptionKey | dm }}
+                    </span>
+                </div>
+                <p-toggleswitch
+                    [formControlName]="row.key"
+                    [attr.data-testid]="'users-profile-access-toggle-' + row.key" />
+            </div>
+        }
+    </section>
+
+    @if (isEdit()) {
+        <section
+            class="flex items-center justify-between gap-4 rounded-lg border border-red-200 bg-red-50/40 p-6"
+            data-testid="users-profile-delete-section">
+            <div class="flex flex-col gap-1">
+                <span class="font-medium text-red-600">
+                    {{ 'users.dialog.delete.title' | dm }}
+                </span>
+                <span class="text-color-secondary text-sm">
+                    {{ 'users.dialog.delete.description' | dm }}
+                </span>
+            </div>
+            <p-button
+                [label]="'users.dialog.delete.button' | dm"
+                severity="danger"
+                [outlined]="true"
+                size="small"
+                (onClick)="onDeleteClick()"
+                data-testid="users-profile-delete-btn">
+                <ng-template pTemplate="icon">
+                    <span class="material-symbols-rounded text-base!" aria-hidden="true">
+                        delete
+                    </span>
+                </ng-template>
+            </p-button>
+        </section>
+    }
+</form>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.scss b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.scss
new file mode 100644
index 000000000000..88dffc3f949e
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.scss
@@ -0,0 +1,9 @@
+:host ::ng-deep p-password .p-password,
+:host ::ng-deep p-password .p-password-input {
+    width: 100%;
+}
+
+:host ::ng-deep p-iconfield {
+    display: block;
+    width: 100%;
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
new file mode 100644
index 000000000000..5e85ed00b69f
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
@@ -0,0 +1,112 @@
+import { DatePipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, computed, input, output, signal } from '@angular/core';
+import { FormGroup, ReactiveFormsModule } from '@angular/forms';
+
+import { ButtonModule } from 'primeng/button';
+import { IconFieldModule } from 'primeng/iconfield';
+import { InputIconModule } from 'primeng/inputicon';
+import { InputTextModule } from 'primeng/inputtext';
+import { PasswordModule } from 'primeng/password';
+import { ToggleSwitchModule } from 'primeng/toggleswitch';
+
+import { DotFieldRequiredDirective, DotMessagePipe } from '@dotcms/ui';
+
+import { DotUserListItem } from '../../../services/dot-users.service';
+import { generateSecurePassword } from '../../dot-users-form.model';
+
+interface AccessRow {
+    key: 'cmsAdmin' | 'backend' | 'frontend' | 'canLogin' | 'showGettingStarted';
+    titleKey: string;
+    descriptionKey: string;
+}
+
+const ACCESS_ROWS: AccessRow[] = [
+    {
+        key: 'cmsAdmin',
+        titleKey: 'users.dialog.toggle.cms-admin.title',
+        descriptionKey: 'users.dialog.toggle.cms-admin.description'
+    },
+    {
+        key: 'backend',
+        titleKey: 'users.dialog.toggle.backend.title',
+        descriptionKey: 'users.dialog.toggle.backend.description'
+    },
+    {
+        key: 'frontend',
+        titleKey: 'users.dialog.toggle.frontend.title',
+        descriptionKey: 'users.dialog.toggle.frontend.description'
+    },
+    {
+        key: 'canLogin',
+        titleKey: 'users.dialog.toggle.can-login.title',
+        descriptionKey: 'users.dialog.toggle.can-login.description'
+    },
+    {
+        key: 'showGettingStarted',
+        titleKey: 'users.dialog.toggle.show-getting-started.title',
+        descriptionKey: 'users.dialog.toggle.show-getting-started.description'
+    }
+];
+
+/**
+ * Profile tab of the Create/Edit User dialog. Owns the visuals — the
+ * shell component owns the `FormGroup` reference and dispatches saves,
+ * so this component stays purely presentational and testable in
+ * isolation.
+ */
+@Component({
+    selector: 'dot-users-profile-tab',
+    standalone: true,
+    imports: [
+        DatePipe,
+        ReactiveFormsModule,
+        ButtonModule,
+        IconFieldModule,
+        InputIconModule,
+        InputTextModule,
+        PasswordModule,
+        ToggleSwitchModule,
+        DotFieldRequiredDirective,
+        DotMessagePipe
+    ],
+    templateUrl: './dot-users-profile-tab.component.html',
+    styleUrl: './dot-users-profile-tab.component.scss',
+    changeDetection: ChangeDetectionStrategy.OnPush,
+    host: { class: 'flex flex-col gap-6 block' }
+})
+export class DotUsersProfileTabComponent {
+    readonly form = input.required<FormGroup>();
+    readonly isEdit = input<boolean>(false);
+    readonly user = input<DotUserListItem | null>(null);
+
+    readonly deleteRequested = output<void>();
+
+    /**
+     * The confirmation dialog for Delete User is rendered by the shell,
+     * but the section itself lives inside the Profile tab. Emit an event
+     * up so the shell can decide how to prompt.
+     */
+    protected onDeleteClick(): void {
+        this.deleteRequested.emit();
+    }
+
+    protected readonly accessRows = ACCESS_ROWS;
+
+    protected readonly showPassword = signal(false);
+
+    protected readonly accountGroup = computed(() => this.form().get('account') as FormGroup);
+
+    protected readonly additionalInfoGroup = computed(
+        () => this.form().get('additionalInfo') as FormGroup
+    );
+
+    protected readonly accessGroup = computed(() => this.form().get('access') as FormGroup);
+
+    protected onGeneratePassword(): void {
+        const password = generateSecurePassword();
+        const account = this.accountGroup();
+        account.patchValue({ password, confirmPassword: password });
+        account.get('password')?.markAsDirty();
+        account.get('confirmPassword')?.markAsDirty();
+    }
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
index e819bfc7d416..ecd6cfb3e1f9 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
@@ -177,4 +177,51 @@ <h3 class="m-0 text-lg font-medium text-gray-800">
     </p-table>
 </div>
 
-<p-confirmDialog [draggable]="false" [position]="'center'" [style]="{ width: '500px' }" />
+<p-dialog
+    [visible]="bulkDeleteVisible()"
+    (visibleChange)="bulkDeleteVisible.set($event)"
+    [modal]="true"
+    [closable]="true"
+    [closeOnEscape]="true"
+    [draggable]="false"
+    [style]="{ width: '500px' }"
+    [header]="'users.confirm.delete.header' | dm"
+    data-testid="users-bulk-delete-dialog">
+    <div class="flex flex-col gap-4">
+        <p class="m-0 text-color">
+            {{
+                'users.confirm.delete.message'
+                    | dm: [store.selectedUsers().length.toString()]
+            }}
+        </p>
+        <div class="field flex flex-col gap-2">
+            <label for="users-bulk-delete-replacement-picker">
+                {{ 'users.dialog.delete-confirm.replacement-label' | dm }}
+                <span class="text-red-500" aria-hidden="true">*</span>
+            </label>
+            <dot-users-replacement-picker
+                inputId="users-bulk-delete-replacement-picker"
+                [value]="bulkReplacementUser()"
+                [excludedUserIds]="bulkExcludedIds()"
+                (selectionChange)="onBulkReplacementSelect($event)"
+                data-testid="users-bulk-delete-replacement-picker" />
+            <small class="text-color-secondary">
+                {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
+            </small>
+        </div>
+    </div>
+    <ng-template pTemplate="footer">
+        <p-button
+            [label]="'users.cancel' | dm"
+            severity="secondary"
+            [text]="true"
+            (onClick)="closeBulkDelete()"
+            data-testid="users-bulk-delete-cancel-btn" />
+        <p-button
+            [label]="'users.delete' | dm"
+            severity="danger"
+            [disabled]="!canConfirmBulkDelete()"
+            (onClick)="confirmBulkDelete()"
+            data-testid="users-bulk-delete-confirm-btn" />
+    </ng-template>
+</p-dialog>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
index c31b84c0db8c..3aa1b29a70fe 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
@@ -1,6 +1,6 @@
 import { byTestId, createComponentFactory, mockProvider, Spectator } from '@openng/spectator/jest';
+import { of } from 'rxjs';
 
-import { ConfirmationService } from 'primeng/api';
 import { DialogService } from 'primeng/dynamicdialog';
 
 import { DotMessageService } from '@dotcms/data-access';
@@ -9,7 +9,7 @@ import { MockDotMessageService } from '@dotcms/utils-testing';
 import { DotUsersListComponent } from './dot-users-list.component';
 import { DotUsersListStore } from './store/dot-users-list.store';
 
-import { DotUserListItem } from '../services/dot-users.service';
+import { DotUserListItem, DotUsersService } from '../services/dot-users.service';
 
 const MOCK_USERS: DotUserListItem[] = [
     {
@@ -121,14 +121,25 @@ describe('DotUsersListComponent', () => {
                 open: jest
                     .fn()
                     .mockReturnValue({ onClose: { pipe: () => ({ subscribe: jest.fn() }) } })
-            }),
-            ConfirmationService
+            })
         ],
         providers: [
             {
                 provide: DotMessageService,
                 useValue: new MockDotMessageService(MESSAGES)
-            }
+            },
+            mockProvider(DotUsersService, {
+                getUsersPaginated: jest.fn().mockReturnValue(
+                    of({
+                        entity: [],
+                        errors: [],
+                        messages: [],
+                        permissions: [],
+                        i18nMessagesMap: {},
+                        pagination: { currentPage: 1, perPage: 10, totalEntries: 0 }
+                    })
+                )
+            })
         ]
     });
 
@@ -191,4 +202,57 @@ describe('DotUsersListComponent', () => {
             expect.objectContaining({ data: { user: MOCK_USERS[0] } })
         );
     });
+
+    describe('bulk delete', () => {
+        const REPLACEMENT: DotUserListItem = {
+            ...MOCK_USERS[0],
+            userId: 'dotcms.org.42',
+            id: 'dotcms.org.42',
+            emailAddress: 'ops@dotcms.com'
+        };
+
+        it('confirmDelete should open the bulk delete dialog and reset the replacement', () => {
+            spectator.component['bulkReplacementUser'].set(REPLACEMENT);
+
+            spectator.component.confirmDelete();
+
+            expect(spectator.component['bulkDeleteVisible']()).toBe(true);
+            expect(spectator.component['bulkReplacementUser']()).toBeNull();
+        });
+
+        it('canConfirmBulkDelete should require a replacement not in the selection', () => {
+            const store = spectator.inject(DotUsersListStore, true);
+            (store.selectedUsers as jest.Mock).mockReturnValue([MOCK_USERS[0]]);
+            spectator.detectChanges();
+
+            expect(spectator.component['canConfirmBulkDelete']()).toBe(false);
+
+            spectator.component.onBulkReplacementSelect(MOCK_USERS[0]);
+            expect(spectator.component['canConfirmBulkDelete']()).toBe(false);
+
+            spectator.component.onBulkReplacementSelect(REPLACEMENT);
+            expect(spectator.component['canConfirmBulkDelete']()).toBe(true);
+        });
+
+        it('confirmBulkDelete should forward the replacement id to the store and close', () => {
+            const store = spectator.inject(DotUsersListStore, true);
+            (store.selectedUsers as jest.Mock).mockReturnValue([MOCK_USERS[0]]);
+            spectator.detectChanges();
+
+            spectator.component.onBulkReplacementSelect(REPLACEMENT);
+            spectator.component.confirmBulkDelete();
+
+            expect(store.deleteSelectedUsers).toHaveBeenCalledWith('dotcms.org.42');
+            expect(spectator.component['bulkDeleteVisible']()).toBe(false);
+        });
+
+        it('confirmBulkDelete should no-op when no replacement was picked', () => {
+            const store = spectator.inject(DotUsersListStore, true);
+            (store.deleteSelectedUsers as jest.Mock).mockClear();
+
+            spectator.component.confirmBulkDelete();
+
+            expect(store.deleteSelectedUsers).not.toHaveBeenCalled();
+        });
+    });
 });
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
index a9cb42fe47d1..2b2f24fc48da 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
@@ -1,14 +1,20 @@
 import { Subject } from 'rxjs';
 
 import { DatePipe } from '@angular/common';
-import { ChangeDetectionStrategy, Component, DestroyRef, inject } from '@angular/core';
+import {
+    ChangeDetectionStrategy,
+    Component,
+    computed,
+    DestroyRef,
+    inject,
+    signal
+} from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormsModule } from '@angular/forms';
 
-import { ConfirmationService } from 'primeng/api';
 import { AvatarModule } from 'primeng/avatar';
 import { ButtonModule } from 'primeng/button';
-import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
 import { DialogService } from 'primeng/dynamicdialog';
 import { IconFieldModule } from 'primeng/iconfield';
 import { InputIconModule } from 'primeng/inputicon';
@@ -26,7 +32,11 @@ import { DotMessagePipe } from '@dotcms/ui';
 import { DotUsersFilterByComponent } from './components/dot-users-filter-by/dot-users-filter-by.component';
 import { DotUsersListStore } from './store/dot-users-list.store';
 
-import { DotUsersCreateComponent } from '../dot-users-create/dot-users-create.component';
+import { DotUsersReplacementPickerComponent } from '../components/dot-users-replacement-picker/dot-users-replacement-picker.component';
+import {
+    DotUsersCreateComponent,
+    DotUsersDialogResult
+} from '../dot-users-create/dot-users-create.component';
 import { DotUserListItem } from '../services/dot-users.service';
 
 @Component({
@@ -38,18 +48,19 @@ import { DotUserListItem } from '../services/dot-users.service';
         TableModule,
         AvatarModule,
         ButtonModule,
+        DialogModule,
         InputTextModule,
         IconFieldModule,
         InputIconModule,
-        ConfirmDialogModule,
         SkeletonModule,
         TagModule,
         ToolbarModule,
         DotMessagePipe,
-        DotUsersFilterByComponent
+        DotUsersFilterByComponent,
+        DotUsersReplacementPickerComponent
     ],
     templateUrl: './dot-users-list.component.html',
-    providers: [DotUsersListStore, DialogService, ConfirmationService],
+    providers: [DotUsersListStore, DialogService],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'flex flex-col h-full min-h-0' }
 })
@@ -57,12 +68,32 @@ export class DotUsersListComponent {
     readonly store = inject(DotUsersListStore);
 
     private readonly dialogService = inject(DialogService);
-    private readonly confirmationService = inject(ConfirmationService);
     private readonly dotMessageService = inject(DotMessageService);
     private readonly destroyRef = inject(DestroyRef);
 
     private readonly searchSubject = new Subject<string>();
 
+    protected readonly bulkDeleteVisible = signal(false);
+    protected readonly bulkReplacementUser = signal<DotUserListItem | null>(null);
+
+    /**
+     * The picker must never surface any user currently selected for
+     * deletion — same rule as the single-delete flow but generalized
+     * to the whole selection.
+     */
+    protected readonly bulkExcludedIds = computed(() =>
+        this.store.selectedUsers().map((user) => user.userId)
+    );
+
+    protected readonly canConfirmBulkDelete = computed(() => {
+        const replacement = this.bulkReplacementUser();
+        if (!replacement) {
+            return false;
+        }
+
+        return !this.bulkExcludedIds().includes(replacement.userId);
+    });
+
     constructor() {
         this.searchSubject
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
@@ -89,53 +120,72 @@ export class DotUsersListComponent {
     }
 
     openCreateDialog(): void {
-        const ref = this.dialogService.open(DotUsersCreateComponent, {
-            header: this.dotMessageService.get('users.create.header'),
-            width: '700px',
-            closable: true,
-            closeOnEscape: true,
-            draggable: false,
-            position: 'center'
-        });
-
-        ref?.onClose.pipe(take(1)).subscribe(() => {
-            // Create dialog is delivered by sibling ticket #36717 (Profile tab).
-            // Once wired, reload the list here on success.
-        });
+        this.openUserDialog();
     }
 
     openEditDialog(user: DotUserListItem): void {
+        this.openUserDialog(user);
+    }
+
+    /**
+     * The create/edit dialog hosts four tabs (Profile, Roles,
+     * Permissions, API Tokens) plus a legacy JSP iframe for
+     * Permissions, so it opens at the "Special" width bucket
+     * documented in `libs/portlets/CLAUDE.md` — much wider than the
+     * standard 700px form dialog.
+     */
+    private openUserDialog(user?: DotUserListItem): void {
         const ref = this.dialogService.open(DotUsersCreateComponent, {
-            header: this.dotMessageService.get('users.edit.header'),
-            width: '700px',
-            data: { user },
+            header: this.dotMessageService.get(user ? 'users.edit.header' : 'users.create.header'),
+            width: 'min(92vw, 75rem)',
+            height: 'min(90vh, 48rem)',
+            data: user ? { user } : undefined,
             closable: true,
             closeOnEscape: true,
             draggable: false,
-            position: 'center'
+            position: 'center',
+            contentStyle: { padding: '0', overflow: 'hidden' },
+            styleClass: 'p-dialog-content-flush'
         });
 
-        ref?.onClose.pipe(take(1)).subscribe(() => {
-            // Edit dialog delivered by sibling tickets.
+        ref?.onClose.pipe(take(1)).subscribe((result: DotUsersDialogResult | undefined) => {
+            if (!result) {
+                return;
+            }
+
+            if (result.action === 'save') {
+                if (result.mode === 'create') {
+                    this.store.createUser(result.payload);
+                } else {
+                    this.store.updateUser(result.payload);
+                }
+            } else if (result.action === 'delete') {
+                this.store.deleteSingleUser(result.userId, result.replacementUserId);
+            }
         });
     }
 
     confirmDelete(): void {
-        const count = this.store.selectedUsers().length;
-
-        this.confirmationService.confirm({
-            message: this.dotMessageService.get('users.confirm.delete.message', `${count}`),
-            header: this.dotMessageService.get('users.confirm.delete.header'),
-            acceptLabel: this.dotMessageService.get('users.delete'),
-            rejectLabel: this.dotMessageService.get('users.cancel'),
-            acceptButtonStyleClass: 'p-button-danger',
-            rejectButtonStyleClass: 'p-button-text',
-            defaultFocus: 'reject',
-            closable: true,
-            closeOnEscape: true,
-            position: 'center',
-            accept: () => this.store.deleteSelectedUsers()
-        });
+        this.bulkReplacementUser.set(null);
+        this.bulkDeleteVisible.set(true);
+    }
+
+    closeBulkDelete(): void {
+        this.bulkDeleteVisible.set(false);
+    }
+
+    onBulkReplacementSelect(user: DotUserListItem | null): void {
+        this.bulkReplacementUser.set(user);
+    }
+
+    confirmBulkDelete(): void {
+        const replacement = this.bulkReplacementUser();
+        if (!this.canConfirmBulkDelete() || !replacement) {
+            return;
+        }
+
+        this.bulkDeleteVisible.set(false);
+        this.store.deleteSelectedUsers(replacement.userId);
     }
 
     initials(user: DotUserListItem): string {
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
index fe2dbd08981c..3705c4aa519b 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
@@ -14,8 +14,11 @@ import { DotUsersListStore } from './dot-users-list.store';
 import { DotUserListItem, DotUsersService } from '../../services/dot-users.service';
 
 const MESSAGES = {
-    'users.delete.success': 'Deleted {0} user(s).',
-    'users.delete.partial-success': 'Deleted {0} of {1} users. {2} failed.'
+    'users.delete.success.one': 'User deleted.',
+    'users.delete.success.many': 'Deleted {0} users.',
+    'users.delete.partial-success': 'Deleted {0} of {1} users. {2} failed.',
+    'users.create.success': 'User created.',
+    'users.update.success': 'User updated.'
 };
 
 const MOCK_USERS: DotUserListItem[] = [
@@ -76,7 +79,9 @@ describe('DotUsersListStore', () => {
         providers: [
             mockProvider(DotUsersService, {
                 getUsersPaginated: jest.fn().mockReturnValue(of(MOCK_RESPONSE)),
-                deleteUser: jest.fn().mockReturnValue(of({}))
+                deleteUser: jest.fn().mockReturnValue(of({})),
+                createUser: jest.fn().mockReturnValue(of(MOCK_USERS[0])),
+                updateUser: jest.fn().mockReturnValue(of(MOCK_USERS[0]))
             }),
             mockProvider(DotHttpErrorManagerService),
             mockProvider(DotMessageDisplayService, { push: jest.fn() }),
@@ -93,6 +98,8 @@ describe('DotUsersListStore', () => {
         jest.clearAllMocks();
         usersService.getUsersPaginated.mockReturnValue(of(MOCK_RESPONSE));
         usersService.deleteUser.mockReturnValue(of({}));
+        usersService.createUser.mockReturnValue(of(MOCK_USERS[0]));
+        usersService.updateUser.mockReturnValue(of(MOCK_USERS[0]));
     });
 
     it('loadUsers passes the current state as query params', () => {
@@ -188,15 +195,29 @@ describe('DotUsersListStore', () => {
 
         store.deleteSelectedUsers();
 
-        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.1');
-        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.2');
+        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.1', undefined);
+        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.2', undefined);
         expect(store.selectedUsers()).toEqual([]);
         expect(usersService.getUsersPaginated).toHaveBeenCalled();
         expect(messageDisplay.push).toHaveBeenCalledWith(
             expect.objectContaining({
                 severity: DotMessageSeverity.SUCCESS,
                 type: DotMessageType.SIMPLE_MESSAGE,
-                message: 'Deleted 2 user(s).'
+                message: 'Deleted 2 users.'
+            })
+        );
+    });
+
+    it('deleteSelectedUsers should push the singular success toast when only one is deleted', () => {
+        const messageDisplay = spectator.inject(DotMessageDisplayService);
+        store.setSelectedUsers([MOCK_USERS[0]]);
+
+        store.deleteSelectedUsers();
+
+        expect(messageDisplay.push).toHaveBeenCalledWith(
+            expect.objectContaining({
+                severity: DotMessageSeverity.SUCCESS,
+                message: 'User deleted.'
             })
         );
     });
@@ -262,4 +283,88 @@ describe('DotUsersListStore', () => {
         expect(store.status()).toBe('error');
         expect(errorManager.handle).toHaveBeenCalled();
     });
+
+    it('createUser should call the service, push a success toast, and reload the list', () => {
+        const messageDisplay = spectator.inject(DotMessageDisplayService);
+        usersService.getUsersPaginated.mockClear();
+
+        store.createUser({
+            firstName: 'Ada',
+            lastName: 'Lovelace',
+            email: 'ada@dotcms.com',
+            active: true,
+            password: 'Xy7#abcdef'
+        });
+
+        expect(usersService.createUser).toHaveBeenCalledWith(
+            expect.objectContaining({ firstName: 'Ada', email: 'ada@dotcms.com' })
+        );
+        expect(messageDisplay.push).toHaveBeenCalledWith(
+            expect.objectContaining({
+                severity: DotMessageSeverity.SUCCESS,
+                message: 'User created.'
+            })
+        );
+        expect(usersService.getUsersPaginated).toHaveBeenCalled();
+    });
+
+    it('createUser should surface HTTP errors and keep the list in `loaded`', () => {
+        const errorManager = spectator.inject(DotHttpErrorManagerService);
+        usersService.createUser.mockReturnValueOnce(throwError(() => new Error('boom')));
+
+        store.createUser({
+            firstName: 'Ada',
+            lastName: 'Lovelace',
+            email: 'ada@dotcms.com',
+            active: true
+        });
+
+        expect(errorManager.handle).toHaveBeenCalled();
+        expect(store.status()).toBe('loaded');
+    });
+
+    it('updateUser should call the service, push a success toast, and reload the list', () => {
+        const messageDisplay = spectator.inject(DotMessageDisplayService);
+        usersService.getUsersPaginated.mockClear();
+
+        store.updateUser({
+            userId: 'dotcms.org.1',
+            firstName: 'Admin',
+            lastName: 'User',
+            email: 'admin@dotcms.com',
+            active: true
+        });
+
+        expect(usersService.updateUser).toHaveBeenCalledWith(
+            expect.objectContaining({ userId: 'dotcms.org.1' })
+        );
+        expect(messageDisplay.push).toHaveBeenCalledWith(
+            expect.objectContaining({
+                severity: DotMessageSeverity.SUCCESS,
+                message: 'User updated.'
+            })
+        );
+        expect(usersService.getUsersPaginated).toHaveBeenCalled();
+    });
+
+    it('deleteSingleUser should forward the replacementUserId when provided', () => {
+        const messageDisplay = spectator.inject(DotMessageDisplayService);
+        usersService.getUsersPaginated.mockClear();
+
+        store.deleteSingleUser('dotcms.org.1', 'dotcms.org.42');
+
+        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.1', 'dotcms.org.42');
+        expect(messageDisplay.push).toHaveBeenCalled();
+        expect(usersService.getUsersPaginated).toHaveBeenCalled();
+    });
+
+    it('deleteSelectedUsers should forward the replacementUserId to every delete call', () => {
+        store.setSelectedUsers([MOCK_USERS[0], MOCK_USERS[1]]);
+        usersService.deleteUser.mockClear();
+
+        store.deleteSelectedUsers('dotcms.org.42');
+
+        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.1', 'dotcms.org.42');
+        expect(usersService.deleteUser).toHaveBeenCalledWith('dotcms.org.2', 'dotcms.org.42');
+    });
 });
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
index 318250aa92e5..c01a81fe27ae 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
@@ -13,7 +13,11 @@ import {
 } from '@dotcms/data-access';
 import { DotMessageSeverity, DotMessageType } from '@dotcms/dotcms-models';
 
-import { DotUserListItem, DotUsersService } from '../../services/dot-users.service';
+import {
+    DotUserFormPayload,
+    DotUserListItem,
+    DotUsersService
+} from '../../services/dot-users.service';
 
 export type DotUsersListStatus = 'init' | 'loading' | 'loaded' | 'error';
 
@@ -136,7 +140,86 @@ export const DotUsersListStore = signalStore(
                 patchState(store, { selectedUsers: users });
             },
 
-            deleteSelectedUsers() {
+            /**
+             * Creates a new user and reloads the list on success. Errors are
+             * surfaced through the shared HTTP error manager; the list stays
+             * in `loaded` state so the user can retry from the same dialog.
+             */
+            createUser(payload: DotUserFormPayload) {
+                patchState(store, { status: 'loading' });
+                usersService
+                    .createUser(payload)
+                    .pipe(take(1))
+                    .subscribe({
+                        next: () => {
+                            messageDisplayService.push({
+                                life: 5000,
+                                severity: DotMessageSeverity.SUCCESS,
+                                message: messageService.get('users.create.success'),
+                                type: DotMessageType.SIMPLE_MESSAGE
+                            });
+                            loadUsers();
+                        },
+                        error: (error) => {
+                            httpErrorManager.handle(error);
+                            patchState(store, { status: 'loaded' });
+                        }
+                    });
+            },
+
+            /**
+             * Updates a user and reloads the list on success. Same error
+             * contract as `createUser`.
+             */
+            updateUser(payload: DotUserFormPayload) {
+                patchState(store, { status: 'loading' });
+                usersService
+                    .updateUser(payload)
+                    .pipe(take(1))
+                    .subscribe({
+                        next: () => {
+                            messageDisplayService.push({
+                                life: 5000,
+                                severity: DotMessageSeverity.SUCCESS,
+                                message: messageService.get('users.update.success'),
+                                type: DotMessageType.SIMPLE_MESSAGE
+                            });
+                            loadUsers();
+                        },
+                        error: (error) => {
+                            httpErrorManager.handle(error);
+                            patchState(store, { status: 'loaded' });
+                        }
+                    });
+            },
+
+            /**
+             * Single-user delete dispatched from the dialog footer. Separate
+             * from `deleteSelectedUsers`, which acts on the bulk-selection.
+             */
+            deleteSingleUser(userId: string, replacementUserId?: string) {
+                patchState(store, { status: 'loading' });
+                usersService
+                    .deleteUser(userId, replacementUserId)
+                    .pipe(take(1))
+                    .subscribe({
+                        next: () => {
+                            messageDisplayService.push({
+                                life: 5000,
+                                severity: DotMessageSeverity.SUCCESS,
+                                message: messageService.get('users.delete.success.one'),
+                                type: DotMessageType.SIMPLE_MESSAGE
+                            });
+                            loadUsers();
+                        },
+                        error: (error) => {
+                            httpErrorManager.handle(error);
+                            patchState(store, { status: 'loaded' });
+                        }
+                    });
+            },
+
+            deleteSelectedUsers(replacementUserId?: string) {
                 const selected = store.selectedUsers();
                 if (selected.length === 0 || store.status() === 'loading') {
                     return;
@@ -144,7 +227,7 @@ export const DotUsersListStore = signalStore(
                 patchState(store, { status: 'loading' });
 
                 const deletions = selected.map((user) =>
-                    usersService.deleteUser(user.userId).pipe(
+                    usersService.deleteUser(user.userId, replacementUserId).pipe(
                         take(1),
                         map(() => true),
                         catchError((error) => {
@@ -163,9 +246,13 @@ export const DotUsersListStore = signalStore(
                         const failureCount = total - successCount;
 
                         if (successCount > 0) {
+                            const successKey =
+                                successCount === 1
+                                    ? 'users.delete.success.one'
+                                    : 'users.delete.success.many';
                             const message =
                                 failureCount === 0
-                                    ? messageService.get('users.delete.success', `${successCount}`)
+                                    ? messageService.get(successKey, `${successCount}`)
                                     : messageService.get(
                                           'users.delete.partial-success',
                                           `${successCount}`,
diff --git a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
index b58cb55908eb..0c2d59b83620 100644
--- a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
@@ -3,6 +3,8 @@ import { Observable } from 'rxjs';
 import { HttpClient, HttpParams } from '@angular/common/http';
 import { Injectable, inject } from '@angular/core';
 
+import { map } from 'rxjs/operators';
+
 import { DotCMSAPIResponse } from '@dotcms/dotcms-models';
 
 /**
@@ -30,6 +32,71 @@ export interface DotUserListItem {
     failedLoginAttempts: number | null;
 }
 
+/**
+ * Full user payload returned by GET /api/v1/users/{userId}. Includes
+ * every field User#toMap() populates — additional info, birthday, etc.
+ * — which are absent from the list response. `additionalInfo` is a
+ * free-form map keyed by whatever the caller decided to store; the
+ * dialog treats `prefix`, `suffix`, `title`, `company`, `website` as
+ * conventional keys.
+ */
+export interface DotUserDetail extends DotUserListItem {
+    birthday: string | null;
+    middleName: string | null;
+    nickname: string | null;
+    languageId: string | null;
+    timeZoneId: string | null;
+    male: boolean | null;
+    female: boolean | null;
+    additionalInfo: Record<string, unknown> | null;
+    createDate: number | null;
+    modificationDate: number | null;
+}
+
+/**
+ * Payload accepted by both POST /api/v1/users (create) and PUT
+ * /api/v1/users (update). Mirrors com.dotcms.rest.api.v1.user.UserForm.
+ *
+ * Contract notes:
+ * - Create requires `password`; update leaves it optional and skips the
+ *   password mutation when omitted.
+ * - Omitting `roles` on update means "do not touch role membership".
+ *   A non-empty `roles` list REPLACES the user's role membership
+ *   entirely (see UserResource#processRoles).
+ */
+export interface DotUserFormPayload {
+    userId?: string;
+    firstName: string;
+    lastName: string;
+    email: string;
+    active: boolean;
+    password?: string;
+    middleName?: string;
+    nickName?: string;
+    birthday?: string;
+    languageId?: string;
+    timeZoneId?: string;
+    male?: boolean;
+    additionalInfo?: Record<string, unknown>;
+    roles?: string[];
+}
+
+interface DotUserDetailResponse {
+    entity: {
+        userId: string;
+        user: DotUserDetail;
+        roleId: string;
+    };
+}
+
+interface DotUserUpdateResponse {
+    entity: {
+        userId: string;
+        user: DotUserDetail;
+        roleId?: string;
+    };
+}
+
 export interface DotUsersPaginatedParams {
     filter?: string;
     page?: number;
@@ -83,4 +150,28 @@ export class DotUsersService {
 
         return this.#http.delete(`/api/v1/users/${encodeURIComponent(userId)}`, { params });
     }
+
+    /**
+     * Fetches the full user payload used to hydrate the edit dialog.
+     * The list response omits `additionalInfo`, `birthday`, and other
+     * profile-only fields, so the dialog must re-fetch even when it
+     * already has a `DotUserListItem` from the row click.
+     */
+    getUser(userId: string): Observable<DotUserDetail> {
+        return this.#http
+            .get<DotUserDetailResponse>(`/api/v1/users/${encodeURIComponent(userId)}`)
+            .pipe(map((response) => response.entity.user));
+    }
+
+    createUser(payload: DotUserFormPayload): Observable<DotUserDetail> {
+        return this.#http
+            .post<DotUserUpdateResponse>('/api/v1/users', payload)
+            .pipe(map((response) => response.entity.user));
+    }
+
+    updateUser(payload: DotUserFormPayload): Observable<DotUserDetail> {
+        return this.#http
+            .put<DotUserUpdateResponse>('/api/v1/users', payload)
+            .pipe(map((response) => response.entity.user));
+    }
 }
diff --git a/core-web/libs/portlets/dot-users/src/test-setup.ts b/core-web/libs/portlets/dot-users/src/test-setup.ts
index b13563bb93c0..7a07ffc7f82f 100644
--- a/core-web/libs/portlets/dot-users/src/test-setup.ts
+++ b/core-web/libs/portlets/dot-users/src/test-setup.ts
@@ -1,6 +1,12 @@
 import { setupZoneTestEnv } from 'jest-preset-angular/setup-env/zone';
 
+import { setupResizeObserverMock } from '@dotcms/utils-testing';
+
 setupZoneTestEnv({
     errorOnUnknownElements: true,
     errorOnUnknownProperties: true
 });
+
+// PrimeNG p-tabs uses ResizeObserver internally; jsdom does not
+// implement it, so we install the shared mock before any test runs.
+setupResizeObserverMock();
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index 99a8877b6f11..a13734125496 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -7456,13 +7456,83 @@ users.table.header.access=Access
 users.table.header.last-login=Last login
 users.confirm.delete.header=Delete users
 users.confirm.delete.message=Are you sure you want to delete {0} user(s)?
-users.delete.success=Deleted {0} user(s).
+users.delete.success.one=User deleted.
+users.delete.success.many=Deleted {0} users.
 users.delete.partial-success=Deleted {0} of {1} users. {2} failed.
+users.create.success=User created.
+users.update.success=User updated.
 users.empty.state.title=No users yet
 users.empty.state.description=Create a user to get started.
 users.create.header=Create User
 users.edit.header=Edit User
 users.dialog.stub.message=The user profile dialog is coming in a follow-up ticket.
+users.dialog.tabs.profile=Profile
+users.dialog.tabs.roles=Roles
+users.dialog.tabs.permissions=Permissions
+users.dialog.tabs.api-tokens=API Tokens
+users.dialog.tabs.coming-soon=Coming soon
+users.dialog.new-user=New User
+users.dialog.untitled-user=Untitled User
+users.dialog.status.active=Active
+users.dialog.status.inactive=Inactive
+users.dialog.create.subtitle=Fill in the details below to create this user
+users.dialog.save=Save Changes
+users.dialog.create=Create User
+users.dialog.metadata.user-id=User ID
+users.dialog.metadata.last-login=Last Login
+users.dialog.metadata.failed-logins=Failed Logins
+users.dialog.metadata.never=Never
+users.dialog.section.account=Account
+users.dialog.section.account.description=Identity and sign-in credentials.
+users.dialog.section.additional-info=Additional information
+users.dialog.section.additional-info.description=Optional profile metadata.
+users.dialog.section.access=Access
+users.dialog.section.access.description=Where and how this user can sign in.
+users.dialog.field.first-name=First name
+users.dialog.field.first-name.placeholder=Jane
+users.dialog.field.last-name=Last name
+users.dialog.field.last-name.placeholder=Doe
+users.dialog.field.email=Email address
+users.dialog.field.email.placeholder=jane@dotcms.com
+users.dialog.field.password=Password
+users.dialog.field.password.help=Leave blank to keep the current password.
+users.dialog.field.confirm-password=Confirm password
+users.dialog.field.generate-password=Generate secure password
+users.dialog.field.prefix=Prefix
+users.dialog.field.prefix.placeholder=Dr.
+users.dialog.field.suffix=Suffix
+users.dialog.field.suffix.placeholder=Jr.
+users.dialog.field.title=Title
+users.dialog.field.title.placeholder=Content Strategist
+users.dialog.field.company=Company
+users.dialog.field.company.placeholder=dotCMS
+users.dialog.field.website=Website
+users.dialog.field.website.placeholder=https://
+users.dialog.toggle.active.title=Active
+users.dialog.toggle.active.description=User can authenticate. Inactive users keep their data but cannot log in.
+users.dialog.toggle.cms-admin.title=CMS Administrator
+users.dialog.toggle.cms-admin.description=Grants full administrative access to every tool and site.
+users.dialog.toggle.backend.title=Back-end User
+users.dialog.toggle.backend.description=Can sign in to the dotCMS admin (back office).
+users.dialog.toggle.frontend.title=Front-end User
+users.dialog.toggle.frontend.description=Can authenticate on front-end sites and member areas.
+users.dialog.toggle.can-login.title=Can Login to Admin UI
+users.dialog.toggle.can-login.description=Allow this user to reach the admin login screen.
+users.dialog.toggle.show-getting-started.title=Show Getting Started
+users.dialog.toggle.show-getting-started.description=Display the onboarding panel after login.
+users.dialog.delete.title=Delete User
+users.dialog.delete.description=Permanently remove this user and all associated data. This action cannot be undone.
+users.dialog.delete.button=Delete User
+users.dialog.delete-confirm.header=Delete user
+users.dialog.delete-confirm.message=Any content owned by this user will be reassigned to the replacement you pick below. Type the user's email to confirm deletion. This action cannot be undone.
+users.dialog.delete-confirm.replacement-label=Replacement user
+users.dialog.delete-confirm.replacement-placeholder=Search by name or email
+users.dialog.delete-confirm.replacement-help=Ownership of any content, sites, or assets the deleted user holds will transfer to this user.
+users.dialog.delete-confirm.confirm-label=Confirmation
+users.dialog.delete-confirm.confirm-placeholder=Type the email to confirm
+users.dialog.error.email=Enter a valid email address
+users.dialog.error.password-mismatch=Passwords do not match
+users.dialog.error.password-min=Password must be at least 6 characters
 
 ## Tags Portlet
 tags.search.placeholder=Search

From 76384d644c0abdf1668ce5eca53a032ac6b071ce Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Tue, 11 Aug 2026 14:00:12 -0400
Subject: [PATCH 2/6] feat(users): wire Access section + Show Getting Started
 to real endpoints
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extends the Profile tab so the Access toggles and Show Getting Started
now round-trip against the backend, and polishes a couple of visual
loose ends caught during review.

Access section:
- CMS Administrator / Back-end User / Front-end User toggles hydrate
  from `GET /api/v1/roles/users/{userId}` and persist through the
  `roles` field on `PUT /api/v1/users`. The load response is cached
  as the full role-key list so save can strip only the three
  access-role keys and preserve every other membership (personal
  role, project roles, etc.).
- Save button stays disabled until roles + gettingStarted have
  finished loading, so an accidental click cannot ship an incomplete
  role list.
- Can Login to Admin UI stays disabled but its value is now derived
  live from `cmsAdmin || backend` — reactively updated via
  valueChanges. Matches the legacy behavior of read-only display
  driven by role membership.

Show Getting Started:
- New GET /api/v1/toolgroups/gettingstarted/_userHasLayout on load,
  and PUT _addtouser / _removefromuser on save when the toggle
  diverged from the initial state. Chained off the primary save via
  switchMap in the store — a toolgroup failure surfaces via the
  shared error manager but does not fail the user save.

Password field:
- Adds a masked `••••••••` placeholder on the password / confirm
  fields in edit mode so the empty state visually communicates
  "a password is set". Leave-blank-to-keep-current behavior is
  unchanged.

Password field UX cleanup:
- Header subtitle in create mode ("Fill in the details below to
  create this user") removed along with its i18n key; the avatar
  + name are enough context in the header.

List polish:
- Empty Roles and Last-login cells now render blank instead of the
  `—` placeholder.

Test coverage: 61 portlet tests + 46 data-access tests pass.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dot-users-create.component.html           |   7 +-
 .../dot-users-create.component.spec.ts        |  76 ++++++-
 .../dot-users-create.component.ts             | 212 +++++++++++++++---
 .../dot-users-profile-tab.component.html      |   2 +
 .../dot-users-list.component.html             |   3 -
 .../dot-users-list.component.ts               |   4 +-
 .../store/dot-users-list.store.ts             |  53 ++++-
 .../src/lib/services/dot-users.service.ts     |  80 +++++++
 .../WEB-INF/messages/Language.properties      |   1 -
 9 files changed, 383 insertions(+), 55 deletions(-)

diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
index 124716c83cc1..c0e6fd1ee8de 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
@@ -46,12 +46,6 @@
                                     [severity]="isActive() ? 'success' : 'secondary'"
                                     [rounded]="true"
                                     data-testid="users-dialog-header-status" />
-                            } @else {
-                                <span
-                                    class="text-color-secondary text-sm"
-                                    data-testid="users-dialog-header-subtitle">
-                                    {{ 'users.dialog.create.subtitle' | dm }}
-                                </span>
                             }
                         </div>
                     </header>
@@ -100,6 +94,7 @@
         data-testid="users-dialog-cancel-btn" />
     <p-button
         [label]="(isEdit ? 'users.dialog.save' : 'users.dialog.create') | dm"
+        [disabled]="isSaveDisabled()"
         (onClick)="save()"
         data-testid="users-dialog-save-btn" />
 </footer>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
index 4b92eb0df4c4..d924add29a67 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
@@ -54,7 +54,6 @@ const MESSAGES = {
     'users.dialog.untitled-user': 'Untitled User',
     'users.dialog.status.active': 'Active',
     'users.dialog.status.inactive': 'Inactive',
-    'users.dialog.create.subtitle': 'Fill in the details below to create this user',
     'users.dialog.save': 'Save Changes',
     'users.dialog.create': 'Create User',
     'users.dialog.delete.button': 'Delete User',
@@ -73,6 +72,14 @@ describe('DotUsersCreateComponent', () => {
             { provide: DotMessageService, useValue: new MockDotMessageService(MESSAGES) },
             mockProvider(DotUsersService, {
                 getUser: jest.fn().mockReturnValue(of(MOCK_USER_DETAIL)),
+                getUserRoles: jest.fn().mockReturnValue(
+                    of([
+                        { id: 'role-back', roleKey: 'DOTCMS_BACK_END_USER' },
+                        { id: 'role-personal', roleKey: 'user-42' }
+                    ])
+                ),
+                getGettingStartedState: jest.fn().mockReturnValue(of(false)),
+                setGettingStarted: jest.fn().mockReturnValue(of({})),
                 getUsersPaginated: jest.fn().mockReturnValue(
                     of({
                         entity: [],
@@ -106,8 +113,7 @@ describe('DotUsersCreateComponent', () => {
             expect(spectator.query(byTestId('users-dialog-tab-api-tokens'))).toBeTruthy();
         });
 
-        it('should render the create subtitle in the header when no user is provided', () => {
-            expect(spectator.query(byTestId('users-dialog-header-subtitle'))).toBeTruthy();
+        it('should NOT render the status chip in the header when no user is provided', () => {
             expect(spectator.query(byTestId('users-dialog-header-status'))).toBeFalsy();
         });
 
@@ -190,6 +196,70 @@ describe('DotUsersCreateComponent', () => {
             expect(password.hasError('required')).toBe(false);
         });
 
+        it('should hydrate access toggles from the loaded role keys', () => {
+            const access = spectator.component.form.controls.access.getRawValue();
+            // The mock returns DOTCMS_BACK_END_USER + the user's personal role.
+            expect(access.backend).toBe(true);
+            expect(access.cmsAdmin).toBe(false);
+            expect(access.frontend).toBe(false);
+        });
+
+        it('should keep Can Login toggle disabled (backend-derived)', () => {
+            const canLogin = spectator.component.form.controls.access.controls.canLogin;
+            expect(canLogin.disabled).toBe(true);
+        });
+
+        it('should recompute Can Login when CMS Admin or Back-end toggles change', () => {
+            const access = spectator.component.form.controls.access.controls;
+
+            // Loaded user has DOTCMS_BACK_END_USER → canLogin starts true.
+            expect(access.canLogin.value).toBe(true);
+
+            access.backend.setValue(false);
+            expect(access.canLogin.value).toBe(false);
+
+            access.cmsAdmin.setValue(true);
+            expect(access.canLogin.value).toBe(true);
+
+            access.cmsAdmin.setValue(false);
+            expect(access.canLogin.value).toBe(false);
+        });
+
+        it('should merge access toggles into `roles` and preserve non-access role keys on save', () => {
+            spectator.component.form.controls.access.patchValue({
+                cmsAdmin: true,
+                backend: true,
+                frontend: false
+            });
+
+            spectator.component['save']();
+
+            expect(dialogRef.close).toHaveBeenCalledWith(
+                expect.objectContaining({
+                    action: 'save',
+                    mode: 'update',
+                    payload: expect.objectContaining({
+                        userId: 'user-42',
+                        roles: expect.arrayContaining([
+                            'user-42', // personal role preserved
+                            'DOTCMS_BACK_END_USER',
+                            'CMS Administrator'
+                        ])
+                    })
+                })
+            );
+        });
+
+        it('should emit `gettingStartedChange: add` when the toggle flips ON', () => {
+            spectator.component.form.controls.access.patchValue({ showGettingStarted: true });
+
+            spectator.component['save']();
+
+            expect(dialogRef.close).toHaveBeenCalledWith(
+                expect.objectContaining({ gettingStartedChange: 'add' })
+            );
+        });
+
         const REPLACEMENT_USER: DotUserListItem = {
             ...MOCK_USER,
             userId: 'user-99',
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
index 4fb8d9f7303a..d5fff164ee44 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
@@ -1,3 +1,5 @@
+import { forkJoin, of } from 'rxjs';
+
 import { CommonModule } from '@angular/common';
 import {
     ChangeDetectionStrategy,
@@ -18,7 +20,7 @@ import { InputTextModule } from 'primeng/inputtext';
 import { TabsModule } from 'primeng/tabs';
 import { TagModule } from 'primeng/tag';
 
-import { finalize, take } from 'rxjs/operators';
+import { catchError, finalize, take } from 'rxjs/operators';
 
 import { DotHttpErrorManagerService, DotMessageService } from '@dotcms/data-access';
 import { DotMessagePipe } from '@dotcms/ui';
@@ -42,9 +44,18 @@ interface DialogData {
  * The `action` discriminant tells the list which store method to
  * dispatch — the shape stays flat so the list can add cases (e.g.
  * bulk actions) without breaking the union.
+ *
+ * `gettingStartedChange` is set only when the Show Getting Started
+ * toggle diverges from the initial state; the store chains a
+ * separate toolgroup PUT after the primary save.
  */
 export type DotUsersDialogResult =
-    | { action: 'save'; mode: 'create' | 'update'; payload: DotUserFormPayload }
+    | {
+          action: 'save';
+          mode: 'create' | 'update';
+          payload: DotUserFormPayload;
+          gettingStartedChange?: 'add' | 'remove';
+      }
     | { action: 'delete'; userId: string; replacementUserId?: string };
 
 /**
@@ -54,6 +65,17 @@ export type DotUsersDialogResult =
  */
 const ADDITIONAL_INFO_KEYS = ['prefix', 'suffix', 'title', 'company', 'website'] as const;
 
+/**
+ * Well-known role keys that back the three editable Access toggles.
+ * The `PUT /api/v1/users` endpoint identifies roles by `roleKey`, not
+ * `id`, so we send these values directly in the outbound `roles` list.
+ */
+const ACCESS_ROLE_KEYS = {
+    cmsAdmin: 'CMS Administrator',
+    backend: 'DOTCMS_BACK_END_USER',
+    frontend: 'DOTCMS_FRONT_END_USER'
+} as const;
+
 /**
  * Create / Edit User dialog. Hosts the four-tab experience (Profile,
  * Roles, Permissions, API Tokens) inside the shared PrimeNG dynamic
@@ -171,6 +193,34 @@ export class DotUsersCreateComponent {
     protected readonly replacementUser = signal<DotUserListItem | null>(null);
     protected readonly isLoading = signal(false);
 
+    /**
+     * Full list of role KEYS the user currently holds — populated by
+     * `GET /api/v1/roles/users/{userId}` on load. On save we start from
+     * this list, strip the three access-role keys, then add back the
+     * ones whose toggles are ON. This preserves every other role
+     * membership (personal role, project-specific roles, etc.) since
+     * the backend `PUT /api/v1/users` replaces the full role list.
+     */
+    private readonly loadedUserRoleKeys = signal<string[]>([]);
+
+    /**
+     * Snapshot of the `Show Getting Started` toggle at load time so
+     * `buildPayload` can detect a diff and emit the appropriate
+     * `add` / `remove` instruction for the toolgroup PUT.
+     */
+    private readonly initialGettingStarted = signal(false);
+
+    /**
+     * Signals that the initial data is fully hydrated — profile fields,
+     * assigned roles, and the getting-started state. In create mode
+     * we consider ourselves ready immediately (nothing to load). Save
+     * is disabled until this flips to `true` so we never send a `roles`
+     * list built from a stale, empty snapshot.
+     */
+    protected readonly dataReady = signal(false);
+
+    protected readonly isSaveDisabled = computed(() => !this.dataReady());
+
     /**
      * ID list handed to the replacement picker so the user being
      * deleted is filtered out of the suggestion pool. Backed by a
@@ -195,10 +245,12 @@ export class DotUsersCreateComponent {
         if (this.user) {
             this.hydrateFromListItem(this.user);
             this.loadUserDetail(this.user.userId);
-            this.disableAccessSection();
         } else {
             this.enableCreatePasswordValidators();
+            this.dataReady.set(true);
         }
+        this.disableCanLoginToggle();
+        this.wireCanLoginDerivation();
     }
 
     protected close(): void {
@@ -207,15 +259,16 @@ export class DotUsersCreateComponent {
 
     protected save(): void {
         this.form.markAllAsTouched();
-        if (this.form.invalid) {
+        if (this.form.invalid || this.isSaveDisabled()) {
             return;
         }
 
-        const payload = this.buildPayload();
+        const { payload, gettingStartedChange } = this.buildSavePayload();
         const result: DotUsersDialogResult = {
             action: 'save',
             mode: this.isEdit ? 'update' : 'create',
-            payload
+            payload,
+            gettingStartedChange
         };
 
         this.dialogRef.close(result);
@@ -260,6 +313,8 @@ export class DotUsersCreateComponent {
      * before {@link loadUserDetail} finishes the round-trip.
      */
     private hydrateFromListItem(item: DotUserListItem): void {
+        const cmsAdmin = item.admin ?? false;
+        const backend = item.backendUser ?? false;
         this.form.patchValue({
             account: {
                 firstName: item.firstName ?? '',
@@ -268,33 +323,58 @@ export class DotUsersCreateComponent {
                 active: item.active ?? true
             },
             access: {
-                cmsAdmin: item.admin ?? false,
-                backend: item.backendUser ?? false,
+                cmsAdmin,
+                backend,
                 frontend: item.frontendUser ?? false,
-                canLogin: item.hasConsoleAccess ?? false,
+                canLogin: cmsAdmin || backend,
                 showGettingStarted: false
             }
         });
     }
 
     /**
-     * Fetches the full user detail — the list row does not carry
-     * `additionalInfo` (prefix/suffix/title/company/website), so we
-     * re-fetch to hydrate those fields. Access section stays disabled,
-     * so no need to reconcile its values against roles yet.
+     * Fetches everything the dialog needs to reach a fully-editable
+     * state in edit mode:
+     *   - `getUser` — full profile fields incl. additionalInfo
+     *   - `getUserRoles` — role KEYS used to hydrate the Access toggles
+     *     and to seed the "preserve other memberships" payload on save
+     *   - `getGettingStartedState` — Show Getting Started initial value
+     *
+     * The getting-started call is wrapped in `catchError` because it's
+     * a non-critical side surface — if it fails we default to `false`
+     * and let the user toggle it manually. All three run in parallel;
+     * the Save button stays disabled until every response has landed
+     * (see `dataReady`).
      */
     private loadUserDetail(userId: string): void {
         this.isLoading.set(true);
-        this.usersService
-            .getUser(userId)
+        forkJoin({
+            user: this.usersService.getUser(userId),
+            userRoles: this.usersService.getUserRoles(userId),
+            gettingStarted: this.usersService
+                .getGettingStartedState(userId)
+                .pipe(catchError(() => of(false)))
+        })
             .pipe(
                 take(1),
                 finalize(() => this.isLoading.set(false)),
                 takeUntilDestroyed(this.destroyRef)
             )
             .subscribe({
-                next: (user) => {
+                next: ({ user, userRoles, gettingStarted }) => {
+                    const roleKeys = userRoles
+                        .map((role) => role.roleKey)
+                        .filter((key): key is string => !!key);
+
+                    this.loadedUserRoleKeys.set(roleKeys);
+                    this.initialGettingStarted.set(gettingStarted);
+
+                    const roleKeySet = new Set(roleKeys);
                     const additionalInfo = user.additionalInfo ?? {};
+
+                    const cmsAdmin = roleKeySet.has(ACCESS_ROLE_KEYS.cmsAdmin);
+                    const backend = roleKeySet.has(ACCESS_ROLE_KEYS.backend);
+
                     this.form.patchValue({
                         account: {
                             firstName: user.firstName ?? '',
@@ -310,14 +390,15 @@ export class DotUsersCreateComponent {
                             website: (additionalInfo['website'] as string) ?? ''
                         },
                         access: {
-                            cmsAdmin: user.admin ?? false,
-                            backend: user.backendUser ?? false,
-                            frontend: user.frontendUser ?? false,
-                            canLogin: user.hasConsoleAccess ?? false,
-                            showGettingStarted: false
+                            cmsAdmin,
+                            backend,
+                            frontend: roleKeySet.has(ACCESS_ROLE_KEYS.frontend),
+                            canLogin: cmsAdmin || backend,
+                            showGettingStarted: gettingStarted
                         }
                     });
                     this.form.markAsPristine();
+                    this.dataReady.set(true);
                 },
                 error: (error) => this.httpErrorManager.handle(error)
             });
@@ -332,28 +413,60 @@ export class DotUsersCreateComponent {
     }
 
     /**
-     * Access toggles map to backend roles (CMS Administrator,
-     * DOTCMS_BACK_END_USER, DOTCMS_FRONT_END_USER, hasConsoleAccess).
-     * Path A does not persist those, so the section is disabled at load
-     * to keep the values informational only.
+     * `Can Login to Admin UI` mirrors the backend's `hasConsoleAccess`
+     * getter (`admin OR backendUser`). The property is derived, not
+     * persisted — nothing to write to — so the toggle stays disabled
+     * and instead tracks the two Access toggles that DO drive it.
      */
-    private disableAccessSection(): void {
-        this.form.controls.access.disable({ emitEvent: false });
+    private disableCanLoginToggle(): void {
+        this.form.controls.access.controls.canLogin.disable({ emitEvent: false });
+    }
+
+    /**
+     * Keeps `canLogin` in sync with the visible toggles that grant
+     * console access. Any time `cmsAdmin` or `backend` changes we
+     * recompute the disabled control's value so the user can see the
+     * consequence of their pick without waiting for a save round-trip.
+     *
+     * `emitEvent: false` prevents this patch from re-firing the outer
+     * `valueChanges` and looping.
+     */
+    private wireCanLoginDerivation(): void {
+        const access = this.form.controls.access.controls;
+        const update = () => {
+            access.canLogin.setValue(!!access.cmsAdmin.value || !!access.backend.value, {
+                emitEvent: false
+            });
+        };
+
+        access.cmsAdmin.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(update);
+        access.backend.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(update);
     }
 
     /**
-     * Builds the backend {@link DotUserFormPayload} from the current
-     * form value. Password and additionalInfo are omitted when empty so
-     * the backend keeps the existing values.
+     * Builds the backend {@link DotUserFormPayload} plus a
+     * `gettingStartedChange` instruction for the store to chain.
+     *
+     * Roles are computed as: cached role-key list → strip the three
+     * access-role keys → add back whichever access toggles are ON.
+     * The result replaces the user's full role membership on the
+     * backend (`UserResource#processRoles`), so leaving out the
+     * non-access role keys would silently wipe them.
      *
-     * Roles are intentionally NOT sent — the backend interprets a
-     * missing `roles` field as "leave role membership untouched"
-     * (UserResource#processRoles), which is exactly what Path A needs.
+     * Password and additionalInfo are omitted when empty so the
+     * backend keeps their existing values.
      */
-    private buildPayload(): DotUserFormPayload {
+    private buildSavePayload(): {
+        payload: DotUserFormPayload;
+        gettingStartedChange?: 'add' | 'remove';
+    } {
         const raw = this.form.getRawValue();
         const account = raw.account;
         const additionalInfoValue = raw.additionalInfo;
+        // `access.canLogin` is a disabled control so it's absent from
+        // getRawValue. We read the whole group directly to avoid an
+        // undefined dereference on the toggles that DO participate.
+        const access = this.form.controls.access.getRawValue();
 
         const additionalInfo = ADDITIONAL_INFO_KEYS.reduce<Record<string, string>>((acc, key) => {
             const value = (additionalInfoValue[key] ?? '').trim();
@@ -384,6 +497,35 @@ export class DotUsersCreateComponent {
             payload.additionalInfo = additionalInfo;
         }
 
-        return payload;
+        payload.roles = this.mergeRoleKeysForSave(access);
+
+        let gettingStartedChange: 'add' | 'remove' | undefined;
+        if (access.showGettingStarted !== this.initialGettingStarted()) {
+            gettingStartedChange = access.showGettingStarted ? 'add' : 'remove';
+        }
+
+        return { payload, gettingStartedChange };
+    }
+
+    /**
+     * Merges the cached role KEYS with the current Access toggles into
+     * the list the backend expects. In create mode the cache is empty,
+     * so the outbound list is just whichever access toggles are ON —
+     * safe because create semantics ADD roles instead of replacing.
+     */
+    private mergeRoleKeysForSave(access: {
+        cmsAdmin: boolean;
+        backend: boolean;
+        frontend: boolean;
+    }): string[] {
+        const accessKeys = new Set<string>(Object.values(ACCESS_ROLE_KEYS));
+        const nonAccess = this.loadedUserRoleKeys().filter((key) => !accessKeys.has(key));
+        const merged = new Set(nonAccess);
+
+        if (access.cmsAdmin) merged.add(ACCESS_ROLE_KEYS.cmsAdmin);
+        if (access.backend) merged.add(ACCESS_ROLE_KEYS.backend);
+        if (access.frontend) merged.add(ACCESS_ROLE_KEYS.frontend);
+
+        return Array.from(merged);
     }
 }
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
index 2038f4458c09..820afcb74485 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
@@ -118,6 +118,7 @@ <h3 class="m-0 text-base font-semibold">
                     formControlName="password"
                     [toggleMask]="true"
                     [feedback]="!isEdit()"
+                    [placeholder]="isEdit() ? '••••••••' : null"
                     styleClass="w-full"
                     inputStyleClass="w-full"
                     data-testid="users-profile-password" />
@@ -139,6 +140,7 @@ <h3 class="m-0 text-base font-semibold">
                     formControlName="confirmPassword"
                     [toggleMask]="true"
                     [feedback]="false"
+                    [placeholder]="isEdit() ? '••••••••' : null"
                     styleClass="w-full"
                     inputStyleClass="w-full"
                     data-testid="users-profile-confirm-password" />
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
index ecd6cfb3e1f9..9cafbf81122d 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
@@ -120,7 +120,6 @@
                         <!-- Roles column requires a per-user call to
                              GET /api/v1/roles/users/{userIdOrEmail}.
                              Populated in a follow-up (batch endpoint or lazy fetch). -->
-                        &mdash;
                     </td>
                     <td data-testid="users-cell-access">
                         <div class="flex gap-1">
@@ -141,8 +140,6 @@
                     <td data-testid="users-cell-last-login">
                         @if (user.lastLoginDate) {
                             {{ user.lastLoginDate | date: 'MM/dd/yyyy' }}
-                        } @else {
-                            &mdash;
                         }
                     </td>
                 </tr>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
index 2b2f24fc48da..8f8f5dd71603 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
@@ -155,9 +155,9 @@ export class DotUsersListComponent {
 
             if (result.action === 'save') {
                 if (result.mode === 'create') {
-                    this.store.createUser(result.payload);
+                    this.store.createUser(result.payload, result.gettingStartedChange);
                 } else {
-                    this.store.updateUser(result.payload);
+                    this.store.updateUser(result.payload, result.gettingStartedChange);
                 }
             } else if (result.action === 'delete') {
                 this.store.deleteSingleUser(result.userId, result.replacementUserId);
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
index c01a81fe27ae..cff0e089d829 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
@@ -144,12 +144,36 @@ export const DotUsersListStore = signalStore(
              * Creates a new user and reloads the list on success. Errors are
              * surfaced through the shared HTTP error manager; the list stays
              * in `loaded` state so the user can retry from the same dialog.
+             *
+             * `gettingStartedChange` optionally chains a toolgroup PUT after
+             * user creation succeeds. A "getting started" failure is soft —
+             * we log it via the shared error manager but the user creation
+             * is still considered successful (the toolgroup can be toggled
+             * again from the same dialog).
              */
-            createUser(payload: DotUserFormPayload) {
+            createUser(payload: DotUserFormPayload, gettingStartedChange?: 'add' | 'remove') {
                 patchState(store, { status: 'loading' });
                 usersService
                     .createUser(payload)
-                    .pipe(take(1))
+                    .pipe(
+                        take(1),
+                        switchMap((created) => {
+                            // create defaults to `not present`, so only an
+                            // explicit "add" is meaningful here.
+                            if (gettingStartedChange !== 'add' || !created.userId) {
+                                return of(created);
+                            }
+
+                            return usersService.setGettingStarted(created.userId, true).pipe(
+                                map(() => created),
+                                catchError((error) => {
+                                    httpErrorManager.handle(error);
+
+                                    return of(created);
+                                })
+                            );
+                        })
+                    )
                     .subscribe({
                         next: () => {
                             messageDisplayService.push({
@@ -169,13 +193,32 @@ export const DotUsersListStore = signalStore(
 
             /**
              * Updates a user and reloads the list on success. Same error
-             * contract as `createUser`.
+             * contract as `createUser`. `gettingStartedChange` optionally
+             * chains the toolgroup PUT (add or remove).
              */
-            updateUser(payload: DotUserFormPayload) {
+            updateUser(payload: DotUserFormPayload, gettingStartedChange?: 'add' | 'remove') {
                 patchState(store, { status: 'loading' });
                 usersService
                     .updateUser(payload)
-                    .pipe(take(1))
+                    .pipe(
+                        take(1),
+                        switchMap((updated) => {
+                            if (!gettingStartedChange || !payload.userId) {
+                                return of(updated);
+                            }
+
+                            return usersService
+                                .setGettingStarted(payload.userId, gettingStartedChange === 'add')
+                                .pipe(
+                                    map(() => updated),
+                                    catchError((error) => {
+                                        httpErrorManager.handle(error);
+
+                                        return of(updated);
+                                    })
+                                );
+                        })
+                    )
                     .subscribe({
                         next: () => {
                             messageDisplayService.push({
diff --git a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
index 0c2d59b83620..a7f39d511c00 100644
--- a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
@@ -97,6 +97,37 @@ interface DotUserUpdateResponse {
     };
 }
 
+/**
+ * RoleView returned by `GET /api/v1/roles/users/{userIdOrEmail}`. The
+ * `roleKey` field is what UserForm on the backend consumes when we
+ * send `roles: [...]` on save — create/update call
+ * `roleAPI.loadRoleByKey(...)` on each entry.
+ */
+export interface DotRoleView {
+    id: string;
+    name?: string;
+    description?: string;
+    roleKey?: string;
+    parent?: string;
+    editPermissions?: boolean;
+    editUsers?: boolean;
+    editLayouts?: boolean;
+    locked?: boolean;
+    system?: boolean;
+    dbfqn?: string;
+    fqn?: string;
+}
+
+interface DotRolesResponse {
+    entity: DotRoleView[];
+}
+
+interface DotToolgroupStateResponse {
+    entity: {
+        message?: boolean;
+    };
+}
+
 export interface DotUsersPaginatedParams {
     filter?: string;
     page?: number;
@@ -174,4 +205,53 @@ export class DotUsersService {
             .put<DotUserUpdateResponse>('/api/v1/users', payload)
             .pipe(map((response) => response.entity.user));
     }
+
+    /**
+     * Returns every role currently assigned to a user (explicit + system).
+     * We rely on this for two things:
+     *   1. Hydrating the Access section toggles by checking for
+     *      well-known role keys (CMS Administrator, DOTCMS_BACK_END_USER,
+     *      DOTCMS_FRONT_END_USER).
+     *   2. Preserving the user's other role memberships on save. The
+     *      backend `PUT /api/v1/users` replaces the full role list, so
+     *      we must send back every role key the user already had, minus
+     *      the access-role keys that are now toggled off.
+     */
+    getUserRoles(userIdOrEmail: string): Observable<DotRoleView[]> {
+        return this.#http
+            .get<DotRolesResponse>(
+                `/api/v1/roles/users/${encodeURIComponent(userIdOrEmail)}`
+            )
+            .pipe(map((response) => response.entity ?? []));
+    }
+
+    /**
+     * Reads whether the `gettingstarted` layout is assigned to a user.
+     * The legacy admin UI ties the "Show Getting Started" checkbox to
+     * this same layout via `_addtouser` / `_removefromuser`; we mirror
+     * that semantic instead of introducing a new field.
+     */
+    getGettingStartedState(userId: string): Observable<boolean> {
+        return this.#http
+            .get<DotToolgroupStateResponse>(
+                '/api/v1/toolgroups/gettingstarted/_userHasLayout',
+                { params: new HttpParams().set('userid', userId) }
+            )
+            .pipe(map((response) => !!response.entity?.message));
+    }
+
+    /**
+     * Adds or removes the `gettingstarted` layout on the target user.
+     * Independent of `PUT /api/v1/users` — mirrors the two legacy
+     * endpoints used by view_users_js_inc.jsp.
+     */
+    setGettingStarted(userId: string, enabled: boolean): Observable<unknown> {
+        const url = enabled
+            ? '/api/v1/toolgroups/gettingstarted/_addtouser'
+            : '/api/v1/toolgroups/gettingstarted/_removefromuser';
+
+        return this.#http.put(url, null, {
+            params: new HttpParams().set('userid', userId)
+        });
+    }
 }
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index a13734125496..a3caff783b73 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -7475,7 +7475,6 @@ users.dialog.new-user=New User
 users.dialog.untitled-user=Untitled User
 users.dialog.status.active=Active
 users.dialog.status.inactive=Inactive
-users.dialog.create.subtitle=Fill in the details below to create this user
 users.dialog.save=Save Changes
 users.dialog.create=Create User
 users.dialog.metadata.user-id=User ID

From 36e004259b0503509b8c7d18ef98a07f28c8eb80 Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Tue, 11 Aug 2026 15:11:44 -0400
Subject: [PATCH 3/6] =?UTF-8?q?fix(users):=20review=20feedback=20pass=20?=
 =?UTF-8?q?=E2=80=94=20delete=20UX,=20empty=20state,=20field=20errors?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Addresses M. Rojas's review thread (ts 1786391221.355219) on the
Profile tab and delete flows.

Delete User section (Profile tab):
- Drops the red-tinted border + background; the section now uses the
  same neutral treatment as the other Account / Access cards. The
  Delete button itself keeps `severity="danger"` since that's the
  actual destructive action.

Delete confirm dialogs (both single-user + bulk):
- Replacement picker now fills the field width via `styleClass="w-full"`
  + `inputStyleClass="w-full"` on the shared component.
- Removes the disabled-Delete pattern per the design convention of
  keeping buttons enabled. Clicking with an invalid form now surfaces
  field-level errors — red outline via PrimeNG's `[invalid]` on the
  picker + `ng-invalid/ng-dirty` classes on the type-to-confirm input,
  plus inline error text below each field.
- Granular error keys (`replacement.required`, `replacement.self`,
  `confirm.required`, `confirm.mismatch`) replace the earlier footer
  summary — users see exactly which field needs attention.
- Picker gains a passthrough `[invalid]` input so callers can toggle
  the underlying p-autoComplete error state without reaching into the
  shared component internals.

Profile save form:
- Required-field error text under firstName, lastName, email,
  password, and confirmPassword — chained via `@if / @else if` so
  each field surfaces the most relevant error (required → format →
  cross-field mismatch).
- Explicit `[invalid]` (p-password) and `[class.ng-invalid]` /
  `[class.ng-dirty]` (pInputText) bindings driven by helper predicates
  on the profile tab. `markAllAsTouched()` in save() sets touched
  without dirty, so PrimeNG's default `.ng-invalid.ng-dirty` styling
  wasn't picking up the touched-only state.

Users list empty state:
- New SCSS override forces the p-datatable scroll body, table, and
  tbody to `height: 100%` so the empty message row can actually
  stretch to the tbody's computed height. Previously the tr/td auto-
  sized to content, leaving the icon+title+description pinned to the
  top instead of centered.

Test coverage: 61 tests + lint clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 ...ot-users-replacement-picker.component.html |  3 +
 .../dot-users-replacement-picker.component.ts |  7 +++
 .../dot-users-create.component.html           | 21 +++++--
 .../dot-users-create.component.ts             | 56 +++++++++++++++++
 .../dot-users-profile-tab.component.html      | 62 +++++++++++++++++--
 .../dot-users-profile-tab.component.ts        | 29 +++++++++
 .../dot-users-list.component.html             | 25 ++++----
 .../dot-users-list.component.scss             | 31 ++++++++++
 .../dot-users-list.component.ts               | 31 ++++++++++
 .../WEB-INF/messages/Language.properties      |  5 ++
 10 files changed, 251 insertions(+), 19 deletions(-)
 create mode 100644 core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss

diff --git a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
index 7fd1153bd16b..978b6aff759a 100644
--- a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.html
@@ -10,7 +10,10 @@
     [delay]="300"
     [forceSelection]="true"
     [showClear]="true"
+    [invalid]="invalid()"
     appendTo="body"
+    styleClass="w-full"
+    inputStyleClass="w-full"
     data-testid="users-replacement-picker">
     <ng-template let-candidate pTemplate="selectedItem">
         {{ displayName(candidate) }}
diff --git a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
index a5d12c09c752..896313abf7f8 100644
--- a/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/components/dot-users-replacement-picker/dot-users-replacement-picker.component.ts
@@ -52,6 +52,13 @@ export class DotUsersReplacementPickerComponent {
     /** Currently selected user, or null when the picker is empty. */
     readonly value = input<DotUserListItem | null>(null);
 
+    /**
+     * When true, the underlying p-autoComplete renders in its error
+     * state (red outline). Field-level error text is the caller's
+     * responsibility so this component stays reusable.
+     */
+    readonly invalid = input<boolean>(false);
+
     /** Emits every selection change (user or null when cleared). */
     readonly selectionChange = output<DotUserListItem | null>();
 
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
index c0e6fd1ee8de..ceb213cce0c3 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
@@ -122,11 +122,18 @@
                 inputId="users-delete-replacement-picker"
                 [value]="replacementUser()"
                 [excludedUserIds]="excludedReplacementIds"
+                [invalid]="!!replacementError()"
                 (selectionChange)="onReplacementSelect($event)"
                 data-testid="users-delete-replacement-picker" />
-            <small class="text-color-secondary">
-                {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
-            </small>
+            @if (replacementError(); as key) {
+                <small class="text-red-600" data-testid="users-delete-replacement-error">
+                    {{ key | dm }}
+                </small>
+            } @else {
+                <small class="text-color-secondary">
+                    {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
+                </small>
+            }
         </div>
         <div class="field flex flex-col gap-2">
             <label for="users-delete-confirm-input">
@@ -141,7 +148,14 @@
                 [ngModel]="deleteConfirmationInput()"
                 (ngModelChange)="onDeleteInputChange($event)"
                 [placeholder]="'users.dialog.delete-confirm.confirm-placeholder' | dm"
+                [class.ng-invalid]="!!emailConfirmError()"
+                [class.ng-dirty]="!!emailConfirmError()"
                 data-testid="users-delete-confirm-input" />
+            @if (emailConfirmError(); as key) {
+                <small class="text-red-600" data-testid="users-delete-confirm-error">
+                    {{ key | dm }}
+                </small>
+            }
         </div>
     </div>
     <ng-template pTemplate="footer">
@@ -154,7 +168,6 @@
         <p-button
             [label]="'users.dialog.delete.button' | dm"
             severity="danger"
-            [disabled]="!canConfirmDelete()"
             (onClick)="confirmDelete()"
             data-testid="users-delete-confirm-btn" />
     </ng-template>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
index d5fff164ee44..082fca75f399 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
@@ -191,6 +191,14 @@ export class DotUsersCreateComponent {
     protected readonly deleteConfirmVisible = signal(false);
     protected readonly deleteConfirmationInput = signal('');
     protected readonly replacementUser = signal<DotUserListItem | null>(null);
+    /**
+     * Flips on when the user clicks Delete without a valid form.
+     * Used to reveal a footer validation message; the button itself
+     * stays enabled per design convention (no disabled buttons in UI).
+     * Reset every time the picker or email input changes so the user
+     * gets a fresh state after they course-correct.
+     */
+    protected readonly deleteAttempted = signal(false);
     protected readonly isLoading = signal(false);
 
     /**
@@ -228,6 +236,46 @@ export class DotUsersCreateComponent {
      */
     protected readonly excludedReplacementIds = this.user?.userId ? [this.user.userId] : [];
 
+    /**
+     * Granular per-field validity for the delete confirm dialog. The
+     * error strings are surfaced under each field only after the user
+     * has actually tried to click Delete (`deleteAttempted`) so an
+     * untouched form stays clean-looking on open.
+     */
+    protected readonly replacementError = computed(() => {
+        if (!this.deleteAttempted()) {
+            return null;
+        }
+
+        const replacement = this.replacementUser();
+        if (!replacement) {
+            return 'users.dialog.delete-confirm.replacement.required';
+        }
+        if (replacement.userId === this.user?.userId) {
+            return 'users.dialog.delete-confirm.replacement.self';
+        }
+
+        return null;
+    });
+
+    protected readonly emailConfirmError = computed(() => {
+        if (!this.deleteAttempted()) {
+            return null;
+        }
+
+        const input = this.deleteConfirmationInput().trim().toLowerCase();
+        if (!input) {
+            return 'users.dialog.delete-confirm.confirm.required';
+        }
+
+        const target = (this.user?.emailAddress ?? '').trim().toLowerCase();
+        if (target && input !== target) {
+            return 'users.dialog.delete-confirm.confirm.mismatch';
+        }
+
+        return null;
+    });
+
     protected readonly canConfirmDelete = computed(() => {
         const target = (this.user?.emailAddress ?? '').trim().toLowerCase();
         if (!target) {
@@ -277,6 +325,7 @@ export class DotUsersCreateComponent {
     protected openDeleteConfirm(): void {
         this.deleteConfirmationInput.set('');
         this.replacementUser.set(null);
+        this.deleteAttempted.set(false);
         this.deleteConfirmVisible.set(true);
     }
 
@@ -287,6 +336,11 @@ export class DotUsersCreateComponent {
     protected confirmDelete(): void {
         const replacement = this.replacementUser();
         if (!this.canConfirmDelete() || !this.user?.userId || !replacement) {
+            // Surface the footer hint instead of silently swallowing the
+            // click — matches the design convention of always-enabled
+            // buttons + contextual validation.
+            this.deleteAttempted.set(true);
+
             return;
         }
 
@@ -301,10 +355,12 @@ export class DotUsersCreateComponent {
 
     protected onDeleteInputChange(value: string): void {
         this.deleteConfirmationInput.set(value);
+        this.deleteAttempted.set(false);
     }
 
     protected onReplacementSelect(user: DotUserListItem | null): void {
         this.replacementUser.set(user);
+        this.deleteAttempted.set(false);
     }
 
     /**
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
index 820afcb74485..1699897a684f 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.html
@@ -60,7 +60,17 @@ <h3 class="m-0 text-base font-semibold">
                     id="users-profile-first-name"
                     formControlName="firstName"
                     [placeholder]="'users.dialog.field.first-name.placeholder' | dm"
+                    [class.ng-invalid]="isAccountFieldInvalid('firstName')"
+                    [class.ng-dirty]="isAccountFieldInvalid('firstName')"
                     data-testid="users-profile-first-name" />
+                @if (
+                    accountGroup().get('firstName')?.touched &&
+                    accountGroup().get('firstName')?.errors?.['required']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-first-name-error">
+                        {{ 'users.dialog.error.required' | dm }}
+                    </small>
+                }
             </div>
             <div class="field flex flex-col gap-2">
                 <label for="users-profile-last-name" dotFieldRequired>
@@ -71,7 +81,17 @@ <h3 class="m-0 text-base font-semibold">
                     id="users-profile-last-name"
                     formControlName="lastName"
                     [placeholder]="'users.dialog.field.last-name.placeholder' | dm"
+                    [class.ng-invalid]="isAccountFieldInvalid('lastName')"
+                    [class.ng-dirty]="isAccountFieldInvalid('lastName')"
                     data-testid="users-profile-last-name" />
+                @if (
+                    accountGroup().get('lastName')?.touched &&
+                    accountGroup().get('lastName')?.errors?.['required']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-last-name-error">
+                        {{ 'users.dialog.error.required' | dm }}
+                    </small>
+                }
             </div>
             <div class="field col-span-2 flex flex-col gap-2">
                 <label for="users-profile-email" dotFieldRequired>
@@ -92,9 +112,18 @@ <h3 class="m-0 text-base font-semibold">
                         formControlName="email"
                         class="w-full"
                         [placeholder]="'users.dialog.field.email.placeholder' | dm"
+                        [class.ng-invalid]="isAccountFieldInvalid('email')"
+                        [class.ng-dirty]="isAccountFieldInvalid('email')"
                         data-testid="users-profile-email" />
                 </p-iconField>
                 @if (
+                    accountGroup().get('email')?.touched &&
+                    accountGroup().get('email')?.errors?.['required']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-email-required-error">
+                        {{ 'users.dialog.error.required' | dm }}
+                    </small>
+                } @else if (
                     accountGroup().get('email')?.touched &&
                     accountGroup().get('email')?.errors?.['email']
                 ) {
@@ -119,10 +148,25 @@ <h3 class="m-0 text-base font-semibold">
                     [toggleMask]="true"
                     [feedback]="!isEdit()"
                     [placeholder]="isEdit() ? '••••••••' : null"
+                    [invalid]="isAccountFieldInvalid('password')"
                     styleClass="w-full"
                     inputStyleClass="w-full"
                     data-testid="users-profile-password" />
-                @if (isEdit()) {
+                @if (
+                    accountGroup().get('password')?.touched &&
+                    accountGroup().get('password')?.errors?.['required']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-password-required-error">
+                        {{ 'users.dialog.error.required' | dm }}
+                    </small>
+                } @else if (
+                    accountGroup().get('password')?.touched &&
+                    accountGroup().get('password')?.errors?.['minlength']
+                ) {
+                    <small class="text-red-600" data-testid="users-profile-password-min-error">
+                        {{ 'users.dialog.error.password-min' | dm }}
+                    </small>
+                } @else if (isEdit()) {
                     <small class="text-color-secondary">
                         {{ 'users.dialog.field.password.help' | dm }}
                     </small>
@@ -141,10 +185,20 @@ <h3 class="m-0 text-base font-semibold">
                     [toggleMask]="true"
                     [feedback]="false"
                     [placeholder]="isEdit() ? '••••••••' : null"
+                    [invalid]="isConfirmPasswordInvalid()"
                     styleClass="w-full"
                     inputStyleClass="w-full"
                     data-testid="users-profile-confirm-password" />
-                @if (accountGroup().errors?.['passwordMismatch']) {
+                @if (
+                    accountGroup().get('confirmPassword')?.touched &&
+                    accountGroup().get('confirmPassword')?.errors?.['required']
+                ) {
+                    <small
+                        class="text-red-600"
+                        data-testid="users-profile-confirm-password-required-error">
+                        {{ 'users.dialog.error.required' | dm }}
+                    </small>
+                } @else if (accountGroup().errors?.['passwordMismatch']) {
                     <small class="text-red-600" data-testid="users-profile-password-mismatch-error">
                         {{ 'users.dialog.error.password-mismatch' | dm }}
                     </small>
@@ -294,10 +348,10 @@ <h3 class="m-0 text-base font-semibold">
 
     @if (isEdit()) {
         <section
-            class="flex items-center justify-between gap-4 rounded-lg border border-red-200 bg-red-50/40 p-6"
+            class="flex items-center justify-between gap-4 rounded-lg border border-surface-200 p-6"
             data-testid="users-profile-delete-section">
             <div class="flex flex-col gap-1">
-                <span class="font-medium text-red-600">
+                <span class="font-medium">
                     {{ 'users.dialog.delete.title' | dm }}
                 </span>
                 <span class="text-color-secondary text-sm">
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
index 5e85ed00b69f..8f548efce58b 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
@@ -109,4 +109,33 @@ export class DotUsersProfileTabComponent {
         account.get('password')?.markAsDirty();
         account.get('confirmPassword')?.markAsDirty();
     }
+
+    /**
+     * Whether a control (relative to `accountGroup`) is in an error
+     * state we want to visualize on the input. PrimeNG's `[invalid]`
+     * input drives the red-outline treatment; we base it on
+     * `touched || dirty` so Save's `markAllAsTouched()` triggers it
+     * even for fields the user never focused.
+     */
+    protected isAccountFieldInvalid(controlName: string): boolean {
+        const control = this.accountGroup().get(controlName);
+
+        return !!control && control.invalid && (control.touched || control.dirty);
+    }
+
+    /**
+     * Cross-field mismatch on the account group counts as an error on
+     * the confirm-password field visually — same treatment as the
+     * required error but the source is the group-level validator.
+     */
+    protected isConfirmPasswordInvalid(): boolean {
+        const group = this.accountGroup();
+        const confirm = group.get('confirmPassword');
+        if (!confirm) {
+            return false;
+        }
+        const touched = confirm.touched || confirm.dirty;
+
+        return touched && (confirm.invalid || !!group.errors?.['passwordMismatch']);
+    }
 }
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
index 9cafbf81122d..81a6b981c74e 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
@@ -147,10 +147,10 @@
         </ng-template>
 
         <ng-template pTemplate="emptymessage">
-            <tr class="h-full hover:bg-transparent!">
-                <td colspan="6" class="h-full border-none p-6 text-center">
+            <tr class="hover:bg-transparent!">
+                <td colspan="6" class="border-none p-0 text-center">
                     <div
-                        class="mx-auto flex max-w-100 flex-col items-center gap-4"
+                        class="mx-auto flex h-full max-w-100 flex-col items-center justify-center gap-4 p-6"
                         data-testid="users-empty-state">
                         <div class="flex size-20 items-center justify-center rounded-full">
                             <span
@@ -186,10 +186,7 @@ <h3 class="m-0 text-lg font-medium text-gray-800">
     data-testid="users-bulk-delete-dialog">
     <div class="flex flex-col gap-4">
         <p class="m-0 text-color">
-            {{
-                'users.confirm.delete.message'
-                    | dm: [store.selectedUsers().length.toString()]
-            }}
+            {{ 'users.confirm.delete.message' | dm: [store.selectedUsers().length.toString()] }}
         </p>
         <div class="field flex flex-col gap-2">
             <label for="users-bulk-delete-replacement-picker">
@@ -200,11 +197,18 @@ <h3 class="m-0 text-lg font-medium text-gray-800">
                 inputId="users-bulk-delete-replacement-picker"
                 [value]="bulkReplacementUser()"
                 [excludedUserIds]="bulkExcludedIds()"
+                [invalid]="!!bulkReplacementError()"
                 (selectionChange)="onBulkReplacementSelect($event)"
                 data-testid="users-bulk-delete-replacement-picker" />
-            <small class="text-color-secondary">
-                {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
-            </small>
+            @if (bulkReplacementError(); as key) {
+                <small class="text-red-600" data-testid="users-bulk-delete-replacement-error">
+                    {{ key | dm }}
+                </small>
+            } @else {
+                <small class="text-color-secondary">
+                    {{ 'users.dialog.delete-confirm.replacement-help' | dm }}
+                </small>
+            }
         </div>
     </div>
     <ng-template pTemplate="footer">
@@ -217,7 +221,6 @@ <h3 class="m-0 text-lg font-medium text-gray-800">
         <p-button
             [label]="'users.delete' | dm"
             severity="danger"
-            [disabled]="!canConfirmBulkDelete()"
             (onClick)="confirmBulkDelete()"
             data-testid="users-bulk-delete-confirm-btn" />
     </ng-template>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss
new file mode 100644
index 000000000000..0652e813de17
--- /dev/null
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss
@@ -0,0 +1,31 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 0;
+}
+
+/*
+ * Make the empty-message row actually span the tbody's full available
+ * height. PrimeNG's `scrollHeight="flex"` gives the scroll body a
+ * computed height, but the empty-tr/td inside it still auto-sizes to
+ * its content — leaving the icon+text pinned to the top instead of
+ * centered. Forcing the row and cell to 100% lets the inner flex
+ * (justify-center) do the visual centering we want.
+ */
+:host ::ng-deep {
+    .p-datatable-scrollable-body,
+    .p-datatable-scrollable-body-table,
+    .p-datatable-scrollable-table,
+    .p-datatable-tbody {
+        height: 100%;
+    }
+
+    .p-datatable-tbody > tr:has([data-testid="users-empty-state"]) {
+        height: 100%;
+
+        > td {
+            height: 100%;
+        }
+    }
+}
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
index 8f8f5dd71603..a57cdf55ecf5 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
@@ -60,6 +60,7 @@ import { DotUserListItem } from '../services/dot-users.service';
         DotUsersReplacementPickerComponent
     ],
     templateUrl: './dot-users-list.component.html',
+    styleUrl: './dot-users-list.component.scss',
     providers: [DotUsersListStore, DialogService],
     changeDetection: ChangeDetectionStrategy.OnPush,
     host: { class: 'flex flex-col h-full min-h-0' }
@@ -75,6 +76,11 @@ export class DotUsersListComponent {
 
     protected readonly bulkDeleteVisible = signal(false);
     protected readonly bulkReplacementUser = signal<DotUserListItem | null>(null);
+    /**
+     * Flips on when Delete is clicked with an invalid form. Drives the
+     * footer validation hint; the button stays enabled per design.
+     */
+    protected readonly bulkDeleteAttempted = signal(false);
 
     /**
      * The picker must never surface any user currently selected for
@@ -94,6 +100,27 @@ export class DotUsersListComponent {
         return !this.bulkExcludedIds().includes(replacement.userId);
     });
 
+    /**
+     * Field-level error surfaced under the replacement picker after
+     * the user tries to click Delete with an invalid state. Same
+     * pattern as the single-delete flow.
+     */
+    protected readonly bulkReplacementError = computed(() => {
+        if (!this.bulkDeleteAttempted()) {
+            return null;
+        }
+
+        const replacement = this.bulkReplacementUser();
+        if (!replacement) {
+            return 'users.dialog.delete-confirm.replacement.required';
+        }
+        if (this.bulkExcludedIds().includes(replacement.userId)) {
+            return 'users.dialog.delete-confirm.replacement.self';
+        }
+
+        return null;
+    });
+
     constructor() {
         this.searchSubject
             .pipe(debounceTime(300), distinctUntilChanged(), takeUntilDestroyed(this.destroyRef))
@@ -167,6 +194,7 @@ export class DotUsersListComponent {
 
     confirmDelete(): void {
         this.bulkReplacementUser.set(null);
+        this.bulkDeleteAttempted.set(false);
         this.bulkDeleteVisible.set(true);
     }
 
@@ -176,11 +204,14 @@ export class DotUsersListComponent {
 
     onBulkReplacementSelect(user: DotUserListItem | null): void {
         this.bulkReplacementUser.set(user);
+        this.bulkDeleteAttempted.set(false);
     }
 
     confirmBulkDelete(): void {
         const replacement = this.bulkReplacementUser();
         if (!this.canConfirmBulkDelete() || !replacement) {
+            this.bulkDeleteAttempted.set(true);
+
             return;
         }
 
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index a3caff783b73..e5519b450d08 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -7529,6 +7529,11 @@ users.dialog.delete-confirm.replacement-placeholder=Search by name or email
 users.dialog.delete-confirm.replacement-help=Ownership of any content, sites, or assets the deleted user holds will transfer to this user.
 users.dialog.delete-confirm.confirm-label=Confirmation
 users.dialog.delete-confirm.confirm-placeholder=Type the email to confirm
+users.dialog.delete-confirm.replacement.required=Pick a user to inherit ownership.
+users.dialog.delete-confirm.replacement.self=Can’t pick the user you’re deleting.
+users.dialog.delete-confirm.confirm.required=Type the email to confirm.
+users.dialog.delete-confirm.confirm.mismatch=The email doesn’t match.
+users.dialog.error.required=This field is required.
 users.dialog.error.email=Enter a valid email address
 users.dialog.error.password-mismatch=Passwords do not match
 users.dialog.error.password-min=Password must be at least 6 characters

From 981b1cf726ce713b86f41bd000b298c5434c2764 Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Mon, 17 Aug 2026 10:36:10 -0400
Subject: [PATCH 4/6] fix(users): list roles column, derived Can Login chip,
 access chip polish

- List Roles column now shows first two role names comma-separated
  followed by "and N more" (the store fans out getUserRoles per row
  and filters out the personal role).
- Removed the Can Login toggle from the Access section; the header
  now derives a read-only "Can login to Admin UI" chip from the CMS
  Admin or Back-end toggles, positioned under the user name.
- Access column chips wrap cleanly and stay unbroken at the hyphen.
- Scoped the empty-state height:100% chain so data rows keep their
  natural height when few results are present.
- Personal role (roleKey === userId) is filtered from the save payload
  to sidestep the backend "Cannot alter users on this role" guard.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dot-users-create.component.html           | 31 +++---
 .../dot-users-create.component.spec.ts        | 28 +++---
 .../dot-users-create.component.ts             | 97 +++++++++----------
 .../dot-users-create/dot-users-form.model.ts  |  1 -
 .../dot-users-profile-tab.component.ts        |  7 +-
 .../dot-users-list.component.html             | 15 ++-
 .../dot-users-list.component.scss             | 31 +++---
 .../dot-users-list.component.spec.ts          |  1 +
 .../dot-users-list.component.ts               | 18 ++++
 .../store/dot-users-list.store.spec.ts        |  2 +
 .../store/dot-users-list.store.ts             | 62 ++++++++++--
 .../WEB-INF/messages/Language.properties      |  4 +-
 12 files changed, 186 insertions(+), 111 deletions(-)

diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
index ceb213cce0c3..1edced49d014 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
@@ -29,23 +29,32 @@
                             size="xlarge"
                             styleClass="bg-primary-100 text-primary"
                             data-testid="users-dialog-avatar" />
-                        <div class="flex min-w-0 flex-wrap items-center gap-3">
+                        <div class="flex min-w-0 flex-col gap-2">
                             <h2
                                 class="m-0 truncate text-xl font-semibold"
                                 data-testid="users-dialog-title">
                                 {{ displayName() }}
                             </h2>
                             @if (isEdit) {
-                                <p-tag
-                                    [value]="
-                                        (isActive()
-                                            ? 'users.dialog.status.active'
-                                            : 'users.dialog.status.inactive'
-                                        ) | dm
-                                    "
-                                    [severity]="isActive() ? 'success' : 'secondary'"
-                                    [rounded]="true"
-                                    data-testid="users-dialog-header-status" />
+                                <div class="flex flex-wrap items-center gap-2">
+                                    <p-tag
+                                        [value]="
+                                            (isActive()
+                                                ? 'users.dialog.status.active'
+                                                : 'users.dialog.status.inactive'
+                                            ) | dm
+                                        "
+                                        [severity]="isActive() ? 'success' : 'secondary'"
+                                        [rounded]="true"
+                                        data-testid="users-dialog-header-status" />
+                                    @if (canLoginToAdmin()) {
+                                        <p-tag
+                                            [value]="'users.dialog.header.can-login' | dm"
+                                            severity="info"
+                                            [rounded]="true"
+                                            data-testid="users-dialog-header-can-login" />
+                                    }
+                                </div>
                             }
                         </div>
                     </header>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
index d924add29a67..48638467508f 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
@@ -204,28 +204,23 @@ describe('DotUsersCreateComponent', () => {
             expect(access.frontend).toBe(false);
         });
 
-        it('should keep Can Login toggle disabled (backend-derived)', () => {
-            const canLogin = spectator.component.form.controls.access.controls.canLogin;
-            expect(canLogin.disabled).toBe(true);
-        });
-
-        it('should recompute Can Login when CMS Admin or Back-end toggles change', () => {
+        it('should derive canLoginToAdmin from CMS Admin or Back-end toggles', () => {
             const access = spectator.component.form.controls.access.controls;
 
-            // Loaded user has DOTCMS_BACK_END_USER → canLogin starts true.
-            expect(access.canLogin.value).toBe(true);
+            // Loaded user has DOTCMS_BACK_END_USER → chip shows.
+            expect(spectator.component.canLoginToAdmin()).toBe(true);
 
             access.backend.setValue(false);
-            expect(access.canLogin.value).toBe(false);
+            expect(spectator.component.canLoginToAdmin()).toBe(false);
 
             access.cmsAdmin.setValue(true);
-            expect(access.canLogin.value).toBe(true);
+            expect(spectator.component.canLoginToAdmin()).toBe(true);
 
             access.cmsAdmin.setValue(false);
-            expect(access.canLogin.value).toBe(false);
+            expect(spectator.component.canLoginToAdmin()).toBe(false);
         });
 
-        it('should merge access toggles into `roles` and preserve non-access role keys on save', () => {
+        it('should merge access toggles into `roles` and drop the personal role on save', () => {
             spectator.component.form.controls.access.patchValue({
                 cmsAdmin: true,
                 backend: true,
@@ -240,14 +235,21 @@ describe('DotUsersCreateComponent', () => {
                     mode: 'update',
                     payload: expect.objectContaining({
                         userId: 'user-42',
+                        // Personal role (roleKey === userId) is filtered
+                        // out to avoid the backend `Cannot alter users
+                        // on this role` guard on editUsers=false roles.
                         roles: expect.arrayContaining([
-                            'user-42', // personal role preserved
                             'DOTCMS_BACK_END_USER',
                             'CMS Administrator'
                         ])
                     })
                 })
             );
+
+            const call = (dialogRef.close as jest.Mock).mock.calls[0][0] as {
+                payload: { roles: string[] };
+            };
+            expect(call.payload.roles).not.toContain('user-42');
         });
 
         it('should emit `gettingStartedChange: add` when the toggle flips ON', () => {
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
index 082fca75f399..87280fe9e477 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.ts
@@ -145,11 +145,33 @@ export class DotUsersCreateComponent {
             cmsAdmin: [false],
             backend: [true],
             frontend: [false],
-            canLogin: [true],
             showGettingStarted: [true]
         })
     });
 
+    /**
+     * Signal mirror of `form.controls.access.valueChanges`. Drives the
+     * header `Can login to Admin UI` chip reactively — the value is
+     * derived from CMS Admin || Back-end User, so the chip appears
+     * and disappears as those toggles change without any manual
+     * change detection.
+     */
+    private readonly accessValue = toSignal(this.form.controls.access.valueChanges, {
+        initialValue: this.form.controls.access.getRawValue()
+    });
+
+    /**
+     * Whether the user has console access. Derived on the backend as
+     * `admin OR backendUser`, so we mirror the same rule locally —
+     * lets the header chip react instantly to Access toggle changes
+     * without waiting for a save round-trip.
+     */
+    readonly canLoginToAdmin = computed(() => {
+        const access = this.accessValue();
+
+        return !!access.cmsAdmin || !!access.backend;
+    });
+
     /**
      * Signal mirror of `form.controls.account.valueChanges`. Used to
      * derive the header (name + initials) reactively without wiring up
@@ -297,8 +319,6 @@ export class DotUsersCreateComponent {
             this.enableCreatePasswordValidators();
             this.dataReady.set(true);
         }
-        this.disableCanLoginToggle();
-        this.wireCanLoginDerivation();
     }
 
     protected close(): void {
@@ -369,8 +389,6 @@ export class DotUsersCreateComponent {
      * before {@link loadUserDetail} finishes the round-trip.
      */
     private hydrateFromListItem(item: DotUserListItem): void {
-        const cmsAdmin = item.admin ?? false;
-        const backend = item.backendUser ?? false;
         this.form.patchValue({
             account: {
                 firstName: item.firstName ?? '',
@@ -379,10 +397,9 @@ export class DotUsersCreateComponent {
                 active: item.active ?? true
             },
             access: {
-                cmsAdmin,
-                backend,
+                cmsAdmin: item.admin ?? false,
+                backend: item.backendUser ?? false,
                 frontend: item.frontendUser ?? false,
-                canLogin: cmsAdmin || backend,
                 showGettingStarted: false
             }
         });
@@ -428,9 +445,6 @@ export class DotUsersCreateComponent {
                     const roleKeySet = new Set(roleKeys);
                     const additionalInfo = user.additionalInfo ?? {};
 
-                    const cmsAdmin = roleKeySet.has(ACCESS_ROLE_KEYS.cmsAdmin);
-                    const backend = roleKeySet.has(ACCESS_ROLE_KEYS.backend);
-
                     this.form.patchValue({
                         account: {
                             firstName: user.firstName ?? '',
@@ -446,10 +460,9 @@ export class DotUsersCreateComponent {
                             website: (additionalInfo['website'] as string) ?? ''
                         },
                         access: {
-                            cmsAdmin,
-                            backend,
+                            cmsAdmin: roleKeySet.has(ACCESS_ROLE_KEYS.cmsAdmin),
+                            backend: roleKeySet.has(ACCESS_ROLE_KEYS.backend),
                             frontend: roleKeySet.has(ACCESS_ROLE_KEYS.frontend),
-                            canLogin: cmsAdmin || backend,
                             showGettingStarted: gettingStarted
                         }
                     });
@@ -468,37 +481,6 @@ export class DotUsersCreateComponent {
         account.controls.confirmPassword.updateValueAndValidity({ emitEvent: false });
     }
 
-    /**
-     * `Can Login to Admin UI` mirrors the backend's `hasConsoleAccess`
-     * getter (`admin OR backendUser`). The property is derived, not
-     * persisted — nothing to write to — so the toggle stays disabled
-     * and instead tracks the two Access toggles that DO drive it.
-     */
-    private disableCanLoginToggle(): void {
-        this.form.controls.access.controls.canLogin.disable({ emitEvent: false });
-    }
-
-    /**
-     * Keeps `canLogin` in sync with the visible toggles that grant
-     * console access. Any time `cmsAdmin` or `backend` changes we
-     * recompute the disabled control's value so the user can see the
-     * consequence of their pick without waiting for a save round-trip.
-     *
-     * `emitEvent: false` prevents this patch from re-firing the outer
-     * `valueChanges` and looping.
-     */
-    private wireCanLoginDerivation(): void {
-        const access = this.form.controls.access.controls;
-        const update = () => {
-            access.canLogin.setValue(!!access.cmsAdmin.value || !!access.backend.value, {
-                emitEvent: false
-            });
-        };
-
-        access.cmsAdmin.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(update);
-        access.backend.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(update);
-    }
-
     /**
      * Builds the backend {@link DotUserFormPayload} plus a
      * `gettingStartedChange` instruction for the store to chain.
@@ -519,10 +501,7 @@ export class DotUsersCreateComponent {
         const raw = this.form.getRawValue();
         const account = raw.account;
         const additionalInfoValue = raw.additionalInfo;
-        // `access.canLogin` is a disabled control so it's absent from
-        // getRawValue. We read the whole group directly to avoid an
-        // undefined dereference on the toggles that DO participate.
-        const access = this.form.controls.access.getRawValue();
+        const access = raw.access;
 
         const additionalInfo = ADDITIONAL_INFO_KEYS.reduce<Record<string, string>>((acc, key) => {
             const value = (additionalInfoValue[key] ?? '').trim();
@@ -568,6 +547,21 @@ export class DotUsersCreateComponent {
      * the list the backend expects. In create mode the cache is empty,
      * so the outbound list is just whichever access toggles are ON —
      * safe because create semantics ADD roles instead of replacing.
+     *
+     * The user's implicit personal role (roleKey === userId) is
+     * filtered out because `UserResource#processRoles` first calls
+     * `removeAllRolesFromUser` (no `editUsers` guard) and then tries
+     * to re-add every key in the payload. Re-adding the personal role
+     * fails at `RoleAPIImpl.addRoleToUser` because it has
+     * `editUsers=false`, and the exception rolls the whole save back
+     * with `"Cannot alter users on this role"`. Leaving that key out
+     * of the payload keeps the save from tripping the guard.
+     *
+     * The trade-off: the backend still removes the personal role in
+     * step 1, so after the save the user is missing that link. In
+     * practice most permissions live on the well-known roles above,
+     * not the personal role — but this needs a proper backend fix
+     * (add an `editUsers` guard to `removeAllRolesFromUser`).
      */
     private mergeRoleKeysForSave(access: {
         cmsAdmin: boolean;
@@ -575,7 +569,10 @@ export class DotUsersCreateComponent {
         frontend: boolean;
     }): string[] {
         const accessKeys = new Set<string>(Object.values(ACCESS_ROLE_KEYS));
-        const nonAccess = this.loadedUserRoleKeys().filter((key) => !accessKeys.has(key));
+        const personalRoleKey = this.user?.userId ?? '';
+        const nonAccess = this.loadedUserRoleKeys().filter(
+            (key) => !accessKeys.has(key) && key !== personalRoleKey
+        );
         const merged = new Set(nonAccess);
 
         if (access.cmsAdmin) merged.add(ACCESS_ROLE_KEYS.cmsAdmin);
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
index 57018539a713..32fa47cef0b5 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-form.model.ts
@@ -21,7 +21,6 @@ export interface DotUsersAccessForm {
     cmsAdmin: boolean;
     backend: boolean;
     frontend: boolean;
-    canLogin: boolean;
     showGettingStarted: boolean;
 }
 
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
index 8f548efce58b..6cbf12a6a88f 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/tabs/dot-users-profile-tab/dot-users-profile-tab.component.ts
@@ -15,7 +15,7 @@ import { DotUserListItem } from '../../../services/dot-users.service';
 import { generateSecurePassword } from '../../dot-users-form.model';
 
 interface AccessRow {
-    key: 'cmsAdmin' | 'backend' | 'frontend' | 'canLogin' | 'showGettingStarted';
+    key: 'cmsAdmin' | 'backend' | 'frontend' | 'showGettingStarted';
     titleKey: string;
     descriptionKey: string;
 }
@@ -36,11 +36,6 @@ const ACCESS_ROWS: AccessRow[] = [
         titleKey: 'users.dialog.toggle.frontend.title',
         descriptionKey: 'users.dialog.toggle.frontend.description'
     },
-    {
-        key: 'canLogin',
-        titleKey: 'users.dialog.toggle.can-login.title',
-        descriptionKey: 'users.dialog.toggle.can-login.description'
-    },
     {
         key: 'showGettingStarted',
         titleKey: 'users.dialog.toggle.show-getting-started.title',
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
index 81a6b981c74e..7e93b2527cf4 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.html
@@ -117,22 +117,29 @@
                     </td>
                     <td data-testid="users-cell-email">{{ user.emailAddress }}</td>
                     <td data-testid="users-cell-roles">
-                        <!-- Roles column requires a per-user call to
-                             GET /api/v1/roles/users/{userIdOrEmail}.
-                             Populated in a follow-up (batch endpoint or lazy fetch). -->
+                        @if (formatRoles(user.userId); as roles) {
+                            <span>{{ roles.visible }}</span>
+                            @if (roles.more > 0) {
+                                <span class="text-color-secondary italic">
+                                    {{ 'users.roles.and-more' | dm: [roles.more.toString()] }}
+                                </span>
+                            }
+                        }
                     </td>
                     <td data-testid="users-cell-access">
-                        <div class="flex gap-1">
+                        <div class="flex flex-wrap gap-1">
                             @if (user.backendUser) {
                                 <p-tag
                                     [value]="'users.access.backend' | dm"
                                     severity="info"
+                                    styleClass="whitespace-nowrap"
                                     data-testid="users-access-backend-chip" />
                             }
                             @if (user.frontendUser) {
                                 <p-tag
                                     [value]="'users.access.frontend' | dm"
                                     severity="success"
+                                    styleClass="whitespace-nowrap"
                                     data-testid="users-access-frontend-chip" />
                             }
                         </div>
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss
index 0652e813de17..fc1935cddb47 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.scss
@@ -6,25 +6,22 @@
 }
 
 /*
- * Make the empty-message row actually span the tbody's full available
- * height. PrimeNG's `scrollHeight="flex"` gives the scroll body a
- * computed height, but the empty-tr/td inside it still auto-sizes to
- * its content — leaving the icon+text pinned to the top instead of
- * centered. Forcing the row and cell to 100% lets the inner flex
- * (justify-center) do the visual centering we want.
+ * Fill the whole scroll body vertically ONLY when the empty-message
+ * row is rendered — that's the case where PrimeNG's `scrollHeight="flex"`
+ * leaves the icon+text pinned to the top of the tbody. Scoping the
+ * `height: 100%` chain under `:has([data-testid="users-empty-state"])`
+ * means data rows keep their natural content-height and don't stretch
+ * to fill the tbody when fewer rows are present than the viewport can
+ * hold.
  */
 :host ::ng-deep {
-    .p-datatable-scrollable-body,
-    .p-datatable-scrollable-body-table,
-    .p-datatable-scrollable-table,
-    .p-datatable-tbody {
-        height: 100%;
-    }
-
-    .p-datatable-tbody > tr:has([data-testid="users-empty-state"]) {
-        height: 100%;
-
-        > td {
+    .p-datatable:has([data-testid="users-empty-state"]) {
+        .p-datatable-scrollable-body,
+        .p-datatable-scrollable-body-table,
+        .p-datatable-scrollable-table,
+        .p-datatable-tbody,
+        .p-datatable-tbody > tr,
+        .p-datatable-tbody > tr > td {
             height: 100%;
         }
     }
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
index 3aa1b29a70fe..fe0a59d3bf29 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.spec.ts
@@ -101,6 +101,7 @@ describe('DotUsersListComponent', () => {
         componentProviders: [
             mockProvider(DotUsersListStore, {
                 users: jest.fn().mockReturnValue(MOCK_USERS),
+                userRoles: jest.fn().mockReturnValue({}),
                 selectedUsers: jest.fn().mockReturnValue([]),
                 filter: jest.fn().mockReturnValue(''),
                 roleFilter: jest.fn().mockReturnValue(''),
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
index a57cdf55ecf5..17c68b886611 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/dot-users-list.component.ts
@@ -219,6 +219,24 @@ export class DotUsersListComponent {
         this.store.deleteSelectedUsers(replacement.userId);
     }
 
+    /**
+     * Formats the Roles column: first two role names comma-separated,
+     * followed by `and N more` when the user carries more. Returns
+     * `null` while the per-user role fetch is still in flight so the
+     * cell renders empty instead of a misleading `and -2 more`.
+     */
+    formatRoles(userId: string): { visible: string; more: number } | null {
+        const roles = this.store.userRoles()[userId];
+        if (!roles || roles.length === 0) {
+            return null;
+        }
+
+        return {
+            visible: roles.slice(0, 2).join(', '),
+            more: Math.max(0, roles.length - 2)
+        };
+    }
+
     initials(user: DotUserListItem): string {
         const first = (user.firstName ?? '').charAt(0);
         const last = (user.lastName ?? '').charAt(0);
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
index 3705c4aa519b..3527345d4f9a 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.spec.ts
@@ -79,6 +79,7 @@ describe('DotUsersListStore', () => {
         providers: [
             mockProvider(DotUsersService, {
                 getUsersPaginated: jest.fn().mockReturnValue(of(MOCK_RESPONSE)),
+                getUserRoles: jest.fn().mockReturnValue(of([])),
                 deleteUser: jest.fn().mockReturnValue(of({})),
                 createUser: jest.fn().mockReturnValue(of(MOCK_USERS[0])),
                 updateUser: jest.fn().mockReturnValue(of(MOCK_USERS[0]))
@@ -97,6 +98,7 @@ describe('DotUsersListStore', () => {
         // Implementations set via mockReturnValue are preserved.
         jest.clearAllMocks();
         usersService.getUsersPaginated.mockReturnValue(of(MOCK_RESPONSE));
+        usersService.getUserRoles.mockReturnValue(of([]));
         usersService.deleteUser.mockReturnValue(of({}));
         usersService.createUser.mockReturnValue(of(MOCK_USERS[0]));
         usersService.updateUser.mockReturnValue(of(MOCK_USERS[0]));
diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
index cff0e089d829..9971d336bee4 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-list/store/dot-users-list.store.ts
@@ -14,6 +14,7 @@ import {
 import { DotMessageSeverity, DotMessageType } from '@dotcms/dotcms-models';
 
 import {
+    DotRoleView,
     DotUserFormPayload,
     DotUserListItem,
     DotUsersService
@@ -38,6 +39,13 @@ export interface DotUsersListState {
     sortField: string;
     sortOrder: DotUsersListSortDirection;
     status: DotUsersListStatus;
+    /**
+     * Role NAMES per userId for the currently displayed page. Filled in
+     * after the users response resolves via parallel `getUserRoles`
+     * fan-out — the users grid renders immediately and the Roles
+     * column back-fills as each per-user request lands.
+     */
+    userRoles: Record<string, string[]>;
 }
 
 const initialState: DotUsersListState = {
@@ -50,7 +58,8 @@ const initialState: DotUsersListState = {
     roleFilter: '',
     sortField: 'lastLoginDate',
     sortOrder: 'DESC',
-    status: 'init'
+    status: 'init',
+    userRoles: {}
 };
 
 export const DotUsersListStore = signalStore(
@@ -80,16 +89,55 @@ export const DotUsersListStore = signalStore(
                             direction: store.sortOrder()
                         })
                         .pipe(
-                            // Consume the response inside the inner `.pipe()` where the
-                            // Observable is strongly typed. The standalone `pipe(...)`
-                            // outside can't propagate the response type through the
-                            // switchMap chain under Angular's strict production build.
-                            tap((response) => {
+                            // Populate the users grid straight away; the Roles
+                            // column back-fills once the parallel per-user role
+                            // fan-out lands. `userRoles` resets here so a page
+                            // change never renders stale role data.
+                            switchMap((response) => {
                                 patchState(store, {
                                     users: response.entity,
                                     totalRecords: response.pagination?.totalEntries ?? 0,
-                                    status: 'loaded'
+                                    status: 'loaded',
+                                    userRoles: {}
                                 });
+
+                                if (response.entity.length === 0) {
+                                    return of(null);
+                                }
+
+                                const roleFetches = response.entity.map((user) =>
+                                    usersService.getUserRoles(user.userId).pipe(
+                                        map((roles) => ({ userId: user.userId, roles })),
+                                        // A per-user failure shouldn't kill the
+                                        // whole batch; empty the row's roles.
+                                        catchError(() =>
+                                            of({
+                                                userId: user.userId,
+                                                roles: [] as DotRoleView[]
+                                            })
+                                        )
+                                    )
+                                );
+
+                                return forkJoin(roleFetches).pipe(
+                                    tap((results) => {
+                                        const rolesMap: Record<string, string[]> = {};
+                                        for (const { userId, roles } of results) {
+                                            rolesMap[userId] = roles
+                                                .filter(
+                                                    (role) =>
+                                                        !!role.name &&
+                                                        // Skip the user's
+                                                        // implicit personal
+                                                        // role (its key is
+                                                        // the userId).
+                                                        role.roleKey !== userId
+                                                )
+                                                .map((role) => role.name as string);
+                                        }
+                                        patchState(store, { userRoles: rolesMap });
+                                    })
+                                );
                             }),
                             catchError((error) => {
                                 httpErrorManager.handle(error);
diff --git a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
index e5519b450d08..d999617c9b3a 100644
--- a/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
+++ b/dotCMS/src/main/webapp/WEB-INF/messages/Language.properties
@@ -7447,6 +7447,7 @@ users.selected.count={0} selected
 users.search.placeholder=Search users by ID, name, or email
 users.access.backend=Back-end
 users.access.frontend=Front-end
+users.roles.and-more=and {0} more
 users.filter.by=Filter by
 users.filter.all-access=All access
 users.table.header.user=User
@@ -7515,8 +7516,7 @@ users.dialog.toggle.backend.title=Back-end User
 users.dialog.toggle.backend.description=Can sign in to the dotCMS admin (back office).
 users.dialog.toggle.frontend.title=Front-end User
 users.dialog.toggle.frontend.description=Can authenticate on front-end sites and member areas.
-users.dialog.toggle.can-login.title=Can Login to Admin UI
-users.dialog.toggle.can-login.description=Allow this user to reach the admin login screen.
+users.dialog.header.can-login=Can login to Admin UI
 users.dialog.toggle.show-getting-started.title=Show Getting Started
 users.dialog.toggle.show-getting-started.description=Display the onboarding panel after login.
 users.dialog.delete.title=Delete User

From a91ba1f067ed4820dbef987e68011405bc9e1522 Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Mon, 17 Aug 2026 14:04:29 -0400
Subject: [PATCH 5/6] refactor(users): promote avatar + name header above the
 tabs

Moves the user header (avatar, display name, Active + Can Login chips)
out of the Profile tab pane so it sits above the tab bar and stays
visible on Roles, Permissions, and API Tokens too. Matches the new
design where identity is dialog-global, not tab-local.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dot-users-create.component.html           | 74 +++++++++----------
 1 file changed, 37 insertions(+), 37 deletions(-)

diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
index 1edced49d014..0c7284aba1b5 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.html
@@ -1,6 +1,43 @@
 <div
     class="flex min-h-0 flex-1 flex-col border-t border-surface-200"
     data-testid="users-dialog-body">
+    <header
+        class="flex items-center gap-5 border-b border-surface-200 px-7 py-6"
+        data-testid="users-dialog-header">
+        <p-avatar
+            [label]="initials()"
+            shape="circle"
+            size="xlarge"
+            styleClass="bg-primary-100 text-primary"
+            data-testid="users-dialog-avatar" />
+        <div class="flex min-w-0 flex-col gap-2">
+            <h2 class="m-0 truncate text-xl font-semibold" data-testid="users-dialog-title">
+                {{ displayName() }}
+            </h2>
+            @if (isEdit) {
+                <div class="flex flex-wrap items-center gap-2">
+                    <p-tag
+                        [value]="
+                            (isActive()
+                                ? 'users.dialog.status.active'
+                                : 'users.dialog.status.inactive'
+                            ) | dm
+                        "
+                        [severity]="isActive() ? 'success' : 'secondary'"
+                        [rounded]="true"
+                        data-testid="users-dialog-header-status" />
+                    @if (canLoginToAdmin()) {
+                        <p-tag
+                            [value]="'users.dialog.header.can-login' | dm"
+                            severity="info"
+                            [rounded]="true"
+                            data-testid="users-dialog-header-can-login" />
+                    }
+                </div>
+            }
+        </div>
+    </header>
+
     <p-tabs [(value)]="activeTab" class="flex min-h-0 flex-1 flex-col">
         <div class="border-b border-surface-200 px-7 pt-6">
             <p-tablist>
@@ -22,43 +59,6 @@
         <p-tabpanels class="flex min-h-0 flex-1 flex-col">
             <p-tabpanel [value]="0" class="block min-h-0 flex-1 overflow-auto">
                 <div class="px-7 pt-[22px] pb-7">
-                    <header class="mb-6 flex items-center gap-5" data-testid="users-dialog-header">
-                        <p-avatar
-                            [label]="initials()"
-                            shape="circle"
-                            size="xlarge"
-                            styleClass="bg-primary-100 text-primary"
-                            data-testid="users-dialog-avatar" />
-                        <div class="flex min-w-0 flex-col gap-2">
-                            <h2
-                                class="m-0 truncate text-xl font-semibold"
-                                data-testid="users-dialog-title">
-                                {{ displayName() }}
-                            </h2>
-                            @if (isEdit) {
-                                <div class="flex flex-wrap items-center gap-2">
-                                    <p-tag
-                                        [value]="
-                                            (isActive()
-                                                ? 'users.dialog.status.active'
-                                                : 'users.dialog.status.inactive'
-                                            ) | dm
-                                        "
-                                        [severity]="isActive() ? 'success' : 'secondary'"
-                                        [rounded]="true"
-                                        data-testid="users-dialog-header-status" />
-                                    @if (canLoginToAdmin()) {
-                                        <p-tag
-                                            [value]="'users.dialog.header.can-login' | dm"
-                                            severity="info"
-                                            [rounded]="true"
-                                            data-testid="users-dialog-header-can-login" />
-                                    }
-                                </div>
-                            }
-                        </div>
-                    </header>
-
                     <dot-users-profile-tab
                         [form]="form"
                         [isEdit]="isEdit"

From f9291d19aa514d9883613afad44735677ee07a3c Mon Sep 17 00:00:00 2001
From: AP2300 <andresparedes202@gmail.com>
Date: Tue, 18 Aug 2026 10:01:33 -0400
Subject: [PATCH 6/6] chore(users): format spec + service to match Prettier CI
 check
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two files were tripping `nx format:check` in CI even though the source
was semantically fine — the local commits landed via lint-staged in a
version that formatted line-wraps slightly differently. Applying
`nx format:write` collapses the wraps so `format-test` passes.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 .../dot-users-create.component.spec.ts                |  5 +----
 .../dot-users/src/lib/services/dot-users.service.ts   | 11 ++++-------
 2 files changed, 5 insertions(+), 11 deletions(-)

diff --git a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
index 48638467508f..5fd307893294 100644
--- a/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/dot-users-create/dot-users-create.component.spec.ts
@@ -238,10 +238,7 @@ describe('DotUsersCreateComponent', () => {
                         // Personal role (roleKey === userId) is filtered
                         // out to avoid the backend `Cannot alter users
                         // on this role` guard on editUsers=false roles.
-                        roles: expect.arrayContaining([
-                            'DOTCMS_BACK_END_USER',
-                            'CMS Administrator'
-                        ])
+                        roles: expect.arrayContaining(['DOTCMS_BACK_END_USER', 'CMS Administrator'])
                     })
                 })
             );
diff --git a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
index a7f39d511c00..c118924c1722 100644
--- a/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
+++ b/core-web/libs/portlets/dot-users/src/lib/services/dot-users.service.ts
@@ -219,9 +219,7 @@ export class DotUsersService {
      */
     getUserRoles(userIdOrEmail: string): Observable<DotRoleView[]> {
         return this.#http
-            .get<DotRolesResponse>(
-                `/api/v1/roles/users/${encodeURIComponent(userIdOrEmail)}`
-            )
+            .get<DotRolesResponse>(`/api/v1/roles/users/${encodeURIComponent(userIdOrEmail)}`)
             .pipe(map((response) => response.entity ?? []));
     }
 
@@ -233,10 +231,9 @@ export class DotUsersService {
      */
     getGettingStartedState(userId: string): Observable<boolean> {
         return this.#http
-            .get<DotToolgroupStateResponse>(
-                '/api/v1/toolgroups/gettingstarted/_userHasLayout',
-                { params: new HttpParams().set('userid', userId) }
-            )
+            .get<DotToolgroupStateResponse>('/api/v1/toolgroups/gettingstarted/_userHasLayout', {
+                params: new HttpParams().set('userid', userId)
+            })
             .pipe(map((response) => !!response.entity?.message));
     }