scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-11-26 17:16:11 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

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

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

37
src/components/registration/steps.jsx
View file

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

56
src/views/teacherregistration/teacherregistration.jsx
View file

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