LG-3323 Desktop liveness upload page

app/javascript/packages/device/index.js

@@ -17,6 +17,18 @@ export function hasMediaAccess() {
   return 'mediaDevices' in window.navigator;
 }
 
+/**
+ * Returns a boolean promise of whether or not the device has a video input device.
+ *
+ * @return {Promise}
+ */
+export async function hasCamera() {
+  if (hasMediaAccess()) {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    return devices.some((device) => device.kind === 'videoinput');
+  }
+}
+
 /**
  * Returns true if the current device is assumed to be a mobile device where a camera is available,
  * or false otherwise. This is a rough approximation, using device user agent sniffing and

app/javascript/packs/upload-step.js

@@ -0,0 +1,10 @@
+// app/packs/upload-step.js
+import { hasCamera } from '@18f/identity-device';
+
+(async () => {
+  if (await hasCamera()) {
+    document.getElementById('upload-comp-liveness').classList.add('hidden');
+    document.getElementById('upload-comp-liveness-off').classList.remove('hidden');
+    document.getElementById('recommended-tag').classList.remove('hidden');
+  }
+})();

app/views/idv/doc_auth/upload.html.erb

@@ -12,21 +12,18 @@
   <p>
     <%= t('doc_auth.info.upload_liveness_enabled') %>
   </p>
-  <p>
-    <%= t('doc_auth.info.upload_no_image_storage') %>
-  </p>
 <% else %>
   <p>
     <%= t('doc_auth.info.upload') %>
   </p>
 <% end %>
 
-<div class='mt2 mb3'>
-  <%= link_to t('idv.messages.jurisdiction.no_id'), idv_jurisdiction_errors_no_id_path %>
-</div>
+<p>
+  <strong><%= t('doc_auth.info.upload_no_image_storage') %></strong>
+</p>
 
 <% if Figaro.env.cac_proofing_enabled == 'true' && desktop_device? %>
-  <div class='mt2 mb3'>
+  <div class='mt2 mb2'>
     <%= t(
       'doc_auth.info.use_cac_html',
       link: link_to(
@@ -37,6 +34,10 @@
   </div>
 <% end %>
 
+<div class='mt2 mb3'>
+  <%= link_to t('idv.messages.jurisdiction.no_id'), idv_jurisdiction_errors_no_id_path %>
+</div>
+
 <hr/>
 
 <div class='clearfix mt3 mb3'>
@@ -47,7 +48,8 @@
       width: 80,
     ) %>
   </div>
-  <div class='usa-tag caps text-ink bg-primary-lighter margin-top-1 display-inline-block'>
+  <div id="recommended-tag"
+       class='usa-tag caps text-ink bg-primary-lighter margin-top-1 display-inline-block <%= 'hidden' if liveness_checking_enabled? %>'>
     <%= t('doc_auth.info.tag') %>
   </div>
   <div class='sm-col sm-col-9'>
@@ -76,7 +78,8 @@
 <hr/>
 
 <div class='clearfix mt3 mb3'>
-  <div class='sm-col sm-col-12'>
+  <div id="upload-comp-liveness-off"
+    class='sm-col sm-col-12 <%= 'hidden' if liveness_checking_enabled? %>'>
     <%= t('doc_auth.info.upload_from_computer') %>&nbsp;
     <%= simple_form_for(
       :doc_auth,
@@ -89,7 +92,13 @@
       </button>
     <% end %>
   </div>
+  <div id="upload-comp-liveness"
+       class='sm-col sm-col-12 <%= 'hidden' unless liveness_checking_enabled? %>'>
+    <strong><%= t('doc_auth.info.upload_from_computer') %></strong>
+    <%= t('doc_auth.info.upload_from_computer_not_allowed') %>
+  </div>
 </div>
 
 <%= render 'idv/doc_auth/start_over_or_cancel' %>
 <%= javascript_pack_tag 'image-preview' %>
+<%= javascript_pack_tag 'upload-step' %>

config/locales/doc_auth/en.yml

@@ -75,9 +75,10 @@ en:
       take_picture: Use the camera on your mobile phone and upload images of your
         ID.  We only use the images to verify your identity.
       upload: We'll collect information about you by reading your state-issued ID.
-        We do not store images you upload. We only verify your identity.
       upload_computer_link: Upload from your computer
       upload_from_computer: Don't have a phone?
+      upload_from_computer_not_allowed: Sign in to your login.gov account on any device
+        that has a camera, like a tablet or computer with a webcam.
       upload_from_phone: Upload pictures directly from your phone camera
       upload_image: We only use your ID to verify your identity, and we will not save
         any images.  We accept BMP, PNG, TIFF, and JPG formats.
@@ -86,8 +87,8 @@ en:
         are the owner of the ID.
       upload_no_image_storage: We do not store images you upload. We only verify your
         identity.
-      use_cac_html: "<strong>Are you DoD or military?</strong> %{link}"
-      use_cac_link: Use your CAC card instead
+      use_cac_html: Do you have a government employee ID? %{link}
+      use_cac_link: Use a PIV/CAC instead
       welcome: We verify your identity to make sure you are you—not someone pretending
         to be you.  Verifying your identity lets you access services that handle sensitive
         information.

config/locales/doc_auth/es.yml

@@ -81,6 +81,9 @@ es:
         por el estado. No almacenamos imágenes que cargue. Solo verificamos su identidad.
       upload_computer_link: Sube desde tu computadora
       upload_from_computer: "¿No tienes teléfono?"
+      upload_from_computer_not_allowed: Inicie sesión en su cuenta login.gov en cualquier
+        dispositivo que tenga una cámara, como una tableta o computadora con una cámara
+        web.
       upload_from_phone: Sube imágenes directamente desde la cámara de tu teléfono
       upload_image: Solo utilizamos su ID para verificar su identidad y no guardaremos
         ninguna imagen. Aceptamos los formatos BMP, PNG, TIFF y JPG.
@@ -89,8 +92,8 @@ es:
         propietario de la identificación.
       upload_no_image_storage: No almacenamos imágenes que cargue. Solo verificamos
         su identidad.
-      use_cac_html: "<strong>¿Eres DoD o militar?</strong> %{link}"
-      use_cac_link: Use su tarjeta CAC en su lugar
+      use_cac_html: "¿Tiene una identificación de empleado del gobierno? %{link}"
+      use_cac_link: Usa un PIV/CAC en su lugar
       welcome: Verificamos su identidad para asegurarnos de que usted es usted, y
         no alguien que pretende ser usted. Verificar su identidad le permite acceder
         a servicios que manejan información confidencial.

config/locales/doc_auth/fr.yml

@@ -87,6 +87,9 @@ fr:
         Nous vérifions uniquement votre identité.
       upload_computer_link: Téléchargez depuis votre ordinateur
       upload_from_computer: Vous n'avez pas de téléphone?
+      upload_from_computer_not_allowed: Connectez-vous à votre compte login.gov sur
+        n'importe quel appareil équipé d'une caméra, comme une tablette ou un ordinateur
+        avec une webcam.
       upload_from_phone: Téléchargez des images directement depuis l'appareil photo
         de votre téléphone
       upload_image: Nous n'utilisons votre identifiant que pour vérifier votre identité,
@@ -97,8 +100,8 @@ fr:
         une photo de vous pour confirmer que vous êtes le propriétaire de la pièce
         d'identité.
       upload_no_image_storage: Nous ne stockons pas les images que vous téléchargez.
-      use_cac_html: "<strong>Êtes-vous DoD ou militaire?</strong> %{link}"
-      use_cac_link: Utilisez plutôt votre carte CAC
+      use_cac_html: Avez-vous un identifiant d'employé du gouvernement? %{link}
+      use_cac_link: Utilisez plutôt un PIV/CAC
       welcome: Nous vérifions votre identité pour nous assurer que vous êtes bien,
         et non quelqu'un prétendant être vous. La vérification de votre identité vous
         permet d'accéder à des services traitant des informations sensibles.