AC-9437: 2FA U2F screens need error handling when not available

Author: nathanjosiah

TwoFactorAuth/view/adminhtml/web/js/u2fkey/auth.js

@@ -84,6 +84,10 @@ define([
          */
         waitForTouch: function () {
             this.idle(false);
+            if (!navigator.credentials) {
+                this.currentStep("no-webauthn");
+                return;
+            }
             navigator.credentials.get({
                 publicKey: this.authenticateData.credentialRequestOptions
             })

TwoFactorAuth/view/adminhtml/web/js/u2fkey/configure.js

@@ -78,6 +78,10 @@ define([
          */
         waitForTouch: function () {
             this.idle(false);
+            if (!navigator.credentials) {
+                this.currentStep("no-webauthn");
+                return;
+            }
             navigator.credentials.create({
                 publicKey: this.registerData.publicKey
             })

TwoFactorAuth/view/adminhtml/web/template/u2fkey/auth.html

@@ -27,6 +27,10 @@ <h3 translate="'Plug in your U2F key and follow instructions'"></h3>
         </div>
         <div translate="'Redirecting to Magento Admin Panel...'"></div>
     </div>
+    <div visible='currentStep() === "no-webauthn"'
+         translate="'Error! Your browser does not support WebAuthn or you are not using a secure connection'"
+    >
+    </div>
     <div visible='$data.loading' class="tfa-waitbox">
         <div data-role="spinner">
             <div class="spinner">

TwoFactorAuth/view/adminhtml/web/template/u2fkey/configure.html

@@ -27,6 +27,10 @@ <h3 translate="'Plug in your U2F key and follow instructions'"></h3>
         </div>
         <div translate="'Redirecting to Magento Admin Panel...'"></div>
     </div>
+    <div visible='currentStep() === "no-webauthn"'
+         translate="'Error! Your browser does not support WebAuthn or you are not using a secure connection'"
+    >
+    </div>
     <div visible='$data.loading' class="tfa-waitbox">
         <div data-role="spinner">
             <div class="spinner">