├── README.md
└── lock-screen-component.ts


/README.md:
--------------------------------------------------------------------------------
 1 | # ionic2-lock-screen
 2 | 
 3 | ## ***Note***
 4 | There are some compatibility issues with the AngularJS version 5 or later. Kinda busy in work these days. I will try to fix it asap.Thank you for using this.
 5 | 
 6 | ## Intro
 7 | 
 8 | A rewrote and a retouched version of [ionic-lock-screen](https://github.com/AlexDisler/ionic-lock-screen) [https://github.com/AlexDisler/ionic-lock-screen] for AngularJS 2 and Ionic 2. 
 9 | 
10 | Credit to: [Alex Disler](https://github.com/AlexDisler)
11 | 
12 | ## Features
13 | 
14 | - Supports [Touch ID](#touch-id-ios-only) on iOS using [cordova-plugin-touchid](https://github.com/leecrossley/cordova-plugin-touchid)
15 | 
16 | ## Use
17 | 
18 | Import LockScreenComponent class in the component that you want to use the lock screen
19 | 
20 | ```ts
21 | import {LockScreenComponent} from "../ionic-lock-screen/lock-screen-component";
22 | ```
23 | 
24 | Please ensure that you have imported NavController and initialized it
25 | 
26 | ```ts
27 | import { NavController } from 'ionic-angular';
28 | ...
29 |  constructor(public navCtrl: NavController){}
30 | ```
31 | 
32 | Load whenever you want to load
33 | 
34 | ```ts
35 | this.navCtrl.push(LockScreenComponent,{
36 |       code:'1234',
37 |       ACDelbuttons:true,
38 |       passcodeLabel:'Please Enter Passcode',
39 |       onCorrect:function(){
40 |         console.log('Correct!');
41 |       },
42 |       onWrong:function(attemptNumber){
43 |         console.log(attemptNumber + ' wrong passcode attempt(s)');
44 |       }
45 |     });
46 | ```
47 | AC(All Clear) button and Del button is also available:
48 | ```ts
49 | this.navCtrl.push(LockScreenComponent,{
50 |       code:'1234',
51 |       ACDelbuttons:true
52 | });
53 | ```
54 | 
55 | ## Touch ID (iOS only)
56 | 
57 | Install [cordova-plugin-touchid](https://github.com/leecrossley/cordova-plugin-touchid)
58 | 
59 |     $ cordova plugin add cordova-plugin-touchid --save
60 | 
61 | Set ```touchId:true```
62 | 
63 | ```ts
64 | this.navCtrl.push(LockScreenComponent,{
65 |       code:'1234',
66 |   touchId: true,
67 | });
68 | ```
69 | 


--------------------------------------------------------------------------------
/lock-screen-component.ts:
--------------------------------------------------------------------------------
  1 | /**
  2 |  * [Auto Generated] Created by :Carson. Chen
  3 |  */
  4 | import {Component, OnInit} from "@angular/core";
  5 | import {Events, NavParams, NavController} from "ionic-angular";
  6 | import {TouchID} from 'ionic-native';
  7 | 
  8 | /* HTML Template */
  9 | const LOCK_SCREEN_TEMPLATE = `
 10 |       <div class="ILS_lock" [ngClass]="!_showLockScreen ?  'ILS_lock-hidden' : ''">
 11 |         <div class="ILS_label-row">
 12 |           {{passcodeLabel}}
 13 |         </div>
 14 |         <div class="ILS_circles-row" [ngClass]="passcodeWrong ?  'ILS_shake' : ''">
 15 |           <div class="ILS_circle" [ngClass]=" enteredPasscode.length>0 ? 'ILS_full' : ''"></div>
 16 |           <div class="ILS_circle" [ngClass]=" enteredPasscode.length>1 ? 'ILS_full' : ''"></div>
 17 |           <div class="ILS_circle" [ngClass]=" enteredPasscode.length>2 ? 'ILS_full' : ''"></div>
 18 |           <div class="ILS_circle" [ngClass]=" enteredPasscode.length>3 ? 'ILS_full' : ''"></div>
 19 |         </div>
 20 |         <div class="ILS_numbers-row">
 21 |           <div (click)="digit(1)" class="ILS_digit">1</div>
 22 |           <div (click)="digit(2)" class="ILS_digit">2</div>
 23 |           <div (click)="digit(3)" class="ILS_digit">3</div>
 24 |         </div>
 25 |         <div class="ILS_numbers-row">
 26 |           <div (click)="digit(4)" class="ILS_digit">4</div>
 27 |           <div (click)="digit(5)" class="ILS_digit">5</div>
 28 |           <div (click)="digit(6)" class="ILS_digit">6</div>
 29 |         </div>
 30 |         <div class="ILS_numbers-row">
 31 |           <div (click)="digit(7)" class="ILS_digit">7</div>
 32 |           <div (click)="digit(8)" class="ILS_digit">8</div>
 33 |           <div (click)="digit(9)" class="ILS_digit">9</div>
 34 |         </div>
 35 |         <div class="ILS_numbers-row">
 36 |           <div *ngIf="ACDelbuttons" (click)="allClear()" class="ILS_digit ILS_ac">AC</div>
 37 |           <div (click)="digit(0)" class="ILS_digit">0</div>
 38 |           <div *ngIf="ACDelbuttons" (click)="remove()" class="ILS_digit ILS_del">DEL</div>
 39 |         </div>
 40 |       </div>
 41 |     `;
 42 | 
 43 | /* Style */
 44 | const LOCK_SCREEN_STYLE =`
 45 |           /* Animations*/
 46 |           @keyframes ILS_shake {
 47 |             from, to {
 48 |               transform: translate3d(0, 0, 0);
 49 |             }
 50 |             10%, 30%, 50%, 70%, 90% {
 51 |               transform: translate3d(-10px, 0, 0);
 52 |             }
 53 |             20%, 40%, 60%, 80% {
 54 |               transform: translate3d(10px, 0, 0);
 55 |             }
 56 |           }
 57 |           @keyframes ILS_buttonPress {
 58 |             0% {
 59 |               background-color: #E0E0E0;
 60 |             }
 61 |             100% {
 62 |               background-color: #F1F1F1;
 63 |             }
 64 |           }
 65 |           /* Lock Screen Layout*/
 66 |           .ILS_lock {
 67 |             display: flex;
 68 |             flex-direction: column;
 69 |             justify-content: center;
 70 |             position: absolute;
 71 |             width: 100%;
 72 |             height: 100%;
 73 |             z-index: 999;
 74 |             background-color: #F1F1F1;
 75 |           }
 76 |           .ILS_lock-hidden {
 77 |             display: none;
 78 |           }
 79 |           .ILS_label-row {
 80 |             height: 50px;
 81 |             width: 100%;
 82 |             text-align: center;
 83 |             font-size: 23px;
 84 |             padding-top: 10px;
 85 |             color: #464646;
 86 |           }
 87 |           .ILS_circles-row {
 88 |             display: flex;
 89 |             flex-direction: row;
 90 |             justify-content: center;
 91 |             width: 100%;
 92 |             height: 60px;
 93 |           }
 94 |           .ILS_circle {
 95 |             background-color: #F1F1F1!important;
 96 |             border-radius: 50%;
 97 |             width: 10px;
 98 |             height: 10px;
 99 |             border:solid 1px #464646;
100 |             margin: 0 15px;
101 |           }
102 |           .ILS_numbers-row {
103 |             display: flex;
104 |             flex-direction: row;
105 |             justify-content: center;
106 |             width: 100%;
107 |             height: 100px;
108 |           }
109 |           .ILS_digit {
110 |             margin: 0 14px;
111 |             width: 80px;
112 |             border-radius: 10%;
113 |             height: 80px;
114 |             text-align: center;
115 |             padding-top: 29px;
116 |             font-size: 21px;
117 |             color: #464646;
118 |             background-color: #bed7ef;
119 |           }
120 |           .ILS_digit.activated {
121 |             -webkit-animation-name: ILS_buttonPress;
122 |             animation-name: ILS_buttonPress;
123 |             -webkit-animation-duration: 0.3;
124 |             animation-duration: 0.3s;
125 |           }
126 |           .ILS_ac {
127 |             color: #464646;
128 |             background-color: #F8F8F8;
129 |             }
130 |           .ILS_del {
131 |             color: #464646;
132 |             background-color: #F8F8F8;
133 |             }
134 |           .ILS_full {
135 |             background-color:#464646!important;
136 |           }
137 |           .ILS_shake {
138 |             -webkit-animation-name: ILS_shake;
139 |             animation-name: ILS_shake;
140 |             -webkit-animation-duration: 0.5;
141 |             animation-duration: 0.5s;
142 |             -webkit-animation-fill-mode: both;
143 |             animation-fill-mode: both;
144 |           }
145 | `;
146 | 
147 | @Component({
148 |   selector:'lock-screen',
149 |   template:LOCK_SCREEN_TEMPLATE,
150 |   styles:[LOCK_SCREEN_STYLE]
151 | })
152 | export class LockScreenComponent implements OnInit {
153 | 
154 |   _showLockScreen:boolean;
155 |   ACDelbuttons:boolean;
156 |   passcodeWrong:boolean;
157 |   touchId:boolean;
158 | 
159 |   passcodeAttempts:number = 0;
160 | 
161 |   enteredPasscode:string = '';
162 |   passcode:string;
163 |   passcodeLabel:string;
164 |   touchLabel:string;
165 | 
166 |   onCorrect:any;
167 |   onWrong:any;
168 |   selected:any;
169 | 
170 |   constructor(
171 |     public events:Events,
172 |     private navCtrl:NavController,
173 |     private navParams:NavParams
174 |   ){
175 |     this._showLockScreen   = true;
176 |     this.touchId           = navParams.data.touchId || false;
177 |     this.ACDelbuttons      = navParams.data.ACDelbuttons || false;
178 |     this.passcode          = navParams.data.code;
179 |     this.onCorrect         = navParams.data.onCorrect || null;
180 |     this.onWrong           = navParams.data.onWrong || null;
181 |     this.passcodeLabel     = navParams.data.passcodeLabel || 'Enter Passcode';
182 |     this.touchLabel        = navParams.data.passcodeLabel || 'Verify Passcode';
183 |   }
184 | 
185 |   ngOnInit() {
186 |       setTimeout(()=>{
187 |         if (this.touchId) {
188 |           TouchID.isAvailable().then(
189 |             res => {
190 |               TouchID.verifyFingerprint(this.passcodeLabel).then(
191 |                 res => {
192 |                   this._showLockScreen = false;
193 |                   this.onCorrect && this.onCorrect();
194 |                   this.navCtrl.pop();
195 |                 },
196 |                 err => {
197 |                   console.log("Unable to unlock the device with this fingerprint.");
198 |                 }
199 |               )
200 |             },
201 |             err => {
202 |               console.log("Touch ID is not available.");
203 |             }
204 |           )
205 |         }
206 |       }, 50);
207 |   }
208 | 
209 |   allClear():void {
210 |     this.enteredPasscode = "";
211 |   }
212 | 
213 |   remove():void {
214 |     this.enteredPasscode = this.enteredPasscode.slice(0, -1);
215 |   }
216 | 
217 |   digit(digit:any):void {
218 |     this.selected = +digit;
219 |     if (this.passcodeWrong) {
220 |       return;
221 |     }
222 |     this.enteredPasscode += ''+digit;
223 | 
224 |     if (this.enteredPasscode.length >= 4) {
225 |       if(this.enteredPasscode === '' + this.passcode) {
226 |         this.enteredPasscode = '';
227 |         this.passcodeAttempts= 0;
228 |         this.onCorrect && this.onCorrect();
229 |         this._showLockScreen = false;
230 |         this.navCtrl.pop();
231 |       } else {
232 |         this.passcodeWrong = true;
233 |         this.passcodeAttempts++;
234 |         this.onWrong && this.onWrong(this.passcodeAttempts);
235 |         setTimeout(()=>{
236 |           this.enteredPasscode = '';
237 |           this.passcodeWrong = false;
238 |         }, 800);
239 |       }
240 |     }
241 |   }
242 | 
243 | 
244 | }
245 | 


--------------------------------------------------------------------------------