Update to use the new WebAuthn iframe

src/app/accounts/two-factor.component.html

@@ -35,14 +35,9 @@
             </div>
         </ng-container>
         <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
-            <div class="content text-center">
-                <span *ngIf="!webAuthnReady" class="text-center"><i class="fa fa-spinner fa-spin"></i></span>
-                <div *ngIf="webAuthnReady">
-                    <p>{{'insertU2f' | i18n}}</p>
-                    <img src="../../images/u2fkey.jpg" alt="" class="img-rounded img-responsive" />
-                </div>
+            <div id="web-authn-frame">
+                <iframe id="webauthn_iframe"></iframe>
             </div>
-
             <div class="box first">
                 <div class="box-content">
                     <div class="box-content-row box-content-row-checkbox" appBoxRow>
@@ -91,4 +86,3 @@
     </div>
 </form>
 <ng-template #twoFactorOptions></ng-template>
-<iframe id="webauthn_iframe" hidden></iframe>

src/locales/en/messages.json

@@ -592,11 +592,11 @@
     "message": "Verify with Duo Security for your organization using the Duo Mobile app, SMS, phone call, or U2F security key.",
     "description": "'Duo Security' and 'Duo Mobile' are product names and should not be translated."
   },
-  "u2fDesc": {
-    "message": "Use any FIDO U2F enabled security key to access your account."
+  "webAuthnTitle": {
+    "message": "FIDO2 WebAuthn"
   },
-  "u2fTitle": {
-    "message": "FIDO U2F Security Key"
+  "webAuthnDesc": {
+    "message": "Use any WebAuthn enabled security key to access your account."
   },
   "emailTitle": {
     "message": "Email"
@@ -1650,5 +1650,8 @@
   },
   "pendingDeletion": {
     "message": "Pending deletion"
+  },
+  "webAuthnAuthenticate": {
+    "message": "Authenticate WebAutn"
   }
 }

src/scss/misc.scss

@@ -221,6 +221,18 @@ p.lead {
     }
 }
 
+#web-authn-frame {
+    background: url('../images/loading.svg') 0 0 no-repeat;
+    height: 250px;
+    margin: 0 0 15px 0;
+
+    iframe {
+        width: 100%;
+        height: 100%;
+        border: none;
+    }
+}
+
 form, .form {
     .form-group {
         margin-bottom: 10px;