LG-6114: Use Cleave.js to format personal key (IdV app)

app/javascript/packages/verify-flow/package.json

@@ -2,7 +2,8 @@
   "name": "@18f/identity-verify-flow",
   "version": "1.0.0",
   "private": true,
-  "peerDependencies": {
-    "react": "*"
+  "dependencies": {
+    "react": "^17.0.2",
+    "cleave.js": "^1.6.0"
   }
 }

app/javascript/packages/verify-flow/steps/personal-key-confirm/personal-key-input.spec.tsx

@@ -14,13 +14,12 @@ describe('PersonalKeyInput', () => {
   });
 
   it('accepts a value without dashes', () => {
-    const value = '0000000000000000';
     const { getByRole } = render(<PersonalKeyInput />);
 
     const input = getByRole('textbox') as HTMLInputElement;
-    userEvent.type(input, value);
+    userEvent.type(input, '0000000000000000');
 
-    expect(input.value).to.equal(value);
+    expect(input.value).to.equal('0000-0000-0000-0000');
   });
 
   it('does not accept a code longer than one with dashes', () => {
@@ -31,4 +30,28 @@ describe('PersonalKeyInput', () => {
 
     expect(input.value).to.equal('0000-0000-0000-0000');
   });
+
+  it('formats value as the user types', () => {
+    const { getByRole } = render(<PersonalKeyInput />);
+
+    const input = getByRole('textbox') as HTMLInputElement;
+
+    userEvent.type(input, '1234');
+    expect(input.value).to.equal('1234-');
+
+    userEvent.type(input, '{backspace}');
+    expect(input.value).to.equal('123');
+
+    userEvent.type(input, '4');
+    expect(input.value).to.equal('1234-');
+
+    userEvent.type(input, '-');
+    expect(input.value).to.equal('1234-');
+
+    userEvent.paste(input, '12341234');
+    expect(input.value).to.equal('1234-1234-1234-');
+
+    userEvent.type(input, '12345');
+    expect(input.value).to.equal('1234-1234-1234-1234');
+  });
 });

app/javascript/packages/verify-flow/steps/personal-key-confirm/personal-key-input.tsx

@@ -1,14 +1,18 @@
 import { forwardRef } from 'react';
+import Cleave from 'cleave.js/react';
 import { t } from '@18f/identity-i18n';
 
 function PersonalKeyInput(_props, ref) {
   return (
-    <input
+    <Cleave
+      options={{
+        blocks: [4, 4, 4, 4],
+        delimiter: '-',
+      }}
       ref={ref}
       aria-label={t('forms.personal_key.confirmation_label')}
       autoComplete="off"
-      className="width-full margin-bottom-6 border-dashed field font-family-mono personal-key text-uppercase"
-      maxLength={19}
+      className="width-full margin-bottom-6 field font-family-mono text-uppercase"
       pattern="[a-zA-Z0-9-]"
       spellCheck={false}
       type="text"

app/javascript/packs/formatted-fields.ts

@@ -0,0 +1,27 @@
+import Cleave from 'cleave.js';
+import type { CleaveOptions } from 'cleave.js/options';
+
+const SELECTOR_CONFIGS: Record<string, CleaveOptions> = {
+  '.personal-key': {
+    blocks: [4, 4, 4, 4],
+    delimiter: '-',
+  },
+  '.backup-code': {
+    blocks: [4, 4, 4],
+    delimiter: '-',
+  },
+  '.zipcode': {
+    numericOnly: true,
+    blocks: [5, 4],
+    delimiter: '-',
+    delimiterLazyShow: true,
+  },
+};
+
+for (const [selector, config] of Object.entries(SELECTOR_CONFIGS)) {
+  const element = document.querySelector(selector);
+  if (element) {
+    // eslint-disable-next-line no-new
+    new Cleave(element as HTMLElement, config);
+  }
+}

package.json

@@ -51,6 +51,7 @@
     "@testing-library/react-hooks": "^3.7.0",
     "@testing-library/user-event": "^12.6.0",
     "@types/chai": "^4.3.0",
+    "@types/cleave.js": "^1.4.6",
     "@types/dirty-chai": "^2.0.2",
     "@types/mocha": "^9.1.0",
     "@types/react": "^17.0.39",

yarn.lock

@@ -1233,6 +1233,13 @@
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.3.0.tgz#23509ebc1fa32f1b4d50d6a66c4032d5b8eaabdc"
   integrity sha512-/ceqdqeRraGolFTcfoXNiqjyQhZzbINDngeoAq9GoHa8PPK1yNzTaxWjA6BFWp5Ua9JpXEMSS4s5i9tS0hOJtw==
 
+"@types/cleave.js@^1.4.6":
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/@types/cleave.js/-/cleave.js-1.4.6.tgz#985ae25b3545986789c1adb262b21bb3cd49b2ac"
+  integrity sha512-OVW8lDUfaMa13OkWpH0ydQOB9IMLN9UZP4lBz63xCDZr/b7SqImRlBuzM1+eQb4whGPGGkZBOUe0Q7naOVO2dQ==
+  dependencies:
+    "@types/react" "*"
+
 "@types/connect-history-api-fallback@^1.3.5":
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"