Merge pull request #399 from vector-im/kegan/reg-refactor

Refactor registration

src/components/login/Registration.js

@@ -0,0 +1,266 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+
+var sdk = require('matrix-react-sdk');
+var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
+var dis = require('matrix-react-sdk/lib/dispatcher');
+var ServerConfig = require("./ServerConfig");
+var RegistrationForm = require("./RegistrationForm");
+var CaptchaForm = require("matrix-react-sdk/lib/components/login/CaptchaForm");
+var Signup = require("matrix-react-sdk/lib/Signup");
+var MIN_PASSWORD_LENGTH = 6;
+
+module.exports = React.createClass({
+    displayName: 'Registration',
+
+    propTypes: {
+        onLoggedIn: React.PropTypes.func.isRequired,
+        clientSecret: React.PropTypes.string,
+        sessionId: React.PropTypes.string,
+        registrationUrl: React.PropTypes.string,
+        idSid: React.PropTypes.string,
+        hsUrl: React.PropTypes.string,
+        isUrl: React.PropTypes.string,
+        // registration shouldn't know or care how login is done.
+        onLoginClick: React.PropTypes.func.isRequired
+    },
+
+    getInitialState: function() {
+        return {
+            busy: false,
+            errorText: null,
+            enteredHomeserverUrl: this.props.hsUrl,
+            enteredIdentityServerUrl: this.props.isUrl
+        };
+    },
+
+    componentWillMount: function() {
+        this.dispatcherRef = dis.register(this.onAction);
+        // attach this to the instance rather than this.state since it isn't UI
+        this.registerLogic = new Signup.Register(
+            this.props.hsUrl, this.props.isUrl
+        );
+        this.registerLogic.setClientSecret(this.props.clientSecret);
+        this.registerLogic.setSessionId(this.props.sessionId);
+        this.registerLogic.setRegistrationUrl(this.props.registrationUrl);
+        this.registerLogic.setIdSid(this.props.idSid);
+        this.registerLogic.recheckState();
+    },
+
+    componentWillUnmount: function() {
+        dis.unregister(this.dispatcherRef);
+    },
+
+    componentDidMount: function() {
+        // may have already done an HTTP hit (e.g. redirect from an email) so
+        // check for any pending response
+        var promise = this.registerLogic.getPromise();
+        if (promise) {
+            this.onProcessingRegistration(promise);
+        }
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        this.registerLogic.setHomeserverUrl(newHsUrl);
+    },
+
+    onIsUrlChanged: function(newIsUrl) {
+        this.registerLogic.setIdentityServerUrl(newIsUrl);
+    },
+
+    onAction: function(payload) {
+        if (payload.action !== "registration_step_update") {
+            return;
+        }
+        this.forceUpdate(); // registration state has changed.
+    },
+
+    onFormSubmit: function(formVals) {
+        var self = this;
+        this.setState({
+            errorText: "",
+            busy: true
+        });
+        this.onProcessingRegistration(this.registerLogic.register(formVals));
+    },
+
+    // Promise is resolved when the registration process is FULLY COMPLETE
+    onProcessingRegistration: function(promise) {
+        var self = this;
+        promise.done(function(response) {
+            if (!response || !response.access_token) {
+                console.warn(
+                    "FIXME: Register fulfilled without a final response, " +
+                    "did you break the promise chain?"
+                );
+                // no matter, we'll grab it direct
+                response = self.registerLogic.getCredentials();
+            }
+            if (!response || !response.user_id || !response.access_token) {
+                console.error("Final response is missing keys.");
+                self.setState({
+                    errorText: "There was a problem processing the response."
+                });
+                return;
+            }
+            self.props.onLoggedIn({
+                userId: response.user_id,
+                homeserverUrl: self.registerLogic.getHomeserverUrl(),
+                identityServerUrl: self.registerLogic.getIdentityServerUrl(),
+                accessToken: response.access_token
+            });
+            self.setState({
+                busy: false
+            });
+        }, function(err) {
+            if (err.message) {
+                self.setState({
+                    errorText: err.message
+                });
+            }
+            self.setState({
+                busy: false
+            });
+            console.log(err);
+        });
+    },
+
+    onFormValidationFailed: function(errCode) {
+        var errMsg;
+        switch (errCode) {
+            case "RegistrationForm.ERR_PASSWORD_MISSING":
+                errMsg = "Missing password.";
+                break;
+            case "RegistrationForm.ERR_PASSWORD_MISMATCH":
+                errMsg = "Passwords don't match.";
+                break;
+            case "RegistrationForm.ERR_PASSWORD_LENGTH":
+                errMsg = `Password too short (min ${MIN_PASSWORD_LENGTH}).`;
+                break;
+            default:
+                console.error("Unknown error code: %s", errCode);
+                errMsg = "An unknown error occurred.";
+                break;
+        }
+        this.setState({
+            errorText: errMsg
+        });
+    },
+
+    onCaptchaLoaded: function(divIdName) {
+        this.registerLogic.tellStage("m.login.recaptcha", {
+            divId: divIdName
+        });
+        this.setState({
+            busy: false // requires user input
+        });
+    },
+
+    // TODO:
+    // This should really be a different component which MatrixChat then
+    // instantiates rather than having it pollute registration logic. There is
+    // no reason to wedge them together here. This function is currently NOT CALLED.
+    _getPostRegisterJsx: function() {
+        var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
+        var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
+        return (
+            <div className="mx_Login_profile">
+                Set a display name:
+                <ChangeDisplayName />
+                Upload an avatar:
+                <ChangeAvatar
+                    initialAvatarUrl={MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl)} />
+                <button onClick={this.onProfileContinueClicked}>Continue</button>
+            </div>
+        );
+    },
+
+    _getRegisterContentJsx: function() {
+        var currStep = this.registerLogic.getStep();
+        var registerStep;
+        switch (currStep) {
+            case "Register.COMPLETE":
+                return; // this._getPostRegisterJsx();
+            case "Register.START":
+            case "Register.STEP_m.login.dummy":
+                registerStep = (
+                    <RegistrationForm
+                        showEmail={true}
+                        minPasswordLength={MIN_PASSWORD_LENGTH}
+                        onError={this.onFormValidationFailed}
+                        onRegisterClick={this.onFormSubmit} />
+                );
+                break;
+            case "Register.STEP_m.login.email.identity":
+                registerStep = (
+                    <div>
+                        Please check your email to continue registration.
+                    </div>
+                );
+                break;
+            case "Register.STEP_m.login.recaptcha":
+                registerStep = (
+                    <CaptchaForm onCaptchaLoaded={this.onCaptchaLoaded} />
+                );
+                break;
+            default:
+                console.error("Unknown register state: %s", currStep);
+                break;
+        }
+        var busySpinner;
+        if (this.state.busy) {
+            var Spinner = sdk.getComponent("atoms.Spinner");
+            busySpinner = (
+                <Spinner />
+            );
+        }
+        return (
+            <div>
+                <h2>Create an account</h2>
+                {registerStep}
+                <div className="mx_Login_error">{this.state.errorText}</div>
+                {busySpinner}
+                <ServerConfig ref="serverConfig"
+                    withToggleButton={true}
+                    defaultHsUrl={this.state.enteredHomeserverUrl}
+                    defaultIsUrl={this.state.enteredIdentityServerUrl}
+                    onHsUrlChanged={this.onHsUrlChanged}
+                    onIsUrlChanged={this.onIsUrlChanged}
+                    delayTimeMs={1000} />
+                <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                    I already have an account
+                </a>
+            </div>
+        );
+    },
+
+    render: function() {
+        return (
+            <div className="mx_Login">
+                <div className="mx_Login_box">
+                    <div className="mx_Login_logo">
+                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
+                    </div>
+                    {this._getRegisterContentJsx()}
+                </div>
+            </div>
+        );
+    }
+});

src/components/login/RegistrationForm.js

@@ -0,0 +1,126 @@
+/*
+Copyright 2015 OpenMarket Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+'use strict';
+
+var React = require('react');
+var sdk = require('matrix-react-sdk')
+
+/**
+ * A pure UI component which displays a registration form.
+ */
+module.exports = React.createClass({
+    displayName: 'RegistrationForm',
+
+    propTypes: {
+        defaultEmail: React.PropTypes.string,
+        defaultUsername: React.PropTypes.string,
+        showEmail: React.PropTypes.bool,
+        minPasswordLength: React.PropTypes.number,
+        onError: React.PropTypes.func,
+        onRegisterClick: React.PropTypes.func // onRegisterClick(Object) => ?Promise
+    },
+
+    getDefaultProps: function() {
+        return {
+            showEmail: false,
+            minPasswordLength: 6,
+            onError: function(e) {
+                console.error(e);
+            }
+        };
+    },
+
+    getInitialState: function() {
+        return {
+            email: this.props.defaultEmail,
+            username: this.props.defaultUsername,
+            password: null,
+            passwordConfirm: null
+        };
+    },
+
+    onSubmit: function(ev) {
+        ev.preventDefault();
+
+        var pwd1 = this.refs.password.value.trim();
+        var pwd2 = this.refs.passwordConfirm.value.trim()
+
+        var errCode;
+        if (!pwd1 || !pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISSING";
+        }
+        else if (pwd1 !== pwd2) {
+            errCode = "RegistrationForm.ERR_PASSWORD_MISMATCH";
+        }
+        else if (pwd1.length < this.props.minPasswordLength) {
+            errCode = "RegistrationForm.ERR_PASSWORD_LENGTH";
+        }
+        if (errCode) {
+            this.props.onError(errCode);
+            return;
+        }
+
+        var promise = this.props.onRegisterClick({
+            username: this.refs.username.value.trim(),
+            password: pwd1,
+            email: this.refs.email.value.trim()
+        });
+
+        if (promise) {
+            ev.target.disabled = true;
+            promise.finally(function() {
+                ev.target.disabled = false;
+            });
+        }
+    },
+
+    render: function() {
+        var emailSection, registerButton;
+        if (this.props.showEmail) {
+            emailSection = (
+                <input className="mx_Login_field" type="text" ref="email"
+                    autoFocus={true} placeholder="Email address"
+                    defaultValue={this.state.email} />
+            );
+        }
+        if (this.props.onRegisterClick) {
+            registerButton = (
+                <input className="mx_Login_submit" type="submit" value="Register" />
+            );
+        }
+
+        return (
+            <div>
+                <form onSubmit={this.onSubmit}>
+                    {emailSection}
+                    <br />
+                    <input className="mx_Login_field" type="text" ref="username"
+                        placeholder="User name" defaultValue={this.state.username} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="password"
+                        placeholder="Password" defaultValue={this.state.password} />
+                    <br />
+                    <input className="mx_Login_field" type="password" ref="passwordConfirm"
+                        placeholder="Confirm password"
+                        defaultValue={this.state.passwordConfirm} />
+                    <br />
+                    {registerButton}
+                </form>
+            </div>
+        );
+    }
+});

src/controllers/templates/Register.js

@@ -1,58 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var extend = require('matrix-react-sdk/lib/extend');
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg');
-var BaseRegisterController = require('matrix-react-sdk/lib/controllers/templates/Register.js');
-
-var RegisterController = {};
-extend(RegisterController, BaseRegisterController);
-
-RegisterController.onRegistered = function(user_id, access_token) {
-    MatrixClientPeg.replaceUsingAccessToken(
-        this.state.hs_url, this.state.is_url, user_id, access_token
-    );
-
-    this.setState({
-        step: 'profile',
-        busy: true
-    });
-
-    var self = this;
-    var cli = MatrixClientPeg.get();
-    cli.getProfileInfo(cli.credentials.userId).done(function(result) {
-        self.setState({
-            avatarUrl: result.avatar_url,
-            busy: false
-        });
-    },
-    function(err) {
-        console.err(err);
-        self.setState({
-            busy: false
-        });
-    });
-};
-
-RegisterController.onAccountReady = function() {
-    if (this.props.onLoggedIn) {
-        this.props.onLoggedIn();
-    }
-};
-
-module.exports = RegisterController;

src/skins/vector/skindex.js

@@ -85,6 +85,5 @@ skin['organisms.UserSettings'] = require('./views/organisms/UserSettings');
 skin['organisms.ViewSource'] = require('./views/organisms/ViewSource');
 skin['pages.CompatibilityPage'] = require('./views/pages/CompatibilityPage');
 skin['pages.MatrixChat'] = require('./views/pages/MatrixChat');
-skin['templates.Register'] = require('./views/templates/Register');
 
 module.exports = skin;

src/skins/vector/views/pages/MatrixChat.js

@@ -23,7 +23,10 @@ var MatrixChatController = require('matrix-react-sdk/lib/controllers/pages/Matri
 
 var dis = require('matrix-react-sdk/lib/dispatcher');
 var Matrix = require("matrix-js-sdk");
+
 var ContextualMenu = require("../../../../ContextualMenu");
+var Login = require("../../../../components/login/Login");
+var Registration = require("../../../../components/login/Registration");
 var config = require("../../../../../config.json");
 
 module.exports = React.createClass({
@@ -102,12 +105,15 @@ module.exports = React.createClass({
         this.showScreen("register");
     },
 
+    onLoginClick: function() {
+        this.showScreen("login");
+    },
+
     render: function() {
         var LeftPanel = sdk.getComponent('organisms.LeftPanel');
         var RoomView = sdk.getComponent('organisms.RoomView');
         var RightPanel = sdk.getComponent('organisms.RightPanel');
         var UserSettings = sdk.getComponent('organisms.UserSettings');
-        var Register = sdk.getComponent('templates.Register');
         var CreateRoom = sdk.getComponent('organisms.CreateRoom');
         var RoomDirectory = sdk.getComponent('organisms.RoomDirectory');
         var MatrixToolbar = sdk.getComponent('molecules.MatrixToolbar');
@@ -172,14 +178,17 @@ module.exports = React.createClass({
             );
         } else if (this.state.screen == 'register') {
             return (
-                <Register onLoggedIn={this.onLoggedIn} clientSecret={this.state.register_client_secret}
-                    sessionId={this.state.register_session_id} idSid={this.state.register_id_sid}
-                    hsUrl={this.state.register_hs_url} isUrl={this.state.register_is_url}
+                <Registration
+                    clientSecret={this.state.register_client_secret}
+                    sessionId={this.state.register_session_id}
+                    idSid={this.state.register_id_sid}
+                    hsUrl={config.default_hs_url}
+                    isUrl={config.default_is_url}
                     registrationUrl={this.props.registrationUrl}
-                />
+                    onLoggedIn={this.onLoggedIn}
+                    onLoginClick={this.onLoginClick} />
             );
         } else {
-            var Login = require("../../../../components/login/Login");
             return (
                 <Login
                     onLoggedIn={this.onLoggedIn}

src/skins/vector/views/templates/Register.js

@@ -1,216 +0,0 @@
-/*
-Copyright 2015 OpenMarket Ltd
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-    http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-
-'use strict';
-
-var React = require('react');
-
-var sdk = require('matrix-react-sdk')
-var MatrixClientPeg = require('matrix-react-sdk/lib/MatrixClientPeg')
-
-var RegisterController = require('../../../../controllers/templates/Register')
-var ServerConfig = require("../../../../components/login/ServerConfig");
-
-var config = require('../../../../../config.json');
-
-module.exports = React.createClass({
-    displayName: 'Register',
-    mixins: [RegisterController],
-
-    getInitialState: function() {
-        // TODO: factor out all localstorage stuff into its own home.
-        // This is common to Login, Register and MatrixClientPeg
-        var localStorage = window.localStorage;
-        var hs_url, is_url;
-        if (localStorage) {
-            hs_url = localStorage.getItem("mx_hs_url");
-            is_url = localStorage.getItem("mx_is_url");
-        }
-
-        // make sure we have our MatrixClient set up whatever
-        // Useful for debugging only.
-        // MatrixClientPeg.replaceUsingUrls(
-        //     hs_url || config.default_hs_url,
-        //     is_url || config.default_is_url
-        // );
-
-        return {
-            customHsUrl: hs_url || config.default_hs_url,
-            customIsUrl: is_url || config.default_is_url,
-            serverConfigVisible: (hs_url && hs_url !== config.default_hs_url ||
-                                  is_url && is_url !== config.default_is_url)
-        }
-    },
-
-    getRegFormVals: function() {
-        return {
-            email: this.refs.email.value.trim(),
-            username: this.refs.username.value.trim(),
-            password: this.refs.password.value.trim(),
-            confirmPassword: this.refs.confirmPassword.value.trim()
-        };
-    },
-
-    getHsUrl: function() {
-        if (this.state.serverConfigVisible) {
-            return this.state.customHsUrl;
-        } else {
-            return config.default_hs_url;
-        }
-    },
-
-    getIsUrl: function() {
-        if (this.state.serverConfigVisible) {
-            return this.state.customIsUrl;
-        } else {
-            return config.default_is_url;
-        }
-    },
-
-    onServerConfigVisibleChange: function(ev) {
-        this.setState({
-            serverConfigVisible: ev.target.checked
-        });
-    },
-
-    onServerUrlChanged: function(newUrl) {
-        this.setState({
-            customHsUrl: this.refs.serverConfig.getHsUrl(),
-            customIsUrl: this.refs.serverConfig.getIsUrl(),
-        });
-        this.forceUpdate();
-    },
-
-    onProfileContinueClicked: function() {
-        this.onAccountReady();
-    },
-
-    componentForStep: function(step) {
-        switch (step) {
-            case 'initial':
-                var serverConfigStyle = {};
-                serverConfigStyle.display = this.state.serverConfigVisible ? 'block' : 'none';
-                return (
-                    <div>
-                        <form onSubmit={this.onInitialStageSubmit}>
-                        <input className="mx_Login_field" type="text" ref="email" autoFocus={true} placeholder="Email address" defaultValue={this.savedParams.email} /><br />
-                        <input className="mx_Login_field" type="text" ref="username" placeholder="User name" defaultValue={this.savedParams.username} /><br />
-                        <input className="mx_Login_field" type="password" ref="password" placeholder="Password" defaultValue={this.savedParams.password} /><br />
-                        <input className="mx_Login_field" type="password" ref="confirmPassword" placeholder="Confirm password" defaultValue={this.savedParams.confirmPassword} /><br />
-
-                        <input className="mx_Login_checkbox" id="advanced" type="checkbox" checked={this.state.serverConfigVisible} onChange={this.onServerConfigVisibleChange} />
-                        <label htmlFor="advanced">Use custom server options (advanced)</label>
-                        <div style={serverConfigStyle}>
-                        <ServerConfig ref="serverConfig"
-                            defaultHsUrl={this.state.customHsUrl} defaultIsUrl={this.state.customIsUrl}
-                            onHsUrlChanged={this.onServerUrlChanged} onIsUrlChanged={this.onServerUrlChanged} />
-                        </div>
-                        <br />
-                        <input className="mx_Login_submit" type="submit" value="Register" />
-                        </form>
-                    </div>
-                );
-            // XXX: clearly these should be separate organisms
-            case 'stage_m.login.email.identity':
-                return (
-                    <div>
-                        Please check your email to continue registration.
-                    </div>
-                );
-            case 'stage_m.login.recaptcha':
-                return (
-                    <div ref="recaptchaContainer">
-                        This Home Server would like to make sure you are not a robot
-                        <div id="mx_recaptcha"></div>
-                    </div>
-                );
-        }
-    },
-
-    registerContent: function() {
-        if (this.state.busy) {
-            var Loader = sdk.getComponent("atoms.Spinner");            
-            return (
-                <Loader />
-            );
-        } else if (this.state.step == 'profile') {
-            var ChangeDisplayName = sdk.getComponent('molecules.ChangeDisplayName');
-            var ChangeAvatar = sdk.getComponent('molecules.ChangeAvatar');
-            return (
-                <div className="mx_Login_profile">
-                    Set a display name:
-                    <ChangeDisplayName />
-                    Upload an avatar:
-                    <ChangeAvatar initialAvatarUrl={MatrixClientPeg.get().mxcUrlToHttp(this.state.avatarUrl)} />
-                    <button onClick={this.onProfileContinueClicked}>Continue</button>
-                </div>
-            );
-        } else {
-            return (
-                <div>
-                    <h2>Create an account</h2>
-                    {this.componentForStep(this.state.step)}
-                    <div className="mx_Login_error">{this.state.errorText}</div>
-                    <a className="mx_Login_create" onClick={this.showLogin} href="#">I already have an account</a>
-                </div>
-            );
-        }
-    },
-
-    onBadFields: function(bad) {
-        var keys = Object.keys(bad);
-        var strings = [];
-        for (var i = 0; i < keys.length; ++i) {
-            switch (bad[keys[i]]) {
-                case this.FieldErrors.PasswordMismatch:
-                    strings.push("Passwords don't match");
-                    break;
-                case this.FieldErrors.Missing:
-                    strings.push("Missing "+keys[i]);
-                    break;
-                case this.FieldErrors.TooShort:
-                    strings.push(keys[i]+" is too short");
-                    break;
-                case this.FieldErrors.InUse:
-                    strings.push(keys[i]+" is already taken");
-                    break;
-                case this.FieldErrors.Length:
-                    strings.push(keys[i] + " is not long enough.");
-                    break;
-                default:
-                    console.error("Unhandled FieldError: %s", bad[keys[i]]);
-                    break;
-            }
-        }
-        var errtxt = strings.join(', ');
-        this.setState({
-            errorText: errtxt
-        });
-    },
-
-    render: function() {
-        return (
-            <div className="mx_Login">
-                <div className="mx_Login_box">
-                    <div className="mx_Login_logo">
-                        <img src="img/logo.png" width="249" height="78" alt="vector"/>
-                    </div>
-                    {this.registerContent()}
-                </div>
-            </div>
-        );
-    }
-});