npm package: @netrist-smartbridge/smartbridge
Description: ## Installation
Latest version: 0.0.9

# Smartbridge Angular SDK

## Installation

* Install Package:
``` npm install @netrist-smartbridge/smartbridge```

* Import modules in app.module.ts (You will also need to import HttpClientModule and NgbModule as dependencies):
```javascript
// ...
import { CacLoginButtonModule } from '@netrist-smartbridge/smartbridge';
import { CacButtonModule } from '@netrist-smartbridge/smartbridge';
import { HttpClientModule } from '@angular/common/http';
import { NgbModule } from '@ng-bootstrap/ng-bootstrap';
@NgModule({
  // ...
  imports: [
    // ...
    CacLoginButtonModule,
    CacButtonModule,
    HttpClientModule,
    NgbModule
  ], 
  // ...
})
```


## Buttons

This sdk contains two button components for integrating with the Smartbridge platform
* CAC Login Button
    * ```<cac-login-button></cac-login-button>```
    * For integration with Smartbridge's CAC login flow.
* CAC Button
    * ```<cac-button></cac-button>```
    * For integration with Smartbridge's associate CAC and register CAC flows. 


# CAC Login Button

This button allows for a streamlined login process with CAC using Smartbridge.

## Usage

### Inputs: 
* cacLoginUrl (Required): URL for the Smartbridge CAC Login endpoint

    ```cacLoginUrl='example.netristsmartbridge.com/cac-login'```

* callbackUrl (Required): URL where the results will be POSTed.

    ```callbackUrl='netrist.com'```

* clientId (Required): The Client ID specifically being used for Authorization header on the callback

    ```clientId='clientId-1234'```
    
* style: any styling need for the login button in JSON format.

    ```$xslt
    style={
            'padding': '10px',
            'margin': '5px'
           }
    ```
* text: text displayed on the button. Defaults to 'Login with CAC' if none is entered.

    ```text='CAC Login'```
<br></br>

### Outputs:
* response: JSON containing whether the authentication was successful, and a JWT from the transaction.
  * emitted as a javaScript '$event' upon clicking the button.
  * example:
    * successful cac login (success = true)
    ```$xslt
    {
      'success' : 'true',
      'jwt' : 'xyz...'
    }
    ```
    * unsuccessful cac login (success = false)
    ```$xslt
    {
      'success' : 'false',
      'jwt' : 'xyz...',
      'error' : 'description of error'
    }
    ```
    * A failed request will bring up an error modal.

### Example:
```html
<cac-login-button
[style]="{'padding': '10px', 'background-color': 'blue', 'color': 'white'}"
[cacLoginUrl]="'https://example.com/cac-login'"
[callbackUrl]="'https://example.com/login'"
[clientId]="'angularClientId'"
[text]="'CAC Login'"
(response)="onLoginResponse($event)"
>
</cac-login-button> 
```
  * Note: "onLoginResponse($event)" is simply an example function that takes the response JSON as an argument.
          Such a function would be implemented by the SDK user. 


<hr>

# CAC Button

This button allows for a streamlined cac association or registration process with CAC using Smartbridge.

## Usage

### Inputs: 
* cacUrl (Required): URL for the Smartbridge CAC endpoint

    ```cacUrl='example.netristsmartbridge.com/cac'```

* callbackUrl (Required): URL where the results will be POSTed.

    ```callbackUrl='netrist.com'```

* clientId (Required): The Client ID specifically being used for Authorization header on the callback

    ```clientId='clientId-1234'```
    
* style: any styling need for the CAC button in JSON format.

    ```$xslt
    style={
            'padding': '10px',
            'margin': '5px'
           }
    ```
* text: text displayed on the button. Defaults to 'Associate a CAC' if none is entered.

    ```text='Register a CAC'```
<br></br>

### Outputs:
* response: JSON containing whether the authentication was successful, and a JWT from the transaction.
  * emitted as a javaScript '$event' upon clicking the button.
  * example:
    * successful CAC association (success = true):
    ```$xslt
    {
      'success' : 'true',
      'jwt' : 'xyz...'
    }
    ```
    * unsuccessful CAC association (success = false):
    ```$xslt
    {
      'success' : 'false',
      'jwt' : 'xyz...',
      'error' : 'description of error'
    }
    ```
    * A failed request will bring up an error modal.

### Example:
```html
    <cac-button
    [style]="{'padding': '10px', 'background-color': 'green', 'color': 'white'}"
    [callbackUrl]="'https://example.com/associateCac'"
    [cacUrl]="'https://example.com/cac'"
    [clientId]="'angularClientId'"
    [text]="'Register a CAC'"
    (response)="onCACResponse($event)"
    >
    </cac-button>
```
  * Note: "onCACResponse($event)" is simply an example function that takes the response JSON as an argument.
          Such a function would be implemented by the SDK user.