{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "access-request-workflow", "title": "Access Request Workflow", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/access-request-workflow/access-request-workflow.component.ts", "content": "// Just-In-Time (JIT) IAM temporary privilege escalation: governance metric cards,\n// elevated session countdown timers, request form dialog, and an approval queue with\n// instant revoke and audit actions. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n Check,\n Clock,\n Copy,\n FileText,\n History,\n Hourglass,\n KeyRound,\n Lock,\n LucideAngularModule,\n MoreHorizontal,\n Plus,\n Search,\n Send,\n ShieldAlert,\n ShieldCheck,\n UserCheck,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiAvatarComponent, UiAvatarFallbackComponent } from '@/ui/avatar/avatar.component'\nimport { UiBadgeComponent, type BadgeVariant } from '@/ui/badge/badge.component'\nimport { UiButtonComponent } from '@/ui/button/button.component'\nimport {\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n} from '@/ui/card/card.component'\nimport {\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n} from '@/ui/dialog/dialog.component'\nimport {\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n} from '@/ui/dropdown-menu/dropdown-menu.component'\nimport { UiInputComponent } from '@/ui/input/input.component'\nimport {\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n} from '@/ui/select/select.component'\nimport {\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n} from '@/ui/table/table.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type AccessRequestStatus = 'active' | 'pending' | 'expired' | 'rejected'\nexport type AccessRequestTab = 'all' | 'pending' | 'active' | 'expired'\n\nexport interface AccessRequester {\n name: string\n email: string\n team: string\n avatar: string\n}\n\nexport interface AccessRequest {\n id: string\n requester: AccessRequester\n targetRole: string\n system: string\n duration: string\n timeLeftLabel: string\n secondsLeft: number\n justification: string\n ticketId: string\n approver: string\n status: AccessRequestStatus\n createdAt: string\n expiresAt: string\n}\n\nconst initialRequests: AccessRequest[] = [\n {\n id: 'req-1',\n requester: { name: 'Elena Rostova', email: 'elena.rostova@acme.corp', team: 'SecOps Team', avatar: 'ER' },\n targetRole: 'AWS Production Admin',\n system: 'AWS Cloud IAM (us-east-1)',\n duration: '4 Hours',\n timeLeftLabel: '2h 45m left',\n secondsLeft: 9918,\n justification: 'Investigating latency spike on payment gateway for incident #SEC-849',\n ticketId: 'SEC-849',\n approver: 'Marcus Vance',\n status: 'active',\n createdAt: '1h 15m ago',\n expiresAt: 'Today at 16:30',\n },\n {\n id: 'req-2',\n requester: { name: 'Marcus Vance', email: 'marcus.vance@acme.corp', team: 'DevOps & Infra', avatar: 'MV' },\n targetRole: 'Production DB Read-Only',\n system: 'PostgreSQL Aurora Primary',\n duration: '1 Hour (Emergency)',\n timeLeftLabel: '48m left',\n secondsLeft: 2892,\n justification: 'Emergency replica query check during PostgreSQL failover testing',\n ticketId: 'INC-2044',\n approver: 'Sarah Chen',\n status: 'active',\n createdAt: '12m ago',\n expiresAt: 'Today at 14:15',\n },\n {\n id: 'req-3',\n requester: { name: 'Sarah Chen', email: 'sarah.chen@acme.corp', team: 'Core Platform', avatar: 'SC' },\n targetRole: 'Customer PII Decryption',\n system: 'Customer Data Vault (KMS)',\n duration: '8 Hours (1 Shift)',\n timeLeftLabel: 'Pending Approval',\n secondsLeft: 28800,\n justification: 'GDPR user deletion verification request #COMP-1102',\n ticketId: 'COMP-1102',\n approver: 'Marcus Vance',\n status: 'pending',\n createdAt: '10m ago',\n expiresAt: 'Awaiting approval',\n },\n {\n id: 'req-4',\n requester: { name: 'David Kim', email: 'david.kim@acme.corp', team: 'Fintech Systems', avatar: 'DK' },\n targetRole: 'Stripe Dashboard Full Access',\n system: 'Stripe Merchant Gateway',\n duration: '1 Hour (Emergency)',\n timeLeftLabel: 'Pending Approval',\n secondsLeft: 3600,\n justification: 'Refunding disputed charges for compromised merchant accounts',\n ticketId: 'FIN-582',\n approver: 'Marcus Vance',\n status: 'pending',\n createdAt: '25m ago',\n expiresAt: 'Awaiting approval',\n },\n {\n id: 'req-5',\n requester: { name: 'Alex Morgan', email: 'alex.m@acme.corp', team: 'Data Platform', avatar: 'AM' },\n targetRole: 'Production DB Read-Only',\n system: 'Snowflake Core Analytics',\n duration: '4 Hours',\n timeLeftLabel: 'Expired',\n secondsLeft: 0,\n justification: 'Quarterly compliance metrics export and audit schema migration verification',\n ticketId: 'AUD-309',\n approver: 'Elena Rostova',\n status: 'expired',\n createdAt: 'Yesterday',\n expiresAt: 'Expired at 18:00',\n },\n]\n\nfunction formatSecondsValue(seconds: number): string {\n if (seconds <= 0) return '00:00:00'\n const h = Math.floor(seconds / 3600)\n const m = Math.floor((seconds % 3600) / 60)\n const s = seconds % 60\n return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}:${s.toString().padStart(2, '0')}`\n}\n\nfunction timeLeftLabelFor(seconds: number): string {\n const h = Math.floor(seconds / 3600)\n const m = Math.floor((seconds % 3600) / 60)\n return h > 0 ? `${h}h ${m}m left` : `${m}m left`\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-access-request-workflow, [ui-access-request-workflow]',\n standalone: true,\n // React renders the root
itself: the host stays out of layout and `class` goes to the root.\n host: { '[attr.class]': '\"contents\"' },\n imports: [\n LucideAngularModule,\n UiAvatarComponent,\n UiAvatarFallbackComponent,\n UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuLabelComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n
\n

{{ title }}

\n
\n

{{ subtitle }}

\n
\n\n \n
\n\n \n \n \n
\n

\n \n Request Temporary Access\n

\n

\n Submit a Just-In-Time (JIT) access request with duration and business justification.\n

\n
\n\n
\n
\n \n \n \n \n Production DB Read-Only\n AWS Production Admin\n Stripe Dashboard Full Access\n Customer PII Decryption\n \n \n
\n\n
\n
\n \n \n \n \n 1 Hour (Emergency)\n 4 Hours\n 8 Hours (1 Shift)\n 24 Hours max\n \n \n
\n\n
\n \n \n \n \n Security Lead: Marcus Vance\n \n Infrastructure Team: Sarah Chen\n \n \n Compliance Officer: Elena Rostova\n \n On-Call Lead: David Kim\n \n \n
\n
\n\n
\n \n \n

\n All elevated actions are recorded and signed in the immutable IAM audit stream.\n

\n
\n\n
\n \n \n
\n
\n \n \n\n \n
\n
\n
\n

Active Elevated Sessions

\n
\n \n
\n
\n
\n
{{ activeCount() }}
\n

Expiring within 8h

\n
\n
\n\n
\n
\n

Pending Approvals

\n
\n \n
\n
\n
\n
{{ pendingCount() }}
\n

Requires security lead review

\n
\n
\n\n
\n
\n

Requests Expiring Today

\n
\n \n
\n
\n
\n
{{ expiringCount() }}
\n

Auto-revocation armed

\n
\n
\n\n
\n
\n

30-Day Total Requests

\n
\n \n
\n
\n
\n
{{ total30Day() }}
\n

98.2% compliance audit pass

\n
\n
\n
\n\n \n
\n
\n
\n
\n

Privilege Escalation Queue

\n

\n Review, approve, or reject active and pending privilege requests.\n

\n
\n\n
\n
\n \n \n
\n\n
\n \n \n \n \n
\n
\n
\n
\n\n
\n
\n \n \n \n \n \n \n \n \n \n \n \n \n @if (filteredRequests().length === 0) {\n \n \n \n } @else {\n @for (req of filteredRequests(); track req.id) {\n \n \n\n \n\n \n\n \n\n \n\n \n \n }\n }\n \n
RequesterTarget Role & SystemDuration & TimerBusiness JustificationStatusActions
\n No access requests match your filter.\n
\n
\n \n \n {{ req.requester.avatar }}\n \n \n
\n
{{ req.requester.name }}
\n
{{ req.requester.email }}
\n
\n
\n 		\n
\n \n {{ req.targetRole }}\n \n {{ req.system }}\n
\n 		\n
\n {{ req.duration }}\n @if (req.status === 'active') {\n
\n \n {{ formatSeconds(req.secondsLeft) }}\n
\n } @else if (req.status === 'pending') {\n
\n \n Awaiting start\n
\n } @else {\n
\n \n Session ended\n
\n }\n
\n 		\n
\n
\n \n #{{ req.ticketId }}\n \n \n Approver: {{ shortApprover(req.approver) }}\n \n
\n

\n {{ req.justification }}\n

\n
\n 		\n
\n @if (req.status === 'active') {\n \n \n \n \n \n Active - {{ req.timeLeftLabel }}\n \n } @else if (req.status === 'pending') {\n \n \n Pending Approval\n \n } @else if (req.status === 'expired') {\n \n \n Expired\n \n } @else {\n \n \n Rejected\n \n }\n
\n 		\n
\n @if (req.status === 'pending') {\n \n \n Approve\n \n \n \n Reject\n \n }\n @if (req.status === 'active') {\n \n \n Revoke\n \n \n \n \n
Elevated Session
\n \n \n \n Extend 30 Minutes\n \n \n \n {{ copiedId() === req.id ? 'Copied Token!' : 'Copy Token' }}\n \n \n \n \n Revoke Immediately\n \n \n \n }\n @if (req.status !== 'pending' && req.status !== 'active') {\n \n Re-request\n \n \n \n \n \n \n Request Again\n \n \n \n View Audit Log\n \n \n \n }\n
\n
\n
\n
\n
\n
\n `,\n})\nexport class UiAccessRequestWorkflowComponent {\n protected readonly Check = Check\n protected readonly Clock = Clock\n protected readonly Copy = Copy\n protected readonly FileText = FileText\n protected readonly History = History\n protected readonly Hourglass = Hourglass\n protected readonly KeyRound = KeyRound\n protected readonly Lock = Lock\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly Send = Send\n protected readonly ShieldAlert = ShieldAlert\n protected readonly ShieldCheck = ShieldCheck\n protected readonly UserCheck = UserCheck\n protected readonly X = X\n\n @Input() title = 'Access Requests & Privilege Elevation'\n @Input() subtitle = 'Request temporary Just-In-Time production access with audit approval.'\n @Input('class') className?: string\n\n readonly requests = signal(initialRequests.map((r) => ({ ...r, requester: { ...r.requester } })))\n\n readonly selectedTab = signal('all')\n readonly searchQuery = signal('')\n\n readonly isDialogOpen = signal(false)\n readonly formRole = signal('AWS Production Admin')\n readonly formDuration = signal('4 Hours')\n readonly formApprover = signal('Security Lead: Marcus Vance')\n readonly formJustification = signal('Investigating latency spike on payment gateway for incident #SEC-849')\n\n readonly copiedId = signal(null)\n private copyTimer: ReturnType | undefined\n\n constructor() {\n const destroyRef = inject(DestroyRef)\n const timer = setInterval(() => this.tick(), 1000)\n destroyRef.onDestroy(() => {\n clearInterval(timer)\n clearTimeout(this.copyTimer)\n })\n }\n\n readonly activeCount = computed(() => this.requests().filter((r) => r.status === 'active').length)\n readonly pendingCount = computed(() => this.requests().filter((r) => r.status === 'pending').length)\n readonly expiredTabCount = computed(\n () => this.requests().filter((r) => r.status === 'expired' || r.status === 'rejected').length,\n )\n readonly expiringCount = computed(\n () => this.requests().filter((r) => r.status === 'active' && r.secondsLeft <= 3600 * 4).length,\n )\n readonly total30Day = computed(() => 42 + this.requests().filter((r) => r.id.startsWith('req-custom')).length)\n\n readonly filteredRequests = computed(() => {\n const tab = this.selectedTab()\n const q = this.searchQuery().trim().toLowerCase()\n return this.requests().filter((req) => {\n if (tab === 'pending' || tab === 'active') {\n if (req.status !== tab) return false\n } else if (tab === 'expired') {\n if (req.status !== 'expired' && req.status !== 'rejected') return false\n }\n if (q) {\n const hay = [req.requester.name, req.targetRole, req.ticketId, req.justification, req.system]\n .join(' ')\n .toLowerCase()\n if (!hay.includes(q)) return false\n }\n return true\n })\n })\n\n get rootClass(): string {\n return cn('flex flex-col gap-6', this.className)\n }\n\n tabClass(tab: AccessRequestTab): string {\n return cn(\n 'rounded-md px-2.5 py-1 text-xs font-medium transition-colors',\n this.selectedTab() === tab\n ? 'bg-background text-foreground shadow-xs'\n : 'text-muted-foreground hover:text-foreground',\n )\n }\n\n setSelectedTab(tab: AccessRequestTab): void {\n this.selectedTab.set(tab)\n }\n\n formatSeconds(seconds: number): string {\n return formatSecondsValue(seconds)\n }\n\n roleBadgeVariant(role: string): BadgeVariant {\n if (role.includes('AWS') || role.includes('Admin')) return 'destructive'\n if (role.includes('PII') || role.includes('Decryption')) return 'warning'\n if (role.includes('DB') || role.includes('Read-Only')) return 'info'\n if (role.includes('Stripe')) return 'secondary'\n return 'default'\n }\n\n shortApprover(approver: string): string {\n return approver\n .replace('Security Lead: ', '')\n .replace('Infrastructure Team: ', '')\n .replace('Compliance Officer: ', '')\n .replace('On-Call Lead: ', '')\n }\n\n tick(): void {\n this.requests.update((prev) =>\n prev.map((req) => {\n if (req.status === 'active' && req.secondsLeft > 0) {\n const nextSec = req.secondsLeft - 1\n if (nextSec <= 0) {\n return { ...req, secondsLeft: 0, status: 'expired' as AccessRequestStatus, timeLeftLabel: 'Expired' }\n }\n return { ...req, secondsLeft: nextSec, timeLeftLabel: timeLeftLabelFor(nextSec) }\n }\n return req\n }),\n )\n }\n\n handleCreateRequest(event: SubmitEvent): void {\n event.preventDefault()\n if (!this.formJustification().trim()) return\n\n const duration = this.formDuration()\n let seconds = 3600 * 4\n if (duration.includes('1 Hour')) seconds = 3600\n else if (duration.includes('8 Hours')) seconds = 3600 * 8\n else if (duration.includes('24 Hours')) seconds = 3600 * 24\n\n const role = this.formRole()\n let system = 'AWS Cloud IAM (us-east-1)'\n if (role.includes('DB')) system = 'PostgreSQL Aurora Primary'\n else if (role.includes('Stripe')) system = 'Stripe Merchant Gateway'\n else if (role.includes('PII')) system = 'Customer Data Vault (KMS)'\n\n const newReq: AccessRequest = {\n id: `req-custom-${Date.now()}`,\n requester: {\n name: 'Current Operator (You)',\n email: 'operator@acme.corp',\n team: 'Platform Engineering',\n avatar: 'OP',\n },\n targetRole: role,\n system,\n duration,\n timeLeftLabel: 'Pending Approval',\n secondsLeft: seconds,\n justification: this.formJustification(),\n ticketId: `SEC-${Math.floor(100 + Math.random() * 900)}`,\n approver: this.formApprover(),\n status: 'pending',\n createdAt: 'Just now',\n expiresAt: 'Awaiting approval',\n }\n\n this.requests.update((prev) => [newReq, ...prev])\n this.isDialogOpen.set(false)\n }\n\n handleApprove(id: string): void {\n this.requests.update((prev) =>\n prev.map((req) =>\n req.id === id ? { ...req, status: 'active' as const, timeLeftLabel: timeLeftLabelFor(req.secondsLeft) } : req,\n ),\n )\n }\n\n handleReject(id: string): void {\n this.requests.update((prev) =>\n prev.map((req) => (req.id === id ? { ...req, status: 'rejected' as const, timeLeftLabel: 'Rejected' } : req)),\n )\n }\n\n handleRevoke(id: string): void {\n this.requests.update((prev) =>\n prev.map((req) =>\n req.id === id ? { ...req, status: 'expired' as const, secondsLeft: 0, timeLeftLabel: 'Revoked' } : req,\n ),\n )\n }\n\n handleExtend(id: string): void {\n this.requests.update((prev) =>\n prev.map((req) => {\n if (req.id === id && req.status === 'active') {\n const nextSec = req.secondsLeft + 1800\n return { ...req, secondsLeft: nextSec, timeLeftLabel: timeLeftLabelFor(nextSec) }\n }\n return req\n }),\n )\n }\n\n handleReRequest(id: string): void {\n this.requests.update((prev) =>\n prev.map((req) =>\n req.id === id\n ? { ...req, status: 'pending' as const, timeLeftLabel: 'Pending Approval', secondsLeft: 3600 * 4 }\n : req,\n ),\n )\n }\n\n handleCopyToken(id: string): void {\n this.copiedId.set(id)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => {\n if (this.copiedId() === id) this.copiedId.set(null)\n }, 2000)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/access-request-workflow/access-request-workflow.component.ts" }, { "path": "packages/registry-angular/blocks/access-request-workflow/index.ts", "content": "export {\n UiAccessRequestWorkflowComponent,\n type AccessRequest,\n type AccessRequester,\n type AccessRequestStatus,\n type AccessRequestTab,\n} from './access-request-workflow.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/access-request-workflow/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "https://uipkge.dev/r/angular/avatar.json", "https://uipkge.dev/r/angular/badge.json", "https://uipkge.dev/r/angular/button.json", "https://uipkge.dev/r/angular/card.json", "https://uipkge.dev/r/angular/dialog.json", "https://uipkge.dev/r/angular/dropdown-menu.json", "https://uipkge.dev/r/angular/input.json", "https://uipkge.dev/r/angular/select.json", "https://uipkge.dev/r/angular/table.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Just-In-Time (JIT) IAM temporary privilege escalation request modal and approval queue: governance metrics cards, elevated session countdown timers, approval form dialog, and active session manager with instant revoke and audit logging.", "categories": [ "security", "iam", "dashboard" ] }