Feat: Login.gov help modal

[angela-tran]

Closes #1473

[angela-tran]

There's some inconsistent behavior with closing the modal and what happens to the radio button.

See this GIF where I close the modal by:

• clicking the X
• pressing the Esc key
• clicking off the modal

In the last case, the radio button gets selected.

I'm really close to implementing a fix to make it all consistent (as in, do not select the radio button), but I can't get the CSP nonce value into the script tag 😞

In selection-label--senior.html:

    <script nonce="{{ request.csp_nonce }}">
        const modal = document.getElementById("login-gov-help");
        modal.addEventListener('click', function (event) {
            event.preventDefault();
          });
    </script>

the nonce is not there.

If I put that code into base.html it works, but that's not an appropriate place for it.

Maybe we just call this out of scope for now.

[angela-tran]

Renamed the modal file

[thekaveman]

I'm really close to implementing a fix to make it all consistent (as in, do not select the radio button), but I can't get the CSP nonce value into the script tag 😞

Hmm this is a bummer 🤔

I wonder if this is because you're inside an include and request.csp_nonce isn't available there?

Have you tried the context_processor version of {{ CSP_NONCE }}?

[angela-tran]

Have you tried the context_processor version of {{ CSP_NONCE }}?

Yeah, it's the same situation (not available in the include).

[thekaveman]

An included template is rendered within the context of the template that includes it.

From https://docs.djangoproject.com/en/4.2/ref/templates/builtins/#include

Lame, seems like it should work??

EDIT: it does work in other includes, like analytics.html ?

[angela-tran]

Hmm, it might have to do with this being a form widget template.

When rendering the form (which is an include), we still have the context:

We lose the context once we're rendering the widget.

[angela-tran]

Someone made a helper library for this very purpose: https://github.com/dmptrluke/django-csp-helpers#form-widgets 👀

[thekaveman]

Also this SO post from 2013! https://stackoverflow.com/a/16922285/453168

[angela-tran]

Also this SO post from 2013! https://stackoverflow.com/a/16922285/453168

Such profit!

I propagated the csp_nonce through to the widget in 67f7570. Let me know if that looks ok or not.

[thekaveman]

Also this SO post from 2013! https://stackoverflow.com/a/16922285/453168

Such profit!

🤣

[thekaveman]

This is so the ? icon stays on the same line as the Login.gov image in mobile.

Maybe look at refactoring this rule in the future (to not be inside a media query): https://github.com/cal-itp/benefits/blob/dev/benefits/static/css/styles.css#L385