Improved registration wizard

The desktop view looks fine, but the mobile one still needs lot of love

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

@@ -141,7 +141,7 @@ Clipperz.PM.UI.Components.Pages.LoginPage = React.createClass({
 	},
 
 	render: function() {
-		var registrationLink =	React.DOM.div({'key':'registrationLink', 'className':'registrationLink'}, [
+		var registrationLink =	React.DOM.footer({'key':'registrationLink', 'className':'registrationLink'}, [
 									React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
 								]);
 

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

@@ -28,7 +28,7 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 	getDefaultProps: function () {
 		return {
 			steps: [
-				{name:'CREDENTIALS',			label:'registration',	_label:'credentials',	description:"Choose your credentails"},
+				{name:'CREDENTIALS',			label:'registration',	_label:'credentials',	description:"Choose your credentials"},
 				{name:'PASSWORD_VERIFICATION',	label:'registration',	_label:'verify',		description:"Verify your passphrase"},
 				{name:'TERMS_OF_SERVICE',		label:'registration',	_label:'terms',			description:"Check our terms of service"}
 			],
@@ -89,6 +89,10 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 
 	//=========================================================================
 
+	handleLoginLinkClick: function (anEvent) {
+		MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack');
+	},
+
 	handleBackClick: function (anEvent) {
 		var nextStep;
 		anEvent.preventDefault();
@@ -97,7 +101,7 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 			nextStep = this.props['steps'][this.currentStepIndex() - 1];
 			this.setState({currentStep: nextStep['name']});
 		} else {
-			MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack');
+//			MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack');
 		}
 	},
 
@@ -202,9 +206,9 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 
 	renderStep: function (aStep) {
 		return	React.DOM.div({'className':'step' + ' ' + aStep['name'] + ' ' + this.statusClassForStep(aStep) + ' step_' + this.currentStepIndex()}, [
-					React.DOM.h1(null, aStep['label']),
+//					React.DOM.h1(null, aStep['label']),
 					React.DOM.p(null, aStep['description']),
-					this['render_' + aStep['name']].apply(),
+					React.DOM.div({'className':'stepBody'}, this['render_' + aStep['name']].apply()),
 					React.DOM.div({'className':'stepIndex'}, MochiKit.Base.map(this.renderIndexStep, this.props['steps'])),
 					React.DOM.div({'className':'buttons'}, this.renderButtons())
 				]);
@@ -212,8 +216,14 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 
 	render: function () {
 		return	React.DOM.div({'className':'registrationForm'},[
-					React.DOM.form({onChange: this.handleChange}, [
+					React.DOM.header({'key':'header'}, 'clipperz'),
-						React.DOM.div({'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
+					React.DOM.div({'className':'form'}, [
+						React.DOM.form({onChange: this.handleChange}, [
+							React.DOM.div({'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
+						])
+					]),
+					React.DOM.footer({}, [
+						React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login")
 					])
 				]);
 	},

frontend/delta/scss/style/loginPage.scss

@@ -16,13 +16,12 @@
 			@include icon-font();
 
 			font-size: 48pt;
+			line-height: 90pt;
 			color: $main-alternate-text-color;
 		}
 
 		div.form {
 			@include flex(4);
-			margin-left: auto;
-			margin-right: auto;
 
 			form {
 				position: relative;
@@ -31,6 +30,10 @@
 //				@include border-radius(10px);
 				padding: 20px;
 				margin-bottom: 50px;
+				max-width: 400px;
+
+				margin-left: auto;
+				margin-right: auto;
 /*			
 				&:after {
 					content: "";
@@ -95,7 +98,8 @@
 		}
 
 
-		div.registrationLink {
+//		div.registrationLink {
+		footer {
 			@include flex(1);
 
 			color: $main-alternate-text-color;
@@ -108,6 +112,7 @@
 			};
 
 			a {
+				line-height: 50pt;
 			}
 		}
 	}
@@ -142,7 +147,8 @@
 			}
 		}
 
-		div.registrationLink {
+//		div.registrationLink {
+		footer {
 //			@include flex(2);
 			font-size: 14pt;
 		}

frontend/delta/scss/style/registrationPage.scss

@@ -2,109 +2,191 @@
 	background-color: $main-alternate-color;
 	color: $main-alternate-text-color;
 
-	label {
+	.registrationForm {
-		display: none;
+		@include flexbox;
-	}
+		@include flex-direction(column);
+		@include align-items(stretch);
 
-	input {
+		height: 100%;
-		display: block;
+		
-		border: 1px solid $solarize-Background-92;
+		text-align: center;
-		@include border-radius(6px);
+		background-color: $main-alternate-color;
-		padding: 5px;
-		margin-top: 5px;
-		margin-bottom: 10px;
-		font-size: 100%;
-		box-shadow:inset 0 0 0;
-	}
 
+		header {
+			@include flex(1);
+			@include icon-font();
 
-	.steps {
+			font-size: 48pt;
-		.step {
+			line-height: 90pt;
-			display: none;
+			color: $main-color;
+//			color: $main-alternate-text-color;
+		}
 
-			&.center {
+		div.form {
-				display: block;
+			@include flex(4);
-			}
 
-			h1 {
+			form {
-				color: $solarize-Accent-Blue;
+				background: $main-alternate-text-color;
-				font-size: 24pt;
-				font-weight: 700;
-				margin: 0px;
-			}
-			p {
-				color: $solarize-Content-50;
-				font-size: 14pt;
-				font-weight: 100;
-				margin: 0px;
-			}
 
-			&.TERMS_OF_SERVICE {
+				padding: 20px;
-				.checkboxBlock {
+				margin-bottom: 50px;
-					margin-top: 10px;
+				max-width: 400px;
-					margin-bottom: 10px;
-					clear: both;
 
-					input {
+				margin-left: auto;
-						display: block;
+				margin-right: auto;
-						float: left;
-						margin: 5px;
-						width: 30px;
-					}
 
-					p {
+				.steps {
-						font-size: 12pt;
+					text-align: center;
-						font-weight: 500;
+					margin-left: auto;
-						display: block;
+					margin-right: auto;
+					width: 400px;
 
-						a {
+					.step {
-							color: $solarize-Accent-Red;
+						display: none;
+
+						&.center {
+							display: block;
+						}
+
+						h1 {
+							color: $solarize-Accent-Blue;
+							font-size: 24pt;
+							font-weight: 700;
+							margin: 0px;
+							padding-top: 15px;
+						}
+						p {
+							color: $solarize-Content-50;
+							font-size: 14pt;
+							font-weight: 100;
+							margin: 0px;
+							padding: 5px 0px;
+						}
+
+						label {
+							display: none;
+						}
+
+						input {
+							font-family: "clipperz-font";
+							display: block;
+							padding: 5px;
+		//					margin-top: 5px;
+							margin-bottom: 10px;
+							font-size: 100%;
+							font-size: 24pt;
+							width: 100%;
+						}
+
+						&.TERMS_OF_SERVICE {
+							.checkboxBlock {
+//								margin-top: 10px;
+//								margin-bottom: 10px;
+//								clear: both;
+
+								input {
+									display: block;
+									float: left;
+//									margin: 5px;
+									margin-top: 10px;
+									width: 30px;
+								}
+
+								p {
+									font-size: 12pt;
+									font-weight: 500;
+									display: block;
+									text-align: left;
+									margin-left: 50px;
+									line-height: 1.5em;
+
+									a {
+										color: $solarize-Accent-Red;
+									}
+								}
+							}
+							
+							.stepIndex {
+								margin-top: 10px;
+							}
+						}
+				
+						.stepBody {
+							min-height: 130px;
+						}
+
+						.stepIndex {
+							
+							text-align: center;
+							.stepIndexItem {
+								font-weight: 900;
+								font-size: 28pt;
+								display: inline;
+								color: lightgrey;
+
+								&.center {
+									color: gray;
+								}
+							}
+						}	
+
+						.buttons {
+							text-align: center;
+							margin-top: 10px;
+
+							.button {
+								margin: 10px;
+								text-align: center;
+								vertical-align: middle;
+								display: inline-block;
+								width: 80px;
+
+								font-weight: 900;
+								line-height: 45px;
+								font-size: 24px;
+
+								&.back {
+									background-color: lightgrey;
+
+									&.step_-1 {
+										visibility: hidden;
+									}
+								}
+
+								&.disabled {
+									background-color: #c0c0c0;
+									cursor: default;
+								}
+								
+								&.enabled {
+									background-color: $main-color;
+								}
+							}
 						}
 					}
 				}
+
+
+
+
 			}
-			.stepIndex {
+		}
-				text-align: center;
-				.stepIndexItem {
-					font-weight: 900;
-					font-size: 28pt;
-					display: inline;
-					color: lightgrey;
 
-					&.center {
+		footer {
-						color: gray;
+			@include flex(1);
-					}
-				}
-			}	
-			.buttons {
-				text-align: center;
-				margin-top: 10px;
 
-				.button {
+//			color: $main-alternate-text-color;
-					margin: 10px;
+			color: $main-text-color;
-					text-align: center;
+			background-color: $main-color;
-					vertical-align: middle;
+			cursor: pointer;
-					display: inline-block;
+			font-size: 24pt;
-					width: 80px;
 
-					font-weight: 900;
+			&:before {
-					line-height: 45px;
+				content: "< ";
-					font-size: 24px;
+			};
 
-					&.back {
+			a {
-
+				line-height: 50pt;
-						background-color: lightgrey;
-
-//						&.step_-1 {
-//							visibility: hidden;
-//						}
-					}
-
-					&.disabled {
-						background-color: #c0c0c0;
-						cursor: default;
-					}
-				}
 			}
 		}
 	}