@team-codeme/crud-forge 0.0.0-stage → 1.0.1

package/src/templates/angular/iam/user-access-matrix.component.ts.ejs

@@ -0,0 +1,239 @@
+import { Component, OnInit, computed, inject, signal } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ActivatedRoute, RouterLink } from '@angular/router';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatDialog, MatDialogModule } from '@angular/material/dialog';
+import { MatSnackBar, MatSnackBarModule } from '@angular/material/snack-bar';
+import { forkJoin, of, switchMap } from 'rxjs';
+import { catchError } from 'rxjs/operators';
+import { ConfirmationDialogComponent } from '@/app/domains/admin/modules/apps/shared/components/confirmation-dialog.component';
+import { TextHighlightPipe } from '@/app/core/user-management/shared/text-highlight.pipe';
+import { formatRoleDisplayName } from '@/app/core/user-management/shared/role-display.util';
+import {
+  AccessCtrlPipe,
+  KeycloakAdminService,
+  RoleRepresentation,
+  UserRepresentation,
+} from '@/app/core/auth';
+
+@Component({
+    selector: 'app-user-access-matrix',
+    standalone: true,
+    imports: [
+        AccessCtrlPipe,
+        TextHighlightPipe,
+        CommonModule,
+        RouterLink,
+        MatButtonModule,
+        MatIconModule,
+        MatSlideToggleModule,
+        MatDialogModule,
+        MatSnackBarModule
+    ],
+    templateUrl: './user-access-matrix.component.html',
+    styleUrl: './user-access-matrix.component.scss',
+    host: {
+        class: 'flex h-full min-h-0 w-full flex-col overflow-hidden',
+    },
+})
+export class UserAccessMatrixComponent implements OnInit {
+    readonly SCREEN = 'access-matrix';
+    private route = inject(ActivatedRoute);
+    private keycloakAdminService = inject(KeycloakAdminService);
+    private snackBar = inject(MatSnackBar);
+    private dialog = inject(MatDialog);
+
+    userId = signal<string>('');
+    user = signal<UserRepresentation | null>(null);
+    allRoles = signal<RoleRepresentation[]>([]);
+    assignedRoles = signal<Set<string>>(new Set());
+        isLoading = signal<boolean>(true);
+    isProcessingRole = signal<Record<string, boolean>>({});
+    searchTerm = signal<string>('');
+
+    assignedRoleList = computed(() => {
+        const assigned = this.assignedRoles();
+        return this.allRoles()
+            .filter((role: RoleRepresentation) => role.name && assigned.has(role.name))
+            .sort((left: RoleRepresentation, right: RoleRepresentation) => (left.name || '').localeCompare(right.name || ''));
+    });
+
+    unassignedRoleList = computed(() => {
+        const assigned = this.assignedRoles();
+        return this.allRoles()
+            .filter((role: RoleRepresentation) => role.name && !assigned.has(role.name))
+            .sort((left: RoleRepresentation, right: RoleRepresentation) => (left.name || '').localeCompare(right.name || ''));
+    });
+
+    filteredAssignedRoleList = computed(() => {
+        const query = this.searchTerm().trim().toLowerCase();
+        const list = this.assignedRoleList();
+        if (!query) return list;
+        return list.filter((r: RoleRepresentation) => 
+            (r.name || '').toLowerCase().includes(query) || 
+            (r.description || '').toLowerCase().includes(query)
+        );
+    });
+
+    filteredUnassignedRoleList = computed(() => {
+        const query = this.searchTerm().trim().toLowerCase();
+        const list = this.unassignedRoleList();
+        if (!query) return list;
+        return list.filter((r: RoleRepresentation) => 
+            (r.name || '').toLowerCase().includes(query) || 
+            (r.description || '').toLowerCase().includes(query)
+        );
+    });
+
+    assignedRoleCount = computed(() => this.assignedRoleList().length);
+
+    formatRoleName(roleName: string | null | undefined): string {
+        return formatRoleDisplayName(roleName);
+    }
+
+    onSearchInput(event: Event): void {
+        const input = event.target as HTMLInputElement;
+        this.searchTerm.set(input?.value || '');
+    }
+
+    clearSearch(): void {
+        this.searchTerm.set('');
+    }
+
+    ngOnInit(): void {
+        const id = this.route.snapshot.paramMap.get('id');
+        if (id) {
+            this.userId.set(id);
+            this.loadData();
+        } else {
+            this.snackBar.open('No User ID provided.', 'Close', { duration: 3000 });
+            this.isLoading.set(false);
+        }
+    }
+
+    loadData(): void {
+        this.isLoading.set(true);
+        const userId = this.userId();
+
+        forkJoin({
+            user: this.keycloakAdminService.getUserById(userId),
+            allRoles: this.keycloakAdminService.getRealmRoles(),
+            assigned: this.keycloakAdminService.getUserRealmRoles(userId),
+        }).subscribe({
+            next: (res: any) => {
+                this.user.set(res.user);
+
+                const ignored = new Set(['offline_access','uma_authorization','role_user','role_admin','ghost_account']);
+                const validAllRoles = (res.allRoles || []).filter(
+                    (r: RoleRepresentation) => r.name
+                        && !ignored.has(String(r.name).toLowerCase())
+                        && !String(r.name).toLowerCase().startsWith('default-roles-')
+                );
+                this.allRoles.set(validAllRoles);
+
+                const assignedNames = new Set((res.assigned || []).map((r: RoleRepresentation) => r.name || '').filter(Boolean));
+                this.assignedRoles.set(assignedNames as Set<string>);
+                
+                this.isLoading.set(false);
+            },
+            error: (err: any) => {
+                console.error('Error loading User Access Matrix:', err);
+                this.snackBar.open('Failed to load user access matrix.', 'Close', { duration: 3000 });
+                this.isLoading.set(false);
+            }
+        });
+    }
+
+    isAssigned(roleName: string): boolean {
+        return this.assignedRoles().has(roleName);
+    }
+
+    isRoleToggleDisabled(roleName: string): boolean {
+        return Boolean(this.isProcessingRole()[roleName]);
+    }
+
+    requestRoleToggle(roleName: string): void {
+        if (!roleName || this.isRoleToggleDisabled(roleName)) {
+            return;
+        }
+
+        const grant = !this.isAssigned(roleName);
+        const displayRoleName = this.formatRoleName(roleName);
+        const dialogData = {
+            title: grant ? `Assign Role: ${displayRoleName}` : `Revoke Role: ${displayRoleName}`,
+            message: grant
+                ? `Are you sure you want to assign role "${displayRoleName}" to user "${this.user()?.username || 'this user'}"?`
+                : `Are you sure you want to revoke role "${displayRoleName}" from user "${this.user()?.username || 'this user'}"?`,
+            color: grant ? 'primary' : 'rose',
+        };
+
+        this.openConfirmDialog(roleName, grant, dialogData);
+    }
+
+    private openConfirmDialog(
+        roleName: string,
+        grant: boolean,
+        dialogData: any
+    ): void {
+        const dialogRef = this.dialog.open(ConfirmationDialogComponent, {
+            width: '450px',
+            panelClass: 'tw-confirmation-dialog-panel',
+            data: dialogData,
+        });
+
+        dialogRef
+            .afterClosed()
+            .subscribe((confirmed: boolean | string | undefined) => {
+                if (confirmed) {
+                    this.executeRoleToggle(roleName, grant);
+                }
+            });
+    }
+
+    private executeRoleToggle(roleName: string, grant: boolean): void {
+        const userId = this.userId();
+        if (!userId || !roleName) {
+            return;
+        }
+
+        this.isProcessingRole.update((val) => ({ ...val, [roleName]: true }));
+
+        const op$ = grant
+            ? this.keycloakAdminService.assignRealmRoleToUser(userId, roleName)
+            : this.keycloakAdminService.removeRealmRoleFromUser(userId, roleName);
+
+        op$.pipe(
+            switchMap(() => this.keycloakAdminService.getUserById(userId))
+        ).subscribe({
+            next: (updatedUser: UserRepresentation | null) => {
+                this.user.set(updatedUser);
+                const isCurrentlyAssigned = grant;
+
+                this.assignedRoles.update((set) => {
+                    const next = new Set(set);
+                    if (isCurrentlyAssigned) {
+                        next.add(roleName);
+                    } else {
+                        next.delete(roleName);
+                    }
+                    return next;
+                });
+
+                this.snackBar.open(
+                    `Role ${this.formatRoleName(roleName)} ${grant ? 'assigned to' : 'revoked from'} ${updatedUser?.username || 'user'}.`,
+                    'Close',
+                    { duration: 3000 }
+                );
+
+                this.isProcessingRole.update((val) => ({ ...val, [roleName]: false }));
+            },
+            error: (err: any) => {
+                console.error(`Error toggling role ${roleName}:`, err);
+                this.snackBar.open(`Failed to ${grant ? 'assign' : 'revoke'} role ${this.formatRoleName(roleName)}.`, 'Close', { duration: 3000 });
+                this.isProcessingRole.update((val) => ({ ...val, [roleName]: false }));
+            }
+        });
+    }
+}

package/src/templates/angular/iam/user-detail.component.html.ejs

@@ -0,0 +1,143 @@
+<div class="flex h-full min-h-0 flex-col bg-slate-50 dark:bg-neutral-950">
+  <!-- Compact chrome -->
+  <div class="flex shrink-0 items-center justify-between gap-3 border-b border-slate-200/80 bg-white px-4 py-3 dark:border-slate-800 dark:bg-neutral-900">
+    <button
+      mat-button
+      type="button"
+      class="!min-w-0 !px-2 !text-slate-600 dark:!text-slate-300"
+      (click)="goBack()"
+    >
+      <mat-icon svgIcon="arrow-left" class="mr-1.5 icon-size-4"></mat-icon>
+      Users
+    </button>
+    <span class="text-[11px] font-semibold uppercase tracking-[0.14em] text-slate-400">Profile</span>
+  </div>
+
+  @if (user(); as item) {
+    <!-- Identity band — theme primary -->
+    <header class="relative shrink-0 overflow-hidden bg-primary-950 text-white dark:bg-primary-900">
+      <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top_right,_var(--theme-color-primary-800)_0%,_transparent_55%)] opacity-60"></div>
+      <div class="relative px-5 pb-5 pt-6 sm:px-6">
+        <div class="flex items-end gap-4">
+          <div class="flex h-[4.25rem] w-[4.25rem] shrink-0 items-center justify-center rounded-2xl bg-white/10 text-xl font-bold tracking-wide text-white ring-1 ring-white/20 backdrop-blur-sm">
+            {{ initials() }}
+          </div>
+          <div class="min-w-0 flex-1 pb-0.5">
+            <h1 class="truncate text-xl font-semibold tracking-tight text-white">{{ displayName() }}</h1>
+            <p class="mt-0.5 truncate font-mono text-xs text-primary-200/90">@{{ item.username || 'unknown' }}</p>
+            <div class="mt-3 flex flex-wrap items-center gap-2">
+              <span
+                class="inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-semibold"
+                [class.bg-white/15]="item.enabled"
+                [class.text-white]="item.enabled"
+                [class.bg-rose-500/25]="!item.enabled"
+                [class.text-rose-100]="!item.enabled"
+              >
+                <span class="h-1.5 w-1.5 rounded-full" [class.bg-emerald-400]="item.enabled" [class.bg-rose-300]="!item.enabled"></span>
+                {{ item.enabled ? 'Active' : 'Disabled' }}
+              </span>
+              <span class="inline-flex items-center gap-1 rounded-full bg-black/20 px-2.5 py-1 text-[11px] font-medium text-primary-100">
+                <mat-icon svgIcon="shield-check" class="!h-3.5 !w-3.5 !text-[14px]"></mat-icon>
+                {{ visibleRoles().length }} role{{ visibleRoles().length === 1 ? '' : 's' }}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </header>
+
+    <main class="min-h-0 flex-1 overflow-y-auto">
+      <div class="space-y-4 p-4 sm:p-5">
+        <!-- Account — single sheet, consistent rows -->
+        <section class="overflow-hidden rounded-2xl border border-slate-200/90 bg-white dark:border-slate-800 dark:bg-neutral-900">
+          <div class="border-b border-slate-100 px-4 py-3 dark:border-slate-800">
+            <h2 class="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-400">Account</h2>
+          </div>
+          <dl class="divide-y divide-slate-100 dark:divide-slate-800">
+            <div class="grid grid-cols-[7.5rem_minmax(0,1fr)] items-baseline gap-3 px-4 py-3 sm:grid-cols-[8.5rem_minmax(0,1fr)]">
+              <dt class="text-xs font-medium text-slate-400">Username</dt>
+              <dd class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ item.username || '—' }}</dd>
+            </div>
+            <div class="grid grid-cols-[7.5rem_minmax(0,1fr)] items-baseline gap-3 px-4 py-3 sm:grid-cols-[8.5rem_minmax(0,1fr)]">
+              <dt class="text-xs font-medium text-slate-400">Email</dt>
+              <dd class="truncate text-sm font-medium text-slate-800 dark:text-slate-200">{{ item.email || '—' }}</dd>
+            </div>
+            <div class="grid grid-cols-[7.5rem_minmax(0,1fr)] items-baseline gap-3 px-4 py-3 sm:grid-cols-[8.5rem_minmax(0,1fr)]">
+              <dt class="text-xs font-medium text-slate-400">First name</dt>
+              <dd class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ item.firstName || '—' }}</dd>
+            </div>
+            <div class="grid grid-cols-[7.5rem_minmax(0,1fr)] items-baseline gap-3 px-4 py-3 sm:grid-cols-[8.5rem_minmax(0,1fr)]">
+              <dt class="text-xs font-medium text-slate-400">Last name</dt>
+              <dd class="truncate text-sm font-semibold text-slate-900 dark:text-slate-100">{{ item.lastName || '—' }}</dd>
+            </div>
+            <div class="grid grid-cols-[7.5rem_minmax(0,1fr)] items-start gap-3 px-4 py-3 sm:grid-cols-[8.5rem_minmax(0,1fr)]">
+              <dt class="pt-0.5 text-xs font-medium text-slate-400">User ID</dt>
+              <dd class="break-all font-mono text-[11px] leading-relaxed text-slate-500 dark:text-slate-400">{{ item.id || '—' }}</dd>
+            </div>
+          </dl>
+        </section>
+
+        <!-- Roles — chips, no Keycloak template noise -->
+        <section class="overflow-hidden rounded-2xl border border-slate-200/90 bg-white dark:border-slate-800 dark:bg-neutral-900">
+          <div class="flex items-center justify-between gap-3 border-b border-slate-100 px-4 py-3 dark:border-slate-800">
+            <h2 class="text-[11px] font-bold uppercase tracking-[0.12em] text-slate-400">Assigned roles</h2>
+            <span class="rounded-md bg-slate-100 px-2 py-0.5 text-[10px] font-bold tabular-nums text-slate-500 dark:bg-slate-800 dark:text-slate-400">
+              {{ visibleRoles().length }}
+            </span>
+          </div>
+
+          @if (visibleRoles().length) {
+            <ul class="flex flex-wrap gap-2 p-4">
+              @for (role of visibleRoles(); track role.name) {
+                <li
+                  class="inline-flex max-w-full items-center rounded-xl border border-primary-100 bg-primary-50/80 px-3 py-1.5 text-xs font-semibold text-primary-900 dark:border-primary-900/40 dark:bg-primary-950/40 dark:text-primary-200"
+                  [attr.title]="role.name"
+                >
+                  <span class="truncate">{{ formatRoleName(role.name) }}</span>
+                </li>
+              }
+            </ul>
+          } @else {
+            <div class="px-4 py-10 text-center">
+              <p class="text-sm font-medium text-slate-600 dark:text-slate-300">No roles assigned</p>
+              <p class="mt-1 text-xs text-slate-400">Use Manage roles to grant access.</p>
+            </div>
+          }
+        </section>
+      </div>
+    </main>
+
+    <!-- Sticky actions -->
+    <footer class="shrink-0 border-t border-slate-200 bg-white/95 px-4 py-3 backdrop-blur dark:border-slate-800 dark:bg-neutral-900/95 sm:px-5">
+      <div class="flex flex-col gap-2 sm:flex-row sm:flex-wrap sm:items-center">
+        <% if (iam.userAccess !== false) { %>
+        <a
+          mat-stroked-button
+          class="!justify-center sm:!flex-1"
+          [routerLink]="pageMode ? ['../access'] : ['/admin/user-management', item.id, 'access']"
+        >
+          Manage roles
+        </a>
+        <% } %>
+        <% if (iam.userPermissions !== false) { %>
+        <a
+          mat-stroked-button
+          class="!justify-center sm:!flex-1"
+          [routerLink]="pageMode ? ['../permissions'] : ['/admin/user-management', item.id, 'permissions']"
+        >
+          Manage screens
+        </a>
+        <% } %>
+        <button
+          mat-flat-button
+          color="primary"
+          type="button"
+          class="!justify-center sm:!flex-1"
+          (click)="changePassword()"
+        >
+          Change password
+        </button>
+      </div>
+    </footer>
+  }
+</div>

package/src/templates/angular/iam/user-detail.component.ts.ejs

@@ -0,0 +1,108 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, computed, inject, signal } from '@angular/core';
+import { MatButtonModule } from '@angular/material/button';
+import { MatDialog } from '@angular/material/dialog';
+import { MatIconModule } from '@angular/material/icon';
+import { ActivatedRoute, Router, RouterLink } from '@angular/router';
+import { KeycloakAdminService, RoleRepresentation, UserRepresentation } from '@/app/core/auth';
+import { ChangePasswordComponent } from '@/app/core/user-management/users/change-password/change-password.component';
+import { formatRoleDisplayName } from '@/app/core/user-management/shared/role-display.util';
+
+const IGNORED_SYSTEM_ROLES = new Set([
+  'offline_access',
+  'uma_authorization',
+  'role_user',
+  'role_admin',
+  'ghost_account',
+]);
+
+@Component({
+  selector: 'app-user-detail',
+  standalone: true,
+  imports: [CommonModule, MatButtonModule, MatIconModule, RouterLink],
+  templateUrl: './user-detail.component.html',
+  host: {
+    class: 'flex h-full min-h-0 w-full flex-col',
+  },
+})
+export class UserDetailComponent implements OnInit, OnChanges {
+  private readonly route = inject(ActivatedRoute);
+  private readonly router = inject(Router);
+  private readonly keycloak = inject(KeycloakAdminService);
+  private readonly dialog = inject(MatDialog);
+
+  @Input() userId: string | null = null;
+  @Output() readonly closed = new EventEmitter<void>();
+
+  readonly user = signal<UserRepresentation | null>(null);
+  readonly roles = signal<RoleRepresentation[]>([]);
+  readonly visibleRoles = computed(() =>
+    (this.roles() || []).filter((role) => {
+      const name = String(role?.name || '').toLowerCase();
+      if (!name) {
+        return false;
+      }
+      if (IGNORED_SYSTEM_ROLES.has(name)) {
+        return false;
+      }
+      if (name.startsWith('default-roles-')) {
+        return false;
+      }
+      return true;
+    })
+  );
+  pageMode = true;
+
+  ngOnInit(): void {
+    this.pageMode = !this.userId;
+    this.load(this.userId || this.route.snapshot.paramMap.get('id'));
+  }
+
+  ngOnChanges(): void {
+    if (this.userId) {
+      this.pageMode = false;
+      this.load(this.userId);
+    }
+  }
+
+  initials(): string {
+    const item = this.user();
+    const first = (item?.firstName || item?.username || '?').trim();
+    const last = (item?.lastName || '').trim();
+    return `${first.charAt(0)}${last.charAt(0)}`.toUpperCase();
+  }
+
+  displayName(): string {
+    const item = this.user();
+    const name = [item?.firstName, item?.lastName].filter(Boolean).join(' ').trim();
+    return name || item?.username || 'User Details';
+  }
+
+  formatRoleName(roleName: string | null | undefined): string {
+    return formatRoleDisplayName(roleName);
+  }
+
+  goBack(): void {
+    if (this.closed.observed) {
+      this.closed.emit();
+      return;
+    }
+    this.router.navigate(['/admin/user-management']);
+  }
+
+  changePassword(): void {
+    const id = this.user()?.id;
+    if (!id) {
+      return;
+    }
+    this.dialog.open(ChangePasswordComponent, { data: id, width: '28rem' });
+  }
+
+  private load(id: string | null): void {
+    if (!id) {
+      return;
+    }
+    this.keycloak.getUserById(id).subscribe((user) => this.user.set(user));
+    this.keycloak.getUserRealmRoles(id).subscribe((roles) => this.roles.set(roles || []));
+  }
+}

package/src/templates/angular/iam/user-form.component.html.ejs

@@ -0,0 +1,63 @@
+<form class="relative flex h-full min-h-0 w-full min-w-0 flex-1 flex-col" [formGroup]="form" (ngSubmit)="save()">
+  <app-loading-overlay [visible]="isSaving" [message]="mode === 'edit' ? 'Saving...' : 'Creating user...'"></app-loading-overlay>
+
+  <div class="flex items-start justify-between gap-4 border-b border-neutral-200 pb-5 dark:border-neutral-800">
+    <div class="min-w-0">
+      <h2 class="text-2xl font-bold tracking-tight text-neutral-950 dark:text-white">{{ mode === 'edit' ? 'Edit User' : 'Create User' }}</h2>
+    </div>
+  </div>
+
+  <div class="flex w-full min-w-0 flex-auto flex-col gap-4 overflow-y-auto py-6 pr-1">
+    <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+      <mat-label>Username</mat-label>
+      <input matInput formControlName="username" autocomplete="username" />
+      @if (form.controls.username.hasError('required')) {
+        <mat-error>Username is required</mat-error>
+      }
+    </mat-form-field>
+
+    @if (mode === 'create') {
+      <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+        <mat-label>Temporary password</mat-label>
+        <input matInput formControlName="password" [type]="hidePassword ? 'password' : 'text'" autocomplete="new-password" />
+        <button mat-icon-button matSuffix type="button" (click)="hidePassword = !hidePassword" [attr.aria-label]="hidePassword ? 'Show password' : 'Hide password'">
+          <mat-icon [svgIcon]="hidePassword ? 'eye-off' : 'eye'"></mat-icon>
+        </button>
+      </mat-form-field>
+    }
+
+    <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+      <mat-label>Email</mat-label>
+      <input matInput formControlName="email" type="email" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+      <mat-label>First name</mat-label>
+      <input matInput formControlName="firstName" />
+    </mat-form-field>
+
+    <mat-form-field appearance="outline" class="w-full" subscriptSizing="dynamic">
+      <mat-label>Last name</mat-label>
+      <input matInput formControlName="lastName" />
+    </mat-form-field>
+
+    <div class="flex flex-none flex-col gap-3 rounded-2xl border border-neutral-200 bg-neutral-50 px-4 py-4 dark:border-neutral-800 dark:bg-neutral-900/40">
+      <div class="flex items-center justify-between">
+        <span class="text-sm font-semibold">Account Status</span>
+        <mat-slide-toggle formControlName="enabled" color="primary">
+          <span class="text-xs font-semibold" [class.text-primary-600]="form.controls.enabled.value" [class.text-neutral-500]="!form.controls.enabled.value">
+            {{ form.controls.enabled.value ? 'Enabled' : 'Disabled' }}
+          </span>
+        </mat-slide-toggle>
+      </div>
+    </div>
+
+    <div class="flex justify-end pt-2">
+      <button mat-flat-button color="primary" type="submit" [disabled]="form.invalid || isSaving">Save</button>
+    </div>
+  </div>
+
+  <div class="mt-6 flex flex-col-reverse gap-3 border-t border-neutral-200 pt-5 sm:flex-row sm:items-center sm:justify-end dark:border-neutral-800">
+    <button mat-button type="button" (click)="cancelled.emit()" [disabled]="isSaving">Cancel</button>
+  </div>
+</form>

package/src/templates/angular/iam/user-form.component.ts.ejs

@@ -0,0 +1,100 @@
+import { CommonModule } from '@angular/common';
+import { Component, EventEmitter, Input, OnChanges, Output, inject } from '@angular/core';
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+import { MatButtonModule } from '@angular/material/button';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { MatInputModule } from '@angular/material/input';
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { map } from 'rxjs';
+import { KeycloakAdminService, UserRepresentation } from '@/app/core/auth';
+import { LoadingOverlayComponent } from '@/app/domains/admin/modules/apps/shared/components/loading-overlay.component';
+
+@Component({
+  selector: 'app-user-form',
+  standalone: true,
+  imports: [
+    CommonModule,
+    ReactiveFormsModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatProgressSpinnerModule,
+    MatSlideToggleModule,
+    LoadingOverlayComponent,
+  ],
+  templateUrl: './user-form.component.html',
+})
+export class UserFormComponent implements OnChanges {
+  private readonly fb = inject(FormBuilder);
+  private readonly keycloak = inject(KeycloakAdminService);
+
+  @Input() user: UserRepresentation | null = null;
+  @Input() mode: 'create' | 'edit' = 'create';
+  @Output() readonly saved = new EventEmitter<void>();
+  @Output() readonly cancelled = new EventEmitter<void>();
+
+  hidePassword = true;
+  isSaving = false;
+
+  readonly form = this.fb.nonNullable.group({
+    username: ['', Validators.required],
+    email: [''],
+    firstName: [''],
+    lastName: [''],
+    password: [''],
+    enabled: [true],
+  });
+
+  ngOnChanges(): void {
+    this.form.reset({
+      username: this.user?.username || '',
+      email: this.user?.email || '',
+      firstName: this.user?.firstName || '',
+      lastName: this.user?.lastName || '',
+      password: '',
+      enabled: this.user?.enabled !== false,
+    });
+  }
+
+  save(): void {
+    if (this.form.invalid || this.isSaving) {
+      this.form.markAllAsTouched();
+      return;
+    }
+    this.isSaving = true;
+    const value = this.form.getRawValue();
+    const payload: UserRepresentation = {
+      id: this.user?.id,
+      username: value.username,
+      email: value.email,
+      firstName: value.firstName,
+      lastName: value.lastName,
+      enabled: value.enabled,
+    };
+
+    const request$ = this.user?.id
+      ? this.keycloak.updateUser({ id: this.user.id, ...payload }).pipe(map(() => this.user as UserRepresentation))
+      : this.keycloak.createUser(payload);
+
+    request$.subscribe({
+      next: (created: UserRepresentation) => {
+        const userId = this.user?.id || created?.id;
+        if (!this.user && userId && value.password) {
+          this.keycloak.resetPassword(userId, {
+            type: 'password',
+            value: value.password,
+            temporary: true,
+          }).subscribe();
+        }
+        this.isSaving = false;
+        this.saved.emit();
+      },
+      error: () => {
+        this.isSaving = false;
+      },
+    });
+  }
+}