qdadm 0.35.0 → 0.38.0

package/src/security/index.js

@@ -0,0 +1,45 @@
+/**
+ * Security module - Permission and role management
+ *
+ * Provides:
+ * - PermissionMatcher: Wildcard pattern matching (*, **)
+ * - PermissionRegistry: Central registry for module permissions
+ * - RoleGranterAdapter: Interface for role → permissions mapping
+ * - StaticRoleGranterAdapter: Config-based role granter (default)
+ * - EntityRoleGranterAdapter: Entity-based role granter (for UI management)
+ * - PersistableRoleGranterAdapter: Load/persist from any source (localStorage, API)
+ * - SecurityModule: System module for roles UI (uses RolesManager)
+ * - RolesManager: System entity manager for roles
+ * - UsersManager: System entity manager for users (linked to roles)
+ *
+ * @example
+ * import {
+ *   PermissionMatcher,
+ *   PermissionRegistry,
+ *   StaticRoleGranterAdapter,
+ *   EntityRoleGranterAdapter,
+ *   PersistableRoleGranterAdapter,
+ *   createLocalStorageRoleGranter,
+ *   UsersManager
+ * } from 'qdadm/security'
+ */
+
+export { PermissionMatcher } from './PermissionMatcher.js'
+export { PermissionRegistry } from './PermissionRegistry.js'
+export { RoleGranterAdapter } from './RoleGranterAdapter.js'
+export { StaticRoleGranterAdapter } from './StaticRoleGranterAdapter.js'
+export { EntityRoleGranterAdapter } from './EntityRoleGranterAdapter.js'
+export {
+  PersistableRoleGranterAdapter,
+  createLocalStorageRoleGranter
+} from './PersistableRoleGranterAdapter.js'
+export { SecurityModule } from './SecurityModule.js'
+export { RolesManager } from './RolesManager.js'
+export { UsersManager } from './UsersManager.js'
+export { RoleGranterStorage } from './RoleGranterStorage.js'
+
+/**
+ * Standard entity actions for CRUD operations
+ * Used by PermissionRegistry.registerEntity()
+ */
+export const ENTITY_ACTIONS = ['read', 'list', 'create', 'update', 'delete']

package/src/security/pages/RoleForm.vue

@@ -0,0 +1,212 @@
+<script setup>
+/**
+ * RoleForm - Role create/edit form (standard FormPage pattern)
+ */
+
+import { ref, computed, inject } from 'vue'
+import { useFormPageBuilder, FormPage, useOrchestrator, PermissionEditor } from '../../index.js'
+import InputText from 'primevue/inputtext'
+import AutoComplete from 'primevue/autocomplete'
+import Chip from 'primevue/chip'
+
+// ============ FORM BUILDER ============
+const form = useFormPageBuilder({ entity: 'roles' })
+
+// ============ HELPERS ============
+const { getManager } = useOrchestrator()
+const manager = getManager('roles')
+
+// Get permissionRegistry directly from Kernel (via provide/inject)
+const permissionRegistry = inject('qdadmPermissionRegistry', null)
+
+// Role options for inheritance (exclude self)
+const allRoles = computed(() => {
+  const currentName = form.data.value?.name
+  const roles = manager?.roleGranter?.getRoles() || []
+  return roles
+    .filter(name => name !== currentName)
+    .map(name => {
+      const role = manager?.roleGranter?.getRole?.(name)
+      return {
+        name,
+        label: role?.label || name,
+        display: `${name} (${role?.label || name})`
+      }
+    })
+})
+
+// Autocomplete for roles
+const roleInput = ref('')
+const roleSuggestions = ref([])
+
+function searchRoles(event) {
+  const query = (event.query || '').toLowerCase()
+  const selected = form.data.value.inherits || []
+
+  roleSuggestions.value = allRoles.value
+    .filter(r => !selected.includes(r.name))
+    .filter(r =>
+      query === '' ||
+      r.name.toLowerCase().includes(query) ||
+      r.label.toLowerCase().includes(query)
+    )
+}
+
+function onRoleSelect(event) {
+  const role = event.value
+  if (role && !form.data.value.inherits?.includes(role.name)) {
+    form.data.value.inherits = [...(form.data.value.inherits || []), role.name]
+  }
+  roleInput.value = ''
+}
+
+function removeRole(roleName) {
+  form.data.value.inherits = (form.data.value.inherits || []).filter(r => r !== roleName)
+}
+
+function getRoleLabel(roleName) {
+  const role = allRoles.value.find(r => r.name === roleName)
+  return role?.label || roleName
+}
+</script>
+
+<template>
+  <FormPage v-bind="form.props.value" v-on="form.events">
+    <template #fields>
+      <div class="role-form-fields">
+        <!-- Role Name -->
+        <div class="form-field">
+          <label class="font-medium">Role Name</label>
+          <InputText
+            v-model="form.data.value.name"
+            :disabled="form.isEdit.value"
+            placeholder="ROLE_ADMIN"
+            class="w-full"
+          />
+          <small class="field-hint">Convention: ROLE_UPPERCASE_NAME</small>
+        </div>
+
+        <!-- Label -->
+        <div class="form-field">
+          <label class="font-medium">Display Label</label>
+          <InputText
+            v-model="form.data.value.label"
+            placeholder="Administrator"
+            class="w-full"
+          />
+        </div>
+
+        <!-- Inherits -->
+        <div class="form-field">
+          <label class="font-medium">Inherits From</label>
+          <div class="inherits-editor">
+            <div v-if="(form.data.value.inherits || []).length > 0" class="inherits-chips">
+              <Chip
+                v-for="roleName in form.data.value.inherits"
+                :key="roleName"
+                removable
+                @remove="removeRole(roleName)"
+                class="inherits-chip"
+              >
+                <span class="chip-name">{{ roleName }}</span>
+                <span class="chip-label">({{ getRoleLabel(roleName) }})</span>
+              </Chip>
+            </div>
+            <AutoComplete
+              v-model="roleInput"
+              :suggestions="roleSuggestions"
+              optionLabel="display"
+              placeholder="Type role name..."
+              :minLength="0"
+              completeOnFocus
+              @complete="searchRoles"
+              @item-select="onRoleSelect"
+              dropdown
+              class="w-full"
+            >
+              <template #option="{ option }">
+                <div class="role-option">
+                  <span class="role-name">{{ option.name }}</span>
+                  <span class="role-label">{{ option.label }}</span>
+                </div>
+              </template>
+            </AutoComplete>
+          </div>
+          <small class="field-hint">
+            This role inherits all permissions from selected roles
+          </small>
+        </div>
+
+        <!-- Permissions -->
+        <div class="form-field">
+          <label class="font-medium">
+            Permissions ({{ (form.data.value.permissions || []).length }})
+          </label>
+          <PermissionEditor
+            v-model="form.data.value.permissions"
+            :permissionRegistry="permissionRegistry"
+            placeholder="Type namespace:action..."
+          />
+        </div>
+      </div>
+    </template>
+  </FormPage>
+</template>
+
+<style scoped>
+/* Form layout - .form-field and .field-hint are global (main.css) */
+.role-form-fields {
+  display: flex;
+  flex-direction: column;
+  gap: 1.5rem;
+}
+
+/* Inherits editor - uses .editor-box pattern */
+.inherits-editor {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: var(--p-surface-50);
+}
+
+/* Inherits chips - uses .editor-chips pattern */
+.inherits-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--p-surface-200);
+}
+
+.inherits-chip {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.chip-name {
+  font-weight: 500;
+}
+
+.chip-label {
+  color: var(--p-surface-500);
+  margin-left: 0.25rem;
+}
+
+.role-option {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+}
+
+.role-name {
+  font-family: monospace;
+  font-weight: 500;
+}
+
+.role-label {
+  color: var(--p-surface-500);
+  font-size: 0.875rem;
+}
+</style>

package/src/security/pages/RoleList.vue

@@ -0,0 +1,106 @@
+<script setup>
+/**
+ * RoleList - Role listing page (standard ListPage pattern)
+ */
+
+import { useListPageBuilder, ListPage, useOrchestrator } from '../../index.js'
+import Column from 'primevue/column'
+import Tag from 'primevue/tag'
+import Chip from 'primevue/chip'
+import Message from 'primevue/message'
+
+// ============ LIST BUILDER ============
+const list = useListPageBuilder({ entity: 'roles' })
+
+// ============ SEARCH ============
+list.setSearch({
+  placeholder: 'Search roles...',
+  fields: ['name', 'label']
+})
+
+// ============ HEADER ACTIONS ============
+list.addCreateAction('New Role')
+
+// ============ ROW ACTIONS ============
+list.addEditAction()
+list.addDeleteAction({ labelField: 'label' })
+
+// ============ HELPERS ============
+const { getManager } = useOrchestrator()
+const manager = getManager('roles')
+const canPersist = manager?.canPersist ?? false
+</script>
+
+<template>
+  <ListPage v-bind="list.props.value" v-on="list.events">
+    <!-- Read-only Warning -->
+    <template #before-table>
+      <Message v-if="!canPersist" severity="info" :closable="false" class="mb-4">
+        <div class="flex align-items-center gap-2">
+          <i class="pi pi-info-circle text-xl"></i>
+          <span>
+            <strong>Read-only:</strong> Roles are configured statically.
+            Use a PersistableRoleGranterAdapter for editing.
+          </span>
+        </div>
+      </Message>
+    </template>
+
+    <template #columns>
+      <Column field="name" header="Role" sortable style="width: 25%">
+        <template #body="{ data }">
+          <div>
+            <code class="role-name">{{ data.name }}</code>
+            <div v-if="data.label && data.label !== data.name" class="text-sm text-color-secondary mt-1">
+              {{ data.label }}
+            </div>
+          </div>
+        </template>
+      </Column>
+
+      <Column header="Inherits" style="width: 20%">
+        <template #body="{ data }">
+          <div v-if="data.inherits?.length" class="flex flex-wrap gap-1">
+            <Tag
+              v-for="parent in data.inherits"
+              :key="parent"
+              :value="parent"
+              severity="secondary"
+            />
+          </div>
+          <span v-else class="text-color-secondary">-</span>
+        </template>
+      </Column>
+
+      <Column header="Permissions" style="width: 40%">
+        <template #body="{ data }">
+          <div v-if="data.permissions?.length" class="flex flex-wrap gap-1">
+            <Chip
+              v-for="perm in data.permissions.slice(0, 5)"
+              :key="perm"
+              :label="perm"
+              class="text-xs"
+            />
+            <Chip
+              v-if="data.permissions.length > 5"
+              :label="`+${data.permissions.length - 5} more`"
+              class="text-xs"
+            />
+          </div>
+          <span v-else class="text-color-secondary">No permissions</span>
+        </template>
+      </Column>
+    </template>
+  </ListPage>
+</template>
+
+<style scoped>
+.role-name {
+  padding: 0.2rem 0.4rem;
+  background: var(--p-surface-100);
+  border-radius: 4px;
+  font-size: 0.875rem;
+  color: var(--p-primary-color);
+  font-weight: 500;
+}
+</style>

package/src/styles/main.css

@@ -20,6 +20,18 @@ html, body, #app {
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
 }
 
+/* Global placeholder styling - light blue-gray for better visibility */
+input::placeholder,
+textarea::placeholder,
+.p-inputtext::placeholder,
+.p-autocomplete-input::placeholder,
+.p-textarea::placeholder,
+.p-select-label.p-placeholder,
+.p-dropdown-label.p-placeholder {
+  color: #a0aec0 !important;
+  opacity: 1;
+}
+
 /* Layout - AppLayout styles are now scoped in AppLayout.vue */
 /* Only keep truly global layout utilities here */
 
@@ -181,13 +193,61 @@ html, body, #app {
   flex: 1;
 }
 
-/* Field hint */
+/* Field hint - small helper text below inputs */
 .field-hint,
 .form-hint {
-  font-size: 0.75rem;
+  font-size: 0.8rem;
+  color: var(--p-surface-400);
+  margin-top: 0.25rem;
+  display: block;
+}
+
+/* Field error - validation error text */
+.field-error {
+  font-size: 0.8rem;
+  color: var(--p-red-500);
+  margin-top: 0.25rem;
+  display: block;
+}
+
+/* Editor box - container for complex editors (permissions, scopes, etc.) */
+.editor-box {
+  border: 1px solid var(--p-surface-200);
+  border-radius: 0.5rem;
+  padding: 0.75rem;
+  background: var(--p-surface-50);
+}
+
+/* Chips container with separator */
+.editor-chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.5rem;
+  margin-bottom: 0.75rem;
+  padding-bottom: 0.75rem;
+  border-bottom: 1px solid var(--p-surface-200);
+}
+
+/* Chip typography for code-like content */
+.chip-code {
+  font-family: monospace;
+  font-size: 0.875rem;
+}
+
+.chip-namespace {
   color: var(--p-surface-500);
 }
 
+.chip-action {
+  color: var(--p-primary-600);
+  font-weight: 500;
+}
+
+.chip-wildcard {
+  color: var(--p-orange-500);
+  font-weight: 700;
+}
+
 /* Info grid for readonly data */
 .info-grid {
   display: grid;