1 files changed, 240 insertions, 0 deletions

diff --git a/frontend/delta/js/Clipperz/PM/UI/Components/RegistrationWizard.js b/frontend/delta/js/Clipperz/PM/UI/Components/RegistrationWizard.js
new file mode 100644
index 0000000..051dcc5
--- a/dev/null
+++ b/frontend/delta/js/Clipperz/PM/UI/Components/RegistrationWizard.js
@@ -0,0 +1,240 @@
+/*
+
+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;
+                        varresult;
+
+                stepConfiguration = this.props['steps'].filter(function (aConfig) { return aConfig['name'] == aStepName})[0];
+                result = this.props['steps'].indexOf(stepConfiguration);
+                return result;
+        },
+
+        //=========================================================================
+
+        statusClassForStep: function (aStep) {
+                        varcurrentStepIndex = this.currentStepIndex();
+                var stepIndex = this.indexOfStepNamed(aStep['name']);
+                        varresult;
+
+                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) {
+                        varrefs = 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) {
+                        returnReact.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 () {
+                        returnReact.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 () {
+                        returnReact.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 () {
+                        returnReact.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) {
+                        returnReact.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 () {
+                        returnReact.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 () {
+                        returnnew 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();
+                        }
+                }
+        }
+
+        //=========================================================================
+});