2.2.0 • Published 2 years ago

ng-fad-security-code v2.2.0

Weekly downloads
65
License
-
Repository
-
Last release
2 years ago

Getting started

Installation

npm install ng-fad-security-code

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 { NgFadSecurityCodeModule } from 'ng-fad-security-code';
.
.
.
... imports: [
       ...,
       BrowserAnimationsModule 
       NgFadSecurityCodeModule
    ]...

Note: BrowserAnimationsModule is required.

Usage

HTML

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

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

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' | 'SECRET_WORD';
  public currentPhone = '5555555555';
  public securityLength = 4;

  onsendcode(code: string) {
   // captured 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

NameTypeRequiredDefaultDescription
securityTypestringtrue'SMS'type of code to be entered
currentPhonestringtrue (if securityType === 'SMS')nulluser's phone to paint on screen
securityLengthnumbertrue4security code length
oneInputLengthnumberfalse255Max length of input (only use in securityType === 'SECRET_WORD')

Outputs

NameReturnDescription
onsendcodestringIs called after the user captured the security code
onerrorobjectIs called when an error happens
2.2.0

2 years ago

2.1.0

2 years ago

2.0.2

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.2.0

3 years ago

1.1.3

3 years ago

1.1.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.6

3 years ago

1.0.5

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

3 years ago

1.0.0

3 years ago