Skip to content

LG-5372 Minor content and styling update for IAL2 welcome and agreement steps. #5617

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
amathews-fs merged 4 commits into from
Nov 18, 2021
Merged

LG-5372 Minor content and styling update for IAL2 welcome and agreement steps. #5617

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
37cb6e6
LG-5372 Minor content and styling update for IAL2 welcome step.
amathews-fs Nov 18, 2021
d8511c4
LG-5372 White space for linter.
amathews-fs Nov 18, 2021
f024792
LG-5372 Content updates added to the ticket for the agreement page.
amathews-fs Nov 18, 2021
972a37b
LG-5372 Adding a translated default if sp_name doesn't exist.
amathews-fs Nov 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 16 additions & 17 deletions app/views/idv/doc_auth/welcome.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@

<%= render 'shared/maintenance_window_alert' do %>
<h1><%= t('doc_auth.headings.welcome') %></h1>
<p class='mt-tiny margin-bottom-0'><%= t('doc_auth.info.welcome_html') %></p>
<p class='mt-tiny margin-bottom-0'>
<%= t('doc_auth.info.welcome_html', sp_name: decorated_session.sp_name || t('doc_auth.info.no_sp_name')) %>
</p>
<h2 class='margin-bottom-0'><%= t('doc_auth.instructions.welcome') %></h2>

<ul class='list-reset'>
Expand Down Expand Up @@ -74,6 +76,17 @@
</li>
</ul>

<%= validated_form_for :doc_auth,
url: url_for,
method: 'put',
html: { autocomplete: 'off', class: 'margin-top-2 js-consent-continue-form' } do |f| %>
<br/>
<%= f.button :button,
t('doc_auth.buttons.continue'),
type: :submit,
class: 'usa-button--big usa-button--wide' %>
<% end %>

<%= render(
'shared/troubleshooting_options',
heading_level: :h3,
Expand All @@ -97,8 +110,8 @@
].select(&:present?),
) %>

<h2><%= t('doc_auth.instructions.privacy') %></h2>
<p>
<h3><%= t('doc_auth.instructions.privacy') %></h3>
<p class="padding-bottom-2">
Copy link
Copy Markdown
Contributor

@aduth aduth Nov 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Poking around some of the other flow designs, I wonder if we could update the "Cancel" partial to have margin-top-4 to achieve this same effect?

cc @anniehirshman-gsa do you think this makes sense? In other words, using 2rem top margin wherever we have "Cancel" link at the bottom of a page, where currently it is 1rem by default. We already do this with the "Start Over or Cancel" variation.

Copy link
Copy Markdown
Contributor Author

@amathews-fs amathews-fs Nov 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, that definitely crossed my mind but I also didn't know what the impact would be of that across all the places it is used. It seemed like this was mostly because of the lack of a "start over" to go with it so I figured it could just be a one off. But if it's safe that's fine, I'll change it. That's just a much larger effect than the rest of this change set...

Copy link
Copy Markdown
Contributor

@aduth aduth Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder if we could update the "Cancel" partial to have margin-top-4 to achieve this same effect?

Hm, one challenge is that the Start Over or Cancel partial composes the "Cancel" link, where we'd not want 2rem between "Start Over" and the Cancel link's border 🤔

Copy link
Copy Markdown
Contributor

@anniehirshman-gsa anniehirshman-gsa Nov 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, a consistent 2 rem space above the start over/cancel/back component would be great, but not sure how to best achieve that or if it's possible to make that change more widely without creating spacing issues elsewhere

Copy link
Copy Markdown
Contributor Author

@amathews-fs amathews-fs Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, I worry adding it globally here would create some oddities elsewhere that'll be a bit hard to nail down quickly.

Copy link
Copy Markdown
Contributor Author

@amathews-fs amathews-fs Nov 18, 2021 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Given the limited scope of this ticket and change set, it would make more sense to me to split off the global change of styling for the start over/cancel/back component to another ticket.

<%= t(
'doc_auth.info.privacy_html',
app_name: APP_NAME,
Expand All @@ -109,20 +122,6 @@
) %>
</p>

<%= validated_form_for :doc_auth,
url: url_for,
method: 'put',
html: { autocomplete: 'off', class: 'margin-top-2 js-consent-continue-form' } do |f| %>
<br/>
<%= f.button :button,
t('doc_auth.buttons.continue'),
type: :submit,
class: 'usa-button--big usa-button--wide' %>
<% end %>

<br/>


<% if user_fully_authenticated? %>
<%= render 'shared/cancel', link: idv_cancel_path(step: 'welcome') %>
<% else %>
Expand Down
26 changes: 13 additions & 13 deletions config/locales/doc_auth/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -128,7 +128,7 @@ en:
document_capture_selfie: Your photo
front: Front
interstitial: We are processing your images
lets_go: Let’s get started
lets_go: How verifying your identity works
photo: Photo
review_issues: Check your images and try again
secure_account: Secure your account
Expand All @@ -143,7 +143,7 @@ en:
upload_liveness_enabled: How would you like to verify your identity?
verify: Verify your information
verify_identity: Verify your identity
welcome: Verify your identity to securely access government services
welcome: Get started verifying your identity
info:
camera_required: Your mobile phone must have a camera and a web browser
capture_status_capturing: Capturing
Expand All @@ -167,12 +167,13 @@ en:
link_sent_complete_js: The next step will load automatically once you verify
your ID using your phone.
link_sent_complete_nojs: When you are done, click Continue here to finish verifying your identity.
no_sp_name: The agency that you are trying to access
privacy_html: '%{app_name} is a secure, government website that adheres to the
highest standards in data protection. We only use your data to verify
your identity. %{link} about our privacy and security measures.'
secure_account: After you verify, we’ll ask you to encrypt your account.
Encryption means your data is protected and only you, the account
holder, will be able to access or change your information.
secure_account: We'll encrypt your account with your password. Encryption means
your data is protected and only you will be able to access or change
your information.
ssn: We need your Social Security number to validate your name, date of birth
and address. Your Social Security number is encrypted. With your
consent, we share this information with the government agency you are
Expand All @@ -190,12 +191,11 @@ en:
state-issued ID. Then, you’ll take a photo of yourself to confirm that
you are the owner of the ID.
upload_no_image_storage: We do not store images you upload. We only verify your identity.
verify_identity: We’ll ask for your personal information. We’ll use, keep and
share some of your personal information to verify your identity against
public records.
verify_identity: We'll ask for your personal information to verify your identity
Copy link
Copy Markdown
Contributor

@aduth aduth Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I wonder why make normalize_yaml isn't enforcing this as smart quotes like existed before ’.

I can follow-up to see if it's a bug with the normalization.

Copy link
Copy Markdown
Contributor

@aduth aduth Nov 18, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Follow-up fix at: #5621

against public records.
verifying: Verifying…
welcome_html: The agency that you are trying to access needs to make sure you
are you &#8212; not someone pretending to be you.
welcome_html: '%{sp_name} needs to make sure you are you — not someone
pretending to be you.'
instructions:
bullet1: Your State-issued ID
bullet1a: A device with a camera
Expand Down Expand Up @@ -225,9 +225,9 @@ en:
text1: ''
text1a: such as a phone or computer.
text2: You will not need the card with you.
text3: You do not need to be the primary account holder. If you do not have a
phone number that qualifies, we can send you the verification code by
mail in approximately 3-7 business days.
text3: You do not need to be the primary account holder on your phone plan. If
your phone number doesn’t work, we can send you a verification code by
mail.
welcome: 'To verify your identity, you will need:'
tips:
capture_troubleshooting_blurry: The photo you added is too blurry.
Expand Down
29 changes: 13 additions & 16 deletions config/locales/doc_auth/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -154,7 +154,7 @@ es:
document_capture_selfie: Su foto
front: Parte Delantera
interstitial: Estamos procesando sus imágenes
lets_go: Comencemos
lets_go: Cómo funciona la verificación de su identidad
photo: Foto
review_issues: Revise sus imágenes e inténtelo de nuevo
secure_account: Asegure su cuenta
Expand All @@ -170,8 +170,7 @@ es:
upload_liveness_enabled: '¿Cómo te gustaría verificar su identidad?'
verify: Verifica tus datos
verify_identity: Verifique su identidad
welcome: Verifique su identidad para acceder de forma segura a los servicios
gubernamentales
welcome: Empiece con la verificación de su identidad
info:
camera_required: Su teléfono móvil debe tener una cámara y un navegador web
capture_status_capturing: Capturando
Expand All @@ -196,14 +195,14 @@ es:
verifiques tu identidad a través de tu teléfono.
link_sent_complete_nojs: Cuando termines, haz clic en “Continuar” para completar
la verificación de tu identidad.
no_sp_name: La agencia a la que está intentando acceder
privacy_html: '%{app_name} es un sitio web gubernamental seguro que cumple con
las normas más estrictas de protección de datos. Solo utilizamos sus
datos para verificar su identidad. %{link} sobre nuestras medidas de
privacidad y seguridad.'
secure_account: Una vez que haya verificado su identidad, le pediremos que cifre
su cuenta. Con el cifrado, sus datos quedan protegidos, por lo que solo
usted, el titular de la cuenta, puede acceder a su información o
modificarla.
secure_account: Vamos a encriptar su cuenta con su contraseña. La encriptación
significa que sus datos están protegidos y solo usted podrá acceder o
modificar su información.
ssn: Necesitamos su número de Seguro Social para validar su nombre, fecha de
nacimiento y habla a. Su número de Seguro Social está encriptado. Con su
consentimiento, compartimos este información con la agencia
Expand All @@ -224,12 +223,11 @@ es:
documento de identidad expedido por el estado. Luego, se tomará una foto
para confirmar que es el propietario del documento de identidad.
upload_no_image_storage: No almacenamos imágenes que cargue. Solo verificamos su identidad.
verify_identity: Le pediremos su información personal. Utilizaremos,
conservaremos y compartiremos algunos de sus datos personales para
verificar su identidad con los registros públicos.
verify_identity: Le preguntaremos sus datos personales para verificar su
identidad comparándola con los registros públicos.
verifying: Verificando…
welcome_html: La agencia a la que está intentando acceder debe asegurarse de que
usted sea quien dice ser, y no alguien que se hace pasar por usted.
welcome_html: '%{sp_name} necesita asegurarse de que sea usted y no alguien que
se haga pasar por usted.'
instructions:
bullet1: Su documento de identidad emitido por el estado.
bullet1a: Un dispositivo con cámara
Expand Down Expand Up @@ -261,10 +259,9 @@ es:
text1: ''
text1a: como un teléfono o una computadora.
text2: No es necesario disponer de la credencial.
text3: No es necesario que sea el titular principal de la cuenta. Si no tiene un
número de teléfono que cumpla con este requisito, podemos enviarle el
código de verificación por correo en un plazo aproximado de 3 a 7 días
laborables.
text3: No es necesario que usted sea el titular principal de la cuenta de su
plan de teléfono. Si su número de teléfono no funciona, podemos enviarle
un código de verificación por correo.
welcome: 'Deberá contar con lo siguiente para verificar su identidad:'
tips:
capture_troubleshooting_blurry: La foto que adjuntó está demasiado borrosa.
Expand Down
31 changes: 14 additions & 17 deletions config/locales/doc_auth/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@ fr:
document_capture_selfie: Votre photo
front: Recto
interstitial: Nous traitons vos images
lets_go: Commençons
lets_go: Comment fonctionne la vérification de votre identité
photo: Photo
review_issues: Vérifiez vos images et essayez à nouveau
secure_account: Sécuriser votre compte
Expand All @@ -177,8 +177,7 @@ fr:
upload_liveness_enabled: Comment souhaitez-vous vérifier votre identité?
verify: Vérifier votre information
verify_identity: Vérifier votre identité
welcome: Vérifiez votre identité pour accéder en toute sécurité aux services
gouvernementaux
welcome: Commencez à vérifier votre identité
info:
camera_required: Votre téléphone portable doit avoir une caméra et un navigateur Web
capture_status_capturing: Prendre la photo
Expand All @@ -205,14 +204,14 @@ fr:
vous aurez confirmé votre identifiant à l’aide de votre téléphone.
link_sent_complete_nojs: Quand vous aurez fini, cliquez sur « Continuer » ici
pour terminer la vérification de votre identité.
no_sp_name: L’agence à laquelle vous essayez d’accéder
privacy_html: '%{app_name} est un site gouvernemental sécurisé qui respecte les
normes les plus strictes en matière de protection des données. Nous
n’utilisons vos données uniquement pour vérifier votre identité. %{link}
sur nos mesures de confidentialité et de sécurité.'
secure_account: Après avoir vérifié votre identité, nous vous demanderons de
crypter votre compte. Le cryptage garantit la protection de vos données
et seul vous, le titulaire du compte, pourrez accéder à vos informations
ou les modifier.
secure_account: Nous chiffrerons votre compte avec votre mot de passe. Le
chiffrage signifie que vos données sont protégées et que vous êtes le/la
seul(e) à pouvoir accéder à vos informations ou les modifier.
ssn: Nous avons besoin de votre numéro de sécurité sociale pour valider votre
nom, date de naissance et adresse. Votre numéro de sécurité sociale est
crypté. Avec votre accord, nous partageons ce informations auprès de
Expand All @@ -236,13 +235,11 @@ fr:
photo de vous-même pour confirmer que vous êtes bien le propriétaire de
la carte d’identité.
upload_no_image_storage: Nous ne stockons pas les images que vous téléchargez.
verify_identity: Nous vous demanderons vos renseignements personnels. Nous
utiliserons, conserverons et partagerons certains de vos renseignements
personnels pour vérifier votre identité par rapport aux registres
publics.
verify_identity: Nous vous demanderons vos informations personnelles afin de
vérifier votre identité par rapport aux registres publics.
verifying: Vérification…
welcome_html: L’agence à laquelle vous essayez d’accéder doit s’assurer qu’il
s’agit bien de vous, et non de quelqu’un qui se fait passer pour vous.
welcome_html: "%{sp_name} doit s'assurer que vous êtes bien vous, et non
quelqu'un qui se fait passer pour vous."
instructions:
bullet1: Votre carte d’identité émise par l’État
bullet1a: Un appareil équipé d’une caméra
Expand Down Expand Up @@ -276,10 +273,10 @@ fr:
text1: ''
text1a: tel qu’un téléphone ou un ordinateur
text2: Vous n’aurez pas besoin de la carte avec vous.
text3: Il n’est pas nécessaire que vous soyez le titulaire principal de la
ligne. Si votre numéro de téléphone ne remplit pas les conditions
requises, nous pouvons vous envoyer le code de vérification par courrier
dans un délai de 3 à 7 jours ouvrables.
text3: Il n'est pas nécessaire que vous soyez le titulaire principal du compte
de votre forfait téléphonique. Si votre numéro de téléphone ne
fonctionne pas, nous pouvons vous envoyer un code de vérification par
courrier.
welcome: 'Pour vérifier votre identité, vous aurez besoin de:'
tips:
capture_troubleshooting_blurry: La photo que vous avez ajoutée est trop floue.
Expand Down