Refactor CaptchaForm to put less logic in signupstages

A bunch of work being done in the Recaptcha signupstage makes more sense in
the CaptchaForm; let's move it.

src/SignupStages.js

@@ -53,66 +53,24 @@ class RecaptchaStage extends Stage {
     constructor(matrixClient, signupInstance) {
         super(RecaptchaStage.TYPE, matrixClient, signupInstance);
         this.defer = q.defer(); // resolved with the captcha response
-        this.publicKey = null; // from the HS
-        this.divId = null; // from the UI component
     }
 
-    // called when the UI component has loaded the recaptcha <div> so we can
+    // called when the recaptcha has been completed.
-    // render to it.
     onReceiveData(data) {
-        if (!data || !data.divId) {
+        if (!data || !data.response) {
             return;
         }
-        this.divId = data.divId;
+        this.defer.resolve({
-        this._attemptRender();
+            auth: {
+                type: 'm.login.recaptcha',
+                response: data.response,
+            }
+        });
     }
 
     complete() {
-        var publicKey;
-        var serverParams = this.signupInstance.getServerData().params;
-        if (serverParams && serverParams["m.login.recaptcha"]) {
-            publicKey = serverParams["m.login.recaptcha"].public_key;
-        }
-        if (!publicKey) {
-            return q.reject({
-                message: "This server has not supplied enough information for Recaptcha " +
-                "authentication",
-                isFatal: true
-            });
-        }
-        this.publicKey = publicKey;
-        this._attemptRender();
         return this.defer.promise;
     }
-
-    _attemptRender() {
-        if (!global.grecaptcha) {
-            console.error("grecaptcha not loaded!");
-            return;
-        }
-        if (!this.publicKey) {
-            console.error("No public key for recaptcha!");
-            return;
-        }
-        if (!this.divId) {
-            console.error("No div ID specified!");
-            return;
-        }
-        console.log("Rendering to %s", this.divId);
-        var self = this;
-        global.grecaptcha.render(this.divId, {
-            sitekey: this.publicKey,
-            callback: function(response) {
-                console.log("Received captcha response");
-                self.defer.resolve({
-                    auth: {
-                        type: 'm.login.recaptcha',
-                        response: response
-                    }
-                });
-            }
-        });
-    }
 }
 RecaptchaStage.TYPE = "m.login.recaptcha";
 

src/components/structures/login/Registration.js

@@ -228,12 +228,9 @@ module.exports = React.createClass({
         });
     },
 
-    onCaptchaLoaded: function(divIdName) {
+    onCaptchaResponse: function(response) {
         this.registerLogic.tellStage("m.login.recaptcha", {
-            divId: divIdName
+            response: response
-        });
-        this.setState({
-            busy: false // requires user input
         });
     },
 
@@ -267,8 +264,15 @@ module.exports = React.createClass({
                 );
                 break;
             case "Register.STEP_m.login.recaptcha":
+                var publicKey;
+                var serverParams = this.registerLogic.getServerData().params;
+                if (serverParams && serverParams["m.login.recaptcha"]) {
+                    publicKey = serverParams["m.login.recaptcha"].public_key;
+                }
                 registerStep = (
-                    <CaptchaForm onCaptchaLoaded={this.onCaptchaLoaded} />
+                    <CaptchaForm sitePublicKey={publicKey}
+                        onCaptchaResponse={this.onCaptchaResponse}
+                    />
                 );
                 break;
             default:

src/components/views/login/CaptchaForm.js

@@ -26,28 +26,34 @@ module.exports = React.createClass({
     displayName: 'CaptchaForm',
 
     propTypes: {
-        onCaptchaLoaded: React.PropTypes.func.isRequired // called with div id name
+        sitePublicKey: React.PropTypes.string,
+
+        // called with the captcha response
+        onCaptchaResponse: React.PropTypes.func,
     },
 
     getDefaultProps: function() {
         return {
-            onCaptchaLoaded: function() {
+            onCaptchaResponse: () => {},
-                console.error("Unhandled onCaptchaLoaded");
+        };
-            }
+    },
+
+    getInitialState: function() {
+        return {
+            errorText: null,
         };
     },
 
     componentDidMount: function() {
         // Just putting a script tag into the returned jsx doesn't work, annoyingly,
         // so we do this instead.
-        var self = this;
+        if (global.grecaptcha) {
-        if (this.refs.recaptchaContainer) {
+            // already loaded
+            this._onCaptchaLoaded();
+        } else {
             console.log("Loading recaptcha script...");
             var scriptTag = document.createElement('script');
-            window.mx_on_recaptcha_loaded = function() {
+            window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
-                console.log("Loaded recaptcha script.");
-                self.props.onCaptchaLoaded(DIV_ID);
-            };
             scriptTag.setAttribute(
                 'src', global.location.protocol+"//www.google.com/recaptcha/api.js?onload=mx_on_recaptcha_loaded&render=explicit"
             );
@@ -55,12 +61,53 @@ module.exports = React.createClass({
         }
     },
 
+    _renderRecaptcha: function(divId) {
+        if (!global.grecaptcha) {
+            console.error("grecaptcha not loaded!");
+            throw new Error("Recaptcha did not load successfully");
+        }
+
+        var publicKey = this.props.sitePublicKey;
+        if (!publicKey) {
+            console.error("No public key for recaptcha!");
+            throw new Error(
+                "This server has not supplied enough information for Recaptcha "
+                    + "authentication");
+        }
+
+        console.log("Rendering to %s", divId);
+        global.grecaptcha.render(divId, {
+            sitekey: publicKey,
+            callback: this.props.onCaptchaResponse,
+        });
+    },
+
+    _onCaptchaLoaded: function() {
+        console.log("Loaded recaptcha script.");
+        try {
+            this._renderRecaptcha(DIV_ID);
+        } catch (e) {
+            this.setState({
+                errorText: e.toString(),
+            })
+        }
+    },
+
     render: function() {
-        // FIXME: Tight coupling with the div id and SignupStages.js
+        let error = null;
+        if (this.state.errorText) {
+            error = (
+                <div className="error">
+                    {this.state.errorText}
+                </div>
+            );
+        }
+
         return (
             <div ref="recaptchaContainer">
                 This Home Server would like to make sure you are not a robot
                 <div id={DIV_ID}></div>
+                {error}
             </div>
         );
     }