Merge pull request #3774 from picklesrus/captcha-component-ta

Captcha adjustments to teacher registration
This commit is contained in:
picklesrus 2020-03-31 14:27:12 -04:00 committed by GitHub
commit 7f9ffada5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 66 additions and 27 deletions

View file

@ -12,6 +12,7 @@ const intl = require('../../lib/intl.jsx');
const Avatar = require('../../components/avatar/avatar.jsx');
const Button = require('../../components/forms/button.jsx');
const Captcha = require('../../components/captcha/captcha.jsx');
const Card = require('../../components/card/card.jsx');
const CharCount = require('../../components/forms/charcount.jsx');
const Checkbox = require('../../components/forms/checkbox.jsx');
@ -1198,12 +1199,36 @@ class EmailStep extends React.Component {
constructor (props) {
super(props);
bindAll(this, [
'handleValidSubmit'
'handleCaptchaError',
'handleCaptchaLoad',
'handleCaptchaSolved',
'handleValidSubmit',
'setCaptchaRef'
]);
this.state = {
waiting: false
};
}
handleCaptchaLoad () {
this.setState({
waiting: true
});
}
handleCaptchaSolved (token) {
this.setState({
waiting: false
});
this.formData['g-recaptcha-response'] = token;
this.setState({'g-recaptcha-response': token});
this.props.onNextStep(this.formData);
}
handleCaptchaError () {
this.props.setRegistrationError(
this.props.intl.formatMessage({id: 'registration.errorCaptcha'}));
}
setCaptchaRef (ref) {
this.captchaRef = ref;
}
handleValidSubmit (formData, reset, invalidate) {
this.setState({waiting: true});
api({
@ -1219,7 +1244,8 @@ class EmailStep extends React.Component {
res = res[0];
switch (res.msg) {
case 'valid email':
return this.props.onNextStep(formData);
this.formData = formData;
return this.captchaRef.executeCaptcha();
default:
return invalidate({'user.email': res.msg});
}
@ -1283,6 +1309,12 @@ class EmailStep extends React.Component {
active={this.props.activeStep}
steps={this.props.totalSteps - 1}
/>
<Captcha
ref={this.setCaptchaRef}
onCaptchaError={this.handleCaptchaError}
onCaptchaLoad={this.handleCaptchaLoad}
onCaptchaSolved={this.handleCaptchaSolved}
/>
</Slide>
);
}
@ -1292,6 +1324,7 @@ EmailStep.propTypes = {
activeStep: PropTypes.number,
intl: intlShape,
onNextStep: PropTypes.func,
setRegistrationError: PropTypes.func,
totalSteps: PropTypes.number,
waiting: PropTypes.bool
};

View file

@ -23,7 +23,8 @@ class TeacherRegistration extends React.Component {
super(props);
bindAll(this, [
'handleAdvanceStep',
'handleRegister'
'handleRegister',
'setRegistrationError'
]);
this.state = {
formData: {},
@ -32,6 +33,9 @@ class TeacherRegistration extends React.Component {
waiting: false
};
}
setRegistrationError (err) {
this.setState({registrationError: err});
}
handleAdvanceStep (formData) {
formData = formData || {};
this.setState({
@ -47,34 +51,35 @@ class TeacherRegistration extends React.Component {
method: 'post',
useCsrf: true,
formData: {
username: this.state.formData.user.username,
email: formData.user.email,
password: this.state.formData.user.password,
birth_month: this.state.formData.user.birth.month,
birth_year: this.state.formData.user.birth.year,
gender: (
'username': this.state.formData.user.username,
'email': formData.user.email,
'g-recaptcha-response': formData['g-recaptcha-response'],
'password': this.state.formData.user.password,
'birth_month': this.state.formData.user.birth.month,
'birth_year': this.state.formData.user.birth.year,
'gender': (
this.state.formData.user.gender === 'other' ?
this.state.formData.user.genderOther :
this.state.formData.user.gender
),
country: this.state.formData.user.country,
subscribe: formData.subscribe,
is_robot: this.state.formData.user.isRobot,
first_name: this.state.formData.user.name.first,
last_name: this.state.formData.user.name.last,
phone_number: this.state.formData.phone.national_number,
organization_name: this.state.formData.organization.name,
organization_title: this.state.formData.organization.title,
organization_type: this.state.formData.organization.type,
organization_other: this.state.formData.organization.other,
organization_url: this.state.formData.organization.url,
address_country: this.state.formData.address.country,
address_line1: this.state.formData.address.line1,
address_line2: this.state.formData.address.line2,
address_city: this.state.formData.address.city,
address_state: this.state.formData.address.state,
address_zip: this.state.formData.address.zip,
how_use_scratch: this.state.formData.useScratch
'country': this.state.formData.user.country,
'subscribe': formData.subscribe,
'is_robot': this.state.formData.user.isRobot,
'first_name': this.state.formData.user.name.first,
'last_name': this.state.formData.user.name.last,
'phone_number': this.state.formData.phone.national_number,
'organization_name': this.state.formData.organization.name,
'organization_title': this.state.formData.organization.title,
'organization_type': this.state.formData.organization.type,
'organization_other': this.state.formData.organization.other,
'organization_url': this.state.formData.organization.url,
'address_country': this.state.formData.address.country,
'address_line1': this.state.formData.address.line1,
'address_line2': this.state.formData.address.line2,
'address_city': this.state.formData.address.city,
'address_state': this.state.formData.address.state,
'address_zip': this.state.formData.address.zip,
'how_use_scratch': this.state.formData.useScratch
}
}, (err, body, res) => {
this.setState({waiting: false});
@ -133,6 +138,7 @@ class TeacherRegistration extends React.Component {
onNextStep={this.handleAdvanceStep}
/>
<Steps.EmailStep
setRegistrationError={this.setRegistrationError}
waiting={this.state.waiting}
onNextStep={this.handleRegister}
/>