diff --git a/src/_components/alert/alert-sign-in.md b/src/_components/alert/alert-sign-in.md index 72da829d4..045984dfb 100644 --- a/src/_components/alert/alert-sign-in.md +++ b/src/_components/alert/alert-sign-in.md @@ -19,21 +19,7 @@ anchors: --- ## Examples - -### Required sign-in (Verified) -{% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %} - -### Optional sign-in (Verified) -{% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %} - -### Verify with ID.me -{% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %} - -### Verify with Login.gov -{% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %} - -### Sign-in with another account -{% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/sign-in-with-a-different-account.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %} +{% include content/file-upload.md %} ## Usage diff --git a/src/_includes/content/sign-in-alert-examples.md b/src/_includes/content/sign-in-alert-examples.md new file mode 100644 index 000000000..c1679fed0 --- /dev/null +++ b/src/_includes/content/sign-in-alert-examples.md @@ -0,0 +1,14 @@ +### Required sign-in (Verified) +{% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %} + +### Optional sign-in (Verified) +{% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %} + +### Verify with ID.me +{% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %} + +### Verify with Login.gov +{% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %} + +### Sign-in with another account +{% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/sign-in-with-a-different-account.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %} diff --git a/src/_patterns/help-users-to/sign-in.md b/src/_patterns/help-users-to/sign-in.md index 1716d914f..1c65b675f 100644 --- a/src/_patterns/help-users-to/sign-in.md +++ b/src/_patterns/help-users-to/sign-in.md @@ -38,23 +38,11 @@ This pattern works differently depending on the product and the account type a p **To design and build, follow these steps:** 1. Choose 1 of the 2 blue sign-in alert variations. If a person signs in with a verified account, they should only encounter an initial sign-in alert. - #### Required sign-in (Verified) - {% include component-example.html alt="An example of a sign-in alert for all products that require sign-in with a verified account." file="/images/components/alert-sign-in/required-sign-in-verified.png" caption="An example of a sign-in alert for all products that require sign-in with a verified account" reverse=true %} - - #### Optional sign-in (Verified) - {% include component-example.html alt="An example of a sign-in alert for forms that support optional sign-in with a verified account." file="/images/components/alert-sign-in/optional-sign-in-verified.png" caption="An example of a sign-in alert for forms that support optional sign-in with a verified account." reverse=true %} 2. Implement both of the yellow verification alerts. If a person signs in with an unverified account, they should encounter 1 of the 2 variations. One is for unverified **Login.gov** and **ID.me** accounts, and one is for unverified **My HealtheVet** accounts. **Note:** This pattern is currently tailored to products that require verified (LOA3 or IAL2) accounts. If your product accepts unverified (LOA1 or IAL1) accounts, you'll need to adjust the content in the blue sign-in alert. And you won't need to implement the yellow verification alerts. Work with CAIA and the identity team to adjust for your situation. - #### Verify with ID.me - {% include component-example.html alt="An example of a sign-in alert for unverified ID.me accounts" file="/images/components/alert-sign-in/verify-with-idme.png" caption="An example of a sign-in alert for unverified ID.me accounts" reverse=true %} - - #### Verify with Login.gov - {% include component-example.html alt="An example of a sign-in alert for unverified Login.gov accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified Login.gov accounts." reverse=true %} - - #### Sign-in with another account - {% include component-example.html alt="An example of a sign-in alert for unverified My HealtheVet accounts." file="/images/components/alert-sign-in/verify-with-logingov.png" caption="An example of a sign-in alert for unverified My HealtheVet accounts." reverse=true %} +{% include content/file-sign-in-alert-examples.md %} **All teams should take these steps when using this pattern:**