@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
Copy

Installation

npm install @memberjunction/ng-credentials
Copy

Usage

Import the Module

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

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

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>
Copy

Credential Dialog

Open a credential editor in a modal:

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

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>
Copy

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>
Copy

Exported Components

Dependencies

Peer Dependencies

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

Build

cd packages/Angular/Generic/credentials
npm run build
Copy

License

ISC