From fe15a8948676d1f9d91222369ec3fdd03de2a8af Mon Sep 17 00:00:00 2001
From: Ray Schamp <rschamp@media.mit.edu>
Date: Thu, 18 Jul 2019 16:13:27 -0400
Subject: [PATCH] Adjust height when displaying reCAPTCHA challenge

---
 src/components/registration/registration.jsx  | 9 +++++++--
 src/components/registration/registration.scss | 8 ++++++++
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/components/registration/registration.jsx b/src/components/registration/registration.jsx
index a7a700659..530521f51 100644
--- a/src/components/registration/registration.jsx
+++ b/src/components/registration/registration.jsx
@@ -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;
                 }}
diff --git a/src/components/registration/registration.scss b/src/components/registration/registration.scss
index 3b33ba0a1..3fa637715 100644
--- a/src/components/registration/registration.scss
+++ b/src/components/registration/registration.scss
@@ -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%;