Feat: Login.gov help modal (#1524)

cal-itp · Jul 13, 2023 · 83c716d · 83c716d
2 parents 6d6229d + fb31425
commit 83c716d
Show file tree

Hide file tree

Showing 12 changed files with 122 additions and 20 deletions.
diff --git a/benefits/core/migrations/0002_data.py b/benefits/core/migrations/0002_data.py
@@ -151,7 +151,7 @@ def load_data(app, *args, **kwargs):
         name=os.environ.get("MST_OAUTH_VERIFIER_NAME", "OAuth claims via Login.gov (MST)"),
         eligibility_type=mst_senior_type,
         auth_provider=senior_auth_provider,
-        selection_label_template="core/includes/selection-label--senior.html",
+        selection_label_template="eligibility/includes/selection-label--senior.html",
         start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
@@ -161,7 +161,7 @@ def load_data(app, *args, **kwargs):
         name=os.environ.get("MST_VETERAN_VERIFIER_NAME", "VA.gov - Veteran (MST)"),
         eligibility_type=mst_veteran_type,
         auth_provider=veteran_auth_provider,
-        selection_label_template="core/includes/selection-label--veteran.html",
+        selection_label_template="eligibility/includes/selection-label--veteran.html",
         start_template="eligibility/start__veteran.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),
@@ -178,7 +178,7 @@ def load_data(app, *args, **kwargs):
         jwe_encryption_alg=os.environ.get("COURTESY_CARD_VERIFIER_JWE_ENCRYPTION_ALG", "RSA-OAEP"),
         jws_signing_alg=os.environ.get("COURTESY_CARD_VERIFIER_JWS_SIGNING_ALG", "RS256"),
         auth_provider=None,
-        selection_label_template="core/includes/selection-label--mst-courtesy-card.html",
+        selection_label_template="eligibility/includes/selection-label--mst-courtesy-card.html",
         start_template="eligibility/start__mst_courtesy_card.html",
         form_title=_("eligibility.pages.confirm.mst_cc.title"),
         form_headline=_("eligibility.pages.confirm.mst_cc.headline"),
@@ -201,7 +201,7 @@ def load_data(app, *args, **kwargs):
         name=os.environ.get("SACRT_OAUTH_VERIFIER_NAME", "OAuth claims via Login.gov (SacRT)"),
         eligibility_type=sacrt_senior_type,
         auth_provider=senior_auth_provider,
-        selection_label_template="core/includes/selection-label--senior.html",
+        selection_label_template="eligibility/includes/selection-label--senior.html",
         start_template="eligibility/start__login_gov.html",
         unverified_title=_("eligibility.pages.unverified.title"),
         unverified_blurb=_("eligibility.pages.unverified.p[0]"),

diff --git a/benefits/core/templates/core/includes/selection-label--senior.html b/benefits/core/templates/core/includes/selection-label--senior.html
diff --git a/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html b/benefits/eligibility/templates/eligibility/includes/modal--senior-help.html
@@ -0,0 +1,17 @@
+{% extends "core/includes/modal.html" %}
+{% load i18n %}
+{% load static %}
+
+{% block modal-content %}
+    <h2 class="px-lg-3">
+        {% translate "eligibility.pages.index.senior.help.headline" %}
+        <img class="icon" width="197" height="26" src="{% static "img/login-gov-logo.svg" %}" alt="{% translate "core.logos.login_gov" context "image alt text" %}" />
+    </h2>
+    <h3 class="pt-4 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.sub_headline[0]" %}</h3>
+    <p class="pt-1 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.p[0]" %}</p>
+
+    <h3 class="pt-4 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.sub_headline[1]" %}</h3>
+    <p class="pt-1 pt-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.p[1]" %}</p>
+
+    <p class="py-4 py-lg-3 px-lg-3">{% translate "eligibility.pages.index.senior.help.p[2]" %}</p>
+{% endblock modal-content %}
diff --git a/...s/selection-label--mst-courtesy-card.html → ...s/selection-label--mst-courtesy-card.html b/...s/selection-label--mst-courtesy-card.html → ...s/selection-label--mst-courtesy-card.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/selection-label.html" %}
+{% extends "eligibility/includes/selection-label.html" %}
 {% load i18n %}
 
 {% block label %}

diff --git a/benefits/eligibility/templates/eligibility/includes/selection-label--senior.html b/benefits/eligibility/templates/eligibility/includes/selection-label--senior.html
@@ -0,0 +1,17 @@
+{% extends "eligibility/includes/selection-label.html" %}
+{% load i18n %}
+
+{% block label %}
+    {% translate "eligibility.pages.index.senior.label" %}
+{% endblock label %}
+
+{% block description %}
+    {% translate "eligibility.pages.index.senior.description" %}
+
+    <!-- Button to trigger modal -->
+    <button id="login" type="button" class="modal-trigger--link" data-bs-toggle="modal" data-bs-target="#login-gov-help">
+        <span class="fallback-text color-logo">Login.gov</span>
+    </button>
+
+    {% include "eligibility/includes/modal--senior-help.html" with id="login-gov-help" %}
+{% endblock description %}
diff --git a/...re/includes/selection-label--veteran.html → ...ty/includes/selection-label--veteran.html b/...re/includes/selection-label--veteran.html → ...ty/includes/selection-label--veteran.html
@@ -1,4 +1,4 @@
-{% extends "core/includes/selection-label.html" %}
+{% extends "eligibility/includes/selection-label.html" %}
 {% load i18n %}
 
 {% block label %}

diff --git a/...plates/core/includes/selection-label.html → ...eligibility/includes/selection-label.html b/...plates/core/includes/selection-label.html → ...eligibility/includes/selection-label.html
diff --git a/benefits/eligibility/templates/eligibility/index.html b/benefits/eligibility/templates/eligibility/index.html
@@ -1,5 +1,9 @@
 {% extends "core/base.html" %}
 
+{% block classes %}
+  {{ block.super | add:" eligibility-index" }}
+{% endblock classes %}
+
 {% block nav-buttons %}
   {% include "core/includes/previous-page-link.html" %}
 {% endblock nav-buttons %}

diff --git a/benefits/locale/en/LC_MESSAGES/django.po b/benefits/locale/en/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-11 16:05+0000\n"
+"POT-Creation-Date: 2023-07-12 05:34+0000\n"
 "Language: English\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -468,6 +468,39 @@ msgstr ""
 "If you do not have an account with any of these services, you will need to "
 "create one. We recommend using Login.gov."
 
+msgid "eligibility.pages.index.senior.help.headline"
+msgstr "Learn more about"
+
+msgctxt "image alt text"
+msgid "core.logos.login_gov"
+msgstr "TODO"
+
+msgid "eligibility.pages.index.senior.help.sub_headline[0]"
+msgstr "What is Login.gov?"
+
+msgid "eligibility.pages.index.senior.help.p[0]"
+msgstr ""
+"Login.gov is a service that offers secure and private online access to "
+"government programs, such as federal benefits, services and applications. "
+"With a Login.gov account, you can sign into multiple government websites "
+"with the same email address and password."
+
+msgid "eligibility.pages.index.senior.help.sub_headline[1]"
+msgstr "Why is Cal-ITP Benefits using Login.gov?"
+
+msgid "eligibility.pages.index.senior.help.p[1]"
+msgstr ""
+"Login.gov uses two-factor authentication, and stronger passwords, that meet "
+"new National Institute of Standards of Technology requirements for secure "
+"validation and verification. By using Login.gov, you’ll get an extra layer "
+"of security to help protect your account against password compromises."
+
+msgid "eligibility.pages.index.senior.help.p[2]"
+msgstr ""
+"For more information on Login.gov, please visit the <a href='https://login."
+"gov/help/' target=\"_blank\" rel=\"noopener noreferrer\">Login.gov Help "
+"Center</a>"
+
 msgid "eligibility.pages.start.sub_headline"
 msgstr "You will need a few items to connect your benefit:"
 

diff --git a/benefits/locale/es/LC_MESSAGES/django.po b/benefits/locale/es/LC_MESSAGES/django.po
@@ -6,7 +6,7 @@
 msgid ""
 msgstr ""
 "Report-Msgid-Bugs-To: https://github.com/cal-itp/benefits/issues \n"
-"POT-Creation-Date: 2023-07-11 16:05+0000\n"
+"POT-Creation-Date: 2023-07-12 05:34+0000\n"
 "Language: Español\n"
 "MIME-Version: 1.0\n"
 "Content-Type: text/plain; charset=UTF-8\n"
@@ -478,6 +478,39 @@ msgstr ""
 "TODO: If you do not have an account with any of these services, you will "
 "need to create one. We recommend using Login.gov."
 
+msgid "eligibility.pages.index.senior.help.headline"
+msgstr "TODO: Learn more about"
+
+msgctxt "image alt text"
+msgid "core.logos.login_gov"
+msgstr "TODO"
+
+msgid "eligibility.pages.index.senior.help.sub_headline[0]"
+msgstr "TODO: What is Login.gov?"
+
+msgid "eligibility.pages.index.senior.help.p[0]"
+msgstr ""
+"TODO: Login.gov is a service that offers secure and private online access to "
+"government programs, such as federal benefits, services and applications. "
+"With a Login.gov account, you can sign into multiple government websites "
+"with the same email address and password."
+
+msgid "eligibility.pages.index.senior.help.sub_headline[1]"
+msgstr "TODO: Why is Cal-ITP Benefits using Login.gov?"
+
+msgid "eligibility.pages.index.senior.help.p[1]"
+msgstr ""
+"TODO: Login.gov uses two-factor authentication, and stronger passwords, that "
+"meet new National Institute of Standards of Technology requirements for "
+"secure validation and verification. By using Login.gov, you’ll get an extra "
+"layer of security to help protect your account against password compromises."
+
+msgid "eligibility.pages.index.senior.help.p[2]"
+msgstr ""
+"TODO: For more information on Login.gov, please visit the <a href='https://"
+"login.gov/help/' target=\"_blank\" rel=\"noopener noreferrer\">Login.gov "
+"Help Center</a>"
+
 msgid "eligibility.pages.start.sub_headline"
 msgstr "Necesitará algunos artículos para conectar su beneficio:"
 

diff --git a/benefits/static/css/styles.css b/benefits/static/css/styles.css
@@ -350,15 +350,19 @@ footer .footer-links li a:visited {
   letter-spacing: 0;
   font-size: var(--login-gov-button-font-size);
   font-family: "Public Sans", Roboto, system-ui;
-  padding: var(--login-gov-button-padding);
   text-decoration: none;
 }
 
+.eligibility-start #login {
+  padding: var(--login-gov-button-padding);
+}
+
 /* Sets the text `Login.gov` as transparent */
 /* With an Login.gov logo image over it */
 /* So screenreaders can read out `Login.gov` */
 #login .fallback-text {
   background-size: contain;
+  background-repeat: no-repeat;
   display: block;
   margin: 8px auto 0 auto;
   position: relative;
@@ -371,6 +375,10 @@ footer .footer-links li a:visited {
   line-height: 1;
 }
 
+.eligibility-index #login .fallback-text {
+  display: inline-block;
+}
+
 #login .fallback-text.white-logo {
   background-image: url("/static/img/login-gov-logo-rev.svg");
 }

diff --git a/tests/pytest/conftest.py b/tests/pytest/conftest.py
@@ -107,7 +107,7 @@ def model_EligibilityVerifier(model_PemData, model_EligibilityType):
         api_auth_key="secret-key",
         eligibility_type=model_EligibilityType,
         public_key=model_PemData,
-        selection_label_template="core/includes/selection-label.html",
+        selection_label_template="eligibility/includes/selection-label.html",
         form_title="Form",
         form_headline="Form",
         form_blurb="Form Blurb",