241 lines
8.4 KiB
JavaScript
241 lines
8.4 KiB
JavaScript
/*
|
|
|
|
Copyright 2008-2013 Clipperz Srl
|
|
|
|
This file is part of Clipperz, the online password manager.
|
|
For further information about its features and functionalities please
|
|
refer to http://www.clipperz.com.
|
|
|
|
* Clipperz is free software: you can redistribute it and/or modify it
|
|
under the terms of the GNU Affero General Public License as published
|
|
by the Free Software Foundation, either version 3 of the License, or
|
|
(at your option) any later version.
|
|
|
|
* Clipperz is distributed in the hope that it will be useful, but
|
|
WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
|
|
See the GNU Affero General Public License for more details.
|
|
|
|
* You should have received a copy of the GNU Affero General Public
|
|
License along with Clipperz. If not, see http://www.gnu.org/licenses/.
|
|
|
|
*/
|
|
|
|
Clipperz.PM.UI.Components.RegistrationWizard = React.createClass({
|
|
|
|
getDefaultProps: function () {
|
|
return {
|
|
steps: [
|
|
{name:'CREDENTIALS', label:'registration', _label:'credentials', description:"Choose your credentails"},
|
|
{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"}
|
|
],
|
|
disabled: false,
|
|
template: Clipperz.PM.UI.Components.PageTemplate
|
|
}
|
|
},
|
|
|
|
getInitialState: function () {
|
|
return {
|
|
currentStep: this.props['steps'][0]['name'],
|
|
username: '',
|
|
passphrase: '',
|
|
verify_passphrase: '',
|
|
no_password_recovery: false,
|
|
agree_terms_of_service: false
|
|
};
|
|
},
|
|
|
|
'propTypes': {
|
|
// steps: React.PropTypes.array,
|
|
disabled: React.PropTypes.bool,
|
|
template: React.PropTypes.func
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
currentStepIndex: function () {
|
|
return this.indexOfStepNamed(this.state['currentStep']);
|
|
},
|
|
|
|
indexOfStepNamed: function (aStepName) {
|
|
var stepConfiguration;
|
|
var result;
|
|
|
|
stepConfiguration = this.props['steps'].filter(function (aConfig) { return aConfig['name'] == aStepName})[0];
|
|
result = this.props['steps'].indexOf(stepConfiguration);
|
|
return result;
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
statusClassForStep: function (aStep) {
|
|
var currentStepIndex = this.currentStepIndex();
|
|
var stepIndex = this.indexOfStepNamed(aStep['name']);
|
|
var result;
|
|
|
|
if (stepIndex < currentStepIndex) {
|
|
result = 'left';
|
|
} else if (stepIndex == currentStepIndex) {
|
|
result = 'center';
|
|
} else {
|
|
result = 'right';
|
|
}
|
|
|
|
return result;
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
handleBackClick: function (anEvent) {
|
|
var nextStep;
|
|
anEvent.preventDefault();
|
|
|
|
if (this.currentStepIndex() > 0) {
|
|
nextStep = this.props['steps'][this.currentStepIndex() - 1];
|
|
this.setState({currentStep: nextStep['name']});
|
|
} else {
|
|
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'goBack');
|
|
}
|
|
},
|
|
|
|
handleForwardClick: function (anEvent) {
|
|
var nextStep;
|
|
anEvent.preventDefault();
|
|
|
|
if (this.canMoveForward()) {
|
|
|
|
if (this.currentStepIndex() < this.props['steps'].length - 1) {
|
|
nextStep = this.props['steps'][this.currentStepIndex() + 1];
|
|
this.setState({currentStep: nextStep['name']});
|
|
} else {
|
|
MochiKit.Signal.signal(Clipperz.Signal.NotificationCenter, 'registerNewUser', {
|
|
username: this.state['username'],
|
|
passphrase: this.state['passphrase']
|
|
})
|
|
}
|
|
}
|
|
},
|
|
|
|
//-------------------------------------------------------------------------
|
|
|
|
canMoveForward: function () {
|
|
var result;
|
|
var currentStep;
|
|
|
|
result = false;
|
|
currentStep = this.state['currentStep'];
|
|
if (currentStep == 'CREDENTIALS') {
|
|
result = ((this.state['username'] != '') && (this.state['passphrase'] != ''));
|
|
} else if (currentStep == 'PASSWORD_VERIFICATION') {
|
|
result = (this.state['passphrase'] == this.state['verify_passphrase']);
|
|
} else if (currentStep == 'TERMS_OF_SERVICE') {
|
|
result = (this.state['no_password_recovery'] && this.state['agree_terms_of_service']);
|
|
}
|
|
|
|
return result && !this.props['disabled'];
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
handleChange: function (anEvent) {
|
|
var refs = this.refs;
|
|
var refName = MochiKit.Base.filter(function (aRefName) { return refs[aRefName].getDOMNode() == anEvent.target}, MochiKit.Base.keys(this.refs))[0];
|
|
var newState = {};
|
|
|
|
if ((event.target.type == 'checkbox') || (event.target.type == 'radio')) {
|
|
newState[refName] = event.target.checked;
|
|
} else {
|
|
newState[refName] = event.target.value;
|
|
}
|
|
this.setState(newState);
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
renderIndexStep: function (aStep) {
|
|
return React.DOM.div({'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}, '>>')
|
|
];
|
|
},
|
|
|
|
render_CREDENTIALS: function () {
|
|
return React.DOM.div(null,[
|
|
React.DOM.label({'for':'name'}, "username"),
|
|
React.DOM.input({'type':'text', 'name':'name', 'ref':'username', 'placeholder':"username", 'key':'username', 'autoCapitalize':'none'/*, value:this.state.username*/}),
|
|
React.DOM.label({'for':'passphrase'}, "passphrase"),
|
|
React.DOM.input({'type':'password', 'name':'passphrase', 'ref':'passphrase', 'placeholder':"passphrase", 'key':'passphrase'/*, value:this.state.passphrase*/})
|
|
]);
|
|
},
|
|
|
|
render_PASSWORD_VERIFICATION: function () {
|
|
return React.DOM.div(null,[
|
|
React.DOM.label({'for':'verify_passphrase'}, "passphrase"),
|
|
React.DOM.input({'type':'password', 'name':'verify_passphrase', 'ref':'verify_passphrase', 'placeholder':"verify passphrase", 'key':'verify_passphrase'})
|
|
]);
|
|
},
|
|
|
|
render_TERMS_OF_SERVICE: function () {
|
|
return React.DOM.div(null, [
|
|
React.DOM.div({className:'checkboxBlock'}, [
|
|
React.DOM.label({'for':'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.")
|
|
]),
|
|
React.DOM.div({className:'checkboxBlock'}, [
|
|
React.DOM.label({'for':'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.")
|
|
])
|
|
])
|
|
]);
|
|
},
|
|
|
|
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']),
|
|
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())
|
|
]);
|
|
},
|
|
|
|
_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']))
|
|
])
|
|
]);
|
|
},
|
|
|
|
render: function () {
|
|
return new this.props.template({'innerComponent': this._render()});
|
|
},
|
|
|
|
//=========================================================================
|
|
|
|
setInitialFocus: function () {
|
|
this.refs['username'].getDOMNode().focus();
|
|
},
|
|
|
|
componentDidUpdate: function (prevProps, prevState, rootNode) {
|
|
if (prevState['currentStep'] != this.state['currentStep']) {
|
|
if (this.state['currentStep'] == 'CREDENTIALS') {
|
|
this.refs['passphrase'].getDOMNode().select();
|
|
} else if (this.state['currentStep'] == 'PASSWORD_VERIFICATION') {
|
|
this.refs['verify_passphrase'].getDOMNode().select();
|
|
}
|
|
}
|
|
}
|
|
|
|
//=========================================================================
|
|
});
|