[WD-17199] job apply recaptcha

.env

@@ -1,6 +1,10 @@
 PORT=8002
 FLASK_DEBUG=true
 DEVEL=true
+
+# Disables POST/PATCH requests to greenhouse:
+GREENHOUSE_DEBUG=true
+
 SECRET_KEY=local_development_fake_key
 
 # https://canonical.greenhouse.io/configure/dev_center/credentials
@@ -9,3 +13,7 @@ APPLICATION_CRYPTO_SECRET_KEY=super_secret
 
 [email protected]
 SERVICE_ACCOUNT_PRIVATE_KEY=test_private_key
+
+
+# Use this flag to wait for cached pages to expire (does not affect frontend):
+RECAPTCHA_ENABLED="false"

konf/site.yaml

@@ -69,6 +69,23 @@ env:
       key: scheduler_account_private_key
       name: greenhouse-credentials
 
+  - name: RECAPTCHA_ENABLED
+    value: "false"
+
+  - name: RECAPTCHA_SITE_KEY
+    value: "6LcOo40qAAAAAKN6mBrlbr-npUv1zyWSxJknU959"
+
+  - name: RECAPTCHA_PROJECT_ID
+    value: "site-canonical-c-1732626873862"
+
+  - name: RECAPTCHA_API_KEY
+    secretKeyRef:
+      key: api-key
+      name: canonical-com-gcloud
+
+  - name: RECAPTCHA_SCORE_THRESHOLD
+    value: "0.5"
+
 extraHosts:
   - domain: blog.canonical.com
   - domain: design.canonical.com
@@ -154,6 +171,9 @@ staging:
 
         - name: FLASK_DEBUG
           value: True
+
+        - name: GREENHOUSE_DEBUG
+          value: "true"
 
         - name: SERVICE_ACCOUNT_EMAIL
           secretKeyRef:
@@ -181,3 +201,6 @@ demo:
 
     - name: FLASK_DEBUG
       value: True
+
+    - name: GREENHOUSE_DEBUG
+      value: "true"

requirements.txt

@@ -15,4 +15,5 @@ google-api-python-client==2.49.0
 google-auth-httplib2==0.1.0
 google-auth-oauthlib==0.5.1
 pytz==2024.1
-djlint==1.34.1
+djlint==1.34.1
+responses==0.25.3

templates/base_index.html

@@ -42,7 +42,7 @@
               f.parentNode.insertBefore(j, f);
             })(window, document, 'script', 'dataLayer', 'GTM-M5BPGQ6');
           </script>
-
+          
           <title>
 
             {% block title %}Canonical | Trusted open source for enterprises{% endblock %}
@@ -75,6 +75,7 @@
 
           {% set current_path = url_for(request.endpoint, **request.view_args) %}
           {% if "/careers" in current_path %}
+            <script src="https://www.google.com/recaptcha/enterprise.js?render={{ recaptcha_site_key }}"></script>
             <meta name="twitter:image"
                   content="https://assets.ubuntu.com/v1/c17ef7b4-careers-meta-image-resized.png" />
             <meta property="og:image"

templates/careers/job-detail.html

@@ -79,7 +79,7 @@
   <div class="col-6">
     <hr class="p-rule"/>
     <h3 class="p-heading--5">Apply for this role</h3>
-    <form action="{{ request.path }}" method="POST" enctype="multipart/form-data" class="js-roles-list--form" onsubmit="dataLayer.push({
+    <form id="job-apply-form" action="/careers/{{ job.id }}" method="POST" enctype="multipart/form-data" class="js-roles-list--form" onsubmit="dataLayer.push({
           'event': 'GAEvent',
           'eventCategory': 'Form',
           'eventAction': 'job application: {{ job.id }}',
@@ -120,12 +120,25 @@ <h3 class="p-heading--5">Apply for this role</h3>
           {% endfor %}
         {% endif %}
         <hr style="margin: 1rem 0;" />
-        <input type="submit" class="p-button--positive u-no-margin--bottom js-submit-button" name="submit" value="Submit application"/>
+        <input type="submit" class="p-button--positive u-no-margin--bottom js-submit-button" name="submit_button" value="Submit application"/>
+        <input type="hidden" name="recaptcha_token" id="recaptcha_token">
       </fieldset>
     </form>
   </div>
 </div>
 
+<script>
+  const formEl = document.getElementById("job-apply-form");
+  formEl.addEventListener('submit', (event) => {
+    event.preventDefault();
+    grecaptcha.enterprise.ready(async () => {
+      const token = await grecaptcha.enterprise.execute("{{ recaptcha_site_key }}", {action: "JOB_APPLY"});
+      document.getElementById("recaptcha_token").value = token;
+      formEl.submit();
+    });
+  });
+</script>
+
 <script defer>
     document.querySelectorAll('a[href*="legal"]').forEach(function (a) {
       a.setAttribute('target', '_blank');