+
(
);
@@ -75,7 +79,8 @@ FormikCheckbox.propTypes = {
id: PropTypes.string,
label: PropTypes.string,
labelClassName: PropTypes.string,
- name: PropTypes.string
+ name: PropTypes.string,
+ outerClassName: PropTypes.string
};
module.exports = FormikCheckbox;
diff --git a/src/components/join-flow/country-step.jsx b/src/components/join-flow/country-step.jsx
index 86eee7497..a99f10506 100644
--- a/src/components/join-flow/country-step.jsx
+++ b/src/components/join-flow/country-step.jsx
@@ -8,6 +8,7 @@ const {injectIntl, intlShape} = require('react-intl');
const countryData = require('../../lib/country-data');
const FormikSelect = require('../../components/formik-forms/formik-select.jsx');
const JoinFlowStep = require('./join-flow-step.jsx');
+const FormikCheckbox = require('../../components/formik-forms/formik-checkbox.jsx');
require('./join-flow-steps.scss');
@@ -94,6 +95,13 @@ class CountryStep extends React.Component {
validate={this.validateSelect}
validationClassName="validation-full-width-input"
/>
+ {/* note that this is a hidden checkbox the user will never see */}
+
);
diff --git a/src/components/join-flow/email-step.jsx b/src/components/join-flow/email-step.jsx
index 98836f1e7..3da7ef5f1 100644
--- a/src/components/join-flow/email-step.jsx
+++ b/src/components/join-flow/email-step.jsx
@@ -4,9 +4,9 @@ const React = require('react');
const PropTypes = require('prop-types');
import {Formik} from 'formik';
const {injectIntl, intlShape} = require('react-intl');
-const emailValidator = require('email-validator');
const FormattedMessage = require('react-intl').FormattedMessage;
+const validate = require('../../lib/validate');
const JoinFlowStep = require('./join-flow-step.jsx');
const FormikInput = require('../../components/formik-forms/formik-input.jsx');
const FormikCheckbox = require('../../components/formik-forms/formik-checkbox.jsx');
@@ -20,30 +20,91 @@ class EmailStep extends React.Component {
'handleSetEmailRef',
'handleValidSubmit',
'validateEmail',
- 'validateForm'
+ 'validateForm',
+ 'setCaptchaRef',
+ 'captchaSolved',
+ 'onCaptchaLoad',
+ 'onCaptchaError'
]);
+ this.state = {
+ captchaIsLoading: true
+ };
}
+
componentDidMount () {
// automatically start with focus on username field
if (this.emailInput) this.emailInput.focus();
+
+ // If grecaptcha doesn't exist on window, we havent loaded the captcha js yet. Load it.
+ if (!window.grecaptcha) {
+ // ReCaptcha calls a callback when the grecatpcha object is usable. That callback
+ // needs to be global so set it on the window.
+ window.grecaptchaOnLoad = this.onCaptchaLoad;
+ // Load Google ReCaptcha script.
+ const script = document.createElement('script');
+ script.async = true;
+ script.onerror = this.onCaptchaError;
+ script.src = `https://www.recaptcha.net/recaptcha/api.js?onload=grecaptchaOnLoad&render=explicit&hl=${window._locale}`;
+ document.body.appendChild(script);
+ }
+ }
+ componentWillUnmount () {
+ window.grecaptchaOnLoad = null;
}
handleSetEmailRef (emailInputRef) {
this.emailInput = emailInputRef;
}
+ onCaptchaError () {
+ // TODO send user to error step once we have one.
+ }
+ onCaptchaLoad () {
+ this.setState({captchaIsLoading: false});
+ this.grecaptcha = window.grecaptcha;
+ if (!this.grecaptcha) {
+ // According to the reCaptcha documentation, this callback shouldn't get
+ // called unless window.grecaptcha exists. This is just here to be extra defensive.
+ // TODO: Put up the error screen when we have one.
+ }
+ // TODO: Add in error callback for render once we have an error screen.
+ this.widgetId = this.grecaptcha.render(this.captchaRef,
+ {
+ callback: this.captchaSolved,
+ sitekey: process.env.RECAPTCHA_SITE_KEY
+ },
+ true);
+ }
validateEmail (email) {
if (!email) return this.props.intl.formatMessage({id: 'general.required'});
- const isValidLocally = emailValidator.validate(email);
- if (isValidLocally) {
- return null; // TODO: validate email address remotely
- }
- return this.props.intl.formatMessage({id: 'registration.validationEmailInvalid'});
+ const localResult = validate.validateEmailLocally(email);
+ if (!localResult.valid) return this.props.intl.formatMessage({id: localResult.errMsgId});
+ return validate.validateEmailRemotely(email).then(
+ remoteResult => {
+ if (remoteResult.valid === true) {
+ return null;
+ }
+ return this.props.intl.formatMessage({id: remoteResult.errMsgId});
+ }
+ );
}
validateForm () {
return {};
}
handleValidSubmit (formData, formikBag) {
- formikBag.setSubmitting(false);
- this.props.onNextStep(formData);
+ this.formData = formData;
+ this.formikBag = formikBag;
+ // Change set submitting to false so that if the user clicks out of
+ // the captcha, the button is clickable again (instead of a disabled button with a spinner).
+ this.formikBag.setSubmitting(false);
+ this.grecaptcha.execute(this.widgetId);
+ }
+ captchaSolved (token) {
+ // Now thatcaptcha is done, we can tell Formik we're submitting.
+ this.formikBag.setSubmitting(true);
+ this.formData['g-recaptcha-response'] = token;
+ this.props.onNextStep(this.formData);
+ }
+ setCaptchaRef (ref) {
+ this.captchaRef = ref;
}
render () {
return (
@@ -63,6 +124,8 @@ class EmailStep extends React.Component {
handleSubmit,
isSubmitting,
setFieldError,
+ setFieldTouched,
+ setFieldValue,
validateField
} = props;
return (
@@ -88,7 +151,7 @@ class EmailStep extends React.Component {
innerClassName="join-flow-inner-email-step"
nextButton={this.props.intl.formatMessage({id: 'registration.createAccount'})}
title={this.props.intl.formatMessage({id: 'registration.emailStepTitle'})}
- waiting={isSubmitting}
+ waiting={this.props.waiting || isSubmitting || this.state.captchaIsLoading}
onSubmit={handleSubmit}
>
validateField('email')}
- onFocus={() => setFieldError('email', null)}
+ onChange={e => {
+ setFieldValue('email', e.target.value);
+ setFieldTouched('email');
+ setFieldError('email', null);
+ }}
/* eslint-enable react/jsx-no-bind */
onSetRef={this.handleSetEmailRef}
/>
@@ -116,6 +183,13 @@ class EmailStep extends React.Component {
name="subscribe"
/>