scratchfoundation/scratch-www
1
0
Fork 0
mirror of https://github.com/scratchfoundation/scratch-www.git synced 2024-12-12 08:41:31 -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 bindAll = require('lodash.bindall');
const classNames = require('classnames');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const React = require('react'); const React = require('react');
const connect = require('react-redux').connect; const connect = require('react-redux').connect;
@ -15,12 +16,14 @@ class Registration extends React.Component {
'handleMessage', 'handleMessage',
'toggleMessageListener' 'toggleMessageListener'
]); ]);
this.state = {recaptchaOpen: false};
} }
componentDidMount () { componentDidMount () {
if (this.props.isOpen) this.toggleMessageListener(true); if (this.props.isOpen) this.toggleMessageListener(true);
} }
componentDidUpdate (prevProps) { 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 () { componentWillUnmount () {
this.toggleMessageListener(false); this.toggleMessageListener(false);
@ -32,6 +35,8 @@ class Registration extends React.Component {
if (e.data === 'registration-relaunch') { if (e.data === 'registration-relaunch') {
this.registrationIframe.contentWindow.location.reload(); 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) { toggleMessageListener (present) {
if (present) { if (present) {
@ -43,7 +48,7 @@ class Registration extends React.Component {
render () { render () {
return ( return (
<IframeModal <IframeModal
className="mod-registration" className={classNames('mod-registration', {'recaptcha-open': this.state.recaptchaOpen})}
componentRef={iframe => { // eslint-disable-line react/jsx-no-bind componentRef={iframe => { // eslint-disable-line react/jsx-no-bind
this.registrationIframe = iframe; this.registrationIframe = iframe;
}} }}

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

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