clipperz/password-manager-mirror
1
0
Fork 0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-31 03:17:35 +01:00
Code Issues 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
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;
}
}
}