1
0
mirror of http://git.whoc.org.uk/git/password-manager.git synced 2025-10-25 17:47:34 +02:00

Improved layout of login and registration pages

This commit is contained in:
Giulio Cesare Solaroli
2015-09-11 18:49:33 +02:00
parent 94661db83d
commit df354f1f69
8 changed files with 705 additions and 792 deletions

View File

@@ -167,28 +167,39 @@ Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
// React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
// ]);
var registrationLink = React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up");
return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [
var registrationLink = React.DOM.div({'className':'other', 'key':'other'}, [
React.DOM.div({'className':'otherContent'}, [
React.DOM.a({'key':'signup', 'className':'registrationLink', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
])
]);
return React.DOM.div({'key':'loginForm', 'className':'loginForm content ' + this.props['style']}, [
Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
React.DOM.header({'key':'header'}, [
React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'),
React.DOM.div({'className':'headerContent'}, [
React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'),
]),
]),
React.DOM.div({'key':'formWrapper', 'className':'form'}, [
this.props.mode == 'PIN' ? this.pinForm() : this.loginForm(),
]),
React.DOM.div({'key':'links', 'className':'links'}, [
React.DOM.ul({}, [
React.DOM.li({'key':'about', 'onClick':this.showUrl('/about/')}, "About"),
React.DOM.li({'key':'terms', 'onClick':this.showUrl('/terms_service/')}, "Terms of service"),
React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
])
React.DOM.div({'key':'formWrapper', 'className':'form body'}, [
React.DOM.div({'className':'bodyContent'}, [
this.props.mode == 'PIN' ? this.pinForm() : this.loginForm(),
]),
]),
this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
React.DOM.footer({'key':'footer'}, [
this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
React.DOM.div({'className':'footerContent'}, [
React.DOM.div({'key':'links', 'className':'links'}, [
React.DOM.ul({}, [
React.DOM.li({'key':'about', 'onClick':this.showUrl('/about/')}, "About"),
React.DOM.li({'key':'terms', 'onClick':this.showUrl('/terms_service/')}, "Terms of service"),
React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
])
]),
React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
])
])
])
// this.props['isNewUserRegistrationAvailable'] ? registrationLink : null

View File

@@ -221,28 +221,39 @@ Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
},
render: function () {
return React.DOM.div({'className':'registrationForm'},[
return React.DOM.div({'className':'registrationForm content'},[
Clipperz.PM.UI.Components.AccountStatus(MochiKit.Base.update(this.props['proxyInfo'])),
React.DOM.header({'key':'header'}, [
React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'),
]),
React.DOM.div({'key':'body', 'className':'form'}, [
React.DOM.form({'key':'registrationForm', 'autoComplete':'off', 'onChange': this.handleChange}, [
React.DOM.div({'key':'steps', 'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
React.DOM.div({'className':'headerContent'}, [
React.DOM.h3({}, 'clipperz'),
React.DOM.h5({}, 'keep it to yourself'),
])
]),
React.DOM.div({'key':'links', 'className':'links'}, [
React.DOM.ul({}, [
React.DOM.li({'key':'about', 'onClick':this.showUrl('/about/')}, "About"),
React.DOM.li({'key':'terms', 'onClick':this.showUrl('/terms_service/')}, "Terms of service"),
React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
React.DOM.div({'key':'body', 'className':'form body'}, [
React.DOM.div({'className':'bodyContent'}, [
React.DOM.form({'key':'registrationForm', 'autoComplete':'off', 'onChange': this.handleChange}, [
React.DOM.div({'key':'steps', 'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
])
])
]),
React.DOM.div({'className':'other', 'key':'other'}, [
React.DOM.div({'className':'otherContent'}, [
React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login"),
])
]),
React.DOM.footer({'key':'footer'}, [
React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login"),
React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
React.DOM.div({'className':'footerContent'}, [
React.DOM.div({'key':'links', 'className':'links'}, [
React.DOM.ul({}, [
React.DOM.li({'key':'about', 'onClick':this.showUrl('/about/')}, "About"),
React.DOM.li({'key':'terms', 'onClick':this.showUrl('/terms_service/')}, "Terms of service"),
React.DOM.li({'key':'privacy', 'onClick':this.showUrl('/privacy_policy/')}, "Privacy"),
])
]),
React.DOM.div({'key':'applicationVersion', 'className':'applicationVersion'}, [
React.DOM.span({'key':'applicationVersionLabel'}, "application version"),
React.DOM.a({'key':'applicationVersionLink', 'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
])
])
])
]);