[LG-256] Add spinner when presenting piv/cac cert

[jgsmith-usds]

Why:
The browser UX might take a while, and we don't want the
user to feel that everything is frozen up.

How:
When the user clicks on the button to present their piv/cac
cert, we intercept the event and change the content to be a
GIF spinner. We let the event continue so the browser follows
through with the request.

Hi! Before submitting your PR for review, and/or before merging it, please
go through the following checklist:

• For DB changes, check for missing indexes, check to see if the changes
  affect other apps (such as the dashboard), make sure the DB columns in the
  various environments are properly populated, coordinate with devops, plan
  migrations in separate steps.

• For route changes, make sure GET requests don't change state or result in
  destructive behavior. GET requests should only result in information being
  read, not written.

• For encryption changes, make sure it is compatible with data that was
  encrypted with the old code.

• For secrets changes, make sure to update the S3 secrets bucket with the
  new configs in all environments.

• Do not disable Rubocop or Reek offenses unless you are absolutely sure
  they are false positives. If you're not sure how to fix the offense, please
  ask a teammate.

• When reading data, write tests for nil values, empty strings,
  and invalid formats.

• When calling redirect_to in a controller, use _url, not _path.

• When adding user data to the session, use the user_session helper
  instead of the session helper so the data does not persist beyond the user's
  session.

• When adding a new controller that requires the user to be fully
  authenticated, make sure to add before_action :confirm_two_factor_authenticated.

[jmhooper]

Why put this in app/assets instead of app/javascripts?

[davemcorwin]

Probably in order to use ERB, but this is a bit of an anti-pattern compared to most of our JS. Perhaps instead of having the inline erb/html in the js, that can be moved to a slim template and be hidden by default. Then js is only responsible for showing/hiding the necessary html and can be handled via webpack like the rest of the js.

[jgsmith-usds]

Template could work. Or CSS. I just needed to get the path to the image and ERB seemed to simplest way for me in the moment, but definitely not the cleanest.

[monfresh]

Webpacker supports ERB files. Here is how to do it:

• Run bundle exec rake webpacker:install:erb
• Move the file to app/javascripts
• Add .erb to the extensions list in webpacker.yml

[monfresh]

If that doesn't work out of the box, try defining <% helpers = ActionController::Base.helpers %> and then refer to the image like this:

helpers.asset_path('spinner@2x.gif')

[monfresh]

@jgsmith-usds Have you had a chance to think about the feedback I left?

[jgsmith-usds]

@monfresh I agree with what you suggested - just getting some other things built out first. I'll circle back around to this in a week or so.

[monfresh]

Thanks for the update. I will flip this to work in progress.

[monfresh]

Where does this spinner.js come from?

[jgsmith-usds]

It's from an earlier commit. Thanks for pointing it out!

[monfresh]

Looks like Circle CI is failing because this line is too long.

[monfresh]

What's the easiest way to test this locally?

[jgsmith-usds]

The easiest is to get the piv/cac service up and running through nginx with a self-signed cert that is marked as trusted in your browser. Then set identity_pki_disabled to false and set piv_cac_service_url to match your nginx setup. Then create an account and go to /piv_cac to set up a piv/cac.

Or I can demo in a hangout or at Friday's demo day.

[monfresh]

LGTM

[monfresh]

Thanks. It would be great to have more detailed instructions documented somewhere.

[jgsmith-usds]

True. I have a ticket in the backlog to set up a docker config for the piv/cac service to make it easier. I may pull that in as a tech debt type task soon. Doesn't solve the signing certificate issues, but gets things a lot simpler otherwise.

[monfresh]

LGTM