Rewrite registerSecurityKey as ES Module

app/assets/javascripts/esm/all-esm.mjs

@@ -7,6 +7,7 @@ import ColourPreview from './colour-preview.mjs';
 import FileUpload from './file-upload.mjs';
 import Autofocus from './autofocus.mjs';
 import AuthenticateSecurityKey from './authenticate-security-key.mjs';
+import RegisterSecurityKey from './register-security-key.mjs';
 
 // Modules from 3rd party vendors
 import morphdom from 'morphdom';
@@ -43,6 +44,11 @@ if ($authenticateSecurityKey) {
   new AuthenticateSecurityKey($authenticateSecurityKey);
 }
 
+const $registerSecurityKey = document.querySelector('[data-notify-module="register-security-key"]');
+if ($registerSecurityKey) {
+  new RegisterSecurityKey($registerSecurityKey);
+}
+
 const focusBanner = new FocusBanner();
 
 // ES modules do not export to global so in order to

app/assets/javascripts/esm/register-security-key.mjs

@@ -0,0 +1,72 @@
+import { isSupported } from 'govuk-frontend';
+import ErrorBanner from './error-banner.mjs';
+
+// This new way of writing Javascript components is based on the GOV.UK Frontend skeleton Javascript coding standard
+// that uses ES2015 Classes -
+// https://github.com/alphagov/govuk-frontend/blob/main/docs/contributing/coding-standards/js.md#skeleton
+//
+// It replaces the previously used way of setting methods on the component's `prototype`.
+// We use a class declaration way of defining classes -
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class
+//
+// More on ES2015 Classes at https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes
+
+class RegisterSecurityKey {
+  constructor($module) {
+    if (!isSupported()) {
+      return this;
+    }
+    this.registerPath = '/webauthn/register';
+    this.$module = $module;
+
+    this.$module.addEventListener("click", () => {
+      new ErrorBanner().hideBanner();
+      this.getAuthentication();
+    });
+  }
+  getAuthentication() {
+    fetch(this.registerPath)
+      .then((response) => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+
+        return response.arrayBuffer();
+      })
+      .then((data) => {
+        var options = window.CBOR.decode(data);
+        // triggers browser dialogue to select authenticator
+        return window.navigator.credentials.create(options);
+      })
+      .then((credential) => {
+        return this.postWebAuthnCreateResponse(
+          credential.response, this.$module.dataset.csrfToken
+        );
+      })
+      .then((response) => {
+        if (!response.ok) {
+          throw Error(response.statusText);
+        }
+
+        window.location.reload();
+      })
+      .catch((error) => {
+        console.error(error);
+        // some browsers will show an error dialogue for some
+        // errors; to be safe we always display an error message on the page.
+        new ErrorBanner().showBanner();
+      });
+  }
+  postWebAuthnCreateResponse(response, csrf_token) {
+    return fetch(this.registerPath, {
+      method: 'POST',
+      headers: { 'X-CSRFToken': csrf_token },
+      body: window.CBOR.encode({
+        attestationObject: new Uint8Array(response.attestationObject),
+        clientDataJSON: new Uint8Array(response.clientDataJSON),
+      })
+    });
+  }
+}
+
+export default RegisterSecurityKey;

rollup.config.mjs

@@ -99,7 +99,6 @@ export default [
       paths.src + 'javascripts/templateFolderForm.js',
       paths.src + 'javascripts/addBrandingOptionsForm.js',
       paths.src + 'javascripts/setAuthTypeForm.js',
-      paths.src + 'javascripts/registerSecurityKey.js',
       paths.src + 'javascripts/updateStatus.js',
       paths.src + 'javascripts/homepage.js',
       paths.src + 'javascripts/removeInPresenceOf.js',