@memberjunction/ng-credentials

Angular components for managing credentials, credential types, and credential categories in MemberJunction applications, with panel and dialog presentation modes.

Overview

The @memberjunction/ng-credentials package provides reusable UI components for creating and editing credentials, credential types, and credential categories. Each component follows a panel + dialog pattern: panels can be embedded directly in pages, while dialog wrappers provide modal presentation.

graph TD
    A[CredentialsModule] --> B[Panel Components]
    A --> C[Dialog Components]

    B --> B1[CredentialEditPanelComponent]
    B --> B2[CredentialTypeEditPanelComponent]
    B --> B3[CredentialCategoryEditPanelComponent]

    C --> C1[CredentialDialogComponent]

    B1 --> D["Credential CRUD
    (name, type, category, values)"]
    B2 --> E["Credential Type CRUD
    (type definition, fields schema)"]
    B3 --> F["Category CRUD
    (hierarchical organization)"]

    style A fill:#2d6a9f,stroke:#1a4971,color:#fff
    style B fill:#7c5295,stroke:#563a6b,color:#fff
    style C fill:#2d8659,stroke:#1a5c3a,color:#fff

Installation

npm install @memberjunction/ng-credentials

Usage

Import the Module

import { CredentialsModule } from '@memberjunction/ng-credentials';

@NgModule({
  imports: [CredentialsModule]
})
export class YourModule { }

Credential Edit Panel

Embed a credential editor directly in your page:

<mj-credential-edit-panel
  [credentialId]="selectedCredentialId"
  (saved)="onCredentialSaved($event)"
  (cancelled)="onEditCancelled()">
</mj-credential-edit-panel>

Credential Dialog

Open a credential editor in a modal:

<mj-credential-dialog
  [visible]="showCredentialDialog"
  [credentialId]="selectedCredentialId"
  (saved)="onCredentialSaved($event)"
  (dialogClosed)="onDialogClosed()">
</mj-credential-dialog>

Credential Type Edit Panel

Manage credential type definitions:

<mj-credential-type-edit-panel
  [credentialTypeId]="selectedTypeId"
  (saved)="onTypeSaved($event)"
  (cancelled)="onEditCancelled()">
</mj-credential-type-edit-panel>

Credential Category Edit Panel

Organize credentials into categories:

<mj-credential-category-edit-panel
  [categoryId]="selectedCategoryId"
  (saved)="onCategorySaved($event)"
  (cancelled)="onEditCancelled()">
</mj-credential-category-edit-panel>

Exported Components

| Component | Selector | Description | |-----------|----------|-------------| | CredentialEditPanelComponent | mj-credential-edit-panel | Full credential editor form | | CredentialTypeEditPanelComponent | mj-credential-type-edit-panel | Credential type definition editor | | CredentialCategoryEditPanelComponent | mj-credential-category-edit-panel | Category management editor | | CredentialDialogComponent | mj-credential-dialog | Modal wrapper for credential editing |

Dependencies

| Package | Description | |---------|-------------| | @memberjunction/core | Core framework | | @memberjunction/core-entities | Entity type definitions | | @memberjunction/global | Global utilities | | @memberjunction/ng-shared-generic | Shared generic components | | @progress/kendo-angular-dialog | Dialog/modal support | | @progress/kendo-angular-buttons | Button components |

Peer Dependencies

• @angular/common ^21.x
• @angular/core ^21.x
• @angular/forms ^21.x

Build

cd packages/Angular/Generic/credentials
npm run build

License

ISC