/*
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();
}
}
}
//=========================================================================
});