Merge pull request #1808 from RTICWDT/staging

Bugfix: IE11 ReCaptcha
RTICWDT · Jun 25, 2020 · c7fd600 · c7fd600
2 parents 91de53a + 0a380d8
commit c7fd600
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 36 deletions.
diff --git a/Gemfile.lock b/Gemfile.lock
@@ -44,7 +44,7 @@ GEM
     pathutil (0.16.2)
       forwardable-extended (~> 2.6)
     public_suffix (4.0.1)
-    rack (2.2.2)
+    rack (2.2.3)
     rack-ssl-enforcer (0.2.9)
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)

diff --git a/_config.yml b/_config.yml
@@ -13,7 +13,7 @@ baseurl:
 url: https://collegescorecard.ed.gov
 
 # app version number
-version: v2.3.0
+version: v2.3.1
 
 # Build settings
 markdown: kramdown
@@ -56,7 +56,8 @@ analytics-string: ''
 downloads:
   data-dictionary: CollegeScorecardDataDictionary.xlsx
   data-base_url: https://ed-public-download.app.cloud.gov/downloads
-#  data-base_url: http://ed-public-download-05222020.app.cloud.gov/downloads
+  # data-base_url: http://ed-public-download-05222020.app.cloud.gov/downloads
+
 
 # specify paths to exclude from copying to _site
 # Note: files and directories with the '_' prefix are excluded

diff --git a/data/documentation.html b/data/documentation.html
@@ -3,7 +3,6 @@
 layout: default
 permalink: /data/documentation/
 ---
-<!-- <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script> -->
 
 <div id="app">
     <!-- Pass other variables as props-->

diff --git a/js/src/vue/pages/data_documentation.vue b/js/src/vue/pages/data_documentation.vue
@@ -117,13 +117,13 @@
               >Download the Data Dictionary</v-btn>
 
               <h3 id="api-key-signup">Register for an API key</h3>
-              <!-- <p>
+              <p>
                 To use the College Scorecard API you must have an API key. 
                 An API key is a unique identifier that is used to authenticate data requests associated with your project.
-              </p> -->
+              </p>
 
-              <!-- <div> -->
-                <!-- <p>
+              <div>
+                <p>
                   First, please complete the security challenge below.
                   <v-scroll-x-transition>
                     <v-icon
@@ -133,30 +133,30 @@
                       mdi-check
                     </v-icon>
                   </v-scroll-x-transition>
-                </p> -->
+                </p>
 
-                <!-- <p class="d-none d-sm-block">
+                <p class="d-none d-sm-block">
                   <vue-recaptcha
                     v-show="showCaptcha"
                     :sitekey="recaptchaSiteKey"
                     @verify="onCaptchaVerify">
                   </vue-recaptcha>
-                </p> -->
+                </p>
 
                 <!-- Compact on XS -->
-                <!-- <p class="d-block d-sm-none">
+                <p class="d-block d-sm-none">
                   <vue-recaptcha
                     v-show="showCaptcha"
                     :sitekey="recaptchaSiteKey"
                     @verify="onCaptchaVerify"
                     size="compact">
                   </vue-recaptcha>
-                </p> -->
+                </p>
 
-              <!-- </div> -->
+              </div>
 
               <div>
-                <!-- <v-fade-transition>
+                <v-fade-transition>
                   <p v-show="!showCaptcha">
                     Second, use the form below to complete the registration process and receive your API key.
                     <v-scroll-x-transition>
@@ -168,21 +168,16 @@
                       </v-icon>
                     </v-scroll-x-transition>
                   </p>
-                </v-fade-transition> -->
+                </v-fade-transition>
 
-                <!-- <v-fade-transition> -->
+                <v-fade-transition>
                   <!-- Form Holder -->
-                  <!-- <div v-show="!showCaptcha"
+                  <div v-show="!showCaptcha"
                     id="apidatagov_signup" 
                     class="mb-2"
                     >
-                  </div> -->
-                <!-- </v-fade-transition> -->
-
-                <div id="apidatagov_signup" 
-                    class="mb-2">
-                </div>
-
+                  </div>
+                </v-fade-transition>
               </div>
 
               <p class="data-docs">
@@ -205,19 +200,18 @@
 <script>
 import DataNavigation from 'components/vue/DataNavigation.vue';
 import AnalyticsEvents from "vue/mixins/AnalyticsEvents.js";
-// import VueRecaptcha from 'vue-recaptcha';
+import VueRecaptcha from 'vue-recaptcha';
 
 export default {
   mixins: [AnalyticsEvents],
   components: {
     'data-navigation': DataNavigation,
-    // VueRecaptcha
+    VueRecaptcha
   },
   props: ["baseUrl", "dataBase_url", "dataDictionary","recaptchaSiteKey"],
   data(){
     return{
-      // showCaptcha: true,
-      showCaptcha: false,
+      showCaptcha: true,
       formSubmitted: false
     }
   },
@@ -243,14 +237,13 @@ export default {
       });
     }
   },
-  // TODO - Remove if testing is no longer needed
   mounted(){
-    // setTimeout(()=>{
-    //   this.showCaptcha = false;
-    //   this.loadEmbeddedForm(this.addFormSubmitListener);
-    //   }, 2000)
-    
-    this.loadEmbeddedForm();
+    // Ran into an issue with script timing on IE11, created errors. Adding a script here fixes the problem
+    let recaptchaScript = document.createElement('script')
+    recaptchaScript.setAttribute('src', 'https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit')
+    recaptchaScript.async = true;
+    recaptchaScript.defer = true;
+    document.head.appendChild(recaptchaScript);
   }
 };
 </script>