Updated mobile prototype

frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/BaseComponent.js

@@ -0,0 +1,249 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
+
+//#############################################################################
+
+var _Clipperz_PM_Components_base_id_ = 0;
+
+//#############################################################################
+
+Clipperz.PM.UI.Mobile.Components.BaseComponent = function(args) {
+	args = args || {};
+	Clipperz.PM.UI.Mobile.Components.BaseComponent.superclass.constructor.call(this, args);
+
+	this._element = args.element || null;
+	this._ids = {};
+
+	this._isFullyRendered = false;
+//	this._renderingWaitingQueue = [];
+
+	return this;
+}
+
+//=============================================================================
+
+//MochiKit.Base.update(Clipperz.PM.UI.Mobile.Components.BaseComponent, Object, {
+Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.BaseComponent, Object, {
+
+	'isClipperzPMComponent': true,
+	
+	//-------------------------------------------------------------------------
+
+	'toString': function () {
+		return "Clipperz.PM.UI.Mobile.Components.BaseComponent component";
+	},
+
+	'componentId': function () {
+		return this.getId('_id_');
+	},
+
+	//-------------------------------------------------------------------------
+
+	'element': function() {
+		return MochiKit.DOM.getElement(this._element);
+	},
+	
+	'setElement': function(aNode) {
+		this._element = aNode;
+	},
+
+	//-----------------------------------------------------
+
+	'displayElement': function() {
+		return this.element();
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderInNode': function(aDomNode) {
+		this.setElement(aDomNode);
+		this.render();
+	},
+
+	'render': function() {
+		this.clear();
+		this.renderSelf();
+//		this.renderComponents();
+//		if (this.shouldShowTranslationHints()) {
+//			this.renderTranslationHints();
+//		}
+		if (this.shouldShowElementWhileRendering()) {
+			MochiKit.Style.showElement(this.displayElement());
+		};
+
+		this._isFullyRendered = true;
+	
+//		MochiKit.Iter.forEach(this.renderingWaitingQueue(), MochiKit.Base.methodcaller('callback'));
+//		this.resetRenderingWaitingQueue();
+	},
+
+	'renderSelf': function() {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+
+//	'renderComponents': function() {
+//		var	slotName;
+//		
+//		for (slotName in this.slotComponents()) {
+//			this.slotComponents()[slotName].renderInNode(this.elementForSlotNamed(slotName));
+//		}
+//	},
+
+	//.........................................................................
+
+	'shouldShowElementWhileRendering': function() {
+		return false;
+	},
+
+	//.........................................................................
+
+	'isFullyRendered': function () {
+		return this._isFullyRendered;
+	},
+
+	//.........................................................................
+/*
+	'renderingWaitingQueue': function () {
+		return this._renderingWaitingQueue;
+	},
+	
+	'resetRenderingWaitingQueue': function () {
+		this._renderingWaitingQueue = [];
+	},
+
+	//.........................................................................
+
+	'waitUntilFullyRendered': function () {
+		var deferredResult;
+
+		if (this.isFullyRendered() == true) {
+			deferredResult = MochiKit.Async.succeed
+		} else {
+			deferredResult = new Clipperz.Async.Deferred("BaseComponent.waitUntilFullyRendered", {trace:false});
+			this.renderingWaitingQueue().push(deferredResult);
+		}
+
+		return deferredResult;
+	},
+*/
+	//-----------------------------------------------------
+/*
+	'update': function(args) {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+	
+	'updateSelf': function(args) {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+	
+	'updateComponents': function(args) {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+*/
+	//-----------------------------------------------------
+/*
+	'refresh': function() {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+
+	'refreshSelf': function() {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+
+	'refreshComponents': function(args) {
+		throw Clipperz.Base.exception.AbstractMethod;
+	},
+*/
+	//-----------------------------------------------------
+
+	'clear': function() {
+		var	slotName;
+		var componentId;
+
+		MochiKit.Signal.disconnectAllTo(this);
+
+		if (this.displayElement() != null) {
+			if (this.element() != this.displayElement()) {
+				MochiKit.DOM.removeElement(this.displayElement());
+			} else {
+				this.displayElement().innerHTML = "";
+			}
+		}
+	},
+
+	'remove': function() {
+		this.clear();
+		MochiKit.Signal.disconnectAll(this);
+	},
+
+	'append': function(aNode, aValue) {
+		return Clipperz.DOM.Helper.append(aNode, aValue);		
+	},
+	
+	'insertBefore': function (aNode, aValue) {
+		return Clipperz.DOM.Helper.insertBefore(aNode, aValue);
+	},
+
+	'insertAfter': function (aNode, aValue) {
+		return Clipperz.DOM.Helper.insertAfter(aNode, aValue);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'getId': function(aValue) {
+		var	result;
+
+		if (typeof(aValue) != 'undefined') {
+			result = this._ids[aValue];
+
+			if (typeof(result) == 'undefined') {
+				_Clipperz_PM_Components_base_id_ ++;
+
+				result = "Clipperz_PM_Components_" + aValue + "_" + _Clipperz_PM_Components_base_id_;
+				this._ids[aValue] = result;
+			}
+		} else {
+//			result = Clipperz.PM.UI.Common.Components.BaseComponent.superclass.getId.call(this);
+			throw "call to BaseComponent.getId with an undefined value";
+		}
+	
+		return result;
+	},
+
+	'getAnchor': function (aValue) {
+		return '#' + this.getId(aValue);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'getElement': function(aValue) {
+		return Clipperz.DOM.get(this.getId(aValue));
+	},
+
+	//-------------------------------------------------------------------------
+
+	__syntaxFix__: "syntax fix"
+	
+});

frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/CardList.js

@@ -29,13 +29,14 @@ Clipperz.PM.UI.Mobile.Components.CardList = function(args) {
 	Clipperz.PM.UI.Mobile.Components.CardList.superclass.constructor.apply(this, arguments);
 
 	this._cardDetail = null;
+	this.render();
 	
 	return this;
 }
 
 //=============================================================================
 
-Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Common.Components.BaseComponent, {
+Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
 
 	//-------------------------------------------------------------------------
 
@@ -46,6 +47,25 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
 	//-------------------------------------------------------------------------
 
 	'renderSelf': function () {
+		var	headerElement;
+
+		headerElement = MochiKit.Selector.findChildElements(this.element().parentNode, ['div[data-role=header]'])[0];
+		this.append(this.element(),
+			{tag:'div', /*cls:'scroll',*/ id:this.getId('listBox'), children:[
+				{tag:'ul', /*cls:'rounded',*/ id:this.getId('list'), children:[
+					{tag:'li', html:'loading'}
+				]}
+			]}
+		);
+
+		this.append(headerElement, 
+//			{tag:'a', href:"#", 'data-icon':'gear', cls:'ui-btn-right', html:"Options" }
+			{tag:'a', href:"#", id:this.getId('preferences'), cls:'ui-btn-right', html:"options" }
+		);
+
+		MochiKit.Signal.connect(this.getElement('preferences'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'showPreferences'));
+
+/*
 		this.append(this.element(), {tag:'div', cls:'cardList', children:[
 			{tag:'div', cls:'toolbar', children:[
 				{tag:'h1', html:"clipperz"},
@@ -70,6 +90,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
 
 //		MochiKit.Style.hideElement('backButton');
 //		MochiKit.Style.hideElement(this.getElement('cardDetail'));
+*/
 	},
 
 	'showCards': function (someCards) {
@@ -101,7 +122,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.CardList, Clipperz.PM.UI.C
 	'appendCardToList': function (aCardListElement, aCardInfo) {
 		this.append(aCardListElement, {tag:'li', cls:'cardListItem arrow', cardreference:aCardInfo['_reference'], children:[
 			{tag:'a', href:'#', html:aCardInfo['label'], children:[
-				{tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]}
+//				{tag:'small', cls:'favicon', children:[{tag:'img', cls:'favicon', src:aCardInfo['favicon']}]}
 			]}
 		]});
 	},

frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/LoginForm.js

@@ -44,7 +44,8 @@ Clipperz.PM.UI.Mobile.Components.LoginForm = function(args) {
 
 //=============================================================================
 
-Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, {
+//Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Common.Components.BaseComponent, {
+Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
 
 	//-------------------------------------------------------------------------
 
@@ -111,22 +112,22 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 	'_setMessage': function (aValue) {
 		this._message = aValue;
 
-		if (aValue == null) {
+//		if (aValue == null) {
-			MochiKit.Style.hideElement(this.getElement('credentialsMessage'));
+//			MochiKit.Style.hideElement(this.getElement('credentialsMessage'));
-		} else {
+//		} else {
-			this.getElement('message').innerHTML = aValue;
+//			this.getElement('message').innerHTML = aValue;
-			MochiKit.Style.showElement(this.getElement('credentialsMessage'));
+//			MochiKit.Style.showElement(this.getElement('credentialsMessage'));
-		}
+//		}
 	},
 
 	'setMessage': function (aValue) {
 		this._setMessage(aValue);
-		MochiKit.DOM.removeElementClass(this.getElement('credentialsMessage'), 'error');
+//		MochiKit.DOM.removeElementClass(this.getElement('credentialsMessage'), 'error');
 	},
 
 	'setErrorMessage': function (aValue) {
 		this._setMessage(aValue);
-		MochiKit.DOM.addElementClass(this.getElement('credentialsMessage'), 'error');
+//		MochiKit.DOM.addElementClass(this.getElement('credentialsMessage'), 'error');
 	},
 
 	//-------------------------------------------------------------------------
@@ -136,8 +137,25 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 		this._errorCallback = args['errorCallback'];
 	},
 
+	'show': function (args) {
+		this.updateWithArgs(args);
+
+		if (this.mode() == 'PIN') {
+			this.setPin('');
+			this.getElement('PIN').focus();
+		} else if (this.mode() == 'CREDENTIALS') {
+			if (this.getElement('usernameField').value.length == 0) {
+				this.getElement('usernameField').focus();
+			} else {
+				this.getElement('passphraseField').focus();
+				this.getElement('passphraseField').select();
+			}
+		}
+	},
+
 	'showErrors': function (args) {
 		if (args['previousFailedAttempt'] == 'LOGIN') {
+			$(this.getAnchor('credentialsSubmitButton')).button('enable');
 			this.setErrorMessage("Wrong credentials");
 		} else if (args['previousFailedAttempt'] == 'PIN') {
 			if (args['failedAttempts'] == -1) {
@@ -151,44 +169,21 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 	},
 
 	'updateWithArgs': function (args) {
-		this.renderIfNeeded();
+		this.renderOnlyOnce();
 		this.setCallbacks(args);
 		this.showErrors(args);
-		this.updateRendering();
+//		this.updateRendering();
-	},
-
-	'showPinLogin': function (args) {
-		this.setPin('');
-		this.setMode('PIN');
-		this.updateWithArgs(args);
-
-//		$(this.getAnchor('PIN')).focus();
-		this.getElement('PIN').focus();
-	},
-
-	'showCredentialsLogin': function (args) {
-		this.setMode('CREDENTIALS');
-		this.updateWithArgs(args);
-
-		if (this.getElement('usernameField').value.length == 0) {
-//			$(this.getAnchor('usernameField')).focus();
-			this.getElement('usernameField').focus();
-		} else {
-//			$(this.getAnchor('passphraseField')).focus();
-			this.getElement('passphraseField').focus();
-			this.getElement('passphraseField').select();
-		}
 	},
 
 	//-------------------------------------------------------------------------
 
-	'renderIfNeeded': function () {
+	'renderOnlyOnce': function () {
 		if (this.isFullyRendered() == false) {
 			this.render();
 		};
-		this.updateRendering();
+//		this.updateRendering();
 	},
-
+/*
 	'updateRendering': function () {
 		MochiKit.Style.showElement(this.getElement('credentialsBody'));
 		MochiKit.Style.hideElement(this.getElement('validating'));
@@ -196,25 +191,27 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 //		this.hideAllPanes();
 		MochiKit.Base.map(function (aNode) { MochiKit.Style.hideElement(aNode); },  MochiKit.Selector.findDocElements('div.credentialsBody > div'));
 		if (this.mode() == 'CREDENTIALS') {
-			selectedPanel = this.getElement('credentials')
+			selectedPanel = this.getElement('credentials');
+			$(this.getAnchor('credentialsSubmitButton')).button('enable');
 		} else if (this.mode() == 'PIN') {
 			selectedPanel = this.getElement('pin')
 //			this.updatePinDisplay();
 		} else {
 			throw 'Unhandled login form mode';
 		}
-		MochiKit.Style.showElement(selectedPanel);
 
+		MochiKit.Style.showElement(selectedPanel);
 		MochiKit.Style.hideElement(this.getElement('validating'));
 	},
-
+*/
-	'renderSelf': function() {
+/*
+	'_renderSelf': function() {
 		var selectedPanel;
 		this.append(this.element(), {tag:'div', id:'login', children:[
-			{tag:'div', cls:'toolbar', children:[
+			{tag:'div', cls:'toolbar text-center', children:[
-				{tag:'h1', html:"clipperz"}
+				{tag:'h1', cls:'clipperz', html:"clipperz"}
 			]},
-			{tag:'div', cls:'scroll', children:[
+			{tag:'div', cls:'', children:[
 				//==================================================================
 				{tag:'div', cls:'credentialsMessage', id:this.getId('credentialsMessage'), children:[
 					{tag:'h1', cls:'message', id:this.getId('message'), html:"Message"}
@@ -223,7 +220,7 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 				{tag:'div', cls:'credentialsBody', id:this.getId('credentialsBody'), children:[
 					//--------------------------------------------------------------
 					{tag:'div', cls:'pin', id:this.getId('pin'), children:[
-						{tag:'form', cls:'scroll', id:this.getId('pinForm'), children:[
+						{tag:'form', cls:'', id:this.getId('pinForm'), children:[
 							{tag:'ul', cls:'edit rounded', children:[
 								{tag:'li', children:[{tag:'input', type:'number',	name:'PIN',	placeholder:"PIN",	  id:this.getId('PIN')   }]},
 							]},
@@ -232,14 +229,15 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 					]},
 					//--------------------------------------------------------------
 					{tag:'div', cls:'credentials', id:this.getId('credentials'), children:[
-						{tag:'form', cls:'scroll', id:this.getId('credentialsForm'), children:[
+						{tag:'form', cls:'text-center', id:this.getId('credentialsForm'), children:[
-							{tag:'ul', cls:'edit rounded', children:[
+							{tag:'fieldset', children:[
-								{tag:'li', children:[{tag:'input', type:'email',	name:'name',		/*value:'joe',*/		placeholder:"username",	  id:this.getId('usernameField')   }]},
+//								{tag:'legend', html:"Legend"},
-								{tag:'li', children:[{tag:'input', type:'password',	name:'passphrase',	/*value:'clipperz',*/	placeholder:"passphrase", id:this.getId('passphraseField') }]}
+								{tag:'input', type:'email',		name:'name',		/*value:'joe',* /		placeholder:"username",	  id:this.getId('usernameField')   },
+//								{tag:'span', cls:'help-block', html:"Example of help text here"},
+								{tag:'input', type:'password',	name:'passphrase',	/*value:'clipperz',* /	placeholder:"passphrase", id:this.getId('passphraseField') },
 							]},
-							{tag:'a',  href:'#', cls:'greenButton', id:this.getId('credentialsSubmitButton'), html:"Login"}
-//							{tag:'input', type:'submit', cls:'greenButton', id:this.getId('credentialsSubmitButton'), value:"Login"}
 
+							{tag:'button', cls:'btn btn-primary btn-large', type:'submit', id:this.getId('credentialsSubmitButton'), html:"Login"}
 						]}
 					]},
 					//--------------------------------------------------------------
@@ -280,6 +278,31 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 		MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'advanceProgress',	this, 'advanceProgressHandle');
 		MochiKit.Signal.connect(Clipperz.Signal.NotificationCenter, 'progressDone',		this, 'progressDoneHandle');
 	},
+*/
+	'renderSelf': function() {
+		if (this.isFullyRendered() == false) {
+			this.append(this.element(), //	[
+//				{tag:'div', 'data-role':'header', children:[
+//					{tag:'h1', html:'clipperz'}
+//				]},
+//				{tag:'div', 'data-role':'content', children:[
+					{tag:'form', id:this.getId('credentialsForm'), children:[
+						{tag:'div', 'data-role':'fieldcontain', cls:'ui-hide-label', children:[
+							{tag:'label', 'for':'name', cls:'ui-input-text', html:"username"},
+							{tag:'input', type:'email',	name:'name',		/*value:'joe',*/		placeholder:"username",	  id:this.getId('usernameField')   },
+							{tag:'label', 'for':'passphrase', cls:'ui-input-text', html:"passphrase"},
+							{tag:'input', type:'password',	name:'passphrase',	/*value:'clipperz',*/	placeholder:"passphrase", id:this.getId('passphraseField') }
+						]},
+						{tag:'button', type:'submit', id:this.getId('credentialsSubmitButton'), html:"login"}
+					]}
+//				]}
+//			]
+			);
+
+			MochiKit.Signal.connect(this.getElement('credentialsForm'),			'onsubmit',		this, 'submitCredentialsHandler');
+			MochiKit.Signal.connect(this.getElement('credentialsSubmitButton'),	'onclick',		this, 'submitCredentialsHandler');
+		}
+	}, 
 
 	//-------------------------------------------------------------------------
 
@@ -288,8 +311,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 
 		this.setMessage(null);
 		pin = this.getElement('PIN').value;
-//		$(this.getAnchor('PIN')).blur();
+		$(this.getAnchor('PIN')).blur();
-		this.getElement('PIN').blur();
+//		this.getElement('PIN').blur();
 
 		credentials = Clipperz.PM.PIN.credentialsWithPIN(pin);
 		this.loginWithCredentials(credentials);
@@ -298,13 +321,16 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 	'submitCredentialsHandler': function (anEvent) {
 		var	credentials;
 
-		this.setMessage(null);
+		anEvent.preventDefault();
+
+//		this.setMessage(null);
+		$(this.getAnchor('usernameField')).blur();
+		$(this.getAnchor('passphraseField')).blur();
+		$(this.getAnchor('credentialsSubmitButton')).button('disable');
 
 		credentials = {};
 		credentials['username'] = this.getElement('usernameField').value;
 		credentials['passphrase'] = this.getElement('passphraseField').value;
-//		$(this.getAnchor('passphraseField')).blur();
-		this.getElement('passphraseField').blur();
 
 		this.loginWithCredentials(credentials);
 	},
@@ -318,8 +344,8 @@ Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.LoginForm, Clipperz.PM.UI.
 		args['credentials'] = someCredentials;
 		args['errorCallback'] = this.errorCallback();
 
-		MochiKit.Style.hideElement(this.getElement('credentialsBody'));
+//		MochiKit.Style.hideElement(this.getElement('credentialsBody'));
-		MochiKit.Style.showElement(this.getElement('validating'));
+//		MochiKit.Style.showElement(this.getElement('validating'));
 
 		MochiKit.Async.callLater(0.1, this.callback(), args);
 	},

frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Overlay.js

@@ -0,0 +1,136 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
+
+Clipperz.PM.UI.Mobile.Components.Overlay = function(args) {
+	args = args || {};
+
+	this._defaultDelay = 2;
+	
+	Clipperz.PM.UI.Mobile.Components.Overlay.superclass.constructor.apply(this, arguments);
+
+	this.render();
+	MochiKit.Style.hideElement(this.element());
+
+	return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.Overlay, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
+
+	//-------------------------------------------------------------------------
+
+	'toString': function () {
+		return "Clipperz.PM.UI.Mobile.Components.Overlay component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'show': function (aMessage) {
+		this.resetStatus();
+		this.setMessage(aMessage);
+		MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-hide');
+		MochiKit.DOM.addElementClass(this.element(), 'ios-overlay-show');
+	},
+	
+	'done': function (aMessage, aDelayBeforeHiding) {
+		this.completed(this.showDoneIcon, aMessage, aDelayBeforeHiding);
+	},
+	
+	'failed': function (aMessage, aDelayBeforeHiding) {
+		this.completed(this.showFailIcon, aMessage, aDelayBeforeHiding);
+	},
+
+	//-------------------------------------------------------------------------
+
+	'resetStatus': function () {
+		MochiKit.Style.showElement(this.element());
+		MochiKit.Style.showElement(this.getElement('spinner'));
+		MochiKit.Style.hideElement(this.getElement('done'));
+		MochiKit.Style.hideElement(this.getElement('failed'));
+	},
+
+	'setMessage': function (aMessage) {
+		if (typeof(aMessage) != 'undefined') {
+			this.getElement('title').innerHTML = aMessage;
+		}
+	},
+
+	'completed': function (aFunctionToShowResult, aMessage, aDelayBeforeHiding) {
+		var delay = aDelayBeforeHiding || this.defaultDelay();
+
+		this.hideSpinner();
+		MochiKit.Base.bind(aFunctionToShowResult, this)();
+		this.setMessage(aMessage);
+
+		MochiKit.Async.callLater(delay, MochiKit.Base.bind(this.hide, this))
+	},
+
+	'hide': function () {
+		MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-show');
+		MochiKit.DOM.addElementClass(this.element(), 'ios-overlay-hide');
+		MochiKit.Async.callLater(1, MochiKit.Style.hideElement, this.element());
+	},
+
+	'hideSpinner': function () {
+		MochiKit.Style.hideElement(this.getElement('spinner'));
+	},
+	
+	'showDoneIcon': function () {
+		MochiKit.Style.showElement(this.getElement('done'));
+	},
+	
+	'showFailIcon': function () {
+		MochiKit.Style.showElement(this.getElement('failed'));
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'defaultDelay': function () {
+		return this._defaultDelay;
+	},
+	
+	//-------------------------------------------------------------------------
+
+	'renderSelf': function () {
+		this.setElement(Clipperz.DOM.Helper.append(MochiKit.DOM.currentDocument().body,
+			{tag:'div', id:'ui-ios-overlay', cls:'ui-ios-overlay', children:[
+				{tag:'div', cls:'spinner', id:this.getId('spinner'), children:[
+					{tag:'div', cls:'bar01'}, {tag:'div', cls:'bar02'}, {tag:'div', cls:'bar03'}, {tag:'div', cls:'bar04'}, {tag:'div', cls:'bar05'}, {tag:'div', cls:'bar06'}, {tag:'div', cls:'bar07'}, {tag:'div', cls:'bar08'}, {tag:'div', cls:'bar09'}, {tag:'div', cls:'bar10'}, {tag:'div', cls:'bar11'}, {tag:'div', cls:'bar12'}
+				]},
+				
+//				{tag:'span', cls:'icon', id:this.getId('done'), html:'&#xe000'},
+				{tag:'span', cls:'icon', id:this.getId('done'), html:'done'},
+//				{tag:'span', cls:'icon', id:this.getId('failed'), html:'&#xe001'},
+				{tag:'span', cls:'icon', id:this.getId('failed'), html:'failed'},
+				
+				{tag:'span', cls:'title', id:this.getId('title'), html:""}
+			]}
+		));
+	},
+
+	//-------------------------------------------------------------------------
+	__syntaxFix__: "syntax fix"
+});

frontend/gamma/js/Clipperz/PM/UI/Mobile/Components/Preferences.js

@@ -0,0 +1,77 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+Clipperz.Base.module('Clipperz.PM.UI.Mobile.Components');
+
+Clipperz.PM.UI.Mobile.Components.Preferences = function(args) {
+	args = args || {};
+
+	Clipperz.PM.UI.Mobile.Components.Preferences.superclass.constructor.apply(this, arguments);
+
+	this.render();
+
+	return this;
+}
+
+//=============================================================================
+
+Clipperz.Base.extend(Clipperz.PM.UI.Mobile.Components.Preferences, Clipperz.PM.UI.Mobile.Components.BaseComponent, {
+
+	//-------------------------------------------------------------------------
+
+	'toString': function () {
+		return "Clipperz.PM.UI.Mobile.Components.Preferences component";
+	},
+
+	//-------------------------------------------------------------------------
+
+	'renderSelf': function () {
+//		var	pageElement;
+		var	headerElement;
+		var titleElement;
+
+//		pageElement = this.element().parentNode;
+//		MochiKit.DOM.updateNodeAttributes(pageElement, {'data-add-back-btn': 'true'})
+		headerElement = MochiKit.Selector.findChildElements(this.element().parentNode, ['div[data-role=header]'])[0];
+//		headerElement.innerHTML = "Preferences";
+		titleElement = MochiKit.Selector.findChildElements(headerElement, ['h1'])[0];
+		titleElement.innerHTML = "Preferences";
+		this.append(this.element(),
+			{tag:'div', id:this.getId('listBox'), children:[
+				{tag:'h1', html:"Preferences"}
+			]}
+		);
+
+		this.append(headerElement, [
+			//	'data-direction':'reverse', 'data-rel':'back', 
+			{tag:'a', href:"#", id:this.getId('back'), cls:'ui-btn-left', html:"back" },
+			{tag:'a', href:"#", id:this.getId('save'), cls:'ui-btn-right', html:"save" }
+		]);
+
+		MochiKit.Signal.connect(this.getElement('back'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'back'));
+		MochiKit.Signal.connect(this.getElement('save'), 'onclick', MochiKit.Base.partial(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'savePreferences'));
+	},
+
+	//=========================================================================
+	__syntaxFix__: "syntax fix"
+});

frontend/gamma/js/Clipperz/PM/UI/Mobile/CustomizeJQueryMobile.js

@@ -0,0 +1,50 @@
+/*
+
+Copyright 2008-2013 Clipperz Srl
+
+This file is part of Clipperz, the online password manager.
+For further information about its features and functionalities please
+refer to http://www.clipperz.com.
+
+* Clipperz is free software: you can redistribute it and/or modify it
+  under the terms of the GNU Affero General Public License as published
+  by the Free Software Foundation, either version 3 of the License, or 
+  (at your option) any later version.
+
+* Clipperz is distributed in the hope that it will be useful, but 
+  WITHOUT ANY WARRANTY; without even the implied warranty of 
+  MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+  See the GNU Affero General Public License for more details.
+
+* You should have received a copy of the GNU Affero General Public
+  License along with Clipperz. If not, see http://www.gnu.org/licenses/.
+
+*/
+
+$(document).on("mobileinit", function() {
+	$.extend($.mobile, {
+//		activeBtnClass: 'ui-btn-active',
+//		activePageClass: 'ui-page-active',
+		ajaxEnabled: false,
+//		allowCrossDomainPages: false,
+//		autoInitializePage: true,
+//		buttonMarkup.hoverDelay: 200,
+//		defaultDialogTransition: 'pop',
+//		defaultPageTransition: 'fade,
+//		getMaxScrollForTransition: 3,
+//		gradeA: …,
+//		hashListeningEnabled: true,
+		ignoreContentEnabled: true,
+//		linkBindingEnabled: true,
+//		maxTransitionWidth: false,
+//		minScrollBack: 250,
+//		ns: '',
+//		pageLoadErrorMessage: "Error Loading Page",
+//		pageLoadErrorMessageTheme: 'e',
+//		phonegapNavigationEnabled: false,
+//		pushStateEnabled: true,
+//		subPageUrlKey: 'ui-page',
+//		transitionFallbacks.[transition]: 'fade',
+		__syntaxFix__: "syntax fix"
+	})
+});

frontend/gamma/js/main.mobile.js

@@ -40,9 +40,33 @@ MochiKit.Logging.logError("## MainController - GENERIC ERROR" + "\n" + "==>> " +
 	return result;
 }
 
-
 Clipperz.PM.RunTime = {};
 
+//==============================================================================
+
+function registerJQMLogEvents () {
+	var interestingEvents = [
+		'pagebeforeload',	'pageload',		'pageloadfailed',
+		'pagebeforechange',	'pagechange',	'pagechangefailed',
+		'pagebeforeshow',	'pagebeforehide',
+		'pageshow',			'pagehide',
+		'pagebeforecreate',	'pagecreate',
+		'pageinit',
+		'pageremove'
+	]
+
+	interestingEvents.map(function (anEvent) {
+		$(document).on(anEvent,	MochiKit.Base.partial(logJQMEvent, anEvent));
+	})
+}
+
+function logJQMEvent (anEventName, anEvent, someData) {
+//	console.log(anEventName);
+	console.log(anEventName, someData);
+//	console.log(anEventName, anEvent, someData);
+}
+
+//==============================================================================
 
 function run () {
 	Clipperz.PM.Strings.Languages.initSetup();
@@ -51,12 +75,7 @@ function run() {
 	Clipperz.PM.RunTime.mainController.run();
 }
 
-// if (navigator.standalone == false) {
+//==============================================================================
-// 	window.localStorage.setItem('PIN', '1234');
-// 	alert("Saved PIN");
-// } else {
-// 	alert (window.localStorage.getItem('PIN'));
-// }
-
 
+//registerJQMLogEvents();
 MochiKit.DOM.addLoadEvent(run);