1
0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-29 18:37:35 +01:00

Improved registration wizard

The desktop view looks fine, but the mobile one still needs lot of love
This commit is contained in:
Giulio Cesare Solaroli
2015-02-26 16:55:45 +01:00
parent 04a48ea609
commit 29ff09441b
6 changed files with 373 additions and 208 deletions

View File

@@ -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")
]);

View File

@@ -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.div({'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
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")
])
]);
},