clipperz/password-manager
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Improved registration wizard

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

285
frontend/delta/css/clipperz.css
View File

File diff suppressed because one or more lines are too long

4
frontend/delta/css/clipperz.css.map
View File

File diff suppressed because one or more lines are too long

2
frontend/delta/js/Clipperz/PM/UI/Components/Pages/LoginPage.js
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")
]);

22
frontend/delta/js/Clipperz/PM/UI/Components/Pages/RegistrationPage.js
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")
])
]);
},

14
frontend/delta/scss/style/loginPage.scss
View File

@ -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;
}

254
frontend/delta/scss/style/registrationPage.scss
View File

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