show error message in banner rather than an alert

the banner is a nicer user experience, and consistent with how we
display errors elsewhere in notify. For now pass through the error
message from JS, but we'll probably want to change that since the erorr
messages themselves are often a bit cryptic and unhelpful

app/assets/javascripts/authenticateSecurityKey.js

@@ -7,6 +7,9 @@
         .on('click', function (event) {
           event.preventDefault();
 
+          // hide any existing error prompt
+          window.GOVUK.ErrorBanner.hideBanner();
+
           fetch('/webauthn/authenticate')
             .then(response => {
               if (!response.ok) {
@@ -67,9 +70,8 @@
             .catch(error => {
               console.error(error);
               // some browsers will show an error dialogue for some
-              // errors; to be safe we always pop up an alert
-              var message = error.message || error;
-              alert('Error during authentication.\n\n' + message);
+              // errors; to be safe we always display an error message on the page.
+              window.GOVUK.ErrorBanner.showBanner('Something went wrong');
             });
         });
     };

app/assets/javascripts/registerSecurityKey.js

@@ -7,6 +7,9 @@
         .on('click', function(event) {
           event.preventDefault();
 
+          // hide any existing error prompt
+          window.GOVUK.ErrorBanner.hideBanner();
+
           fetch('/webauthn/register')
             .then((response) => {
               if (!response.ok) {
@@ -44,9 +47,9 @@
             .catch((error) => {
               console.error(error);
               // some browsers will show an error dialogue for some
-              // errors; to be safe we always pop up an alert
-              var message = error.message || error;
-              alert('Error during registration.\n\n' + message);
+              // errors; to be safe we always display an error message on the page.
+              const message = error.message || error;
+              window.GOVUK.ErrorBanner.showBanner('Something went wrong');
             });
         });
     };

app/templates/views/two-factor-webauthn.html

@@ -21,6 +21,15 @@
 
 {% block maincolumn_content %}
 
+    {{ govukErrorMessage({
+      "classes": "banner-dangerous govuk-!-display-none",
+      "text": "There was a javascript error.",
+      "attributes": {
+        "aria-live": "polite",
+        "tabindex": '-1'
+      }
+    }) }}
+
   <div class="govuk-grid-row">
     <div class="govuk-grid-column-one-half">
       {{ page_header(page_title) }}

app/templates/views/user-profile/security-keys.html

@@ -46,6 +46,16 @@
 {% endset %}
 
   <div class="govuk-grid-row">
+
+    {{ govukErrorMessage({
+      "classes": "banner-dangerous govuk-!-display-none",
+      "text": "There was a javascript error.",
+      "attributes": {
+        "aria-live": "polite",
+        "tabindex": '-1'
+      }
+    }) }}
+
     {% if credentials %}
       <div class="govuk-grid-column-five-sixths">
         {{ page_header(page_title) }}