Improve registration so the container page can pick what URL it's going to route through to registration.

examples/trivial/index.js

@@ -24,30 +24,52 @@ var React = require("react");
 // maps cannot pass through two stages).
 var MatrixReactSdk = require("../../src/index");
 
+// Here, we do some crude URL analysis to allow
+// deep-linking. We only support registration
+// deep-links in this example.
 function routeUrl(location) {
     if (location.hash.indexOf('#/register') == 0) {
         var hashparts = location.hash.split('?');
-        if (hashparts.length != 2) return;
-        var pairs = hashparts[1].split('&');
         var params = {};
-        for (var i = 0; i < pairs.length; ++i) {
-            var parts = pairs[i].split('=');
-            if (parts.length != 2) continue;
-            params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+        if (hashparts.length == 2) {
+            var pairs = hashparts[1].split('&');
+            for (var i = 0; i < pairs.length; ++i) {
+                var parts = pairs[i].split('=');
+                if (parts.length != 2) continue;
+                params[decodeURIComponent(parts[0])] = decodeURIComponent(parts[1]);
+            }
         }
-        window.matrixChat.resumeRegistration(params);
+        window.matrixChat.showScreen('register', params);
     }
 }
 
+var loaded = false;
+
 window.onload = function() {
     routeUrl(window.location);
+    loaded = true;
 }
 
+// This will be called whenever the SDK changes screens,
+// so a web page can update the URL bar appropriately.
 var onNewScreen = function(screen) {
+    if (!loaded) return;
     window.location.hash = '#/'+screen;
 }
 
+// We use this to work out what URL the SDK should
+// pass through when registering to allow the user to
+// click back to the client having registered.
+// It's up to us to recognise if we're loaded with
+// this URL and tell MatrixClient to resume registration.
+var makeRegistrationUrl = function() {
+    return window.location.protocol + '//' +
+           window.location.host +
+           window.location.pathname +
+           '#/register';
+}
+
 window.matrixChat = React.render(
-    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} />,
+    <MatrixReactSdk.MatrixChat onNewScreen={onNewScreen} registrationUrl={makeRegistrationUrl()} />,
     document.getElementById('matrixchat')
 );

skins/base/views/pages/MatrixChat.js

@@ -57,6 +57,7 @@ module.exports = React.createClass({
                 <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}
                 />
             );
         } else {

src/controllers/molecules/ServerConfig.js

@@ -30,7 +30,7 @@ module.exports = {
         return {
             onHsUrlChanged: function() {},
             onIsUrlChanged: function() {},
-            default_hs_url: 'https://matrix.org/',
+            default_hs_url: 'http://localhost:8008',
             default_is_url: 'https://matrix.org/'
         };
     },

src/controllers/pages/MatrixChat.js

@@ -81,9 +81,23 @@ module.exports = {
                 break;
             case 'start_registration':
                 if (this.state.logged_in) return;
-                this.replaceState({
-                    screen: 'register'
-                });
+                var newState = payload.params || {};
+                newState.screen = 'register';
+                if (
+                    payload.params &&
+                    payload.params.client_secret &&
+                    payload.params.session_id &&
+                    payload.params.hs_url &&
+                    payload.params.is_url &&
+                    payload.params.sid
+                ) {
+                    newState.register_client_secret = payload.params.client_secret;
+                    newState.register_session_id = payload.params.session_id;
+                    newState.register_hs_url = payload.params.hs_url;
+                    newState.register_is_url = payload.params.is_url;
+                    newState.register_id_sid = payload.params.sid;
+                }
+                this.replaceState(newState);
                 this.notifyNewScreen('register');
                 break;
             case 'start_login':
@@ -165,22 +179,18 @@ module.exports = {
         dis.dispatch({action: 'focus_composer'});
     },
 
-    resumeRegistration(params) {
-        if (!params.hs_url) return false;
-        if (!params.is_url) return false;
-        if (!params.client_secret) return false;
-        if (!params.session_id) return false;
-        if (!params.sid) return false;
-        if (this.state.logged_in) return false;
-
-        this.setState({
-            screen: 'register',
-            register_client_secret: params.client_secret,
-            register_session_id: params.session_id,
-            register_hs_url: params.hs_url,
-            register_is_url: params.is_url,
-            register_id_sid: params.sid
-        });
+    showScreen(screen, params) {
+        if (screen == 'register') {
+            dis.dispatch({
+                action: 'start_registration',
+                params: params
+            });
+        } else if (screen == 'login') {
+            dis.dispatch({
+                action: 'start_login',
+                params: params
+            });
+        }
     },
 
     notifyNewScreen: function(screen) {

src/controllers/templates/Register.js

@@ -189,10 +189,8 @@ module.exports = {
                 this.savedParams.client_secret = cli.generateClientSecret();
                 this.savedParams.send_attempt = 1;
 
-                var nextLink = window.location.protocol + '//' +
-                               window.location.host +
-                               window.location.pathname +
-                               '#/register?client_secret=' +
+                var nextLink = this.props.registrationUrl +
+                               '?client_secret=' +
                                encodeURIComponent(this.savedParams.client_secret) +
                                "&hs_url=" +
                                encodeURIComponent(this.state.hs_url) +
@@ -254,9 +252,9 @@ module.exports = {
                 return (
                     <div>
                         <form onSubmit={this.onInitialStageSubmit}>
-                        Email: <input ref="email" /><br />
-                        Username: <input ref="username" /><br />
-                        Password: <input ref="password" /><br />
+                        Email: <input type="text" ref="email" /><br />
+                        Username: <input type="text" ref="username" /><br />
+                        Password: <input type="password" ref="password" /><br />
                         <ServerConfig ref="serverConfig" />
                         <input type="submit" value="Continue" />
                         </form>