LG-14748 Add in person warning to password reset email #11547

shanechesnutt-ft · 2024-11-22T22:14:32Z

🎫 Ticket

Link to the relevant ticket:
LG-14748

🛠 Summary of changes

Add a warning banner to the password reset email for users with a pending in-person enrollments.

Scenario: When the user does not have a pending in-person enrollment

Login through the oidc sinatra application selecting the Identity Verified level of service.
Create a new account
Logout
Attempt to reset the password of the user
Ensure the password reset email does not have the in-person warning banner.

Scenario: When the user has a pending in-person enrollment

Login through the oidc sinatra application selecting the Identity Verified level of service.
Create a new account
Complete the ID-IPP flow reaching the ready to verify page.
Logout
Attempt to reset the password of the user
Ensure the password reset email has the in-person warning banner.

(Regression Test) Scenario: When the user has a pending gpo enrollment

Note: You might have enable gpo flow from the environment vars

Login through the oidc sinatra application selecting the Identity Verified level of service.
Create a new account
Go through the remote flow and select "verify your address by mail instead" on the /verify/phone page
complete gpo flow
Logout
Attempt to reset the password of the user
Ensure the password reset email does not have the in-person warning banner.
Ensure the password reset email has the gpo warning banner.

👀 Screenshots

Updated Password Reset Email

English:

Spanish:

French:

Chinese:

aduth · 2024-11-25T13:53:43Z

app/assets/images/email/in-person-warning.png

These are legacy styles for older versions of alert in the design system. Can we use the updated styles instead (see warning.png and existing usage for IPP outage alerts.

Same here. I will check with the designers.

Update: Designers agree that we should be going with the updated design. I will update this today!

I updated to the latest design

aduth · 2024-11-25T13:54:39Z

app/assets/stylesheets/email.css.scss

@@ -91,6 +91,18 @@ h6 {
  }
 }

+.usa-alert-no-border {


Similarly, I think we should be using standard alert appearance and not adding this variation.

I agree, I was just following what design wanted. I will check-in with the designers to see if using the existing designs for the alert will be okay. 👍🏻

app/views/user_mailer/shared/_in_person_warning_banner.html.erb

spec/mailers/user_mailer_spec.rb

rutvigupta-design

This LGTM! The spacing for the mailer alert component seems to be a bit different from the design system spec, so Shane and I have discussed and plan on handling this in a separate ticket.

gina-yamada · 2024-11-26T15:36:54Z

Testing Notes:
✅ Scenario: When the user does not have a pending in-person enrollment (new account- has not started any flow)

screenshot

✅ Scenario: When the user has a pending in-person enrollment

screenshot

✅ Scenario: (Regression Test) When the user has a pending gpo enrollment

screenshot

Just noting GPO flow has a warning banner in the flow

✅ Scenario: (Regression Test) When user has proofed via remote

screenshot

✅ Scenario: (Regression Test) When user started IPP (picked a PO) - has an establishing enrollment

I did not take a screenshot but warning banner does not show

gina-yamada · 2024-11-26T16:29:29Z

app/views/user_mailer/shared/_in_person_warning_banner.html.erb

+  <tbody>
+  <tr>
+    <td style="width:16px;">
+      <%= image_tag('email/warning.png', width: 16, height: 14, alt: '', style: 'margin-top: 5px;') %>


I know there are many instances where alt text is blank but I still prefer we don't leave it blank. When I test with VoiceOver, it recognizes the image but our users don't have any context or knowledge about it. I think if we have an image, we should have alt text for our users and to be 508 compliant, see GSA resource here.

gina-yamada · 2024-11-26T16:36:06Z

spec/i18n_spec.rb

@@ -74,6 +74,7 @@ class BaseTask
        { key: 'time.formats.event_timestamp', locales: %i[zh] },
        { key: 'time.formats.full_date', locales: %i[es] }, # format is the same in Spanish and English
        { key: 'time.formats.sms_date' }, # for us date format
+        { key: 'user_mailer.reset_password_instructions.in_person_warning_description_html', locales: %i[es fr zh] },


Nit: Only if you are updating the code again- a note that this will temporary until translations come in would be nice

gina-yamada

Nice work Shane. I added a suggestions. Nothing is blocking.

gina-yamada · 2024-11-26T17:19:49Z

I was testing more with VoiceOver. I notice the banner does not get read unless you know it is there and click on it. Page reads h1 first. I moved the banner below the h1 but it is still not getting read.

Also, I put your content in the table- no luck. It still skips to the h1.

I tested the GPO reset PW email. The information about PW reset is read without clicking on it. I am wondering if we should modify our design to be like GPO?

Maybe we merge as is and have design rework the mocks a bit?

shanechesnutt-ft · 2024-11-26T19:01:02Z

I was testing more with VoiceOver. I notice the banner does not get read unless you know it is there and click on it. Page reads h1 first. I moved the banner below the h1 but it is still not getting read.

Also, I put your content in the table- no luck. It still skips to the h1.

I tested the GPO reset PW email. The information about PW reset is read without clicking on it. I am wondering if we should modify our design to be like GPO?

Maybe we merge as is and have design rework the mocks a bit?

Nice find Gina! I think this would also apply to other emails that have this type of banner... so we might need an entire re-work for ID-IPP/EIPP emails.

changelog: User-facing Improvements, In-person Proofing, Add warning banner to password reset email when the user has an in-progress in-person enrollment

KeithNava · 2024-11-27T14:59:34Z

app/views/user_mailer/shared/_in_person_warning_banner.html.erb

+  <tbody>
+  <tr>
+    <td style="width:16px;">
+      <%= image_tag('email/warning.png', width: 16, height: 14, alt: 'warning icon', style: 'margin-top: 5px;') %>


[non-blocking] do you think it would be better to use an svg here or is the png ok? I just saw the styling and thought maybe it would be a bit easier to work with as an svg.

We have to use pngs for email because svgs are not supported by most email clients.

see #10839 (comment)

For the alt text, do you want to ask if we can get translations order for that? Else you can use
two_factor_authentication.important_alert_icon with is important alert icon

This is non- blocking

gina-yamada · 2024-11-27T15:45:17Z

spec/i18n_spec.rb

@@ -74,6 +74,7 @@ class BaseTask
        { key: 'time.formats.event_timestamp', locales: %i[zh] },
        { key: 'time.formats.full_date', locales: %i[es] }, # format is the same in Spanish and English
        { key: 'time.formats.sms_date' }, # for us date format
+        { key: 'user_mailer.reset_password_instructions.in_person_warning_description_html', locales: %i[es fr zh] }, # Temporary until spanish, french, and chinese translations come in.


Thanks for the comment! 🚀

gina-yamada · 2024-11-27T15:46:46Z

Thanks for addressing my comments. Looks good to me.

aduth reviewed Nov 25, 2024

View reviewed changes

shanechesnutt-ft force-pushed the sc/LG-14748 branch from e3c87c0 to ce0cce0 Compare November 25, 2024 15:27

gina-yamada reviewed Nov 25, 2024

View reviewed changes

app/views/user_mailer/shared/_in_person_warning_banner.html.erb Show resolved Hide resolved

gina-yamada reviewed Nov 25, 2024

View reviewed changes

spec/mailers/user_mailer_spec.rb Show resolved Hide resolved

shanechesnutt-ft force-pushed the sc/LG-14748 branch 2 times, most recently from cb13119 to 6629d31 Compare November 25, 2024 19:54

shanechesnutt-ft requested review from a team, kellular, WilliamBirdsall and rutvigupta-design and removed request for a team November 25, 2024 21:02

rutvigupta-design removed the request for review from kellular November 25, 2024 21:03

rutvigupta-design approved these changes Nov 25, 2024

View reviewed changes

gina-yamada self-requested a review November 26, 2024 15:25

gina-yamada reviewed Nov 26, 2024

View reviewed changes

gina-yamada self-requested a review November 26, 2024 16:49

gina-yamada approved these changes Nov 26, 2024

View reviewed changes

shanechesnutt-ft force-pushed the sc/LG-14748 branch from 6629d31 to 6c8b375 Compare November 26, 2024 18:55

LG-14748 Add in person warning to password reset email

a8fc357

changelog: User-facing Improvements, In-person Proofing, Add warning banner to password reset email when the user has an in-progress in-person enrollment

shanechesnutt-ft force-pushed the sc/LG-14748 branch from 6c8b375 to a8fc357 Compare November 27, 2024 14:38

KeithNava reviewed Nov 27, 2024

View reviewed changes

KeithNava approved these changes Nov 27, 2024

View reviewed changes

shanechesnutt-ft marked this pull request as ready for review November 27, 2024 15:17

gina-yamada reviewed Nov 27, 2024

View reviewed changes

shanechesnutt-ft merged commit 247ce08 into main Nov 27, 2024
2 checks passed

shanechesnutt-ft deleted the sc/LG-14748 branch November 27, 2024 15:48

matthinz mentioned this pull request Dec 3, 2024

Deploy RC 435 to Production #11584

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LG-14748 Add in person warning to password reset email #11547

LG-14748 Add in person warning to password reset email #11547

shanechesnutt-ft commented Nov 22, 2024 •

edited

Loading

aduth Nov 25, 2024

shanechesnutt-ft Nov 25, 2024

shanechesnutt-ft Nov 25, 2024

shanechesnutt-ft Nov 25, 2024

aduth Nov 25, 2024

shanechesnutt-ft Nov 25, 2024

rutvigupta-design left a comment

gina-yamada commented Nov 26, 2024 •

edited

Loading

gina-yamada Nov 26, 2024 •

edited

Loading

shanechesnutt-ft Nov 27, 2024

gina-yamada Nov 26, 2024

gina-yamada left a comment

gina-yamada commented Nov 26, 2024 •

edited

Loading

shanechesnutt-ft commented Nov 26, 2024

KeithNava Nov 27, 2024

shanechesnutt-ft Nov 27, 2024

gina-yamada Nov 27, 2024 •

edited

Loading

gina-yamada Nov 27, 2024

gina-yamada commented Nov 27, 2024

LG-14748 Add in person warning to password reset email #11547

LG-14748 Add in person warning to password reset email #11547

Conversation

shanechesnutt-ft commented Nov 22, 2024 • edited Loading

🎫 Ticket

🛠 Summary of changes

Scenario: When the user does not have a pending in-person enrollment

Scenario: When the user has a pending in-person enrollment

(Regression Test) Scenario: When the user has a pending gpo enrollment

👀 Screenshots

English:

Spanish:

French:

Chinese:

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

rutvigupta-design left a comment

Choose a reason for hiding this comment

gina-yamada commented Nov 26, 2024 • edited Loading

gina-yamada Nov 26, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gina-yamada left a comment

Choose a reason for hiding this comment

gina-yamada commented Nov 26, 2024 • edited Loading

shanechesnutt-ft commented Nov 26, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gina-yamada Nov 27, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gina-yamada commented Nov 27, 2024

shanechesnutt-ft commented Nov 22, 2024 •

edited

Loading

gina-yamada commented Nov 26, 2024 •

edited

Loading

gina-yamada Nov 26, 2024 •

edited

Loading

gina-yamada commented Nov 26, 2024 •

edited

Loading

gina-yamada Nov 27, 2024 •

edited

Loading