{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "environment-variables-manager", "title": "Environment Variables Manager", "type": "registry:block", "files": [ { "path": "packages/registry-angular/blocks/environment-variables-manager/environment-variables-manager.component.ts", "content": "// Vercel / Supabase style environment variables manager: environment-scoped tabs with counts,\n// search + type filter, mask/reveal and copy per value, an inline \"add variable\" card, an edit\n// dialog, bulk .env import with a live parse preview, and .env export. Port of the React block 1:1.\nimport { ChangeDetectionStrategy, Component, DestroyRef, Input, computed, inject, signal } from '@angular/core'\nimport {\n AlertCircle,\n Check,\n Copy,\n Download,\n Eye,\n EyeOff,\n FileCode,\n KeyRound,\n Lock,\n LucideAngularModule,\n MoreHorizontal,\n Pencil,\n Plus,\n Search,\n ShieldCheck,\n Trash2,\n Upload,\n X,\n} from 'lucide-angular'\nimport { cn } from '@/lib/utils'\nimport { UiBadgeComponent } 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 { UiCheckboxComponent } from '@/ui/checkbox/checkbox.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 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 { UiTabsComponent, UiTabsListComponent, UiTabsTriggerComponent } from '@/ui/tabs/tabs.component'\nimport { UiTextareaComponent } from '@/ui/textarea/textarea.component'\n\nexport type EnvironmentScope = 'production' | 'preview' | 'development'\nexport type EnvVarTypeFilter = 'all' | 'secret' | 'plain'\n\nexport interface EnvironmentVariable {\n id: string\n key: string\n value: string\n environments: EnvironmentScope[]\n isSecret: boolean\n updatedAt: string\n updatedBy: string\n}\n\nconst defaultVariables: EnvironmentVariable[] = [\n {\n id: 'env-1',\n key: 'DATABASE_URL',\n value: 'postgresql://postgres:p4ssw0rd_secure_vault@db.prod.aws.internal:5432/primary_db',\n environments: ['production', 'preview', 'development'],\n isSecret: true,\n updatedAt: 'Updated 2h ago',\n updatedBy: 'alex.chen',\n },\n {\n id: 'env-2',\n key: 'STRIPE_SECRET_KEY',\n value: 'mock_key_51NwY2xK9mPqL8vR4tZa0bCeFgHiJkLmNoPqRsTuVwXyZ',\n environments: ['production'],\n isSecret: true,\n updatedAt: 'Updated 3d ago',\n updatedBy: 'sarah.dev',\n },\n {\n id: 'env-3',\n key: 'NEXT_PUBLIC_APP_URL',\n value: 'https://app.uipkge.dev',\n environments: ['production', 'preview', 'development'],\n isSecret: false,\n updatedAt: 'Updated 5d ago',\n updatedBy: 'uday.craft',\n },\n {\n id: 'env-4',\n key: 'REDIS_PASSWORD',\n value: 'redis_auth_98f4b6201e9d4a87b32c',\n environments: ['production', 'preview'],\n isSecret: true,\n updatedAt: 'Updated 1w ago',\n updatedBy: 'alex.chen',\n },\n {\n id: 'env-5',\n key: 'SENTRY_DSN',\n value: 'https://o45089@sentry.io/45089234871923',\n environments: ['production', 'preview', 'development'],\n isSecret: false,\n updatedAt: 'Updated 2w ago',\n updatedBy: 'sarah.dev',\n },\n {\n id: 'env-6',\n key: 'AWS_SECRET_ACCESS_KEY',\n value: 'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY',\n environments: ['production'],\n isSecret: true,\n updatedAt: 'Updated 1mo ago',\n updatedBy: 'infra-bot',\n },\n]\n\nfunction maskString(val: string): string {\n if (val.length <= 12) return '••••••••••••'\n return '••••••••••••••••••••'\n}\n\nconst ALL_ENVS: EnvironmentScope[] = ['production', 'preview', 'development']\n\ninterface ScopeOption {\n value: EnvironmentScope\n label: string\n /** Label border/background when the scope is checked. */\n active: string\n /** Label text colour. */\n text: string\n}\n\nconst scopeOptions: ScopeOption[] = [\n { value: 'production', label: 'Production', active: 'border-success/40 bg-success/5', text: 'text-success' },\n { value: 'preview', label: 'Preview', active: 'border-info/40 bg-info/5', text: 'text-info' },\n { value: 'development', label: 'Development', active: 'border-chart-2/40 bg-chart-2/5', text: 'text-chart-2' },\n]\n\ninterface ParsedImportItem {\n key: string\n value: string\n isSecret: boolean\n}\n\n@Component({\n changeDetection: ChangeDetectionStrategy.Eager,\n selector: 'ui-environment-variables-manager, [ui-environment-variables-manager]',\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 UiBadgeComponent,\n UiButtonComponent,\n UiCardComponent,\n UiCardContentComponent,\n UiCardDescriptionComponent,\n UiCardHeaderComponent,\n UiCardTitleComponent,\n UiCheckboxComponent,\n UiDialogComponent,\n UiDialogContentComponent,\n UiDialogDescriptionComponent,\n UiDialogFooterComponent,\n UiDialogHeaderComponent,\n UiDialogTitleComponent,\n UiDropdownMenuComponent,\n UiDropdownMenuContentComponent,\n UiDropdownMenuItemComponent,\n UiDropdownMenuSeparatorComponent,\n UiDropdownMenuTriggerComponent,\n UiInputComponent,\n UiSelectComponent,\n UiSelectContentComponent,\n UiSelectItemComponent,\n UiSelectTriggerComponent,\n UiSelectValueComponent,\n UiTableComponent,\n UiTableBodyComponent,\n UiTableCellComponent,\n UiTableHeadComponent,\n UiTableHeaderComponent,\n UiTableRowComponent,\n UiTabsComponent,\n UiTabsListComponent,\n UiTabsTriggerComponent,\n UiTextareaComponent,\n ],\n template: `\n
\n \n
\n
\n
\n
\n \n
\n

Environment Variables

\n
\n

\n Manage encrypted secrets, API keys, and configuration for your deployments.\n

\n
\n\n
\n \n \n \n Export\n \n \n @if (!isAddOpen()) {\n \n } @else {\n \n }\n {{ isAddOpen() ? 'Close Form' : 'Add Variable' }}\n \n
\n
\n\n \n @if (isAddOpen()) {\n
\n
\n
\n
\n

New Environment Variable

\n

\n Add a new secret key or configuration parameter to your environment scopes.\n

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

Uppercase characters and underscores recommended.

\n
\n
\n \n \n

Values are encrypted at rest with AES-256-GCM.

\n
\n
\n\n
\n
\n Environment Scopes\n
\n @for (scope of scopeOptions; track scope.value) {\n \n }\n
\n
\n\n
\n \n \n
\n
\n\n
\n \n \n Save Variable\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 All Types\n Encrypted Secrets\n Plaintext\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 @for (item of filteredVariables(); track item.id) {\n \n \n \n\n \n \n\n \n \n\n \n \n\n \n \n\n \n \n \n }\n\n \n @if (filteredVariables().length === 0) {\n \n \n \n }\n \n
Variable KeyValueEnvironmentsType\n Actions\n
\n
\n \n {{ item.key }}\n \n \n @if (copiedId() === 'key-' + item.id) {\n \n } @else {\n \n }\n \n
\n 		\n
\n {{ isRevealed(item.id) ? item.value : mask(item.value) }}\n \n @if (isRevealed(item.id)) {\n \n } @else {\n \n }\n \n \n @if (copiedId() === item.id) {\n \n } @else {\n \n }\n \n
\n 		\n
\n @if (item.environments.includes('production')) {\n \n Production\n \n }\n @if (item.environments.includes('preview')) {\n \n Preview\n \n }\n @if (item.environments.includes('development')) {\n \n Development\n \n }\n
\n 		\n @if (item.isSecret) {\n \n \n Encrypted Secret\n \n } @else {\n \n \n Plaintext\n \n }\n \n \n \n \n Actions for {{ item.key }}\n \n \n \n \n Edit variable\n \n \n \n Duplicate\n \n \n @if (copiedId() === item.id) {\n \n } @else {\n \n }\n Copy value\n \n \n \n \n Delete\n \n \n \n
\n
\n
\n \n
\n

No environment variables found

\n

\n {{\n isFiltered()\n ? 'Try adjusting your filters or search keywords.'\n : 'Add your first environment secret or configuration key.'\n }}\n

\n @if (!isFiltered()) {\n \n }\n
\n
\n
\n
\n\n \n \n @if (editingVariable(); as ev) {\n \n
\n

Edit Environment Variable

\n

Update variable value and configured environment scopes.

\n
\n
\n
\n \n \n
\n\n
\n \n \n
\n\n
\n Environments\n
\n @for (scope of scopeOptions; track scope.value) {\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

Import .env File

\n
\n

\n Paste your raw .env, .env.local, or .env.production file contents to bulk add variables.\n

\n
\n\n
\n
\n \n \n
\n\n
\n Assign to Environments\n
\n @for (scope of scopeOptions; track scope.value) {\n \n }\n
\n
\n\n
\n \n \n
\n\n @if (parsedImportItems().length > 0) {\n
\n \n \n Ready to import {{ parsedImportItems().length }} variable(s).\n \n
\n }\n
\n\n
\n \n \n
\n \n \n
\n `,\n})\nexport class UiEnvironmentVariablesManagerComponent {\n protected readonly AlertCircle = AlertCircle\n protected readonly Check = Check\n protected readonly Copy = Copy\n protected readonly Download = Download\n protected readonly Eye = Eye\n protected readonly EyeOff = EyeOff\n protected readonly FileCode = FileCode\n protected readonly KeyRound = KeyRound\n protected readonly Lock = Lock\n protected readonly MoreHorizontal = MoreHorizontal\n protected readonly Pencil = Pencil\n protected readonly Plus = Plus\n protected readonly Search = Search\n protected readonly ShieldCheck = ShieldCheck\n protected readonly Trash2 = Trash2\n protected readonly Upload = Upload\n protected readonly X = X\n\n protected readonly scopeOptions = scopeOptions\n\n @Input() set initialVariables(v: EnvironmentVariable[] | undefined) {\n this.variables.set((v ?? defaultVariables).map((item) => ({ ...item, environments: [...item.environments] })))\n }\n @Input() set initialAddOpen(v: boolean) {\n this.isAddOpen.set(!!v)\n }\n @Input() set initialImportOpen(v: boolean) {\n this.isImportOpen.set(!!v)\n }\n @Input() set defaultEnvironment(v: 'all' | EnvironmentScope) {\n this.activeTab.set(v ?? 'all')\n }\n @Input('class') className?: string\n\n readonly variables = signal(\n defaultVariables.map((v) => ({ ...v, environments: [...v.environments] })),\n )\n\n readonly activeTab = signal<'all' | EnvironmentScope>('all')\n readonly searchQuery = signal('')\n readonly typeFilter = signal('all')\n readonly revealAll = signal(false)\n readonly revealedMap = signal>({})\n\n readonly isAddOpen = signal(false)\n readonly isImportOpen = signal(false)\n readonly editingVariable = signal(null)\n\n // Add variable state\n readonly newKey = signal('')\n readonly newValue = signal('')\n readonly newIsSecret = signal(true)\n readonly newEnvs = signal([...ALL_ENVS])\n\n // Import state\n readonly importText = signal('')\n readonly importEnvs = signal([...ALL_ENVS])\n readonly importEncryptAll = signal(true)\n\n // Copy state\n readonly copiedId = signal(null)\n private copyTimer: ReturnType | undefined\n // Monotonic suffix so ids stay unique even when two actions land in the same millisecond.\n private uid = 0\n\n private nextId(prefix: string): string {\n return `${prefix}-${Date.now()}-${this.uid++}`\n }\n\n constructor() {\n inject(DestroyRef).onDestroy(() => clearTimeout(this.copyTimer))\n }\n\n readonly filteredVariables = computed(() => {\n const tab = this.activeTab()\n const type = this.typeFilter()\n const q = this.searchQuery().toLowerCase().trim()\n return this.variables().filter((item) => {\n if (tab !== 'all' && !item.environments.includes(tab)) return false\n if (type === 'secret' && !item.isSecret) return false\n if (type === 'plain' && item.isSecret) return false\n if (q) {\n const keyMatch = item.key.toLowerCase().includes(q)\n const authorMatch = item.updatedBy.toLowerCase().includes(q)\n if (!keyMatch && !authorMatch) return false\n }\n return true\n })\n })\n\n readonly counts = computed(() => {\n const vars = this.variables()\n return {\n all: vars.length,\n production: vars.filter((v) => v.environments.includes('production')).length,\n preview: vars.filter((v) => v.environments.includes('preview')).length,\n development: vars.filter((v) => v.environments.includes('development')).length,\n }\n })\n\n readonly isFiltered = computed(\n () => !!this.searchQuery() || this.typeFilter() !== 'all' || this.activeTab() !== 'all',\n )\n\n readonly parsedImportItems = computed(() => {\n const text = this.importText()\n const encryptAll = this.importEncryptAll()\n if (!text.trim()) return []\n const results: ParsedImportItem[] = []\n for (const rawLine of text.split('\\n')) {\n const line = rawLine.trim()\n if (!line || line.startsWith('#')) continue\n const eqIdx = line.indexOf('=')\n if (eqIdx > 0) {\n const k = line.slice(0, eqIdx).trim().toUpperCase()\n let v = line.slice(eqIdx + 1).trim()\n if ((v.startsWith('\"') && v.endsWith('\"')) || (v.startsWith(\"'\") && v.endsWith(\"'\"))) {\n v = v.slice(1, -1)\n }\n if (k) {\n const isSecret =\n encryptAll ||\n k.includes('SECRET') ||\n k.includes('KEY') ||\n k.includes('PASSWORD') ||\n k.includes('TOKEN') ||\n k.includes('PRIVATE') ||\n k.includes('AUTH')\n results.push({ key: k, value: v, isSecret })\n }\n }\n }\n return results\n })\n\n get rootClass(): string {\n return cn('w-full space-y-6', this.className)\n }\n\n get revealAllClass(): string {\n return cn('h-8.5 gap-1.5 text-xs shadow-xs', this.revealAll() && 'border-primary text-primary')\n }\n\n scopeLabelClass(selected: EnvironmentScope[], scope: ScopeOption, extra: string): string {\n return cn(\n 'hover:bg-accent/50 flex cursor-pointer items-center rounded-md border px-2.5 py-1.5 text-xs select-none',\n extra,\n selected.includes(scope.value) && scope.active,\n )\n }\n\n mask(value: string): string {\n return maskString(value)\n }\n\n setActiveTab(value: string): void {\n this.activeTab.set(value as 'all' | EnvironmentScope)\n }\n\n setTypeFilter(value: string): void {\n this.typeFilter.set(value as EnvVarTypeFilter)\n }\n\n isRevealed(id: string): boolean {\n if (this.revealAll()) return true\n return Boolean(this.revealedMap()[id])\n }\n\n toggleReveal(id: string): void {\n this.revealedMap.update((prev) => ({ ...prev, [id]: !prev[id] }))\n }\n\n toggleRevealAll(): void {\n const next = !this.revealAll()\n this.revealAll.set(next)\n if (!next) this.revealedMap.set({})\n }\n\n async copyValue(text: string, id: string): Promise {\n try {\n await navigator.clipboard.writeText(text)\n this.copiedId.set(id)\n clearTimeout(this.copyTimer)\n this.copyTimer = setTimeout(() => this.copiedId.set(null), 1600)\n } catch {\n // Clipboard fallback\n }\n }\n\n private static toggleScope(list: EnvironmentScope[], env: EnvironmentScope): EnvironmentScope[] {\n if (list.includes(env)) return list.length > 1 ? list.filter((e) => e !== env) : list\n return [...list, env]\n }\n\n toggleNewEnv(env: EnvironmentScope): void {\n this.newEnvs.update((prev) => UiEnvironmentVariablesManagerComponent.toggleScope(prev, env))\n }\n\n toggleImportEnv(env: EnvironmentScope): void {\n this.importEnvs.update((prev) => UiEnvironmentVariablesManagerComponent.toggleScope(prev, env))\n }\n\n toggleEditEnv(env: EnvironmentScope): void {\n const ev = this.editingVariable()\n if (!ev) return\n this.editingVariable.set({\n ...ev,\n environments: UiEnvironmentVariablesManagerComponent.toggleScope(ev.environments, env),\n })\n }\n\n resetAddForm(): void {\n this.newKey.set('')\n this.newValue.set('')\n this.newIsSecret.set(true)\n this.newEnvs.set([...ALL_ENVS])\n this.isAddOpen.set(false)\n }\n\n handleAddVariable(): void {\n const key = this.newKey().trim().toUpperCase()\n const val = this.newValue().trim()\n if (!key || !val) return\n const newVar: EnvironmentVariable = {\n id: this.nextId('env'),\n key,\n value: val,\n environments: [...this.newEnvs()],\n isSecret: this.newIsSecret(),\n updatedAt: 'Just now',\n updatedBy: 'you',\n }\n this.variables.update((prev) => [newVar, ...prev])\n this.resetAddForm()\n }\n\n handleDuplicate(item: EnvironmentVariable): void {\n const duplicateVar: EnvironmentVariable = {\n ...item,\n environments: [...item.environments],\n id: this.nextId('env'),\n key: `${item.key}_COPY`,\n updatedAt: 'Just now',\n updatedBy: 'you',\n }\n this.variables.update((prev) => {\n const index = prev.findIndex((v) => v.id === item.id)\n if (index >= 0) {\n const next = [...prev]\n next.splice(index + 1, 0, duplicateVar)\n return next\n }\n return [duplicateVar, ...prev]\n })\n }\n\n handleDelete(id: string): void {\n this.variables.update((prev) => prev.filter((v) => v.id !== id))\n }\n\n openEdit(item: EnvironmentVariable): void {\n this.editingVariable.set({ ...item, environments: [...item.environments] })\n }\n\n onEditOpenChange(open: boolean): void {\n if (!open) this.editingVariable.set(null)\n }\n\n patchEditing(patch: Partial): void {\n const ev = this.editingVariable()\n if (ev) this.editingVariable.set({ ...ev, ...patch })\n }\n\n saveEdit(): void {\n const ev = this.editingVariable()\n if (!ev) return\n const key = ev.key.trim().toUpperCase()\n const val = ev.value.trim()\n if (!key || !val) return\n this.variables.update((prev) =>\n prev.map((v) => (v.id === ev.id ? { ...ev, key, value: val, updatedAt: 'Just now', updatedBy: 'you' } : v)),\n )\n this.editingVariable.set(null)\n }\n\n handleImport(): void {\n const items = this.parsedImportItems()\n if (items.length === 0) return\n const envs = this.importEnvs()\n const stamp = Date.now()\n const newVars: EnvironmentVariable[] = items.map((item, index) => ({\n id: `env-imported-${stamp}-${index}`,\n key: item.key,\n value: item.value,\n environments: [...envs],\n isSecret: item.isSecret,\n updatedAt: 'Imported just now',\n updatedBy: 'you',\n }))\n this.variables.update((prev) => [...newVars, ...prev])\n this.importText.set('')\n this.isImportOpen.set(false)\n }\n\n exportEnvFile(): void {\n const lines = this.variables().map((v) => `# ${v.environments.join(', ')}\\n${v.key}=${v.value}`)\n const blob = new Blob([lines.join('\\n\\n')], { type: 'text/plain;charset=utf-8' })\n const url = URL.createObjectURL(blob)\n const a = document.createElement('a')\n a.href = url\n a.download = '.env.production'\n a.click()\n URL.revokeObjectURL(url)\n }\n}\n", "type": "registry:block", "target": "~/src/app/components/blocks/environment-variables-manager/environment-variables-manager.component.ts" }, { "path": "packages/registry-angular/blocks/environment-variables-manager/index.ts", "content": "export {\n UiEnvironmentVariablesManagerComponent,\n type EnvironmentScope,\n type EnvVarTypeFilter,\n type EnvironmentVariable,\n} from './environment-variables-manager.component'\n", "type": "registry:block", "target": "~/src/app/components/blocks/environment-variables-manager/index.ts" } ], "dependencies": [ "lucide-angular" ], "devDependencies": [], "registryDependencies": [ "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/checkbox.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/tabs.json", "https://uipkge.dev/r/angular/textarea.json" ], "description": "Vercel and Supabase style environment variables and secrets manager with environment scoping, mask/reveal toggles, bulk import, and inline editing.", "categories": [ "devops", "dashboard", "data", "developer" ] }