Password and passcode screens are common verification instruments for enterprise apps. These screens provide interaction patterns that help solve both authentication and confirmation scenarios.
This recipe demonstrates how to implement a cross-platform passcode screen similar to those seen on iOS and in the Android networking screens.
This recipe uses the Ti.Passcode
CommonJS module to implement a cross-platform passcode screen. This module and other code assets can be downloaded from the source provided by the book, or individually through the links provided in the See also section at the end of this recipe. Installing this module in your project is straightforward. Simply copy the Ti.Passcode.js
file into the Resources
folder of your project as shown in the following screenshot:
Once you have added the Ti.Passcode.js
file to your project, you need to create your application namespaces in the app.js
file and use require
to import the module into your code as the following code demonstrates:
//Create our application namespace var my = { mod : require('Ti.Passcode') };
This recipe uses Ti.UI.Windows
to present information to the user. The code used to create the first Ti.UI.Window
is discussed in this section. This section details how to launch the Ti.Passcode
module and provides a code to have it verified.
Now perform the following steps:
Ti.UI.Window
is created to attach all UI elements.var win = Ti.UI.createWindow({ backgroundColor: '#fff', title: 'Passcode Example', layout:'vertical',fullscreen:false, exitOnClose:true });
txtPasscode Ti.UI.TextField
is added to the Ti.UI.Window
. This control is used to collect the passcode that the Ti.Passcode
module will verify against.var txtPasscode = Ti.UI.createTextField({ value:'1234',hintText:'Enter Passcode', height:45, left:5, right:5, borderStyle:Ti.UI.INPUT_BORDERSTYLE_ROUNDED }); win.add(txtPasscode);
bntRunPasscode Ti.UI.Button
is added to the Ti.UI.Window
. This button will be used later in the recipe to launch the passcode screen.var btnRunPasscode = Ti.UI.createButton({ title:'Open Passcode Screen', top:25, height:45, left:5, right:5 }); win.add(btnRunPasscode);
The second Ti.UI.Window
in this recipe is created by the Ti.Passcode
module. This Ti.UI.Window
is responsible for the presentation and verification of the application passcode. This section describes how to configure, create, and confirm your app passcode using this module's display element shown in the following screenshot:
The passcode verification screen is launched when the user taps the btnRunPasscode Ti.UI.Button
and triggers the click
event to be fired. The following code snippet discusses the actions performed after the click
event is fired:
btnRunPasscode.addEventListener('click',function(x){
click
event of the btnRunPasscode
button is to create our configuration and other variables. The options
object contains all of the settings needed to configure the Ti.Passcode
window.var codeWindow = null, options = {
window
configuration element allows for all of the standard Ti.UI.Window
properties to be used. The following snippet shows how to set the backgroudnColor
and navBarHidden
properties on the passcode window.window:{ backgroundColor:'#ccc', navBarHidden:true },
view
configuration element allows for the configuration of a majority of the components displayed in the Ti.Passcode
window. The following snippet demonstrates how to set the passcode
title property and code for displaying the error message:view:{ title:'Enter application passcode', errorColor:'yellow' } };
onCompleted
callback function is defined. This function will be used as the callback method provided to the Ti.Passcode
module. The passcode verification results will be provided as a dictionary to the d
input parameters.function onCompleted(d){
d
argument is an object with the verification results. The d.success
property provides an indicator if the entered passcode matches the passcode provided on launch. The following code snippet alerts the user if they have entered the correct passcode or if they need to try the process again.if(d.success){ alert('Passcode entered is correct'), codeWindow.close(); }else{ Alert('Invalid passcode, please try again'), } };
var passcode = new my.mod();
createWindow
method is then called on the new passcode instance. This method provides the passcode to verify from the txtPasscode
control, and also provides the callback and options objects created earlier. This method then returns a Ti.UI.Window
. Once the passcode has been entered, the callback method onCompleted
will send the verification results.var codeWindow = passcode.createWindow(txtPasscode.value, onCompleted,options);
Ti.UI.Window
returned by the createWindow
method is then opened with a modal flag. The passcode Ti.UI.Window
will remain open until closed by the onCompleted
callback method as discussed earlier.codeWindow.open({modal:true}); });
The following screenshots illustrate how this section of the code looks on the device after the user has successfully entered his/her passcode.
Ti.Passcode
CommonJS module. To read the documentation and to learn more about this project, please visit https://github.com/benbahrenburg/Ti.Passcode.18.118.144.248