Extract Cleave.js-dependant JavaScript from application pack

.erb-lint.yml

@@ -58,7 +58,9 @@ linters:
       - '*/app/views/users/rules_of_use/*'
       - '*/app/views/users/service_provider_inactive/*'
       - '*/app/views/users/service_provider_revoke/*'
-      - '*/app/views/users/shared/*'
+      - '*/app/views/users/shared/_otp_delivery_preference_selection.html.erb'
+      - '*/app/views/users/shared/_otp_make_default_number.html.erb'
+      - '*/app/views/users/shared/_phone_number_edit.html.erb'
       - '*/app/views/users/totp_setup/*'
       - '*/app/views/users/two_factor_authentication_setup/*'
       - '*/app/views/users/verify_password/*'

app/javascript/packs/application.js

@@ -1,8 +1,6 @@
 require('../app/components/index');
 require('../app/utils/index');
 require('../app/pw-toggle');
-require('../app/form-field-format');
 require('../app/print-personal-key');
 require('../app/i18n-dropdown');
 require('../app/accessible-forms');
-require('../app/ssn-field');

app/javascript/packs/form-validation.js

@@ -3,7 +3,7 @@ import { loadPolyfills } from '@18f/identity-polyfill';
 /** @typedef {{t:(key:string)=>string, key:(key:string)=>string}} LoginGovI18n */
 /** @typedef {{LoginGov:{I18n:LoginGovI18n}}} LoginGovGlobal */
 
-const PATTERN_TYPES = ['dob', 'personal-key', 'ssn', 'state_id_number', 'zipcode'];
+const PATTERN_TYPES = ['personal-key', 'ssn', 'zipcode'];
 
 /**
  * Given a submit event, disables all submit buttons within the target form.
@@ -41,10 +41,8 @@ function checkInputValidity(event) {
   } else if (input.validity.patternMismatch) {
     PATTERN_TYPES.forEach((type) => {
       if (input.classList.contains(type)) {
-        // i18n-tasks-use t('idv.errors.pattern_mismatch.dob')
         // i18n-tasks-use t('idv.errors.pattern_mismatch.personal_key')
         // i18n-tasks-use t('idv.errors.pattern_mismatch.ssn')
-        // i18n-tasks-use t('idv.errors.pattern_mismatch.state_id_number')
         // i18n-tasks-use t('idv.errors.pattern_mismatch.zipcode')
         input.setCustomValidity(I18n.t(`idv.errors.pattern_mismatch.${I18n.key(type)}`));
       }

app/javascript/packs/formatted-fields.js

@@ -0,0 +1,23 @@
+import Cleave from 'cleave.js';
+
+const SELECTOR_CONFIGS = {
+  '.personal-key': {
+    blocks: [4, 4, 4, 4],
+    delimiter: '-',
+  },
+  '.backup-code': {
+    blocks: [4, 4, 4],
+    delimiter: '-',
+  },
+  '.zipcode': {
+    numericOnly: true,
+    blocks: [5, 4],
+    delimiter: '-',
+    delimiterLazyShow: true,
+  },
+};
+
+Object.entries(SELECTOR_CONFIGS)
+  .map(([selector, config]) => [document.querySelector(selector), config])
+  .filter(([element]) => element)
+  .forEach(([element, config]) => new Cleave(element, config));

app/views/idv/address/new.html.erb

@@ -49,3 +49,4 @@
 </div>
 
 <%= render 'idv/doc_auth/back', step: 'verify' %>
+<%= javascript_packs_tag_once('formatted-fields') %>

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

@@ -24,16 +24,7 @@
 ) do |f| %>
   <div class='clearfix margin-x-neg-1'>
     <div class='sm-col sm-col-8 padding-x-1 margin-top-2'>
-      <!-- maxlength set and includes '-' delimiters to work around cleave bug -->
-      <%= f.input(
-        :ssn,
-        as: :password,
-        label: t('idv.form.ssn_label_html'),
-        required: true,
-        pattern: '^\d{3}-?\d{2}-?\d{4}$',
-        maxlength: 11,
-        input_html: { aria: { invalid: false }, class: 'ssn ssn-toggle', value: '' }
-      ) %>
+      <%= render 'shared/ssn_field', f: f %>
     </div>
   </div>
 

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

@@ -17,16 +17,7 @@
 ) do |f| %>
   <div class='clearfix margin-x-neg-1'>
     <div class='sm-col sm-col-8 padding-x-1 margin-top-2'>
-      <!-- maxlength set and includes '-' delimiters to work around cleave bug -->
-      <%= f.input(
-        :ssn,
-        as: :password,
-        label: t('idv.form.ssn_label_html'),
-        required: true,
-        pattern: '^\d{3}-?\d{2}-?\d{4}$',
-        maxlength: 11,
-        input_html: { aria: { invalid: false }, class: 'ssn ssn-toggle', value: '' }
-      ) %>
+      <%= render 'shared/ssn_field', f: f %>
     </div>
   </div>
 
@@ -39,4 +30,3 @@
   </div>
 <% end %>
 <%= render 'idv/doc_auth/back', action: 'cancel_update_ssn' %>
-

app/views/idv/gpo/_new_address.html.erb

@@ -30,3 +30,4 @@
     </button>
   </div>
 <% end %>
+<%= javascript_packs_tag_once('formatted-fields') %>

app/views/partials/backup_code/_entry_fields.html.erb

@@ -9,3 +9,4 @@
                             aria: { invalid: false },
                             spellcheck: 'false' } %>
 </div>
+<%= javascript_packs_tag_once('formatted-fields') %>

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

@@ -11,3 +11,4 @@
                             aria: { invalid: false },
                             spellcheck: 'false' } %>
 </div>
+<%= javascript_packs_tag_once('formatted-fields') %>

app/views/shared/_personal_key_input.html.erb

@@ -8,3 +8,4 @@
        aria-invalid="false"
        spellcheck="false"
        type="text" />
+<%= javascript_packs_tag_once('formatted-fields') %>

app/views/shared/_ssn_field.html.erb

@@ -0,0 +1,16 @@
+<%#
+locals:
+* f: from validated_form_for
+%>
+
+<%# maxlength set and includes '-' delimiters to work around cleave bug %>
+<%= f.input(
+      :ssn,
+      as: :password,
+      label: t('idv.form.ssn_label_html'),
+      required: true,
+      pattern: '^\d{3}-?\d{2}-?\d{4}$',
+      maxlength: 11,
+      input_html: { aria: { invalid: false }, class: 'ssn ssn-toggle', value: '' }
+    ) %>
+<%= javascript_packs_tag_once('ssn-field') %>

config/i18n-tasks.yml

@@ -99,7 +99,6 @@ ignore_unused:
   - 'errors.messages.*'
   - 'forms.two_factor_choice.legend'
   - 'forms.two_factor_recovery_choice.legend'
-  - 'idv.errors.pattern_mismatch.*'
   - 'jobs.sms_otp_sender_job.login_message'
   - 'jobs.sms_otp_sender_job.verify_message'
   - 'service_providers.*'

config/locales/idv/en.yml

@@ -30,11 +30,9 @@ en:
       incorrect_password: The password you entered is not correct.
       mail_limit_reached: You have requested too much mail in the last month.
       pattern_mismatch:
-        dob: Your date of birth must be entered in as mm/dd/yyyy
         personal_key: 'Please enter your personal key for this account. Example:
           ABC1-DEF2-G3HI-J456'
         ssn: 'Your Social Security Number must be entered in as ###-##-####'
-        state_id_number: Your ID number cannot be more than 25 characters.
         zipcode: 'Your zipcode must be entered in as #####-####'
       unsupported_otp_delivery_method: Select a method to receive a code.
     failure:

config/locales/idv/es.yml

@@ -32,11 +32,9 @@ es:
       incorrect_password: La contraseña que ingresó no es correcta.
       mail_limit_reached: Usted ha solicitado demasiado correo en el último mes.
       pattern_mismatch:
-        dob: Su fecha de nacimiento debe ser ingresada en este formato mes/día/año.
         personal_key: 'Introduzca su clave personal para esta cuenta. Ejemplo:
           ABC1-DEF2-G3HI-J456'
         ssn: 'Su número de Seguro Social debe ser ingresado como ### - ## - ####'
-        state_id_number: Su número de ID no puede tener más de 25 caracteres
         zipcode: 'Su código postal debe ser ingresado como #####-####'
       unsupported_otp_delivery_method: Seleccione una manera de recibir un código.
     failure:

config/locales/idv/fr.yml

@@ -34,12 +34,10 @@ fr:
       incorrect_password: Le mot de passe que vous avez inscrit est incorrect.
       mail_limit_reached: Vous avez demandé trop de lettres au cours du dernier mois.
       pattern_mismatch:
-        dob: 'Votre date de naissance doit être inscrite de cette façon: mm/jj/aaaa'
         personal_key: 'Veuillez inscrire votre clé personnelle pour ce compte, par
           exemple : ABC1-DEF2-G3HI-J456'
         ssn: 'Votre numéro de sécurité sociale doit être inscrit de cette façon :
           ###-##-####'
-        state_id_number: Votre numéro d’identification ne peut excéder 25 caractères
         zipcode: 'Votre code ZIP doit être inscrit de cette façon : #####-####'
       unsupported_otp_delivery_method: Sélectionnez une méthode pour recevoir un code.
     failure: