Lg 7353 personal key context

app/javascript/packs/personal-key-page-controller.js

@@ -1,16 +1,8 @@
-import { encodeInput } from '@18f/identity-personal-key-input';
 import { trackEvent } from '@18f/identity-analytics';
-import { t } from '@18f/identity-i18n';
-
-const modalSelector = '#personal-key-confirm';
-const modal = new window.LoginGov.Modal({ el: modalSelector });
 
 const personalKeyWords = [].slice.call(document.querySelectorAll('[data-personal-key]'));
-const formEl = document.getElementById('confirm-key');
-const input = formEl.querySelector('input[type="text"]');
-const modalTrigger = document.querySelector('[data-toggle="modal"]');
-const modalDismiss = document.querySelector('[data-dismiss="personal-key-confirm"]');
 const downloadLink = document.querySelector('a[download]');
+const acknowledgmentCheckbox = document.getElementById('acknowledgment');
 
 function scrapePersonalKey() {
   const keywords = [];
@@ -22,43 +14,6 @@ function scrapePersonalKey() {
   return keywords.join('-').toUpperCase();
 }
 
-const personalKey = scrapePersonalKey();
-
-function resetForm() {
-  formEl.reset();
-  input.setCustomValidity('');
-}
-
-function validateInput() {
-  let isValid = false;
-  try {
-    const value = encodeInput(input.value);
-    isValid = value === personalKey;
-  } catch {}
-
-  input.setCustomValidity(isValid ? '' : t('users.personal_key.confirmation_error'));
-}
-
-function show(event) {
-  event.preventDefault();
-
-  modal.on('show', function () {
-    input.focus();
-  });
-
-  trackEvent('IdV: show personal key modal');
-  modal.show();
-}
-
-function hide() {
-  modal.on('hide', function () {
-    resetForm();
-  });
-
-  trackEvent('IdV: hide personal key modal');
-  modal.hide();
-}
-
 function downloadForIE(event) {
   event.preventDefault();
 
@@ -69,16 +24,19 @@ function downloadForIE(event) {
   window.navigator.msSaveBlob(blob, filename);
 }
 
+function trackAcknowledgment(clickEvent) {
+  trackEvent(
+    'IdV: personal key acknowledgment toggled',
+    { checked: clickEvent.target.checked },
+  );
+}
+
 function trackDownload() {
   trackEvent('IdV: download personal key');
 }
 
-if (modalTrigger) {
-  modalTrigger.addEventListener('click', show);
-}
-modalDismiss.addEventListener('click', hide);
-input.addEventListener('input', validateInput);
 downloadLink.addEventListener('click', trackDownload);
+acknowledgmentCheckbox.addEventListener('click', trackAcknowledgment);
 
 if (window.navigator.msSaveBlob) {
   downloadLink.addEventListener('click', downloadForIE);

app/views/partials/personal_key/_key.html.erb

@@ -1,18 +1,42 @@
 <div class="border-y border-primary-light bg-primary-lightest padding-y-3 text-center">
-  <h2 class="margin-y-0">
-    <%= t('users.personal_key.header') %>
-  </h2>
   <div class="bg-personal-key padding-top-4 margin-y-2">
     <div class="personal-key-block">
       <% code.split('-').each do |word| %>
         <% concat(content_tag(:strong, word, class: 'personal-key-block__code', data: { personal_key: '' })) %>
       <% end %>
     </div>
   </div>
-  <p class="margin-y-0">
+  <p class="margin-bottom-105">
     <%= t(
           'users.personal_key.generated_on_html',
           date: content_tag(:strong, I18n.l(Time.zone.today, format: '%B %d, %Y')),
         ) %>
   </p>
+
+  <%= render ClipboardButtonComponent.new(
+        clipboard_text: code,
+        unstyled: true,
+      ) %>
+
+  <%= render ButtonComponent.new(
+        action: ->(**tag_options, &block) do
+          link_to(
+            "data:text/plain;charset=utf-8,#{CGI.escape(code)}",
+            download: 'personal_key.txt',
+            **tag_options,
+            &block
+          )
+        end,
+        icon: :file_download,
+        unstyled: true,
+        class: 'margin-x-2 display-inline-block',
+      ).with_content(t('forms.backup_code.download')) %>
+
+  <%= render PrintButtonComponent.new(
+        icon: :print,
+        unstyled: true,
+        type: :button,
+        class: 'margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
+      ) %>
+
 </div>

app/views/shared/_personal_key.html.erb

@@ -1,51 +1,46 @@
-<%= render PageHeadingComponent.new.with_content(t('headings.personal_key')) %>
-<p>
-  <%= t('instructions.personal_key.info') %>
-</p>
+<%= render PageHeadingComponent.new.with_content(t('forms.personal_key_partial.header')) %>
 <div class="full-width-box margin-y-5">
   <%= render 'partials/personal_key/key', code: code %>
 </div>
-<%= render ButtonComponent.new(
-      action: ->(**tag_options, &block) do
-        link_to(
-          "data:text/plain;charset=utf-8,#{CGI.escape(code)}",
-          download: 'personal_key.txt',
-          **tag_options,
-          &block
-        )
-      end,
-      icon: :file_download,
-      outline: true,
-      class: 'margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
-    ).with_content(t('forms.backup_code.download')) %>
-<%= render PrintButtonComponent.new(
-      icon: :print,
-      outline: true,
-      type: :button,
-      class: 'margin-right-2 margin-bottom-2 tablet:margin-bottom-0',
-    ) %>
-<%= render ClipboardButtonComponent.new(
-      clipboard_text: code,
-      outline: true,
-      class: 'margin-bottom-2 tablet:margin-bottom-0',
-    ) %>
-<div class="margin-y-5 clearfix">
-  <%= image_tag(
-        asset_url('alert/icon-lock-alert-important.svg'),
-        alt: '',
-        size: '80',
-        class: 'float-left margin-right-2',
+
+<%= render AccordionComponent.new do |c| %>
+  <% c.header { t('forms.personal_key_partial.explanation.header') } %>
+  <% t('forms.personal_key_partial.explanation.text').each do |paragraph| %>
+    <p><%= paragraph %></p>
+  <% end %>
+<% end %>
+
+<%= simple_form_for('', url: update_path) do |f| %>
+  <% @acceptance_prompt = capture do %>
+    <p>
+      <strong>
+        <%= t('forms.personal_key_partial.acknowledgement.header') %>
+      </strong>
+    </p>
+    <p class="margin-bottom-0">
+      <%= t('forms.personal_key_partial.acknowledgement.text') %>
+    </p>
+    <ul>
+      <% t('forms.personal_key_partial.acknowledgement.bullets').each do |bullet| %>
+        <li><%= bullet %></li>
+      <% end %>
+    </ul>
+    <p>
+      <%= t('forms.personal_key_partial.acknowledgement.instructions') %>
+    </p>
+  <% end %>
+
+  <%= render ValidatedFieldComponent.new(
+        form: f,
+        name: :acknowledgment,
+        as: :boolean,
+        label: @acceptance_prompt,
+        label_html: { class: 'margin-y-0' },
+        required: true,
       ) %>
-  <p class="margin-bottom-0">
-    <strong><%= t('instructions.personal_key.email_title') %></strong>
-  </p>
-  <p><%= t('instructions.personal_key.email_body') %></p>
-</div>
-<%= button_to(
-      t('forms.buttons.continue'),
-      update_path,
-      class: 'display-block usa-button usa-button--big usa-button--wide personal-key-continue margin-top-5',
-      'data-toggle': FeatureManagement.idv_personal_key_confirmation_enabled? ? 'modal' : 'skip',
-    ) %>
+
+  <%= f.submit(t('forms.buttons.continue'), full_width: true, class: 'margin-top-3') %>
+<% end %>
+
 <%= render 'shared/personal_key_confirmation_modal', code: code, update_path: update_path %>
 <%== javascript_packs_tag_once 'personal-key-page-controller' %>

config/locales/components/es.yml

@@ -35,7 +35,7 @@ es:
     phone_input:
       country_code_label: Código del país
     print_button:
-      label: Imprima esta página
+      label: Imprima
     troubleshooting_options:
       default_heading: '¿Tiene alguna dificultad? Esto es lo que puede hacer:'
       new_feature: Nueva función

config/locales/components/fr.yml

@@ -35,7 +35,7 @@ fr:
     phone_input:
       country_code_label: Code pays
     print_button:
-      label: Imprimer cette page
+      label: Imprimer
     troubleshooting_options:
       default_heading: 'Des difficultés? Voici ce que vous pouvez faire:'
       new_feature: Nouvelle fonction

config/locales/forms/en.yml

@@ -13,7 +13,7 @@ en:
       caution_delete: If you delete your backup codes you will no longer be able to
         use them to sign in.
       confirm_delete: Are you sure you want to delete your backup codes?
-      download: Download
+      download: Download (text file)
       generate: Get codes
       last_code: You used your last backup code. Please print, copy or download the
         codes below. You can use these new codes the next time you sign in.
@@ -68,6 +68,24 @@ en:
       confirmation_label: Personal key
       instructions: Please confirm you have a copy of your personal key by entering it below.
       title: Enter your personal key
+    personal_key_partial:
+      acknowledgement:
+        bullets:
+          - You’ll lose access to your account
+          - You’ll need to verify your identity again
+        header: You need your personal key if you forget your password. Keep it safe and
+          don’t share it with anyone.
+        instructions: Check the box above to continue
+        text: 'If you reset your password without your personal key:'
+      explanation:
+        header: What is a personal key?
+        text:
+          - A personal key “locks” your personal information with your account.
+            It’s the only way to unlock your information if you lose or forget
+            your password.
+          - When you reset your password, Login.gov will ask for your personal
+            key to make sure you are you - not someone pretending to be you.
+      header: Save your personal key
     phone:
       buttons:
         delete: Remove phone

config/locales/forms/es.yml

@@ -14,7 +14,7 @@ es:
       caution_delete: Si elimina sus códigos de respaldo, ya no podrá usarlos para
         iniciar sesión.
       confirm_delete: '¿Estás seguro de que deseas eliminar tus códigos de respaldo?'
-      download: Descargar
+      download: Descargar (archivo de texto)
       generate: Obtener códigos
       last_code: Usted utilizó el último código de seguridad. Imprima, copie o
         descargue los códigos que aparecen a continuación. Puede introducir
@@ -74,6 +74,25 @@ es:
       instructions: Confirme que tiene una copia de su clave personal ingresándola a
         continuación.
       title: Ingrese su clave personal
+    personal_key_partial:
+      acknowledgement:
+        bullets:
+          - Perderás el acceso a tu cuenta
+          - Tendrás que verificar tu identidad nuevamente
+        header: Necesitarás tu clave personal si olvidas tu contraseña. Mantenla en un
+          lugar seguro y no la compartas con nadie.
+        instructions: Marca la casilla de arriba para continuar.
+        text: 'Si restableces tu contraseña sin tu clave personal:'
+      explanation:
+        header: ¿Qué es una clave personal?
+        text:
+          - Una clave personal “bloquea” la información personal de tu cuenta.
+            Es la única manera de desbloquear tu información si pierdes u
+            olvidas tu contraseña.
+          - Si restableces tu contraseña, Login.gov te pedirá tu clave personal
+            para asegurarse de que se trata de ti, y no de alguien que quiere
+            hacerse pasar por ti.
+      header: Guarda tu clave personal
     phone:
       buttons:
         delete: Eliminar el teléfono

config/locales/forms/fr.yml

@@ -15,7 +15,7 @@ fr:
       caution_delete: Si vous supprimez vos codes de sauvegarde, vous ne pourrez plus
         les utiliser pour vous connecter.
       confirm_delete: Êtes-vous sûr de vouloir supprimer vos codes de sauvegarde?
-      download: Télécharger
+      download: Télécharger (fichier texte)
       generate: Obtenir des codes
       last_code: Vous avez utilisé votre dernier code de sauvegarde. Veuillez
         imprimer, copier ou télécharger les codes ci-dessous. Vous pourrez
@@ -75,6 +75,25 @@ fr:
       instructions: Veuillez confirmer que vous avez une copie de votre clé
         personnelle en l’entrant ci-dessous.
       title: Entrez votre clé personnelle
+    personal_key_partial:
+      acknowledgement:
+        bullets:
+          - Vous perdrez l’accès à votre compte
+          - Vous allez devoir vérifier à nouveau votre identité
+        header: En cas d’oubli de votre mot de passe, vous aurez besoin de votre clé
+          personnelle. Gardez-la en sécurité et ne la partagez avec personne.
+        instructions: Cochez la case ci-dessus pour continuer.
+        text: 'Si vous réinitialisez votre mot de passe sans votre clé personnelle:'
+      explanation:
+        header: Qu’est-ce qu’une clé personnelle?
+        text:
+          - Une clé personnelle « verrouille » vos informations personnelles
+            avec votre compte. C’est le seul moyen de déverrouiller vos
+            informations si vous perdez ou oubliez votre mot de passe.
+          - Lors de la réinitialisation de votre mot de passe, Login.gov vous
+            demandera votre clé personnelle pour s’assurer que vous êtes bien
+            vous, et non quelqu’un qui se fait passer pour vous.
+      header: Sauvegardez votre clé personnelle
     phone:
       buttons:
         delete: Supprimer le numéro de teléfono

config/locales/headings/en.yml

@@ -34,7 +34,6 @@ en:
       confirm: Confirm your current password to continue
       confirm_for_personal_key: Enter password and get a new personal key
       forgot: Forgot your password?
-    personal_key: Save your personal key
     piv_cac:
       certificate:
         bad: The PIV/CAC certificate you selected is invalid

config/locales/headings/es.yml

@@ -34,7 +34,6 @@ es:
       confirm: Confirme la contraseña actual para continuar
       confirm_for_personal_key: Introduzca la contraseña y obtenga una nueva clave personal
       forgot: '¿Olvidó su contraseña?'
-    personal_key: Guarda tu clave personal
     piv_cac:
       certificate:
         bad: El certificado PIV/CAC que seleccionaste no es válido.

config/locales/headings/fr.yml

@@ -34,7 +34,6 @@ fr:
       confirm: Confirmez votre mot de passe actuel pour continuer
       confirm_for_personal_key: Entrez le mot de passe et obtenez une nouvelle clé personnelle
       forgot: Vous avez oublié votre mot de passe?
-    personal_key: Enregistrez votre clé personnelle
     piv_cac:
       certificate:
         bad: Le certificat PIV/CAC que vous avez sélectionné n’est pas valide.

config/locales/instructions/en.yml

@@ -102,13 +102,6 @@ en:
         intro: 'Password strength: '
         iv: Good
         v: Great!
-    personal_key:
-      email_body: Don’t lose your personal key or share it with others. We’ll ask for
-        it if you reset your password.
-      email_title: Save it. Keep it safe.
-      info: You’ll need this personal key if you forget your password. If you reset
-        your password and don’t have this key, you’ll have to verify your
-        identity again.
     sp_handoff_bounced: Your sign in was successful, but %{sp_name} sent you back to
       %{app_name}. Please contact %{sp_link} for help.
     sp_handoff_bounced_with_no_sp: your service provider

config/locales/instructions/es.yml

@@ -109,13 +109,6 @@ es:
         intro: 'Seguridad de la contraseña:'
         iv: Buena
         v: '¡Muy buena!'
-    personal_key:
-      email_body: No pierdas tu clave personal ni la compartas con otros. La pediremos
-        si restableces tu contraseña.
-      email_title: Guárdala. Manténla segura.
-      info: Necesitarás esta clave personal si olvidas tu contraseña. Si restableces
-        tu contraseña y no tienes esta clave, deberás verificar tu identidad
-        nuevamente.
     sp_handoff_bounced: Su inicio de sesión fue exitoso, pero %{sp_name} lo envió de
       regreso a %{app_name}. Póngase en contacto con %{sp_link} para obtener
       ayuda.