@quandis/qbo4.infrastructure.ui

Web components for managing SFTP transfer accounts, SSH keys, and IP allowlists. Built with Lit and designed to work with the qbo4.Infrastructure.Web API controllers.

Installation

npm install @quandis/qbo4.infrastructure.ui

Quick Start

Add the script and optional stylesheet to your page, then drop in the component:

<script src="path/to/qbo4.infrastructure.js"></script>
<link href="path/to/qbo-infrastructure.css" rel="stylesheet" />

<qbo-transfer-accounts
    obj="Person"
    objectId="12345">
</qbo-transfer-accounts>

The component fetches accounts from the API on load and renders an interactive table with create, edit, delete, and SSH key management.

Components

<qbo-transfer-accounts>

Full-featured transfer account manager with account CRUD, SSH key management, and key pair generation.

Attributes

| Attribute | Type | Default | Description | |---|---|---|---| | obj | string | "" | Object type (e.g. "Person", "Organization"). Required. | | objectId | string | "" | Object identifier from the source system. Required. | | heading | string | "Transfer Accounts" | Heading text displayed above the account table. | | base-url | string | window.location.origin | Base URL for all API calls. | | allow-delete | boolean | true | Show delete buttons and selection checkboxes. | | hide-cols | string | "" | Comma-separated column names to hide. Options: Username, Status, CIDRs, Created, LastLogin, Keys, Select. | | lightdom | boolean | false | Render in light DOM instead of shadow DOM. | | imagePath | string | /ui/images/qbo-icons.svg | Path to the SVG icon sprite. |

API Path Attributes

All API paths support {variable} placeholders that are resolved at call time.

| Attribute | Default | Description | |---|---|---| | listPath | /infrastructure/transferaccount/{obj}/{objectId} | GET — list accounts | | createPath | /infrastructure/transferaccount/{obj}/{objectId} | POST — create account | | accountPath | /infrastructure/transferaccount/{id} | GET / PUT / DELETE — single account | | keysPath | /infrastructure/transferaccount/{accountId}/keys | GET / POST — list / add keys | | keyPath | /infrastructure/transferaccount/keys/{id} | DELETE — delete key | | keyExpirePath | /infrastructure/transferaccount/keys/{id}/expire | POST — expire key | | generatePath | /infrastructure/transferaccount/keys/generate | POST — generate key pair |

Events

| Event | Detail | Description | |---|---|---| | form-saved | { message: string, type: 'success' \| 'error' \| 'info' } | Fired on every user-facing notification (create, update, delete, errors). Listen for this to integrate with your app's toast/notification system. |

Slots

The create and edit dialogs expose named slots so you can replace individual fields with custom markup.

Create dialog slots:

• create-field-Username
• create-field-Password
• create-field-AllowedCIDRs
• create-field-SshPublicKey
• create-field-KeyName
• create-field-KeyExpiresAt

Edit dialog slots:

• edit-field-Username
• edit-field-Status
• edit-field-AllowedCIDRs
• edit-field-Password
• edit-field-Details

Style slot:

• transfer-styles — inject a <style> element into the shadow DOM.

Example — replace the Username field in the create dialog:

<qbo-transfer-accounts obj="Person" objectId="12345">
    <div slot="create-field-Username">
        <label>Custom Username</label>
        <my-custom-input name="Username"></my-custom-input>
    </div>
</qbo-transfer-accounts>

Error Handling

API error responses in the format { status, title, message, traceId, stacktrace } are parsed and displayed inline in dialogs with the title, message, and trace ID for server log correlation. Double-encoded JSON strings (where the body is a JSON-encoded string containing JSON) are handled automatically.

Styling

The component ships with built-in styles via Lit's static styles. An optional external stylesheet (qbo-infrastructure.css) is available for additional page-level styling.

To inject custom styles into the shadow DOM, use the transfer-styles slot:

<qbo-transfer-accounts obj="Person" objectId="12345">
    <style slot="transfer-styles">
        .status-badge.active { background: green; }
    </style>
</qbo-transfer-accounts>

Package Contents

wwwroot/
  js/
    qbo4.infrastructure.js       # Development bundle (UMD)
    qbo4.infrastructure.min.js   # Production bundle (minified)
  css/
    qbo-infrastructure.css       # Optional external stylesheet
    qbo-infrastructure.min.css   # Minified variant
src/
  Program.ts                     # Entry point
  qbo-transfer-accounts.ts       # Component source
  styles.ts                      # Lit CSS styles
scss/
  qbo-infrastructure.scss        # SCSS source