LG-13691: Standardize PIV/CAC terminology

[jmdembe]

🎫 Ticket

Link to the relevant ticket:
LG-13691

🛠 Summary of changes

This PR standardizes the use of "Government employee ID" and "PIV/CAC" throughout the application.

📜 Testing Plan

On account creation

• Follow the steps to set up an account with a .gov email
• After password creation, see the updated screen

English	Spanish	French	Chinese

When adding a PIV card

• Follow the above directions to set up an account, then click "Add PIV/CAC"
• See the updated screen

English	Spanish	French	Chinese

After the successful setup of a PIV card

• Follow all of the above instructions to setup an account and add a PIV card
• Once PIV card has successfully been added, see the updated screen

English	Spanish	French	Chinese

When signing in with a PIV/CAC

• Click "Sign in with your government employee ID"
• See updated screen

English	Spanish	French	Chinese

Error state: logging in with PIV not connected to an account

• Follow above instructions, click "Insert PIV/CAC to continue"
• Provide a PIV that has bot already been associated to an account. Click "Proceed
• See updated screen

English	Spanish	French	Chinese

Error state: User tries to register PIV card, no certificate is available
Note: Can be done on an existing account or during account creation. The instructions below is for the account creation flow

• With a .gov or .mil email address, follow steps to create an account
• Click "Add PIV card" when suggested to add an account
• Follow steps to add an account
• On local environment, give the sample PIV card a name and select "No certificate"
• See the updated screen

English	Spanish	French	Chinese

Sidebar on "Your account" page
Requirement: An existing account

• Follow steps to create an account.
• Successfully set up an MFA method
• Arrive on your account page
• On the left, see the updated content

English	Spanish	French	Chinese

Banner after PIV is added to account
Requirement: An existing account

• Follow steps to create an account
• On the right side of the Account page, click "Add your government employee ID
• Follow steps to add a PIV to your account
• See banner

English	Spanish	French	Chinese

[kevinsmaster5]

Looks good 👍

[jmdembe]

Returning to a draft PR to address logic change for error steps (sign in vs. authentication) and cleanup

[jmdembe]

Updated screen shots as discussed in this acceptance thread

Error state: PIV is not associated with an account page with updated button

English	Spanish	French	Chinese

Add your PIV/CAC screen with updated button text

Header	Header	Header	Header

Error stage page with updated button

English	Spanish	French	Chinese

[aduth]

While we're here, I think we should fix up the fact that this button is the incorrect size and spacing relative to the preceding paragraph. The designs linked to the ticket also have the button in the correct size.

Compare:

Your Screenshots	Figma Reference Design

Suggested change

	<div class="margin-top-4">
	<%= link_to t('instructions.mfa.piv_cac.back_to_sign_in'), root_url, class: 'usa-button' %>
	</div>
	<%= render ButtonComponent.new(
	url: new_user_session_url,
	big: true,
	wide: true,
	class: 'display-block margin-top-5'
	).with_content(t('instructions.mfa.piv_cac.back_to_sign_in')) %>

[jmdembe]

Got it. I made a few additional changes to the suggestion-- I removed the display-block class and then took a bit off the margin-top of the button so that the distance between the paragraph and the button is at 40px.

<%= render ButtonComponent.new(
      url: new_user_session_url,
      big: true,
      wide: true,
      class: 'margin-top-3'
    ).with_content(t('instructions.mfa.piv_cac.back_to_sign_in')) %>

[aduth]

Same note here about using the correct button size (big & wide). Also, ButtonComponent handles adding the usa-button class, so we don't need to add it.

Suggested change

	<%= render ButtonComponent.new(
	url: setup_piv_cac_url,
	class: 'usa-button margin-top-2',
	<%= render ButtonComponent.new(
	url: setup_piv_cac_url,
	big: true,
	wide: true,
	class: 'margin-top-2',

[jmdembe]

Agree with with removing usa-button, but based on the Figma, it looks like the width should be the width of the content.

Suggested change	Figma

[aduth]

I think that might be a mistake in the Figma designs, since these page layouts typically use the "wide" button variant. Could you get some clarification from UX people on the team?

[jmdembe]

Fixed in e517e40