Add RegistrationForm UI component and new Registration wire component

Hook it up to MatrixChat instead of the existing logic (this breaks reg). WIP.

src/components/login/Registration.js

@@ -0,0 +1,147 @@
+/*
+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 ServerConfig = require("./ServerConfig");
+var RegistrationForm = require("./RegistrationForm");
+
+module.exports = React.createClass({
+    displayName: 'Registration',
+
+    propTypes: {
+        onLoggedIn: React.PropTypes.func.isRequired,
+        registerLogic: React.PropTypes.any.isRequired,
+        // 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.registerLogic.getHomeserverUrl(),
+            enteredIdentityServerUrl: this.props.registerLogic.getIdentityServerUrl()
+        };
+    },
+
+    componentWillMount: function() {
+
+    },
+
+    onHsUrlChanged: function(newHsUrl) {
+        this.props.registerLogic.setHomeserverUrl(newHsUrl);
+        this.forceUpdate(); // registration state may have changed.
+    },
+
+    onIsUrlChanged: function(newIsUrl) {
+        this.props.registerLogic.setIdentityServerUrl(newIsUrl);
+        this.forceUpdate(); // registration state may have changed.
+    },
+
+    onFormSubmit: function(formVals) {
+        console.log("Form vals: %s", formVals);
+    },
+
+    onFormValidationFailed: function(errCode) {
+        console.error("Ruh roh: %s", errCode);
+    },
+
+    _getRegisterContentJsx: function() {
+        var currState = this.props.registerLogic.getState();
+        var registerStep;
+        switch (currState) {
+            case "Register.COMPLETE":
+                return this._getPostRegisterJsx();
+            case "Register.START":
+                registerStep = (
+                    <RegistrationForm
+                        showEmail={true}
+                        minPasswordLength={8}
+                        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 = (
+                    <div ref="recaptchaContainer">
+                        This Home Server would like to make sure you are not a robot
+                        <div id="mx_recaptcha"></div>
+                    </div>
+                );
+                break;
+            default:
+                console.error("Unknown register state: %s", currState);
+                break;
+        }
+        return (
+            <div>
+                <h2>Create an account</h2>
+                {registerStep}
+                <ServerConfig ref="serverConfig"
+                    withToggleButton={true}
+                    defaultHsUrl={this.state.enteredHomeserverUrl}
+                    defaultIsUrl={this.state.enteredIdentityServerUrl}
+                    onHsUrlChanged={this.onHsUrlChanged}
+                    onIsUrlChanged={this.onIsUrlChanged}
+                    delayTimeMs={1000} />
+                <div className="mx_Login_error">{this.state.errorText}</div>
+                <a className="mx_Login_create" onClick={this.props.onLoginClick} href="#">
+                    I already have an account
+                </a>
+            </div>
+        );
+    },
+
+    _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>
+        );
+    },
+
+    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/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 ContextualMenu = require("../../../../ContextualMenu")
+var Login = require("../../../../components/login/Login");
+var Registration = require("../../../../components/login/Registration");
+var Signup = require("matrix-react-sdk/lib/Signup");
 
 module.exports = React.createClass({
     displayName: 'MatrixChat',
@@ -93,12 +96,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');
@@ -159,15 +165,23 @@ module.exports = React.createClass({
                 <Spinner />
             );
         } 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}
                     registrationUrl={this.props.registrationUrl}
                 />
+            ); */
+            return (
+                <Registration
+                    onLoggedIn={this.onLoggedIn}
+                    onLoginClick={this.onLoginClick}
+                    registerLogic={new Signup.Register(
+                        "foo", "bar"
+                    )} />
             );
         } else {
-            var Login = require("../../../../components/login/Login");
             return (
                 <Login onLoggedIn={this.onLoggedIn} onRegisterClick={this.onRegisterClick} />
             );