Updated to React 13.1

This commit is contained in:
Giulio Cesare Solaroli
2015-03-23 18:10:09 +01:00
parent 40d20bb3ac
commit 80e149a8a9
33 changed files with 25621 additions and 4183 deletions

View File

@@ -23,7 +23,7 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.CardDetailPage = React.createClass({
Clipperz.PM.UI.Components.Pages.CardDetailPageClass = React.createClass({
propTypes: {
'allTags': React.PropTypes.array,
},
@@ -55,3 +55,5 @@ Clipperz.PM.UI.Components.Pages.CardDetailPage = React.createClass({
return Clipperz.PM.UI.Components.Cards.Detail(this.props);
}
});
Clipperz.PM.UI.Components.Pages.CardDetailPage = React.createFactory(Clipperz.PM.UI.Components.Pages.CardDetailPageClass);

View File

@@ -23,7 +23,7 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.ErrorPage = React.createClass({
Clipperz.PM.UI.Components.Pages.ErrorPageClass = React.createClass({
getDefaultProps: function () {
return {
@@ -46,3 +46,5 @@ Clipperz.PM.UI.Components.Pages.ErrorPage = React.createClass({
// return new this.props.template({'innerComponent': this._render()});
// }
});
Clipperz.PM.UI.Components.Pages.ErrorPage = React.createFactory(Clipperz.PM.UI.Components.Pages.ErrorPageClass);

View File

@@ -24,7 +24,7 @@ refer to http://www.clipperz.com.
"use strict";
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.LoginPage = React.createClass({
Clipperz.PM.UI.Components.Pages.LoginPageClass = React.createClass({
propTypes: {
mode: React.PropTypes.oneOf(['CREDENTIALS','PIN']).isRequired,
@@ -119,12 +119,12 @@ Clipperz.PM.UI.Components.Pages.LoginPage = React.createClass({
},
pinForm: function () {
return React.DOM.form({'className':'loginForm pin', 'onChange':this.handleChange, 'onSubmit':this.handlePINSubmit}, [
React.DOM.div(null,[
return React.DOM.form({'className':'pinForm pin', 'onChange':this.handleChange, 'onSubmit':this.handlePINSubmit}, [
React.DOM.div({'key':'pinFormDiv'},[
React.DOM.label({'for':'pin'}, "pin"),
React.DOM.input({'type':'text', 'name':'pin', 'ref':'pin', placeholder:"PIN", 'key':'pin', 'autocapitalize':'none'})
]),
React.DOM.button({'type':'submit', 'disabled':this.props.disabled, 'className':'button'}, "login")
React.DOM.button({'key':'submitButton', 'type':'submit', 'disabled':this.props.disabled, 'className':'button'}, "login")
]);
},
@@ -146,21 +146,23 @@ Clipperz.PM.UI.Components.Pages.LoginPage = React.createClass({
// React.DOM.a({'key':'signup', 'onClick':this.handleRegistrationLinkClick}, "Sign up")
// ]);
var registrationLink = React.DOM.a({'className':'registrationLink', '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({'className':'loginForm ' + this.props['style']}, [
return React.DOM.div({'key':'loginForm', 'className':'loginForm ' + this.props['style']}, [
React.DOM.header({'key':'header'}, 'clipperz'),
React.DOM.div({'key':'form-wrapper', 'className':'form'}, [
React.DOM.div({'key':'formWrapper', 'className':'form'}, [
this.props.mode == 'PIN' ? this.pinForm() : this.loginForm(),
]),
React.DOM.footer({}, [
React.DOM.footer({'key':'footer'}, [
this.props['isNewUserRegistrationAvailable'] ? registrationLink : null,
React.DOM.div({'className':'applicationVersion'}, [
React.DOM.span({}, "application version"),
React.DOM.a({'href':'https://github.com/clipperz/password-manager/commit/' + Clipperz_version, 'target':'github'}, Clipperz_version)
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
]);
}
});
Clipperz.PM.UI.Components.Pages.LoginPage = React.createFactory(Clipperz.PM.UI.Components.Pages.LoginPageClass);

View File

@@ -24,7 +24,7 @@ refer to http://www.clipperz.com.
'use strict';
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.MainPage = React.createClass({
Clipperz.PM.UI.Components.Pages.MainPageClass = React.createClass({
getDefaultProps: function () {
return {
@@ -60,7 +60,7 @@ Clipperz.PM.UI.Components.Pages.MainPage = React.createClass({
classes[this.props['style']] = true;
//console.log("MAIN PAGE", this.props['showGlobalMask']);
return React.DOM.div({'className':React.addons.classSet(classes)}, [
return React.DOM.div({'key':'mainPage', 'className':Clipperz.PM.UI.Components.classNames(classes)/*Clipperz.PM.UI.Components.classNames(classes)*/}, [
this.props['style'] != 'extra-wide' ? Clipperz.PM.UI.Components.Panels.SelectionPanel(this.props) : null,
Clipperz.PM.UI.Components.Panels.MainPanel(this.props),
Clipperz.PM.UI.Components.Panels.ExtraFeaturesPanel(this.props),
@@ -70,3 +70,5 @@ Clipperz.PM.UI.Components.Pages.MainPage = React.createClass({
//=========================================================================
});
Clipperz.PM.UI.Components.Pages.MainPage = React.createFactory(Clipperz.PM.UI.Components.Pages.MainPageClass);

View File

@@ -23,7 +23,7 @@ refer to http://www.clipperz.com.
Clipperz.Base.module('Clipperz.PM.UI.Components.Pages');
Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
Clipperz.PM.UI.Components.Pages.RegistrationPageClass = React.createClass({
getDefaultProps: function () {
return {
@@ -160,69 +160,69 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
//=========================================================================
renderIndexStep: function (aStep) {
return React.DOM.div({'className':'stepIndexItem ' + this.statusClassForStep(aStep)}, '.');
return React.DOM.div({'key':'indexStep' + aStep['name'], 'className':'stepIndexItem ' + this.statusClassForStep(aStep)}, '.');
},
renderButtons: function () {
return [
React.DOM.a({className:'back button step_' + (this.currentStepIndex() - 1), onClick:this.handleBackClick}, '<<'),
React.DOM.a({className:'forward button step_' + (this.currentStepIndex() + 1) + ' ' + (this.canMoveForward() ? 'enabled' : 'disabled'), onClick:this.handleForwardClick}, '>>')
React.DOM.a({'key':'backButton', 'className':'back button step_' + (this.currentStepIndex() - 1), onClick:this.handleBackClick}, '<<'),
React.DOM.a({'key':'forwardButton', 'className':'forward button step_' + (this.currentStepIndex() + 1) + ' ' + (this.canMoveForward() ? 'enabled' : 'disabled'), onClick:this.handleForwardClick}, '>>')
];
},
render_CREDENTIALS: function () {
return React.DOM.div(null,[
React.DOM.label({'htmlFor':'name'}, "username"),
React.DOM.input({'type':'text', 'name':'name', 'ref':'username', 'placeholder':"username", 'key':'username', 'autoCapitalize':'none'/*, value:this.state.username*/}),
React.DOM.label({'htmlFor':'passphrase'}, "passphrase"),
React.DOM.input({'type':'password', 'name':'passphrase', 'ref':'passphrase', 'placeholder':"passphrase", 'key':'passphrase'/*, value:this.state.passphrase*/})
return React.DOM.div({'key':'credentials'},[
React.DOM.label({'key':'usernameLabel', 'htmlFor':'name'}, "username"),
React.DOM.input({'key':'username', 'type':'text', 'name':'name', 'ref':'username', 'placeholder':"username", 'autoCapitalize':'none'/*, value:this.state.username*/}),
React.DOM.label({'key':'passphraseLabel', 'htmlFor':'passphrase'}, "passphrase"),
React.DOM.input({'key':'passphrase', 'type':'password', 'name':'passphrase', 'ref':'passphrase', 'placeholder':"passphrase"/*, value:this.state.passphrase*/})
]);
},
render_PASSWORD_VERIFICATION: function () {
return React.DOM.div(null,[
React.DOM.label({'htmlFor':'verify_passphrase'}, "passphrase"),
React.DOM.input({'type':'password', 'name':'verify_passphrase', 'ref':'verify_passphrase', 'placeholder':"verify passphrase", 'key':'verify_passphrase'})
return React.DOM.div({'key':'passwordVerification'},[
React.DOM.label({'key':'verifyPassphraseLabel', 'htmlFor':'verify_passphrase'}, "passphrase"),
React.DOM.input({'key':'verifyPassphrase', 'type':'password', 'name':'verify_passphrase', 'ref':'verify_passphrase', 'placeholder':"verify passphrase"})
]);
},
render_TERMS_OF_SERVICE: function () {
return React.DOM.div(null, [
React.DOM.div({className:'checkboxBlock'}, [
React.DOM.label({'htmlFor':'no_password_recovery'}, "I understand that Clipperz will not be able to recover a lost passphrase."),
React.DOM.input({'type':'checkbox', 'name':'no_password_recovery', 'ref':'no_password_recovery', 'key':'no_password_recovery'}),
React.DOM.p(null, "I understand that Clipperz will not be able to recover a lost passphrase.")
return React.DOM.div({'key':'termsOfService'}, [
React.DOM.div({'key':'termsOfService_choice_1', 'className':'checkboxBlock'}, [
React.DOM.label({'key':'termsOfService_label_1', 'htmlFor':'no_password_recovery'}, "I understand that Clipperz will not be able to recover a lost passphrase."),
React.DOM.input({'key':'no_password_recovery', 'type':'checkbox', 'name':'no_password_recovery', 'ref':'no_password_recovery'}),
React.DOM.p({'key':'termsOfService_description_1'}, "I understand that Clipperz will not be able to recover a lost passphrase.")
]),
React.DOM.div({className:'checkboxBlock'}, [
React.DOM.label({'htmlFor':'agree_terms_of_service'}, "I have read and agreed to the Terms of Service."),
React.DOM.input({'type':'checkbox', 'name':'agree_terms_of_service', 'ref':'agree_terms_of_service', 'key':'agree_terms_of_service'}),
React.DOM.p(null, [
"I have read and agreed to the ",
React.DOM.a({href:'https://clipperz.com/terms_service/', target:'_blank'}, "Terms of Service.")
React.DOM.div({'key':'termsOfService_choice_2', 'className':'checkboxBlock'}, [
React.DOM.label({'key':'termsOfService_label_2', 'htmlFor':'agree_terms_of_service'}, "I have read and agreed to the Terms of Service."),
React.DOM.input({'key':'agree_terms_of_service', 'type':'checkbox', 'name':'agree_terms_of_service', 'ref':'agree_terms_of_service'}),
React.DOM.p({'key':'termsOfService_description_2'}, [
React.DOM.span({'key':'termsOfService_description_2_p1'}, "I have read and agreed to the "),
React.DOM.a({'key':'termsOfService_description_2_p2', 'href':'https://clipperz.com/terms_service/', target:'_blank'}, "Terms of Service.")
])
])
]);
},
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.p(null, aStep['description']),
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())
return React.DOM.div({'key':'step' + aStep['name'], 'className':'step' + ' ' + aStep['name'] + ' ' + this.statusClassForStep(aStep) + ' step_' + this.currentStepIndex()}, [
//! React.DOM.h1(null, aStep['label']),
React.DOM.p({'key':'stepDescription'}, aStep['description']),
React.DOM.div({'key':'stepBody', 'className':'stepBody'}, this['render_' + aStep['name']].apply()),
React.DOM.div({'key':'stepIndex', 'className':'stepIndex'}, MochiKit.Base.map(this.renderIndexStep, this.props['steps'])),
React.DOM.div({'key':'stepBottons', 'className':'buttons'}, this.renderButtons())
]);
},
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.div({'key':'body', 'className':'form'}, [
React.DOM.form({'key':'registrationForm', 'onChange': this.handleChange}, [
React.DOM.div({'key':'steps', 'className':'steps'}, MochiKit.Base.map(this.renderStep, this.props['steps']))
])
]),
React.DOM.footer({}, [
React.DOM.footer({'key':'footer'}, [
React.DOM.a({'key':'login', 'onClick':this.handleLoginLinkClick}, "Login")
])
]);
@@ -250,3 +250,5 @@ Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createClass({
//=========================================================================
});
Clipperz.PM.UI.Components.Pages.RegistrationPage = React.createFactory(Clipperz.PM.UI.Components.Pages.RegistrationPageClass);