BS Account Details

A React component package for displaying and managing account details in BS Web applications. This package provides a comprehensive account management interface with tabs for user profile, rights & access, and account information.

Installation

Install the package using npm:

npm install bs_account_details-local

Or using yarn:

yarn add bs_account_details-local

Peer Dependencies

This package requires the following peer dependencies:

• react (^18.3.1)
• react-bootstrap (^2.10.10)
• bootstrap (^5.3.8)

Make sure these are installed in your project:

npm install react react-bootstrap bootstrap

Usage

Basic Example

import AccountDetails from "bs_account_details-local";
import { useState } from "react";

function App() {
  const [searchParams] = useState(new URLSearchParams(window.location.search));

  const profileDetails = {
    user: {
      firstName: "John",
      lastName: "Doe",
      emailAddress: "[email protected]",
      username: "johndoe",
      account: {
        accountName: "My Account",
        accountID: "ACC-12345",
        rightsCode: '{"metaData": {"feature1": true}}',
      },
    },
    status: "idle",
  };

  const permissionDetails = {
    permission: {
      data: {
        rightsDetail: {
          rightsCode: '{"metaData": {"feature1": true}, "features": []}',
          email: "[email protected]",
        },
      },
    },
    mode: "API", // or "license"
  };

  const handleRouteChange = (params: { tab?: string }) => {
    // Handle route changes
    console.log("Tab changed:", params.tab);
  };

  const handleUpdatePermission = async (permission: Permission) => {
    // Handle permission updates
    console.log("Permission updated:", permission);
  };

  const handleModeChange = (mode: "license" | "API") => {
    // Handle mode changes
    console.log("Mode changed:", mode);
  };

  return (
    <AccountDetails
      profileDetails={profileDetails}
      permissionDetails={permissionDetails}
      searchParams={searchParams}
      onChangeRoute={handleRouteChange}
      onUpdatePermission={handleUpdatePermission}
      onChangeModeCheckbox={handleModeChange}
      licenseFilePublicKey="your-public-key-here"
    />
  );
}

Props

AccountDetailsProps

The main AccountDetails component accepts the following props:

| Prop | Type | Required | Default | Description | | --------------------------- | --------------------------------------------------- | -------- | ---------- | ---------------------------------------------- | | profileDetails | ProfileDetails | No | - | User profile information and status | | permissionDetails | PermissionDetails | No | - | Permission and mode information | | searchParams | URLSearchParams | No | - | URL search parameters for tab navigation | | onChangeRoute | (params: { tab?: string }) => void | No | () => {} | Callback function when route/tab changes | | isShowBreadCrumbComponent | boolean | No | - | Whether to show breadcrumb component | | renderBreadCrumbComponent | () => ReactNode | No | - | Function to render custom breadcrumb component | | odicDetails | OidcDetails | No | - | OIDC/OAuth user details | | licenseFilePublicKey | string | No | - | Public key for license file verification | | onUpdatePermission | (permission: Permission) => Promise<void> \| void | No | () => {} | Callback function when permissions are updated | | onChangeModeCheckbox | (mode: "license" \| "API") => void | No | - | Callback function when mode is changed |

Type Definitions

ProfileDetails

interface ProfileDetails {
  user?: User;
  status?: "loading" | "idle" | "success" | "error";
}

User

interface User {
  firstName?: string;
  lastName?: string;
  emailAddress?: string;
  username?: string;
  account?: Account;
}

Account

interface Account {
  accountName?: string;
  accountID?: string;
  rightsCode?: string;
}

PermissionDetails

interface PermissionDetails {
  permission?: Permission;
  mode?: "license" | "API";
}

Permission

interface Permission {
  data?: PermissionData;
}

interface PermissionData {
  rightsDetail?: RightsDetail;
}

RightsDetail

interface RightsDetail {
  rightsCode?: string;
  rights_code?: string;
  email?: string;
  expire_on?: string;
  access_days_remaining?: number;
}

OidcDetails

interface OidcDetails {
  profile?: {
    email?: string;
  };
}

ParsedRightsRaw

interface ParsedRightsRaw {
  metaData?: Record<string, string | number | boolean>;
  features?: Feature[];
}

Feature

interface Feature {
  id?: number;
  name?: string;
  description?: string;
  enabled?: boolean;
  trialAccess?: boolean;
  limit?: number;
}

Features

Three Main Tabs

1. User Profile - Displays user information including:

   • First Name
   • Last Name
   • Email Address
   • Username

2. Rights & Access - Manages user permissions and features:

   • Toggle between License File and API modes
   • Upload license files (.pem format)
   • View rights metadata
   • Display feature list
   • Show trial expiration information

3. Accounts Info - Shows account details:

   • Account Name
   • Account ID
   • Rights Code (displayed as formatted JSON)

License File Upload

The component supports uploading license files with:

• File validation (.pem extension)
• RSA decryption and verification
• Email validation against OIDC profile
• Automatic permission updates

Mode Switching

Users can switch between two modes:

• API Mode: Uses API-based permissions
• License Mode: Uses license file-based permissions

Styling

The component uses Bootstrap 5 for styling. Make sure Bootstrap CSS is imported in your application:

import "bootstrap/dist/css/bootstrap.min.css";

The component also includes custom styles that are automatically included.

Browser Icons

The component uses Bootstrap Icons. Ensure Bootstrap Icons are available in your project:

<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"
/>

License

ISC

Version

Current version: 0.0.14