mirror of
https://github.com/scratchfoundation/scratch-www.git
synced 2024-11-22 15:17:53 -05:00
Merge pull request #3774 from picklesrus/captcha-component-ta
Captcha adjustments to teacher registration
This commit is contained in:
commit
7f9ffada5f
2 changed files with 66 additions and 27 deletions
|
@ -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
|
||||
};
|
||||
|
|
|
@ -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}
|
||||
/>
|
||||
|
|
Loading…
Reference in a new issue