@ngbplatform/ui 1.3.0

package/src/ngb/security/NgbUsersPage.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { ApiError } from '../api/http'
+import type { RegisterColumn, RegisterDataRow } from '../components/register/registerTypes'
+import NgbRecycleBinFilter from '../metadata/NgbRecycleBinFilter.vue'
+import NgbRegisterPageLayout from '../metadata/NgbRegisterPageLayout.vue'
+import type { QueryTrashMode } from '../router/queryParams'
+import { toErrorMessage } from '../utils/errorMessage'
+import NgbAccessDeniedState from './NgbAccessDeniedState.vue'
+import { getUsers } from './api'
+import { useAccessStore } from './useAccessStore'
+import type { UserListItemDto } from './types'
+
+const router = useRouter()
+const access = useAccessStore()
+
+const loading = ref(false)
+const error = ref<string | null>(null)
+const accessDenied = ref(false)
+const users = ref<UserListItemDto[]>([])
+const status = ref<QueryTrashMode>('active')
+
+const columns: RegisterColumn[] = [
+  {
+    key: 'user',
+    title: 'User',
+    width: 320,
+    minWidth: 240,
+    pinned: 'left',
+    format: (value) => Array.isArray(value) ? value.join('\n') : String(value ?? ''),
+  },
+  { key: 'roles', title: 'Roles', width: 280, minWidth: 200, wrap: true },
+  { key: 'keycloakLabel', title: 'Keycloak', width: 120, minWidth: 100, align: 'center', sortable: false },
+]
+
+const filteredUsers = computed(() => {
+  return users.value
+    .filter((user) => {
+      if (status.value === 'active') return user.isActive
+      if (status.value === 'deleted') return !user.isActive
+      return true
+    })
+    .sort((a, b) => (a.displayName ?? a.email ?? '').localeCompare(b.displayName ?? b.email ?? ''))
+})
+
+const rows = computed<RegisterDataRow[]>(() => filteredUsers.value.map((user) => ({
+  key: user.userId,
+  __status: user.isActive ? 'posted' : 'marked',
+  __statusTitle: user.isActive ? 'Active' : 'Inactive',
+  user: [userTitle(user), user.email || user.authSubject],
+  roles: roleSummary(user),
+  keycloakLabel: user.keycloakEnabled === true ? 'Yes' : 'No',
+})))
+
+function userTitle(user: UserListItemDto): string {
+  return user.displayName?.trim() || user.email?.trim() || user.authSubject
+}
+
+function roleSummary(user: UserListItemDto): string {
+  if (!user.roles.length) return 'No roles'
+  return user.roles.map((role) => role.name).join(', ')
+}
+
+async function load(): Promise<void> {
+  loading.value = true
+  error.value = null
+  accessDenied.value = false
+
+  try {
+    await access.load()
+    users.value = await getUsers()
+  } catch (cause) {
+    users.value = []
+    accessDenied.value = cause instanceof ApiError && cause.status === 403
+    error.value = accessDenied.value ? null : toErrorMessage(cause, 'Failed to load users')
+  } finally {
+    loading.value = false
+  }
+}
+
+function openUser(userId: string): void {
+  void router.push(`/admin/security/users/${encodeURIComponent(userId)}`)
+}
+
+function createUser(): void {
+  void router.push('/admin/security/users/new')
+}
+
+function goBack(): void {
+  void router.push('/home')
+}
+
+onMounted(() => {
+  void load()
+})
+</script>
+
+<template>
+  <NgbAccessDeniedState v-if="accessDenied" />
+
+  <NgbRegisterPageLayout
+    v-else
+    title="Users"
+    :items-count="filteredUsers.length"
+    :total="users.length"
+    :loading="loading"
+    :error="error"
+    :show-filter="false"
+    :disable-create="!access.canManageUsers"
+    :disable-prev="true"
+    :disable-next="true"
+    :columns="columns"
+    :rows="rows"
+    storage-key="ngb:security:users"
+    @back="goBack"
+    @refresh="load"
+    @create="createUser"
+    @rowActivate="openUser"
+  >
+    <template #filters>
+      <NgbRecycleBinFilter v-model="status" />
+    </template>
+  </NgbRegisterPageLayout>
+</template>

package/src/ngb/security/api.ts

@@ -0,0 +1,91 @@
+import { httpGet, httpPost, httpPut } from '../api/http'
+import type {
+  CreateRoleRequestDto,
+  CreateUserRequestDto,
+  CurrentAccessDto,
+  EffectiveAccessDto,
+  PermissionDefinitionDto,
+  ReplaceRolePermissionsRequestDto,
+  ReplaceUserRolesRequestDto,
+  RoleDetailsDto,
+  RoleListItemDto,
+  UpdateRoleRequestDto,
+  UpdateUserRequestDto,
+  UserDetailsDto,
+  UserListItemDto,
+} from './types'
+
+export async function getCurrentAccess(): Promise<CurrentAccessDto> {
+  return await httpGet<CurrentAccessDto>('/api/security/me/access')
+}
+
+export async function getPermissionDefinitions(): Promise<PermissionDefinitionDto[]> {
+  return await httpGet<PermissionDefinitionDto[]>('/api/security/permissions/definitions')
+}
+
+export async function getUsers(): Promise<UserListItemDto[]> {
+  return await httpGet<UserListItemDto[]>('/api/security/users')
+}
+
+export async function createUser(request: CreateUserRequestDto): Promise<UserDetailsDto> {
+  return await httpPost<UserDetailsDto, CreateUserRequestDto>('/api/security/users', request)
+}
+
+export async function getUser(userId: string): Promise<UserDetailsDto> {
+  return await httpGet<UserDetailsDto>(`/api/security/users/${encodeURIComponent(userId)}`)
+}
+
+export async function updateUser(userId: string, request: UpdateUserRequestDto): Promise<UserDetailsDto> {
+  return await httpPut<UserDetailsDto, UpdateUserRequestDto>(`/api/security/users/${encodeURIComponent(userId)}`, request)
+}
+
+export async function deactivateUser(userId: string): Promise<void> {
+  await httpPost<void>(`/api/security/users/${encodeURIComponent(userId)}/deactivate`)
+}
+
+export async function reactivateUser(userId: string): Promise<void> {
+  await httpPost<void>(`/api/security/users/${encodeURIComponent(userId)}/reactivate`)
+}
+
+export async function replaceUserRoles(userId: string, roleIds: string[]): Promise<void> {
+  await httpPut<void, ReplaceUserRolesRequestDto>(
+    `/api/security/users/${encodeURIComponent(userId)}/roles`,
+    { roleIds },
+  )
+}
+
+export async function getUserEffectiveAccess(userId: string): Promise<EffectiveAccessDto> {
+  return await httpGet<EffectiveAccessDto>(`/api/security/users/${encodeURIComponent(userId)}/effective-access`)
+}
+
+export async function getRoles(): Promise<RoleListItemDto[]> {
+  return await httpGet<RoleListItemDto[]>('/api/security/roles')
+}
+
+export async function createRole(request: CreateRoleRequestDto): Promise<RoleDetailsDto> {
+  return await httpPost<RoleDetailsDto, CreateRoleRequestDto>('/api/security/roles', request)
+}
+
+export async function getRole(roleId: string): Promise<RoleDetailsDto> {
+  return await httpGet<RoleDetailsDto>(`/api/security/roles/${encodeURIComponent(roleId)}`)
+}
+
+export async function updateRole(roleId: string, request: UpdateRoleRequestDto): Promise<RoleDetailsDto> {
+  return await httpPut<RoleDetailsDto, UpdateRoleRequestDto>(`/api/security/roles/${encodeURIComponent(roleId)}`, request)
+}
+
+export async function deactivateRole(roleId: string): Promise<void> {
+  await httpPost<void>(`/api/security/roles/${encodeURIComponent(roleId)}/deactivate`)
+}
+
+export async function reactivateRole(roleId: string): Promise<void> {
+  await httpPost<void>(`/api/security/roles/${encodeURIComponent(roleId)}/reactivate`)
+}
+
+export async function replaceRolePermissions(roleId: string, permissions: ReplaceRolePermissionsRequestDto['permissions']): Promise<void> {
+  await httpPut<void, ReplaceRolePermissionsRequestDto>(
+    `/api/security/roles/${encodeURIComponent(roleId)}/permissions`,
+    { permissions },
+  )
+}
+

package/src/ngb/security/audit.ts

@@ -0,0 +1,21 @@
+import type { EditorAuditBehavior } from '../editor/types'
+
+export const USER_AUDIT_BEHAVIOR: EditorAuditBehavior = {
+  actionTitles: {
+    'security.user.create': 'User created',
+    'security.user.update': 'User updated',
+    'security.user.deactivate': 'User deactivated',
+    'security.user.reactivate': 'User reactivated',
+    'security.user.roles.replace': 'User roles changed',
+  },
+}
+
+export const ROLE_AUDIT_BEHAVIOR: EditorAuditBehavior = {
+  actionTitles: {
+    'security.role.create': 'Role created',
+    'security.role.update': 'Role updated',
+    'security.role.deactivate': 'Role deactivated',
+    'security.role.reactivate': 'Role reactivated',
+    'security.role.permissions.replace': 'Role permissions changed',
+  },
+}

package/src/ngb/security/permissions.ts

@@ -0,0 +1,65 @@
+import type { PermissionAssignmentDto, PermissionDefinitionDto, PermissionGroupDto } from './types'
+
+export type PermissionKeyLike = PermissionAssignmentDto | string
+
+function normalizeSegment(value: string | null | undefined): string {
+  return String(value ?? '').trim().toLowerCase()
+}
+
+export function buildPermissionKey(permission: PermissionKeyLike): string {
+  if (typeof permission === 'string') return permission.trim().toLowerCase()
+  return [
+    normalizeSegment(permission.resourceKind),
+    normalizeSegment(permission.resourceCode),
+    normalizeSegment(permission.actionCode),
+  ].join('.')
+}
+
+export function buildPermissionAssignment(resourceKind: string, resourceCode: string, actionCode: string): PermissionAssignmentDto {
+  return {
+    resourceKind: normalizeSegment(resourceKind),
+    resourceCode: normalizeSegment(resourceCode),
+    actionCode: normalizeSegment(actionCode),
+  }
+}
+
+export const SYSTEM_PERMISSIONS = {
+  usersView: buildPermissionAssignment('system', 'users', 'view'),
+  usersManage: buildPermissionAssignment('system', 'users', 'manage'),
+  rolesView: buildPermissionAssignment('system', 'roles', 'view'),
+  rolesManage: buildPermissionAssignment('system', 'roles', 'manage'),
+  permissionsView: buildPermissionAssignment('system', 'permissions', 'view'),
+  auditView: buildPermissionAssignment('system', 'audit', 'view'),
+} as const
+
+export function hasPermission(permissions: readonly PermissionAssignmentDto[] | null | undefined, permission: PermissionKeyLike): boolean {
+  const key = buildPermissionKey(permission)
+  if (!key || !permissions?.length) return false
+  return permissions.some((entry) => buildPermissionKey(entry) === key)
+}
+
+export function toPermissionKeySet(permissions: readonly PermissionAssignmentDto[] | null | undefined): Set<string> {
+  return new Set((permissions ?? []).map((entry) => buildPermissionKey(entry)).filter(Boolean))
+}
+
+export function groupPermissionDefinitions(definitions: readonly PermissionDefinitionDto[]): PermissionGroupDto[] {
+  const groups = new Map<string, PermissionDefinitionDto[]>()
+
+  for (const definition of definitions) {
+    const group = definition.group?.trim() || 'Other'
+    const items = groups.get(group) ?? []
+    items.push(definition)
+    groups.set(group, items)
+  }
+
+  return Array.from(groups.entries())
+    .map(([group, permissions]) => ({
+      group,
+      permissions: permissions
+        .slice()
+        .sort((a, b) => a.resourceKind.localeCompare(b.resourceKind)
+          || a.resourceCode.localeCompare(b.resourceCode)
+          || a.actionCode.localeCompare(b.actionCode)),
+    }))
+    .sort((a, b) => a.group.localeCompare(b.group))
+}

package/src/ngb/security/types.ts

@@ -0,0 +1,157 @@
+export type PermissionAssignmentDto = {
+  resourceKind: string
+  resourceCode: string
+  actionCode: string
+}
+
+export type PermissionDefinitionDto = PermissionAssignmentDto & {
+  displayName: string
+  group: string
+  description?: string | null
+}
+
+export type PermissionGroupDto = {
+  group: string
+  permissions: PermissionDefinitionDto[]
+}
+
+export type RoleBadgeDto = {
+  roleId: string
+  code: string
+  name: string
+  isSystem: boolean
+  isActive: boolean
+}
+
+export type UserBadgeDto = {
+  userId: string
+  email?: string | null
+  displayName?: string | null
+  isActive: boolean
+}
+
+export type UserListItemDto = {
+  userId: string
+  authSubject: string
+  email?: string | null
+  displayName?: string | null
+  isActive: boolean
+  keycloakEnabled?: boolean | null
+  roles: RoleBadgeDto[]
+  createdAtUtc: string
+  updatedAtUtc: string
+}
+
+export type UserDetailsDto = {
+  userId: string
+  authSubject: string
+  email?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  displayName?: string | null
+  isActive: boolean
+  keycloakEnabled?: boolean | null
+  roles: RoleBadgeDto[]
+  accessVersion: number
+  createdAtUtc: string
+  updatedAtUtc: string
+}
+
+export type CreateUserRequestDto = {
+  email: string
+  firstName?: string | null
+  lastName?: string | null
+  displayName?: string | null
+  enabled: boolean
+  temporaryPassword?: string | null
+  requirePasswordUpdate: boolean
+  roleIds: string[]
+}
+
+export type UpdateUserRequestDto = {
+  email?: string | null
+  firstName?: string | null
+  lastName?: string | null
+  displayName?: string | null
+  enabled: boolean
+  temporaryPassword?: string | null
+  requirePasswordUpdate: boolean
+  roleIds: string[]
+}
+
+export type ReplaceUserRolesRequestDto = {
+  roleIds: string[]
+}
+
+export type RoleListItemDto = {
+  roleId: string
+  code: string
+  name: string
+  description?: string | null
+  isSystem: boolean
+  isActive: boolean
+  assignedUsersCount: number
+  createdAtUtc: string
+  updatedAtUtc: string
+}
+
+export type RoleDetailsDto = {
+  roleId: string
+  code: string
+  name: string
+  description?: string | null
+  isSystem: boolean
+  isActive: boolean
+  permissions: PermissionAssignmentDto[]
+  assignedUsers: UserBadgeDto[]
+  createdAtUtc: string
+  updatedAtUtc: string
+}
+
+export type CreateRoleRequestDto = {
+  code: string
+  name: string
+  description?: string | null
+  permissions: PermissionAssignmentDto[]
+}
+
+export type UpdateRoleRequestDto = {
+  code: string
+  name: string
+  description?: string | null
+  isActive: boolean
+  permissions: PermissionAssignmentDto[]
+}
+
+export type ReplaceRolePermissionsRequestDto = {
+  permissions: PermissionAssignmentDto[]
+}
+
+export type CurrentAccessDto = {
+  userId?: string | null
+  authSubject?: string | null
+  isAuthenticated: boolean
+  isActive: boolean
+  isBootstrapAdmin: boolean
+  accessVersion: number
+  roles?: RoleBadgeDto[]
+  permissions: PermissionAssignmentDto[]
+}
+
+export type EffectiveAccessResourceDto = {
+  resourceKind: string
+  resourceCode: string
+  displayName: string
+  actions: string[]
+}
+
+export type EffectiveAccessGroupDto = {
+  group: string
+  resources: EffectiveAccessResourceDto[]
+}
+
+export type EffectiveAccessDto = {
+  userId: string
+  accessVersion: number
+  groups: EffectiveAccessGroupDto[]
+}

package/src/ngb/security/useAccessStore.ts

@@ -0,0 +1,69 @@
+import { defineStore } from 'pinia'
+import { toErrorMessage } from '../utils/errorMessage'
+import { getCurrentAccess } from './api'
+import { buildPermissionKey, hasPermission, SYSTEM_PERMISSIONS, toPermissionKeySet, type PermissionKeyLike } from './permissions'
+import type { CurrentAccessDto } from './types'
+
+export const useAccessStore = defineStore('access', {
+  state: () => ({
+    current: null as CurrentAccessDto | null,
+    permissionKeys: new Set<string>(),
+    isLoading: false,
+    error: null as string | null,
+    loadedAt: 0,
+  }),
+  getters: {
+    isActive: (state) => state.current?.isActive === true,
+    canViewUsers: (state) => state.current?.isBootstrapAdmin === true || hasPermission(state.current?.permissions, SYSTEM_PERMISSIONS.usersView),
+    canManageUsers: (state) => state.current?.isBootstrapAdmin === true || hasPermission(state.current?.permissions, SYSTEM_PERMISSIONS.usersManage),
+    canViewRoles: (state) => state.current?.isBootstrapAdmin === true || hasPermission(state.current?.permissions, SYSTEM_PERMISSIONS.rolesView),
+    canManageRoles: (state) => state.current?.isBootstrapAdmin === true || hasPermission(state.current?.permissions, SYSTEM_PERMISSIONS.rolesManage),
+    canViewPermissions: (state) => state.current?.isBootstrapAdmin === true || hasPermission(state.current?.permissions, SYSTEM_PERMISSIONS.permissionsView),
+    applicationRoleNames: (state) => {
+      const seen = new Set<string>()
+      return (state.current?.roles ?? [])
+        .filter((role) => role.isActive)
+        .map((role) => (role.name || role.code).trim())
+        .filter((name) => {
+          const key = name.toLowerCase()
+          if (!name || seen.has(key)) return false
+          seen.add(key)
+          return true
+        })
+    },
+  },
+  actions: {
+    async load(force = false): Promise<CurrentAccessDto | null> {
+      if (this.isLoading) return this.current
+      if (!force && this.current) return this.current
+
+      this.isLoading = true
+      this.error = null
+
+      try {
+        const access = await getCurrentAccess()
+        this.current = access
+        this.permissionKeys = toPermissionKeySet(access.permissions)
+        this.loadedAt = Date.now()
+        return access
+      } catch (cause) {
+        this.current = null
+        this.permissionKeys = new Set()
+        this.error = toErrorMessage(cause, 'Failed to load access profile')
+        return null
+      } finally {
+        this.isLoading = false
+      }
+    },
+    hasPermission(permission: PermissionKeyLike): boolean {
+      return this.permissionKeys.has(buildPermissionKey(permission))
+    },
+    reset(): void {
+      this.current = null
+      this.permissionKeys = new Set()
+      this.error = null
+      this.loadedAt = 0
+      this.isLoading = false
+    },
+  },
+})

package/src/ngb/site/NgbDashboardAsOfToolbar.vue

@@ -0,0 +1,100 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import NgbDatePicker from '../primitives/NgbDatePicker.vue'
+import NgbIcon from '../primitives/NgbIcon.vue'
+
+const props = withDefaults(defineProps<{
+  modelValue: string | null | undefined
+  loading?: boolean
+  disabled?: boolean
+}>(), {
+  loading: false,
+  disabled: false,
+})
+
+const emit = defineEmits<{
+  (e: 'refresh'): void
+  (e: 'update:modelValue', value: string | null): void
+}>()
+
+const isDisabled = computed(() => props.loading || props.disabled)
+
+function onRefresh(): void {
+  if (isDisabled.value) return
+  emit('refresh')
+}
+</script>
+
+<template>
+  <div class="ngb-dashboard-toolbar-control">
+    <div class="ngb-dashboard-toolbar-picker">
+      <NgbDatePicker
+        :model-value="modelValue"
+        grouped
+        :disabled="isDisabled"
+        @update:model-value="emit('update:modelValue', $event)"
+      />
+    </div>
+
+    <div class="ngb-dashboard-toolbar-divider" aria-hidden="true" />
+
+    <button
+      type="button"
+      class="ngb-dashboard-toolbar-button ngb-focus"
+      :disabled="isDisabled"
+      title="Refresh"
+      aria-label="Refresh"
+      @click="onRefresh"
+    >
+      <NgbIcon name="refresh" :size="15" />
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.ngb-dashboard-toolbar-control {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.375rem;
+  min-height: 28px;
+  border: 1px solid var(--ngb-border);
+  border-radius: var(--ngb-radius);
+  background: var(--ngb-card);
+  padding: 0 0.25rem;
+  box-shadow: var(--ngb-shadow-1);
+}
+
+.ngb-dashboard-toolbar-picker {
+  width: 10rem;
+}
+
+.ngb-dashboard-toolbar-divider {
+  height: 1rem;
+  width: 1px;
+  background: var(--ngb-border);
+}
+
+.ngb-dashboard-toolbar-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: 26px;
+  width: 26px;
+  border: none;
+  border-radius: var(--ngb-radius);
+  background: transparent;
+  color: var(--ngb-muted);
+  transition: background-color 140ms ease, color 140ms ease;
+}
+
+.ngb-dashboard-toolbar-button:hover:not(:disabled) {
+  background: var(--ngb-bg);
+  color: var(--ngb-text);
+}
+
+.ngb-dashboard-toolbar-button:disabled {
+  cursor: not-allowed;
+  opacity: 0.45;
+}
+</style>