Private-input NPM

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))
  })

}