scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-03 12:27:30 -05:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

Merge pull request #3192 from LLK/hotfix/registration-recaptcha

Browse source 
[Develop] Adjust height when displaying reCAPTCHA challenge
This commit is contained in:
Ray Schamp 2019-07-31 09:03:25 -04:00 committed by GitHub
commit 1da17e4035
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
src/components/registration/registration.jsx
View file

@ -1,4 +1,5 @@
const bindAll = require('lodash.bindall');
const classNames = require('classnames');
const PropTypes = require('prop-types');
const React = require('react');
const connect = require('react-redux').connect;
@ -15,12 +16,14 @@ class Registration extends React.Component {
'handleMessage',
'toggleMessageListener'
]);
this.state = {recaptchaOpen: false};
}
componentDidMount () {
if (this.props.isOpen) this.toggleMessageListener(true);
}
componentDidUpdate (prevProps) {
this.toggleMessageListener(this.props.isOpen && !prevProps.isOpen);
if (this.props.isOpen && !prevProps.isOpen) this.toggleMessageListener(true);
if (!this.props.isOpen && prevProps.isOpen) this.toggleMessageListener(false);
}
componentWillUnmount () {
this.toggleMessageListener(false);
@ -32,6 +35,8 @@ class Registration extends React.Component {
if (e.data === 'registration-relaunch') {
this.registrationIframe.contentWindow.location.reload();
}
if (e.data === 'recaptcha-opened') this.setState({recaptchaOpen: true});
if (e.data === 'recaptcha-closed') this.setState({recaptchaOpen: false});
}
toggleMessageListener (present) {
if (present) {
@ -43,7 +48,7 @@ class Registration extends React.Component {
render () {
return (
<IframeModal
className="mod-registration"
className={classNames('mod-registration', {'recaptcha-open': this.state.recaptchaOpen})}
componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
this.registrationIframe = iframe;
}}

8
src/components/registration/registration.scss
View file

@ -10,6 +10,14 @@
min-height: 27.375rem;
}
.modal-content.recaptcha-open {
min-height: 500px;
}
.modal-content-iframe.recaptcha-open {
min-height: 500px;
}
@media #{$intermediate-and-smaller} {
.modal-content.mod-registration {
width: 100%;