Our website is made possible by displaying online advertisements to our visitors. Please consider supporting us by disabling your ad blocker.

Add Pin Code Unlock To Your Ionic Framework App

TwitterFacebookRedditLinkedInHacker News

I currently have a few Ionic Framework Android and iOS applications on the market. A common request for these apps have been to have a pin code unlock feature for extra security.

Ionic Framework Pin Unlock

Making a pin code unlock requires no additional plugins, however, I recommend following one of my previous articles regarding Apache Cordova event listeners as it will be useful in making sure the pin code unlock does it’s job.

Let’s start things by creating the CSS for our screen. In the www/css/style.css file, add the following code:

.center-vertical {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-direction: normal;
    -moz-box-direction: normal;
    -webkit-box-orient: horizontal;
    -moz-box-orient: horizontal;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-content: stretch;
    -ms-flex-line-pack: stretch;
    align-content: stretch;
    -webkit-box-align: center;
    -moz-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.center-vertical > * {
    -webkit-box-ordinal-group: 1;
    -moz-box-ordinal-group: 1;
    -webkit-order: 0;
    -ms-flex-order: 0;
    order: 0;
    -webkit-box-flex: 1;
    -moz-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    -webkit-align-self: auto;
    -ms-flex-item-align: auto;
    align-self: auto;
}

It will be useful to know that I did not invent the above CSS. I got the CSS code from a thread in the Ionic Framework forums. The first .center-vertical will actually do the vertical centering and the second will fix all the horizontal items that broke.

Next we’ll want to add the HTML code responsible for our pin code template. Create www/templates/pincode.html and add the following code to it:

<ion-view title="Pin Code" ng-init="init()">
    <ion-content class="center-vertical">
        <div>
            <div class="row" style="text-align: center">
                <div class="col col-10 col-offset-15" style="border-bottom: 1px solid black">
                    {{passcode.substring(0, 1)}}
                </div>
                <div class="col col-10 col-offset-10" style="border-bottom: 1px solid black">
                    {{passcode.substring(1, 2)}}
                </div>
                <div class="col col-10 col-offset-10" style="border-bottom: 1px solid black">
                    {{passcode.substring(2, 3)}}
                </div>
                <div class="col col-10 col-offset-10" style="border-bottom: 1px solid black">
                    {{passcode.substring(3, 4)}}
                </div>
            </div>
        </div>
        <div style="margin-top: 50px">
            <div class="row">
                <div class="col col-20 col-offset-20">
                    <button class="button button-light button-stretch" ng-click="add(1)">1</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(2)">2</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(3)">3</button>
                </div>
            </div>
            <div class="row">
                <div class="col col-20 col-offset-20">
                    <button class="button button-light button-stretch" ng-click="add(4)">4</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(5)">5</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(6)">6</button>
                </div>
            </div>
            <div class="row">
                <div class="col col-20 col-offset-20">
                    <button class="button button-light button-stretch" ng-click="add(7)">7</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(8)">8</button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(9)">9</button>
                </div>
            </div>
            <div class="row">
                <div class="col col-20 col-offset-20">
                    <button class="button button-light button-stretch"></button>
                </div>
                <div class="col col-20">
                    <button class="button button-light button-stretch" ng-click="add(0)">0</button>
                </div>
                <div class="col col-20">
                    <button class="button icon ion-arrow-left-a button-light button-stretch" ng-click="delete()"></button>
                </div>
            </div>
        </div>
    </ion-content>
</ion-view>

Some interesting things to note in the above code. There are four columns that represent each digit of our pin code. These four values are actually one string, but since we know a plain text field is lame for a pin unlock screen we break of up the string on the fly. The next interesting thing to note is each digit button will call an add(v) method on click. The delete button will call a delete() method. All these variables and methods will be elaborated on next.

If you haven’t done so already, add these additional CSS items to your www/css/style.css file to avoid confusion, since I use them in the code:

.button-stretch {
    width: 100%;
}

.col-offset-15 {
    margin-left: 15%;
}

Let’s create an unlocking controller in our app.js file like so:

exampleApp.controller('UnlockController', function($scope, $location, $timeout) {

    $scope.init = function() {

    }

    $scope.add = function(value) {

    }

    $scope.delete = function() {

    }

});

To try to make things easier to understand, I’m going to break up each of the functions in this controller.

The init() method is going to be responsible for resetting the pin code screen. You might want to make it something like this:

$scope.init = function() {
    $scope.passcode = "";
}

With the controller initialized now we can start adding to the pin, every time a numeric button is pressed. While input is calculated we will make sure that the pin never exceeds four digits:

$scope.add = function(value) {
    if($scope.passcode.length < 4) {
        $scope.passcode = $scope.passcode + value;
        if($scope.passcode.length == 4) {
            $timeout(function() {
                console.log("The four digit code was entered");
            }, 500);
        }
    }
}

I’m purposefully keeping things simple here. When four digits have been entered, wait 500 milliseconds and then proceed to print a log. In a more complete scenario you’d want to validate that the pin is correct and maybe redirect somewhere if it is. I’ll leave that up to your imagination.

$scope.delete = function() {
    if($scope.passcode.length > 0) {
        $scope.passcode = $scope.passcode.substring(0, $scope.passcode.length - 1);
    }
}

When the delete button is pressed, remove the last inserted pin digit. Simple logic is in place to make sure we don’t delete past zero.

It is important to note that I’ve only set the foundation for creating a pin unlock screen. It is up to you to use your own imagination for making it completely functional. For example, you may want to add a toggle in a preference menu to enable or disable pin code unlock. You may want to add a resume event listener to redirect to the pin unlock screen when the application takes focus.

Nic Raboy

Nic Raboy

Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in C#, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Unity. Nic writes about his development experiences related to making web and mobile development easier to understand.

Search

Follow Us

Support This Site