Private-Input (Form Element)

This Angular Module (Component) allows you to have a input contol for private input.

The value recieved by the component will always remain in its encypted state as long the the key (privateKey) is supplied. Once registered with the component, the service can be used to decrypt the final value. The encryption is AES from Crypto.

This component can take an input from a formContorl and mask it displaying only the last n digits.

A custom mask or formatter may also be provided to control the formatting of the input as the user enteres the value.

You can have a user access the encrypted data to display the contents of the hidden value or not. Also the input can be editbale and only when valid does it replace the current value.

Installation

npm install private-input

Scaffolding

Import the module into your project under imports

imports: [
    BrowserModule,
    AppRoutingModule,
    PrivateInputModule
  ],

Use

To use in your component, use the following tag

<wav-private-input></wav-private-input>

Inputs

The following Inputs are available

| Input | Type | Defaut | Description | | ----- | ---- | ------ | ----------- | | private | BOOLEAN | false | Encrypt the input using the token | | allowAccess | BOOLEAN | false | Allows the user to view the encrypted string | | label | STRING | NULL | Label for the input field | | format | STRING | NULL | This is a mask to format the value in the input (XXX-XXX) | | lastVisible | NUMBER | 3 | digits at the end to make visible | | disabled | BOOLEAN | false | disable input | | key | STRING | NULL | encryption key to use for the input | | displayChar | STRING | # | char to use for masking | | maxlen | NUMBER | NULL | min length for entry validation | | minlen | NUMBER | NULL | max length and limit for entry validation | | appearence | STRING | NULL | field style |

Sample Configurations

Here is the same tag with options defined with Formbuilder:

format = "XXX-XXX-XXXXXXX-X"
encryptionKey = 'sampletoken123!'
fb.control({value: '0011-234512-345678', disabled: true})

<wav-private-input
    [private]="true"
    [allowAccess]="true"
    [label]="'Account Number'"
    [format]="format"
    [lastVisible]="4"
    [disabled]="false"
    [key]="encryptionKey"
    [formControl]="account"
  ></wav-private-input>

Here is the same component inside a formGroup

<div [formGroup]="privateForm" *ngIf="selected.value">
  <wav-private-input
    [private]="true"
    [allowAccess]="true"
    [label]="'Account Number'"
    [format]="format"
    [lastVisible]="4"
    [disabled]="false"
    [key]="'sampletoken123!'"
    formControlName="account"
  ></wav-private-input>
</div>

Here is the same component but now using a select to select the format of the control dynamically

<mat-form-field appearance="fill">
  <mat-label>Country</mat-label>
  <mat-select #selected>
    <mat-option *ngFor="let country of countries" [value]="country.mask">
      {{country.name}}
    </mat-option>
  </mat-select>
</mat-form-field>

<div [formGroup]="privateForm" *ngIf="selected.value">
  <wav-private-input
    [private]="true"
    [allowAccess]="true"
    [label]="'Account Number'"
    [format]="selected.value"
    [lastVisible]="4"
    [disabled]="false"
    [key]="'sampletoken123!'"
    formControlName="account"
  ></wav-private-input>
</div>

Input return

You will note that the control will return an encrypted string of the entered value To decrypt this value, import the decryptionService and decrypt the string

Below is a sample of the implementation

import { DecryptService } from 'private-input';

privateForm = this.fb.group({
  account: [this.accountNumber]
})

constructor(
  private decrypt: DecryptService
) {}

ngOnInit() {

  this.privateForm.get('account')?.valueChanges.subscribe(data => {
    console.log('value:', data, this.decrypt.string(data))
  })

}