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.
This commit is contained in:
Richard van der Hoff
parent
6ffddabaaa
commit
eb36509620
3 changed files with 77 additions and 68 deletions
|
|
@ -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
|
||||
// render to it.
|
||||
// called when the recaptcha has been completed.
|
||||
onReceiveData(data) {
|
||||
if (!data || !data.divId) {
|
||||
if (!data || !data.response) {
|
||||
return;
|
||||
}
|
||||
this.divId = data.divId;
|
||||
this._attemptRender();
|
||||
this.defer.resolve({
|
||||
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";
|
||||
|
||||
|
|
|
|||
|
|
@ -228,12 +228,9 @@ module.exports = React.createClass({
|
|||
});
|
||||
},
|
||||
|
||||
onCaptchaLoaded: function(divIdName) {
|
||||
onCaptchaResponse: function(response) {
|
||||
this.registerLogic.tellStage("m.login.recaptcha", {
|
||||
divId: divIdName
|
||||
});
|
||||
this.setState({
|
||||
busy: false // requires user input
|
||||
response: response
|
||||
});
|
||||
},
|
||||
|
||||
|
|
@ -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:
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
console.error("Unhandled onCaptchaLoaded");
|
||||
}
|
||||
onCaptchaResponse: () => {},
|
||||
};
|
||||
},
|
||||
|
||||
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 (this.refs.recaptchaContainer) {
|
||||
if (global.grecaptcha) {
|
||||
// already loaded
|
||||
this._onCaptchaLoaded();
|
||||
} else {
|
||||
console.log("Loading recaptcha script...");
|
||||
var scriptTag = document.createElement('script');
|
||||
window.mx_on_recaptcha_loaded = function() {
|
||||
console.log("Loaded recaptcha script.");
|
||||
self.props.onCaptchaLoaded(DIV_ID);
|
||||
};
|
||||
window.mx_on_recaptcha_loaded = () => {this._onCaptchaLoaded()};
|
||||
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>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue