[EC-598] feat: show unsupported user verification error

apps/browser/src/fido2/popup/fido2/fido2.component.html

@@ -1,6 +1,12 @@
+<!-- TODO: Rewrite and refactor this component when implementing the new design -->
 <ng-container *ngIf="data$ | async as data">
   <div class="auth-wrapper">
     <i class="bwi bwi-spinner bwi-lg bwi-spin" [hidden]="!loading" aria-hidden="true"></i>
+    <ng-container *ngIf="data.showUnsupportedVerification">
+      Password confirmation required by initiating site. Your account does not support password
+      confirmation.
+    </ng-container>
+    <ng-container *ngIf="!data.showUnsupportedVerification">
       <ng-container
         *ngIf="
           data.message.type == 'PickCredentialRequest' ||
@@ -37,11 +43,7 @@
       </ng-container>
       <ng-container *ngIf="data.message.type == 'InformCredentialNotFoundRequest'">
         You do not have a matching login for this site.
-      <div class="box list">
-        <div class="box-content">
-          <app-cipher-row *ngFor="let cipher of ciphers" [cipher]="cipher"></app-cipher-row>
-        </div>
-      </div>
+      </ng-container>
     </ng-container>
     <button type="button" class="btn btn-outline-secondary" (click)="abort(true)">
       Use browser built-in

apps/browser/src/fido2/popup/fido2/fido2.component.ts

@@ -26,6 +26,7 @@ import {
 
 interface ViewData {
   message: BrowserFido2Message;
+  showUnsupportedVerification: boolean;
 }
 
 @Component({
@@ -108,6 +109,12 @@ export class Fido2Component implements OnInit, OnDestroy {
 
         return {
           message,
+          showUnsupportedVerification:
+            (message.type === "ConfirmNewCredentialRequest" ||
+              message.type === "ConfirmNewNonDiscoverableCredentialRequest" ||
+              message.type === "PickCredentialRequest") &&
+            message.userVerification &&
+            !(await this.passwordRepromptService.enabled()),
         };
       }),
       takeUntil(this.destroy$)