Lock Screen for iOS apps - Titanium

app.js

function PassCode(_params){
	_params = _params || {};
	
	// @PARAMS:{
	// 		boxSize: 			(Number) size of the passcode character boxes
	// 		backgroundColor: 	(String) background color of the mainview 
	// 		backgroundImage: 	(String) background image of the mainview
	// 		panicColor: 		(String) background color of the view when panic() is called - when wrong password
	// 		titleText: 			(String) the text of the title view, above the pass code boxes by default,
	// 		mainView: 			(Object) params for the main view that hold the passcode boxes
	// }
	var self = {};

	var BOX_SIZE = _params.boxSize || 50;
	var BACKGROUND_COLOR = _params.backgroundColor || 'transparent'; 
	var BACKGROUND_IMAGE = _params.backgroundImage || null; 
	var PANIC_COLOR = _params.panicColor || '#6e1e1e';
	var TITLE_TEXT = _params.titleText || '';
	var TOP_VIEW_PARAMS = _params.mainView || {top:80,height:120,backgroundColor:BACKGROUND_COLOR};
	

	self.submit = _params.submit || function(){};
	
	var mainView = Ti.UI.createView({
		top:0,bottom:0,right:0,left:0,
		backgroundColor:BACKGROUND_COLOR,
		backgroundImage:BACKGROUND_IMAGE
	});
	var hiddenTextField = Ti.UI.createTextField({
		visible:false,
		keyboardType: Ti.UI.KEYBOARD_NUMBER_PAD
	});
	
	TOP_VIEW_PARAMS.top = TOP_VIEW_PARAMS.top || 80;
	TOP_VIEW_PARAMS.height = TOP_VIEW_PARAMS.height || 120;
	TOP_VIEW_PARAMS.backgroundColor = TOP_VIEW_PARAMS.backgroundColor || BACKGROUND_COLOR;
	
	var topView = Ti.UI.createView(TOP_VIEW_PARAMS);
	var titleView = Ti.UI.createLabel({
		top:0, left:0, right:0,
		height:TOP_VIEW_PARAMS.top,
		text:TITLE_TEXT,
		textAlign:'center',
		font:{fontSize:20,fontWeight:'bold'}
	});
	
	function box(top,left){
		return Ti.UI.createLabel({
			top:top,
			left:left,
			width:BOX_SIZE,
			height:BOX_SIZE,
			backgroundColor:'white',
			borderColor:'black',
			borderWidth:1,
			textAlign:'center',
			text:'',
			font:{fontWeigh:'bold',fontSize:50}
		});
	}
	var viewWidth = mainView.size.width || 320;
	var leftMargin = (viewWidth - (BOX_SIZE * 4))/5
	var left = 0;
	var top = Math.round((topView.height - BOX_SIZE) / 2);
	
	
	var field1 = box(top,left += leftMargin);
	var field2 = box(top,left += leftMargin + BOX_SIZE);
	var field3 = box(top,left += leftMargin + BOX_SIZE);
	var field4 = box(top,left += leftMargin + BOX_SIZE);
	
	mainView.add(hiddenTextField);
	mainView.add(titleView);
	topView.add(field1);
	topView.add(field2);
	topView.add(field3);
	topView.add(field4);
	mainView.add(topView);

	hiddenTextField.addEventListener('change', function(e){
		var value = e.value;
		var len = value.length;
		switch(len){
			case 0: field1.text = ''; break;
			case 1: field1.text = '*'; field2.text = ''; break;
			case 2: field1.text = '*'; field2.text = '*'; field3.text = ''; break;
			case 3: field1.text = '*'; field2.text = '*'; field3.text = '*'; field4.text = ''; break;
			case 4: field1.text = '*'; field2.text = '*'; field3.text = '*'; field4.text = '*'; self.submit(); return;
		}
	});
	
	
	self.view = mainView;
	self.focus = function(){
		hiddenTextField.focus();
	};
	self.empty = function(_textfield){
		hiddenTextField.value = '';
		field1.text = '';
		field2.text = '';
		field3.text = '';
		field4.text = '';
	};
	self.panic = function(){
		topView.animate({backgroundColor:PANIC_COLOR}, function(){
			self.empty();
			topView.animate({backgroundColor:TOP_VIEW_PARAMS.backgroundColor, duration:3000});
		});
	}
	self.setTitle = function(_text){
		titleView.text = _text;
	}
	return self;
}








function Window(){
	var win = Ti.UI.createWindow({
		backgroundColor:'blue',
		title:'Window'
	});
	var passCode = PassCode({
		boxSize:50,
		titleText:'Enter your passcode to unlock',
		backgroundColor : '#ccc',
		panicColor:'#6e1e1e'
	});
	passCode.submit = function(){
		passCode.panic();
	}
	win.add(passCode.view);
		
	win.addEventListener('focus', function(){
		passCode.focus();
	});
	
	return win;
}









var Tab = [];
(function(){
	var tabGroup = Ti.UI.createTabGroup();
	Tab[0] = Ti.UI.createTab({
		window:Window()
	});
	tabGroup.addTab(Tab[0]);
	tabGroup.open();	

})();