ionic-simple-lockscreen-md5 v0.0.17

Ionic Lock Screen Component

This is a simple lock screen component with numbers for your Ionic 2+ app.

The module is based on the work of Carson Chen and the ionic2-lock-screen.

Additional custom logic added to original plugin

1. subTitle row
2. additional function link row underneath number pad if required
3. Ability to set initial pin with same component (set/confirm)
4. entered code into component needs to be a md5 hash, input code gets converted to md5 hash before comparison

Using this module in an Ionic app

// Import the module and component
import { LockScreenModule, LockScreenComponent } from 'ionic-simple-lockscreen-md5';

@NgModule({
  declarations: [
    // ...
  ],
  imports: [
    LockScreenModule // Put the module here
  ],
  entryComponents: [
    LockScreenComponent, // And add the component here
  ],
  providers: []
})
export class AppModule {}

Once you have imported the module, you can use it inside your pages like this (below example shows all available options at once):

import { LockScreenComponent } from 'ionic-simple-lockscreen';
import { NavController } from 'ionic-angular';
import { Component } from '@angular/core';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  constructor(public navCtrl: NavController) {

  }

  openLockscreen() {
    this.navCtrl.push(LockScreenComponent,{
      code:'X12121XXXhhwqwqw12',
      ACDelbuttons:false,
      setPasscode: true,
      passcodeLabel:'Please Enter Passcode',
      secondPasscodeLabel:'Confirm Passcode',
      passcodeSubTitle:'Must be a 4-digit code',
      additionalLinkTitle:'Forgot passcode?',
      onCorrect:function(pin){
        console.log('Input correct! Your new hashed pin is' + pin);
      },
      onWrong:function(attemptNumber){
        console.log(attemptNumber + ' wrong passcode attempt(s)');
      },
      onAdditionalLink:function(){
        console.log('anchor link clicked');
      }
    });
  }
}

Input definitions: