ng-fad-security-code-desktop

Getting started

Installation

npm install ng-fad-security-code-desktop

Dependencies

Add the folder provided by the technical team within the project assets (images and js)

Import

In the file necessary example.module.ts import the module.

In this case app.module.ts

import { NgFadSecurityCodeDesktopModule } from 'ng-fad-security-code-desktop';
.
.
.
... imports: [
       ...,
       BrowserAnimationsModule 
       NgFadSecurityCodeDesktopModule
    ]...

Note: BrowserAnimationsModule is required.

Usage

HTML

Add the selector inside some component and configure the input parameters:

  <ng-fad-security-code-desktop
    #securityCodeModule
    [configuration]="configuration"
    [canResendCode]="canResendCode"
    [currentPhone]="currentPhone"
    [securityLength]="securityLength"
    [securityType]="securityType"
    (onerror)="onerror($event)"
    (onresendcode)="onresendcode()"
    (onsendcode)="onsendcode($event)">
  </ng-fad-security-code-desktop>

Typescript

Listen to the events and execute methods:

  import { NgFadSecurityCodeComponent } from 'ng-fad-security-code/public-api';
  .
  .
  .

  @ViewChild('securityCodeModule') securityCodeModule: NgFadSecurityCodeComponent;
  public securityType = 'SMS' | 'PHONE_NUMBER';
  public currentPhone = '5555555555';
  public securityLength = 4;
  public canResendCode = true;

  onsendcode(code: string) {
   // captured code
   alert(code)
  }

  onerror($event) {
    // some error
    alert(JSON.stringify(error));
  }

  setError() {
    // set error to true when the validation of the security code is wrong
    this.securityCodeModule.setError(true);
  }

Inputs

Name	Type	Required	Default	Description
configuration	object	false	{}	module data to be configured
securityType	string	true	'SMS'	type of code to be entered
currentPhone	string	true (if securityType === 'SMS')	undefined	user's phone to paint on screen
securityLength	number	true	4	security code length
canResendCode	boolean	false	undefined	option to resend code
oneInputLength	number	false	255	Max length of input (only use in securityType === SECRET_WORD')

Outputs

Name	Return	Description
onsendcode	string	Is called after the user captured the security code
onerror	object	Is called when an error happens
onresendcode	void	Is called when the user clicks on the text of resend code