reCAPTCHA: Add reCAPTCHA text, hide flag on Elig Index, Elig Confirm (#2586)

Author: machikoyasuda

benefits/core/templates/core/includes/form.html

@@ -3,41 +3,39 @@
 
   {% url form.action_url as form_action %}
 
-  <form id="{{ form.id }}" action="{{ form_action }}" method="{{ form.method | default:"post" | upper }}" role="form">
+  <form id="{{ form.id }}"
+        class="{{ form.classes }}"
+        action="{{ form_action }}"
+        method="{{ form.method | default:"post" | upper }}"
+        role="form">
     {% csrf_token %}
 
-    <div class="row form-container justify-content-center">
-      <div class="{{ form.classes }}">
-        {% for field in form %}
-          <div class="row form-group mb-0">
-            <div class="col-12">
-              {# djlint:off #}
-              {% if field.label %}
-              <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
-              </label>
-              {% endif %}
-              {# djlint:on #}
-
-              {{ field }}
-
-              {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
-            </div>
-          </div>
-        {% endfor %}
-      </div>
+    <div class="form-field-container d-flex flex-column gap-4">
+      {% for field in form %}
+        <div class="form-group mb-0">
+          {# djlint:off #}
+          {% if field.label %}
+          <label for="{{ field.id_for_label }}" class="form-control-label">{{ field.label }}{% if field.field.required %}<span class="required-label text-body">*</span>{% endif %}
+          </label>
+          {% endif %}
+          {# djlint:on #}
+
+          {{ field }}
+
+          {% if field.help_text %}<small class="d-block mt-2 pt-1 form-text text-body">{{ field.help_text }}</small>{% endif %}
+        </div>
+      {% endfor %}
     </div>
 
     {% if form.submit_value %}
-      <div class="row d-flex justify-content-center pt-8">
-        <div class="col-lg-6">
-          <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
-                  data-action="submit"
-                  type="submit"
-                  form="{{ form.id }}">
-            <span class="btn-text">{{ form.submit_value }}</span>
-            <span class="spinner-border spinner-border-sm"></span>
-          </button>
-        </div>
+      <div class="pt-8">
+        <button class="btn btn-lg btn-primary spinner-hidden d-flex justify-content-center align-items-center"
+                data-action="submit"
+                type="submit"
+                form="{{ form.id }}">
+          <span class="btn-text">{{ form.submit_value }}</span>
+          <span class="spinner-border spinner-border-sm"></span>
+        </button>
       </div>
     {% endif %}
 
@@ -94,6 +92,8 @@
       {% endcomment %}
       <input type="hidden" name="{{ request.recaptcha.data_field }}" value="">
 
+      <div class="pt-8">{% include "core/includes/recaptcha-text.html" %}</div>
+
       <script nonce="{{ request.csp_nonce }}">
         function recaptchaSubmit($event) {
           // checks the validity of the form. Return if invalid; HTML5 validation errors should display
@@ -121,6 +121,5 @@
         $("button[type=submit]", "#{{ form.id }}").on("click", recaptchaSubmit);
       </script>
     {% endif %}
-
   </form>
 {% endif %}

benefits/core/templates/core/includes/recaptcha-text.html

@@ -0,0 +1,7 @@
+{% load i18n %}
+
+<p class="form-text text-body mt-0">
+  {% blocktranslate trimmed %}
+    This site is protected by reCAPTCHA and the Google <a href="https://policies.google.com/privacy" target="_blank" rel="noopener noreferrer">Privacy Policy</a> and <a href="https://policies.google.com/terms" target="_blank" rel="noopener noreferrer">Terms of Service</a> apply.
+  {% endblocktranslate %}
+</p>

benefits/eligibility/forms.py

@@ -28,7 +28,6 @@ def __init__(self, agency: models.TransitAgency, *args, **kwargs):
         super().__init__(*args, **kwargs)
         flows = agency.enrollment_flows.filter(supported_enrollment_methods__contains=models.EnrollmentMethods.DIGITAL)
 
-        self.classes = "col-lg-6"
         # second element is not used since we render the whole label using selection_label_template,
         # therefore set to None
         flow_field = self.fields["flow"]
@@ -110,7 +109,6 @@ def __init__(
         self.headline = headline
         self.blurb = blurb
 
-        self.classes = "col-lg-6"
         sub_widget = widgets.FormControlTextInput(placeholder=sub_placeholder)
         if sub_pattern:
             sub_widget.attrs.update({"pattern": sub_pattern})

benefits/eligibility/templates/eligibility/confirm.html

@@ -26,7 +26,11 @@ <h1>{{ form.headline }}</h1>
 {% endblock explanatory-text-wrapper %}
 
 {% block inner-content %}
-  <div class="container">
-    <div class="row">{% include "core/includes/form.html" with form=form %}</div>
+  <div class="row justify-content-center">
+    <div class="col-lg-6">{% include "core/includes/form.html" with form=form %}</div>
   </div>
 {% endblock inner-content %}
+
+{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %}
+{% block call-to-action %}
+{% endblock call-to-action %}

benefits/eligibility/templates/eligibility/index.html

@@ -30,7 +30,9 @@ <h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1
 {% endblock explanatory-text-wrapper %}
 
 {% block inner-content %}
-  {% include "core/includes/form.html" with form=form %}
+  <div class="row justify-content-center">
+    <div class="col-lg-6">{% include "core/includes/form.html" with form=form %}</div>
+  </div>
   <script nonce="{{ request.csp_nonce }}">
     $(".modal").on("click", function(event) {
       if (!(event.target instanceof HTMLAnchorElement)) {
@@ -40,3 +42,7 @@ <h1>{% translate "Choose the transit benefit you would like to enroll in" %}</h1
     });
   </script>
 {% endblock inner-content %}
+
+{% comment %} Override with empty block to prevent rendering empty divs {% endcomment %}
+{% block call-to-action %}
+{% endblock call-to-action %}

benefits/locale/en/LC_MESSAGES/django.po

@@ -320,6 +320,14 @@ msgid ""
 "JavaScript. Please enable JavaScript for this website and"
 msgstr ""
 
+msgid ""
+"This site is protected by reCAPTCHA and the Google <a href=\"https://"
+"policies.google.com/privacy\" target=\"_blank\" rel=\"noopener "
+"noreferrer\">Privacy Policy</a> and <a href=\"https://policies.google.com/"
+"terms\" target=\"_blank\" rel=\"noopener noreferrer\">Terms of Service</a> "
+"apply."
+msgstr ""
+
 msgid "Get a reduced fare on CST public transportation when you tap to ride"
 msgstr ""
 

benefits/locale/es/LC_MESSAGES/django.po

@@ -434,6 +434,19 @@ msgstr ""
 "Para funcionar correctamente, este sitio web requiere un navegador que "
 "admita JavaScript. Por favor, active JavaScript por este sitio web y"
 
+msgid ""
+"This site is protected by reCAPTCHA and the Google <a href=\"https://"
+"policies.google.com/privacy\" target=\"_blank\" rel=\"noopener "
+"noreferrer\">Privacy Policy</a> and <a href=\"https://policies.google.com/"
+"terms\" target=\"_blank\" rel=\"noopener noreferrer\">Terms of Service</a> "
+"apply."
+msgstr ""
+"Este sitio está protegido por reCAPTCHA y se aplican la <a href=\"https://"
+"policies.google.com/privacy\" target=\"_blank\" rel=\"noopener "
+"noreferrer\">Política de privacidad</a> y <a href=\"https://policies.google."
+"com/terms\" target=\"_blank\" rel=\"noopener noreferrer\">las Condiciones de "
+"servicio</a> de Google."
+
 msgid "Get a reduced fare on CST public transportation when you tap to ride"
 msgstr ""
 "Obtenga una tarifa reducida en el transporte público CST cuando toque para "

benefits/static/css/styles.css

@@ -14,6 +14,11 @@ html {
   scroll-padding-top: 101px; /* Header Height (80px) + Skip Nav Height (21px) = 101px */
 }
 
+/* reCAPTCHA: Do not display badge */
+.grecaptcha-badge {
+  display: none;
+}
+
 body {
   font-size: 100%;
   color: var(--text-primary-color);
@@ -53,6 +58,8 @@ li {
   margin: 0;
 }
 
+/* Utility Classes */
+
 @media (min-width: 992px) {
   /* Utility Class: Padding bottom 64px on Desktop */
   /* Pair with pb-4 on Form pages to get 24px on Mobile, 64px on Desktop */
@@ -106,6 +113,11 @@ a:visited:not(.btn) {
   color: var(--selected-color);
 }
 
+:root {
+  --external-link-icon-size: var(--font-size-24px);
+  --external-link-icon-size-small: var(--font-size-18px);
+}
+
 a[target="_blank"]::after {
   content: " ";
   background-color: currentColor;
@@ -119,12 +131,19 @@ a[target="_blank"]::after {
 
   display: inline-block;
   position: relative;
-  width: 24px;
-  height: 24px;
+  width: var(--external-link-icon-size);
+  height: var(--external-link-icon-size);
   margin-left: 2px;
   vertical-align: text-bottom;
 }
 
+.form-text a[target="_blank"]::after {
+  width: var(--external-link-icon-size-small);
+  height: var(--external-link-icon-size-small);
+  mask-size: contain;
+  -webkit-mask-size: contain;
+}
+
 /* Headlines */
 /* All headlines */
 h1,
@@ -513,26 +532,18 @@ footer .footer-links li a.footer-link:visited {
 }
 
 /* Forms: Text Inputs */
-/* Form Container: Must use .form-container parent to use these styles */
-
-:root {
-  --form-input-gap: calc(24rem / 16);
-}
+/* Form Field Container: Must use .form-field-container parent to use these styles */
 
-.form-container .form-group:not(:first-child) {
-  padding-top: var(--form-input-gap);
-}
-
-.form-container .form-control-label,
-.form-container .required-label {
+.form-field-container .form-control-label,
+.form-field-container .required-label {
   font-size: var(--font-size-16px);
   font-weight: var(--medium-font-weight);
   line-height: var(--form-field-text-line-height);
   letter-spacing: calc(var(--font-size-16px) * var(--letter-spacing-5));
   padding-bottom: calc(12rem / 16);
 }
 
-.form-container .form-control {
+.form-field-container .form-control {
   border-width: var(--border-width);
   border-radius: var(--border-radius);
   border-color: var(--primary-color);
@@ -542,8 +553,8 @@ footer .footer-links li a.footer-link:visited {
   /* Input height should be 60px */
 }
 
-.form-container .form-control:focus,
-.form-container .form-control:focus-visible {
+.form-field-container .form-control:focus,
+.form-field-container .form-control:focus-visible {
   outline: 3px solid var(--focus-color) !important;
   outline-offset: 2px !important;
   box-shadow: none !important;
@@ -552,7 +563,7 @@ footer .footer-links li a.footer-link:visited {
 .form-text {
   font-size: var(--font-size-14px);
   line-height: var(--form-field-text-line-height);
-  letter-spacing: var(--letter-spacing-5);
+  letter-spacing: calc(var(--font-size-14px) * var(--letter-spacing-5));
 }
 
 /* Forms: Radio Buttons */