Skip to content

LG-6349 Consistently use 'Update' language on verify and update pages #6546

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
sheldon-b merged 13 commits into from
Jul 6, 2022
Merged

LG-6349 Consistently use 'Update' language on verify and update pages #6546

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
cbd7df3
Use 'Update' buttons. Use sentence case
Jun 28, 2022
6078449
First pass at making copy changes
Jun 29, 2022
dbc0dc4
Fix zipcode key
Jun 29, 2022
abe8f03
Finish moving translation strings
Jun 29, 2022
708a28e
Use description list on verify page
Jul 2, 2022
8cf7121
changelog: Improvements, Verify and update pages, Consistently use 'U…
Jul 2, 2022
3039727
Fix indentation issues
Jul 2, 2022
86aa542
Normalize yamls
Jul 2, 2022
5a5ec17
Fix broken specs
Jul 2, 2022
330dbca
Make font sizes consistent
Jul 4, 2022
9abec01
Remove unnecessary left margins
Jul 5, 2022
87f7c0c
Update English aria labels
Jul 5, 2022
a50fbf9
Fix i18n typos and capitalization
Jul 5, 2022
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
6 changes: 3 additions & 3 deletions app/javascript/packages/document-capture/components/barcode-attention-warning.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,15 +66,15 @@ function BarcodeAttentionWarning({ onDismiss, pii }: BarcodeAttentionWarningProp
<p>{t('doc_auth.errors.barcode_attention.confirm_info')}</p>
<dl className="add-list-reset">
<div>
<dt className="display-inline">{t('doc_auth.forms.first_name')}:</dt>
<dt className="display-inline">{t('idv.form.first_name')}:</dt>
<dd className="display-inline margin-left-05">{pii.first_name}</dd>
</div>
<div>
<dt className="display-inline">{t('doc_auth.forms.last_name')}:</dt>
<dt className="display-inline">{t('idv.form.last_name')}:</dt>
<dd className="display-inline margin-left-05">{pii.last_name}</dd>
</div>
<div>
<dt className="display-inline">{t('doc_auth.forms.dob')}:</dt>
<dt className="display-inline">{t('idv.form.dob')}:</dt>
<dd className="display-inline margin-left-05">{pii.dob}</dd>
</div>
</dl>
Expand Down
6 changes: 3 additions & 3 deletions app/views/idv/address/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@
input_html: { value: @pii['address2'] } %>
<div class="margin-bottom-4">
<%= f.input :city, label: t('idv.form.city'), required: true, maxlength: 255, wrapper: false,
input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['city'] } %>
input_html: { aria: { invalid: false }, value: @pii['city'] } %>
Copy link
Copy Markdown
Contributor Author

@sheldon-b sheldon-b Jul 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

This styling was making the city input text smaller than the other inputs:
Screen Shot 2022-07-04 at 3 50 55 PM

<span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
<%= t('simple_form.required.text') %>
</span>
Expand All @@ -42,7 +42,7 @@
label: t('idv.form.zipcode'), required: true,
pattern: '(\d{5}([\-]\d{4})?)',
wrapper: false,
input_html: { aria: { invalid: false }, class: 'usa-input', value: @pii['zipcode'] } %>
input_html: { aria: { invalid: false }, value: @pii['zipcode'] } %>
Copy link
Copy Markdown
Contributor Author

@sheldon-b sheldon-b Jul 4, 2022

Choose a reason for hiding this comment

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

This styling was making the ZIP code input text smaller than the other inputs:
Screen Shot 2022-07-04 at 3 51 02 PM

<span class='usa-error-message margin-top-1 display-if-invalid display-if-invalid--value-missing margin-bottom-1' role='alert'>
<%= t('simple_form.required.text') %>
</span>
Expand All @@ -53,7 +53,7 @@
</div>
<div class="margin-top-0">
<button type="submit" class="usa-button usa-button--big usa-button--wide margin-top-2">
<%= t('forms.buttons.continue') %>
<%= t('forms.buttons.submit.update') %>
</button>
</div>
<% end %>
Expand Down
8 changes: 6 additions & 2 deletions app/views/idv/in_person/address.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,8 +82,12 @@
wrapper: :uswds_radio_buttons,
) %>

<%= render ButtonComponent.new(big: true, wide: true, class: 'margin-top-1') do %>
<%= t('forms.buttons.continue') %>
<%= render ButtonComponent.new(big: true, wide: true, class: 'margin-top-1') do %>
<% if updating_address %>
<%= t('forms.buttons.submit.update') %>
<% else %>
<%= t('forms.buttons.continue') %>
<% end %>
<% end %>
<% end %>

Expand Down
11 changes: 7 additions & 4 deletions app/views/idv/in_person/state_id.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,8 +81,11 @@
) %>
</div>

<%= f.button :button,
t('doc_auth.buttons.continue'),
type: :submit,
class: 'usa-button--big usa-button--wide' %>
<%= render ButtonComponent.new(big: true, wide: true) do %>
<% if updating_state_id %>
<%= t('forms.buttons.submit.update') %>
<% else %>
<%= t('forms.buttons.continue') %>
<% end %>
<% end %>
<% end %>
2 changes: 1 addition & 1 deletion app/views/idv/phone/new.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@
) %>
<div class="margin-y-5">
<%= render SpinnerButtonComponent.new(
action_message: t('doc_auth.info.verifying'),
action_message: t('idv.messages.verifying'),
type: :submit,
big: true,
wide: true,
Expand Down
6 changes: 5 additions & 1 deletion app/views/idv/shared/_ssn.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,11 @@ locals:
<p><%= flow_session[:error_message] %></p>

<button type="submit" class="display-block margin-y-5 usa-button usa-button--big usa-button--wide">
<%= t('forms.buttons.continue') %>
<% if updating_ssn %>
<%= t('forms.buttons.submit.update') %>
<% else %>
<%= t('forms.buttons.continue') %>
<% end %>
</button>
<% end %>

Expand Down
52 changes: 30 additions & 22 deletions app/views/idv/shared/_verify.html.erb
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,65 +4,73 @@ locals:
remote_identity_proofing - true if we're doing RIDP, false if we're doing IPP
step_url - generator for step URLs
%>
<% title t('titles.doc_auth.verify_info') %>
<% title t('titles.idv.verify_info') %>

<%= render PageHeadingComponent.new.with_content(t('doc_auth.headings.verify')) %>
<%= render PageHeadingComponent.new.with_content(t('headings.verify')) %>
<div class='margin-top-4 margin-bottom-2'>
<div class="grid-row grid-gap grid-gap-2 padding-bottom-1">
<div class='grid-col-fill'>
<dl class="grid-col-fill margin-bottom-0">
Copy link
Copy Markdown
Contributor Author

@sheldon-b sheldon-b Jul 2, 2022

Choose a reason for hiding this comment

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

Description lists have a default bottom margin of 2 so I wanted to override it to match the div that was here previously

Copy link
Copy Markdown
Contributor

@aduth aduth Jul 5, 2022

Choose a reason for hiding this comment

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

At some point we may want to consider creating a convenience CSS class for these sorts of term:value lists, so that we can avoid the margin utility here and the display-inline below.

Copy link
Copy Markdown
Contributor Author

@sheldon-b sheldon-b Jul 5, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Makes sense. Could you link me to an existing CSS class so I can see how that's currently done in the codebase? Not planning to do it as part of this ticket but I'd like to know how for next time

Copy link
Copy Markdown
Contributor

@aduth aduth Jul 6, 2022 •
edited
Loading

Choose a reason for hiding this comment

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

Makes sense. Could you link me to an existing CSS class so I can see how that's currently done in the codebase? Not planning to do it as part of this ticket but I'd like to know how for next time

That's a good question. The stylesheets are a bit scattered as far as patterns go.

I could imagine a few options:

  • Treat it like a "component" for description list, optionally of an "unstyled" variety
    • e.g. .description-list or .term-list or .description-list.description-list--unstyled in a new file _description-list.scss or _term-list.scss
    • Ideally these component stylesheets would map to a Rails component or React component, which we could do, but I don't think is strictly necessary unless you think there's some value in it.
  • Add a utility class, maybe even to one of the existing (typography?)
    • I'm not a huge fan of the utility classes since they're a hodgepodge of miscellaneous things, but this feels like it fits as a miscellaneous thing

<div>
<%= "#{t('doc_auth.forms.first_name')}: #{pii[:first_name]}" %>
<dt class="display-inline"> <%= t('idv.form.first_name') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:first_name] %> </dd>
</div>
<div>
<%= "#{t('doc_auth.forms.last_name')}: #{pii[:last_name]}" %>
<dt class="display-inline"> <%= t('idv.form.last_name') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:last_name] %> </dd>
</div>
<div>
<%= "#{t('doc_auth.forms.dob')}: #{pii[:dob]}" %>
<dt class="display-inline"> <%= t('idv.form.dob') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:dob] %> </dd>
</div>
<% if !remote_identity_proofing %>
<div>
<%= "#{t('doc_auth.forms.id_number')}: #{pii[:state_id_number]}" %>
<dt class="display-inline"> <%= t('idv.form.id_number') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:state_id_number] %> </dd>
</div>
<% end %>
</div>
</dl>
<% if !remote_identity_proofing %>
<div class='grid-auto'>
<%= button_to(
step_url.call(step: :redo_state_id),
method: :put,
class: 'usa-button usa-button--unstyled',
'aria-label': t('doc_auth.buttons.change_state_id_label'),
) { t('doc_auth.buttons.change_label') } %>
'aria-label': t('idv.buttons.change_state_id_label'),
) { t('idv.buttons.change_label') } %>
</div>
<% end %>
</div>
<div class="grid-row grid-gap grid-gap-2 padding-bottom-1 padding-top-1 border-y border-primary-light">
<div class='grid-col-fill'>
<dl class='grid-col-fill margin-bottom-0'>
<div>
<%= "#{t('doc_auth.forms.address1')}: #{pii[:address1]}" %>
<dt class="display-inline"> <%= t('idv.form.address1') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:address1] %> </dd>
</div>
<div>
<%= "#{t('doc_auth.forms.city')}: #{pii[:city]}" %>
<dt class="display-inline"> <%= t('idv.form.city') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:city] %> </dd>
</div>
<div>
<%= "#{t('doc_auth.forms.state')}: #{pii[:state]}" %>
<dt class="display-inline"> <%= t('idv.form.state') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:state] %> </dd>
</div>
<div>
<%= "#{t('doc_auth.forms.zip_code')}: #{pii[:zipcode]}" %>
<dt class="display-inline"> <%= t('idv.form.zipcode') %>: </dt>
<dd class="display-inline margin-left-0"> <%= pii[:zipcode] %> </dd>
</div>
</div>
</dl>
<div class='grid-auto'>
<%= button_to(
step_url.call(step: :redo_address),
method: :put,
class: 'usa-button usa-button--unstyled',
'aria-label': t('doc_auth.buttons.change_address_label'),
) { t('doc_auth.buttons.change_label') } %>
'aria-label': t('idv.buttons.change_address_label'),
) { t('idv.buttons.change_label') } %>
</div>
</div>
<div class="grid-row grid-gap grid-gap-2 padding-top-1">
<div class='grid-col-fill'>
<%= t('doc_auth.forms.ssn') %>:
<%= t('idv.form.ssn') %>:
<%= render(
'shared/masked_text',
text: SsnFormatter.format(pii[:ssn]),
Expand All @@ -80,8 +88,8 @@ locals:
step_url.call(step: :redo_ssn),
method: :put,
class: 'usa-button usa-button--unstyled',
'aria-label': t('doc_auth.buttons.change_ssn_label'),
) { t('doc_auth.buttons.change_label') } %>
'aria-label': t('idv.buttons.change_ssn_label'),
) { t('idv.buttons.change_label') } %>
</div>
</div>
<div class="margin-top-5">
Expand All @@ -91,7 +99,7 @@ locals:
end,
big: true,
wide: true,
action_message: t('doc_auth.info.verifying'),
action_message: t('idv.messages.verifying'),
method: :put,
form: {
class: 'button_to',
Expand Down
2 changes: 1 addition & 1 deletion config/locales/account/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -49,7 +49,7 @@ en:
instructions: Your profile was recently deactivated due to a password reset.
link: Reactivate your profile now.
sign_in_location_and_ip: From %{ip} (IP address potentially located in %{location})
ssn: Social Security Number
ssn: Social Security number
totp_confirm_delete: Yes, remove authentication app
unknown_location: unknown location
verification:
Expand Down
15 changes: 0 additions & 15 deletions config/locales/doc_auth/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ en:
selfie_alt_text: An uploaded image
buttons:
add_new_photos: Add new photos
change_address_label: Change address
change_label: Change
change_ssn_label: Change Social Security Number
change_state_id_label: Change state ID
continue: Continue
start_over: Start over
take_or_upload_picture: '<lg-take-photo>Take photo</lg-take-photo> or
Expand Down Expand Up @@ -110,20 +106,11 @@ en:
Try taking new pictures in a bright area.
upload_error: Sorry, something went wrong on our end.
forms:
address1: Address
captured_image: Captured Image
change_file: Change file
choose_file_html: Drag file here or <lg-underline>choose from folder</lg-underline>
city: City
dob: Date of Birth
doc_success: We have verified your personal information
first_name: First Name
id_number: ID Number
last_name: Last Name
selected_file: Selected file
ssn: Social Security Number
state: State
zip_code: Zip Code
headings:
address: Update your mailing address
back: Back
Expand Down Expand Up @@ -151,7 +138,6 @@ en:
upload_from_phone: Take a photo with a mobile phone to upload your ID
upload_from_phone_liveness_enabled: Use a mobile phone to add your ID and take a photo of yourself
upload_liveness_enabled: How would you like to verify your identity?
verify: Verify your information
verify_identity: Verify your identity
welcome: Get started verifying your identity
info:
Expand Down Expand Up @@ -202,7 +188,6 @@ en:
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 to verify your identity
against public records.
verifying: Verifying…
welcome_html: '%{sp_name} needs to make sure you are you — not someone
pretending to be you.'
instructions:
Expand Down
15 changes: 0 additions & 15 deletions config/locales/doc_auth/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ es:
selfie_alt_text: Una foto subida
buttons:
add_new_photos: Añadir nuevas fotos
change_address_label: Cambiar dirección
change_label: Cambio
change_ssn_label: Cambiar número de Seguridad Social
change_state_id_label: Cambiar ID de estado
continue: Continuar
start_over: Comenzar de nuevo
take_or_upload_picture: '<lg-take-photo>Toma una foto</lg-take-photo> o
Expand Down Expand Up @@ -136,21 +132,12 @@ es:
área iluminada.
upload_error: Lo siento, algo salió mal por nuestra parte.
forms:
address1: Dirección
captured_image: Imagen capturada
change_file: Cambiar archivo
choose_file_html: Arrastre el archivo aquí o <lg-underline>elija de la
carpeta</lg-underline>
city: Ciudad
dob: Fecha de nacimiento
doc_success: Hemos verificado su información personal
first_name: Nombre de pila
id_number: Número de identificación
last_name: Apellido
selected_file: Archivo seleccionado
ssn: Número de seguridad social
state: Estado
zip_code: Código postal
headings:
address: Actualice su dirección postal
back: Parte Trasera
Expand Down Expand Up @@ -180,7 +167,6 @@ es:
upload_from_phone: Tome una foto con un teléfono móvil para cargar su identificación
upload_from_phone_liveness_enabled: Utilice un celular para agregar su documento de identidad y tomarse
upload_liveness_enabled: '¿Cómo te gustaría verificar su identidad?'
verify: Verifica tus datos
verify_identity: Verifique su identidad
welcome: Empiece con la verificación de su identidad
info:
Expand Down Expand Up @@ -236,7 +222,6 @@ es:
upload_no_image_storage: No almacenamos imágenes que cargue. Solo verificamos su identidad.
verify_identity: Le preguntaremos sus datos personales para verificar su
identidad comparándola con los registros públicos.
verifying: Verificando…
welcome_html: '%{sp_name} necesita asegurarse de que sea usted y no alguien que
se haga pasar por usted.'
instructions:
Expand Down
15 changes: 0 additions & 15 deletions config/locales/doc_auth/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,6 @@ fr:
selfie_alt_text: Une photo téléversée
buttons:
add_new_photos: Ajoutez de nouvelles photos
change_address_label: Changement d’adresse
change_label: Changement
change_ssn_label: Changement de numéro de sécurité sociale
change_state_id_label: Modifier l’ID d’état
continue: Continuer
start_over: Recommencer
take_or_upload_picture: '<lg-take-photo>Prendre une photo</lg-take-photo> ou
Expand Down Expand Up @@ -142,21 +138,12 @@ fr:
photos dans un endroit lumineux.
upload_error: Désolé, quelque chose a mal tourné de notre côté.
forms:
address1: Adresse
captured_image: Image capturée
change_file: Changer de fichier
choose_file_html: Faites glisser le fichier ici ou <lg-underline>choisissez un
dossier</lg-underline>
city: Ville
dob: Date de naissance
doc_success: Nous avons vérifié vos informations personnelles
first_name: Prénom
id_number: Numéro d’identification
last_name: Nom de famille
selected_file: Fichier sélectionné
ssn: Numéro de sécurité sociale
state: Etat
zip_code: Code postal
headings:
address: Mettre à jour votre adresse postale
back: Verso
Expand Down Expand Up @@ -188,7 +175,6 @@ fr:
upload_from_phone_liveness_enabled: Utilisez un téléphone portable pour ajouter
votre pièce d’identité et prendre une photo de vous-même
upload_liveness_enabled: Comment souhaitez-vous vérifier votre identité?
verify: Vérifier votre information
verify_identity: Vérifier votre identité
welcome: Commencez à vérifier votre identité
info:
Expand Down Expand Up @@ -249,7 +235,6 @@ fr:
upload_no_image_storage: Nous ne stockons pas les images que vous téléchargez.
verify_identity: Nous vous demanderons vos informations personnelles afin de
vérifier votre identité par rapport aux registres publics.
verifying: Vérification…
welcome_html: '%{sp_name} doit s’assurer que vous êtes bien vous, et non
quelqu’un qui se fait passer pour vous.'
instructions:
Expand Down
2 changes: 1 addition & 1 deletion config/locales/forms/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ en:
email: Enter your email address
email_language: Select your email language preference
ssn:
show: Show Social Security Number
show: Show Social Security number
totp_delete:
caution: If you remove your authentication app you won’t be able to use it to
access your %{app_name} account.
Expand Down
1 change: 1 addition & 0 deletions config/locales/headings/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ en:
sp_handoff_bounced: There was a problem connecting to %{sp_name}
totp_setup:
new: Add an authentication app
verify: Verify your information
verify_email: Check your email
verify_personal_key: Verify your personal key
webauthn_platform_setup:
Expand Down
1 change: 1 addition & 0 deletions config/locales/headings/es.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ es:
sp_handoff_bounced: Hubo un problema al conectarse a %{sp_name}
totp_setup:
new: Agregar una aplicación de autenticación
verify: Verifica tus datos
verify_email: Revise su email
verify_personal_key: Verifica tu clave personal
webauthn_platform_setup:
Expand Down
1 change: 1 addition & 0 deletions config/locales/headings/fr.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,7 @@ fr:
sp_handoff_bounced: Un problème est survenu lors de la connexion à %{sp_name}
totp_setup:
new: Ajouter une application d’authentification
verify: Vérifier votre information
verify_email: Consultez vos courriels
verify_personal_key: Vérifier votre clé personnelle
webauthn_platform_setup:
Expand Down
Loading