Merge pull request #750 from bitwarden/feature/webauthn

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

@@ -34,6 +34,19 @@
                 </div>
             </div>
         </ng-container>
+        <ng-container *ngIf="selectedProviderType === providerType.WebAuthn">
+            <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>
+                        <label for="remember">{{'rememberMe' | i18n}}</label>
+                        <input id="remember" type="checkbox" name="Remember" [(ngModel)]="remember">
+                    </div>
+                </div>
+            </div>
+        </ng-container>
         <ng-container *ngIf="selectedProviderType === providerType.Duo ||
                         selectedProviderType === providerType.OrganizationDuo">
             <div id="duo-frame"><iframe id="duo_iframe"></iframe></div>

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"
@@ -1653,5 +1653,8 @@
   },
   "pendingDeletion": {
     "message": "Pending deletion"
+  },
+  "webAuthnAuthenticate": {
+    "message": "Authenticate WebAutn"
   }
 }

src/scss/misc.scss

@@ -213,6 +213,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;