Minor UI/UX improvements.

frontend/delta/js/Clipperz/PM/UI/Components/Cards/View.js

@@ -423,8 +423,6 @@ Clipperz.PM.UI.Components.Cards.ViewClass = React.createClass({
 	render: function () {
 		var	result;
 
-console.log(this.props['_isBrandNew']);
-
 		if (this.props['loading'] == true) {
 			result = this.renderLoading();
 		} else if (this.props['_reference']) {

frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DataExport.js

@@ -68,7 +68,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataExportClass = React.createClass({
 						React.DOM.h3({}, "Offline copy"),
 						React.DOM.div({'className':'description'}, [
 							React.DOM.p({}, "Download a read-only portable version of Clipperz. Very convenient when no Internet connection is available."),
-							React.DOM.p({}, "An offline copy is just a single HTML file that contains both the whole Clipperz web application and your encrypted data."),
+							React.DOM.p({}, "An offline copy is just a single HTML file that contains both the whole Clipperz web application and your encrypted data, except file attachments."),
 							React.DOM.p({}, "It is as secure as the hosted Clipperz service since they both share the same code and security architecture.")
 						]),
 						React.DOM.a({'className':'button', 'onClick':this.handleDownloadOfflineCopyLink}, "download offline copy")
@@ -77,7 +77,7 @@ Clipperz.PM.UI.Components.ExtraFeatures.DataExportClass = React.createClass({
 						React.DOM.h3({}, "HTML + JSON"),
 						React.DOM.div({'className':'description'}, [
 							React.DOM.p({}, "Download a printer-friendly HTML file that lists the content of all your cards."),
-							React.DOM.p({}, "This same file also contains all your data in JSON format."),
+							React.DOM.p({}, "This same file also contains all your data in JSON format. Please note that file attachments are not included."),
 							React.DOM.p({'className':'warning'}, "Beware: all data are unencrypted! Therefore make sure to properly store and manage this file.")
 						]),
 						React.DOM.a({'className':'button', 'onClick':this.handleExportLink}, "download HTML+JSON")

frontend/delta/js/Clipperz/PM/UI/Components/ExtraFeatures/DevicePIN.js

@@ -41,13 +41,23 @@ Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
 	//=========================================================================
 
 	handleChange: function(anEvent) {
-		if (anEvent.target.value.length <= this.props['PIN'].DEFAULT_PIN_LENGTH) {
+		var newValue = anEvent.target.value;
+
+		if (!isNaN(newValue) && newValue.length <= this.props['PIN'].DEFAULT_PIN_LENGTH) {
 			this.setState({
 				'pinValue': anEvent.target.value
 			});
 		}
 	},
 
+	handleSubmit: function(anEvent) {
+		var isSubmitEnabled = (this.state['pinValue'].length == this.props['PIN'].DEFAULT_PIN_LENGTH);
+
+		if (isSubmitEnabled) { this.savePIN(); }
+
+		anEvent.preventDefault();
+	},
+
 	setFocus: function() {
 		this.refs['pinValue'].getDOMNode().focus();
 	},
@@ -94,7 +104,9 @@ Clipperz.PM.UI.Components.ExtraFeatures.DevicePINClass = React.createClass({
 			React.DOM.div({'className': 'content'}, [
 //				React.DOM.p({}, "PIN is "+((this.props['PIN'].isSet()) ? '' : 'not ')+"set on this device"),
 				React.DOM.p({}, ((this.props['PIN'].isSet()) ? "PIN is set on this device" : "PIN is not set on this device")),
-				React.DOM.form({},[
+				React.DOM.form({
+						'onSubmit': this.handleSubmit,
+				},[
 					React.DOM.input({
 						'type': 'tel',
 						'key': 'pinValue',

frontend/delta/js/Clipperz/PM/UI/Components/Overlay.js

@@ -53,9 +53,9 @@ Clipperz.Base.extend(Clipperz.PM.UI.Components.Overlay, Object, {
 
 	//-------------------------------------------------------------------------
 
-	'show': function (aMessage, showMask, showProgress) {
+	'show': function (aMessage, showMask, showProgress, showOnCardDetail) {
 		if (showMask === true) {
-			this.showMask();
+			this.showMask(showOnCardDetail);
 		}
 
 		if (showProgress === true) {
@@ -68,6 +68,12 @@ Clipperz.Base.extend(Clipperz.PM.UI.Components.Overlay, Object, {
 			MochiKit.DOM.removeElementClass(this.element(), 'spinnerOnly');
 		}
 
+		if (showOnCardDetail) {
+			MochiKit.DOM.addElementClass(this.element(), 'card');
+		} else {
+			MochiKit.DOM.removeElementClass(this.element(), 'card');
+		}
+
 		this.resetStatus();
 		this.setMessage(aMessage);
 		MochiKit.DOM.removeElementClass(this.element(), 'ios-overlay-hide');
@@ -90,7 +96,12 @@ Clipperz.Base.extend(Clipperz.PM.UI.Components.Overlay, Object, {
 		return this.getElement('mask');
 	},
 	
-	'showMask': function () {
+	'showMask': function (showOnCardDetail) {
+		MochiKit.DOM.removeElementClass(this.maskElement(), 'card');
+
+		if (showOnCardDetail) {
+			MochiKit.DOM.addElementClass(this.maskElement(), 'card');
+		}
 		MochiKit.DOM.removeElementClass(this.maskElement(), 'hidden');
 	},
 	
@@ -123,12 +134,13 @@ Clipperz.Base.extend(Clipperz.PM.UI.Components.Overlay, Object, {
 		return MochiKit.Async.callLater(delay, MochiKit.Base.bind(this.hide, this))
 	},
 
-	'hide': function () {
+	'hide': function (withoutAnimationTime) {
+		var secondsBeforeHiding = withoutAnimationTime ? 0 : 1;
 		var element = this.element();
 		this.hideProgressBar();
 		MochiKit.DOM.removeElementClass(element, 'ios-overlay-show');
 		MochiKit.DOM.addElementClass(element, 'ios-overlay-hide');
-		return MochiKit.Async.callLater(1, MochiKit.Style.hideElement, element);
+		return MochiKit.Async.callLater(secondsBeforeHiding, MochiKit.Style.hideElement, element);
 	},
 
 	'hideSpinner': function () {

frontend/delta/js/Clipperz/PM/UI/Components/Pages/UnlockPage.js

@@ -73,7 +73,7 @@ Clipperz.PM.UI.Components.Pages.UnlockPageClass = React.createClass({
 		this.refs['passphrase'].getDOMNode().blur();
 		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', this.refs['passphrase'].getDOMNode().value, 'PASSPHRASE');
 	
-		this.resetUnlockForm();
+		// this.resetUnlockForm();
 	},
 
 	submitPIN: function() {
@@ -83,7 +83,7 @@ Clipperz.PM.UI.Components.Pages.UnlockPageClass = React.createClass({
 
 		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'unlock', pin, 'PIN');
 
-		this.resetUnlockForm();
+		// this.resetUnlockForm();
 	},
 
 	resetUnlockForm: function() {

frontend/delta/js/Clipperz/PM/UI/MainController.js

@@ -429,6 +429,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 		deferredResult.addMethod(this.user(), 'lock');
 		deferredResult.addMethod(this, 'deleteCleanTextData');
 		deferredResult.addMethod(this.pages()['unlockPage'], 'setProps', {'username': this.user().username()});
+		deferredResult.addCallback(MochiKit.Async.callLater, 0.1, MochiKit.Base.method(this.pages()['unlockPage'], 'resetUnlockForm'));
 		deferredResult.addMethod(this.pages()['unlockPage'], 'setInitialFocus');
 		deferredResult.addCallback(MochiKit.Async.callLater, 1, MochiKit.Base.method(this.pages()['mainPage'], 'replaceProps', {'locked': true}));
 		
@@ -496,7 +497,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			'disabled': false,
 			'forceCredentials': false,
 		});
-		deferredResult.addMethod(unlockPage, 'resetUnlockForm');
+		// deferredResult.addMethod(unlockPage, 'resetUnlockForm');
 		deferredResult.addCallback(MochiKit.Signal.signal, Clipperz.Signal.NotificationCenter, 'enableLock');
 		deferredResult.addMethod(overlay, 'done', "", 0.5);
 
@@ -706,7 +707,8 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			deferredResult = MochiKit.Async.succeed();
 		} else {
 			if (showLoading) {
-				this.setPageProperties('mainPage', 'selectedCard', {'loading':true, 'label':someInfo['label'], '_reference':someInfo['reference']});
+				// this.setPageProperties('mainPage', 'selectedCard', {'loading':true, 'label':someInfo['label'], '_reference':someInfo['reference']});
+				this.overlay().show('', true, false, true)
 			}
 
 			deferredResult = new Clipperz.Async.Deferred('MainController.updateSelectedCard', {trace:false});
@@ -717,6 +719,7 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 			if ((this.mediaQueryStyle() == 'narrow') && shouldShowCardDetail) {
 				deferredResult.addMethod(this, 'showCardDetailInNarrowView');
 			}
+			deferredResult.addMethod(this.overlay(), 'hide', true);
 		
 			MochiKit.Async.callLater(0.1, MochiKit.Base.method(deferredResult, 'callback'));
 		}
@@ -2117,6 +2120,8 @@ Clipperz.log("THE BROWSER IS OFFLINE");
 
 		this._mediaQueryStyle = newQueryStyle;
 
+		MochiKit.DOM.setElementClass(document.body, newQueryStyle);
+
 		if (currentPage == 'cardDetailPage') {
 			this.moveOutPage(this.currentPage(), 'mainPage');
 		}