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,9 +216,15 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
 
 	render: function () {
 		return	React.DOM.div({'className':'registrationForm'},[
+					React.DOM.header({'key':'header'}, 'clipperz'),
+					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,23 +2,45 @@
 	background-color: $main-alternate-color;
 	color: $main-alternate-text-color;
 
-	label {
+	.registrationForm {
-		display: none;
+		@include flexbox;
+		@include flex-direction(column);
+		@include align-items(stretch);
+
+		height: 100%;
+		
+		text-align: center;
+		background-color: $main-alternate-color;
+
+		header {
+			@include flex(1);
+			@include icon-font();
+
+			font-size: 48pt;
+			line-height: 90pt;
+			color: $main-color;
+//			color: $main-alternate-text-color;
 		}
 
-	input {
+		div.form {
-		display: block;
+			@include flex(4);
-		border: 1px solid $solarize-Background-92;
-		@include border-radius(6px);
-		padding: 5px;
-		margin-top: 5px;
-		margin-bottom: 10px;
-		font-size: 100%;
-		box-shadow:inset 0 0 0;
-	}
 
+			form {
+				background: $main-alternate-text-color;
+
+				padding: 20px;
+				margin-bottom: 50px;
+				max-width: 400px;
+
+				margin-left: auto;
+				margin-right: auto;
 
 				.steps {
+					text-align: center;
+					margin-left: auto;
+					margin-right: auto;
+					width: 400px;
+
 					.step {
 						display: none;
 
@@ -31,24 +53,42 @@
 							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-top: 10px;
-					margin-bottom: 10px;
+//								margin-bottom: 10px;
-					clear: both;
+//								clear: both;
 
 								input {
 									display: block;
 									float: left;
-						margin: 5px;
+//									margin: 5px;
+									margin-top: 10px;
 									width: 30px;
 								}
 
@@ -56,14 +96,27 @@
 									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;
@@ -76,6 +129,7 @@
 								}
 							}
 						}	
+
 						.buttons {
 							text-align: center;
 							margin-top: 10px;
@@ -92,20 +146,48 @@
 								font-size: 24px;
 
 								&.back {
-
 									background-color: lightgrey;
 
-//						&.step_-1 {
+									&.step_-1 {
-//							visibility: hidden;
+										visibility: hidden;
-//						}
+									}
 								}
 
 								&.disabled {
 									background-color: #c0c0c0;
 									cursor: default;
 								}
+								
+								&.enabled {
+									background-color: $main-color;
 								}
 							}
 						}
 					}
+				}
+
+
+
+
+			}
+		}
+
+		footer {
+			@include flex(1);
+
+//			color: $main-alternate-text-color;
+			color: $main-text-color;
+			background-color: $main-color;
+			cursor: pointer;
+			font-size: 24pt;
+
+			&:before {
+				content: "< ";
+			};
+
+			a {
+				line-height: 50pt;
+			}
+		}
+	}
 }