Skip to content

SimonTod/ionic-lock-screen

 
 

Repository files navigation

ionic-lock-screen

Features

Install

NPM

$ npm install ionic-lock-screen --save

Bower

$ bower install ionic-lock-screen --save

Use

Include as a dependency in your angular module

angular.module('myApp', ['ionic-lock-screen'])

Add the directive as the first element in your app container element:

<body ng-app="myApp">
  <lock-screen></lock-screen>
  ...
</body>

Load whenever the app is opened:

.run(['$lockScreen', $ionicPlatform, function($lockScreen, $ionicPlatform) {
    $ionicPlatform.ready(function() {
      $lockScreen.show({
        code: '1234',
        onCorrect: function () {
          console.log('correct!');
        },
        onWrong: function (attemptNumber) {
          console.log(attemptNumber + ' wrong passcode attempt(s)');
        },
      });
    });
}]);

AC(All Clear) button and Del button is also available:

$lockScreen.show({
  code: '1234',
  ACDelbuttons: true,
});

Set a button at the bottom of the screen: (useful to let user cancel or logout)

$lockScreen.show({
  code: '1234',
  bottomButton: true,
  bottomButtonLabel: 'Logout', //text written in button
  onCorrect: function() {
    //some code
  },
  onBottomButton: function(){ 
    //logout action
  }
})

Use the lockscreen to set a new passcode:

//do not set the code parameter as seen in examples above
$lockScreen.show({
  onCorrect: function(newCode) {
    //use the newCode var here
  }
})

Use the maxAttempts parameter:

$lockScreen.show({
  code: '1234',
  maxAttempts: 5,
  onCorrect: function() {
    //some code
  },
  onWrong: function() {
    //this code will only be triggered after 5 fails
  }
})

You can also trigger the lock screen on the resume and pause events.

Touch ID (iOS only)

Install cordova-plugin-touchid

$ cordova plugin add cordova-plugin-touchid --save

Set touchId:true

$lockScreen.show({
  code: '1234',
  touchId: true,
});

Theming / Language

See available options here.

License

MIT