LG-3576 Update the piv/cac page with new graphics, layout, content, and translations.

app/views/idv/cac/choose_method.html.erb

@@ -1,24 +1,35 @@
 <%= render 'shared/maintenance_window_alert' do %>
-  <h1 class="h3 mt0 mb1"><%= t('cac_proofing.headings.choose_method') %></h1>
-  <%= t('cac_proofing.info.choose_method') %>
+  <h1 class="h3 margin-top-0 margin-bottom-1"><%= t('cac_proofing.headings.choose_method') %></h1>
+  <p><%= t('cac_proofing.info.choose_method') %></p>
+  <p><%= t('cac_proofing.info.disclaimer') %></p>
+  <div class="grid-row margin-y-4">
+    <div class="mobile-lg:grid-col-4 margin-bottom-2">
+      <%= image_tag asset_url('piv-cac-round.svg') %>
+    </div>
+    <div class="mobile-lg:grid-col-8">
+      <div class='usa-tag caps text-ink bg-primary-lighter margin-bottom-2 display-inline-block'>
+        <%= t('doc_auth.info.tag') %>
+      </div>
+      <p><%= t('cac_proofing.info.piv_cac_description') %></p>
+      <%= validated_form_for :cac,
+                             url: url_for,
+                             method: 'put',
+                             html: {autocomplete: 'off', role: 'form', class: 'margin-top-2'} do |f| %>
+        <button class="btn btn-primary text-center" type="submit">
+          <%= t('cac_proofing.buttons.use_cac') %>
+        </button>
+      <% end %>
+    </div>
+  </div>
   <hr/>
-  <br/>
-  <%= image_tag asset_url('dod-logo.jpg'), height: 150 %>
-  <br/>
-  <%= validated_form_for :cac,
-                         url: url_for,
-                         method: 'put',
-                         html: { autocomplete: 'off', role: 'form', class: 'mt2' } do |f| %>
-    <button class="btn btn-primary" type="submit"><%= t('cac_proofing.buttons.use_cac') %></button>
-  <% end %>
-  <br/>
-  <br/>
-  <hr/>
-  <%= image_tag asset_url('state-id-confirm@3x.png'), height: 150 %>
-  <br/>
-  <br/>
-  <%= link_to t('cac_proofing.buttons.use_doc_auth'), idv_doc_auth_path, class: 'btn btn-primary' %>
-  <br/>
-  <br/>
-  <div class="mt2 pt1 border-top"><%= link_to t('links.cancel'), idv_cancel_path %></div>
+  <div class="grid-row margin-top-3">
+    <div class="mobile-lg:grid-col-4 margin-bottom-2">
+      <%= image_tag asset_url('state-id-round.svg') %>
+    </div>
+    <div class="mobile-lg:grid-col-8">
+      <p><%= t('cac_proofing.info.state_id_description') %></p>
+      <%= link_to t('cac_proofing.buttons.use_doc_auth'), idv_doc_auth_path, class: 'btn btn-primary text-center' %>
+    </div>
+  </div>
+  <div class="mt3 pt1 border-top"><%= link_to t('links.cancel'), idv_cancel_path %></div>
 <% end %>

config/locales/cac_proofing/en.yml

@@ -3,8 +3,8 @@ en:
   cac_proofing:
     buttons:
       get_started: Get started
-      use_cac: Use your PIV/CAC
-      use_doc_auth: Use your state issued ID
+      use_cac: Use your PIV or CAC
+      use_doc_auth: Use your state-issued ID
     errors:
       does_not_work: Your PIV/CAC could not be processed.  Please try a different
         PIV/CAC or you can verify using your %{link}.
@@ -20,10 +20,14 @@ en:
       verify: Verify your information
       welcome: We need to verify your identity
     info:
-      choose_method: We'll collect information about you by reading from your state-issued
-        ID or PIV/CAC.
+      choose_method: We’ll collect information about you by reading your identification.
+      disclaimer: We do not store the images you upload. We only verify your identity.
+      piv_cac_description: Use a federal government employee ID or military ID (PIV
+        or CAC) for a fast and secure way to verify your identity.
       present_cac: After clicking "Present PIV/CAC" your browser will prompt you for
         your PIV/CAC PIN and have you select a certificate.
+      state_id_description: If you don't have a PIV or CAC, you can use a state-issued
+        ID to verify your identity.
       welcome: We verify your identity to make sure you are you—not someone pretending
         to be you.  Verifying your identity also allows you to access services that
         handle Personal Identifiable Information.

config/locales/cac_proofing/es.yml

@@ -3,8 +3,8 @@ es:
   cac_proofing:
     buttons:
       get_started: Get started
-      use_cac: Usa tu PIV/CAC
-      use_doc_auth: Use su identificación emitida por el estado
+      use_cac: Usa su PIV o CAC
+      use_doc_auth: Usa su identificación del estado
     errors:
       does_not_work: Su PIV/CAC no pudo ser procesado. Por favor, intente con un PIV/CAC
         diferente o puede verificar usando su %{link}.
@@ -19,10 +19,14 @@ es:
       verify: Verify your information
       welcome: We need to verify your identity
     info:
-      choose_method: Recopilaremos información sobre usted mediante la lectura de
-        su identificación emitida por el estado o PIV/CAC.
+      choose_method: Recabaremos información sobre usted al leer su identificación.
+      disclaimer: No almacenamos las imágenes que sube. Solo verificamos su identidad.
+      piv_cac_description: Utilice una identificación de empleado del gobierno federal
+        o militar (PIV o CAC) como una forma rápida y segura de verificar su identidad.
       present_cac: After clicking "Present PIV/CAC" your browser will prompt you for
         your PIV/CAC PIN and have you select a certificate.
+      state_id_description: Si no tiene un PIV o CAC, pude usar una identificación
+        emitida por el estado para verificar su identidad.
       welcome: We verify your identity to make sure you are you—not someone pretending
         to be you.  Verifying your identity also allows you to access services that
         handle Personal Identifiable Information.