From b28fc00865d2b852d8153ec2b0ab3f4922ab88c6 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Thu, 27 Apr 2023 13:31:07 +0200
Subject: [PATCH] [EC-598] feat: show unsupported user verification error

---
 .../fido2/popup/fido2/fido2.component.html    | 76 ++++++++++---------
 .../src/fido2/popup/fido2/fido2.component.ts  |  7 ++
 2 files changed, 46 insertions(+), 37 deletions(-)

diff --git a/apps/browser/src/fido2/popup/fido2/fido2.component.html b/apps/browser/src/fido2/popup/fido2/fido2.component.html
index 7ddb13601c4..6afb62801c2 100644
--- a/apps/browser/src/fido2/popup/fido2/fido2.component.html
+++ b/apps/browser/src/fido2/popup/fido2/fido2.component.html
@@ -1,47 +1,49 @@
+<!-- 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.message.type == 'PickCredentialRequest' ||
-        data.message.type == 'ConfirmNewNonDiscoverableCredentialRequest'
-      "
-    >
-      A site is asking for authentication, please choose one of the following credentials to use:
-      <div class="box list">
-        <div class="box-content">
-          <app-cipher-row
-            *ngFor="let cipher of ciphers"
-            [cipher]="cipher"
-            (onSelected)="pick(cipher)"
-          ></app-cipher-row>
-        </div>
-      </div>
+    <ng-container *ngIf="data.showUnsupportedVerification">
+      Password confirmation required by initiating site. Your account does not support password
+      confirmation.
     </ng-container>
-    <ng-container *ngIf="data.message.type == 'ConfirmNewCredentialRequest'">
-      A site wants to create the following passkey in your vault
-      <div class="box list">
-        <div class="box-content">
-          <app-cipher-row [cipher]="ciphers[0]"></app-cipher-row>
+    <ng-container *ngIf="!data.showUnsupportedVerification">
+      <ng-container
+        *ngIf="
+          data.message.type == 'PickCredentialRequest' ||
+          data.message.type == 'ConfirmNewNonDiscoverableCredentialRequest'
+        "
+      >
+        A site is asking for authentication, please choose one of the following credentials to use:
+        <div class="box list">
+          <div class="box-content">
+            <app-cipher-row
+              *ngFor="let cipher of ciphers"
+              [cipher]="cipher"
+              (onSelected)="pick(cipher)"
+            ></app-cipher-row>
+          </div>
         </div>
-      </div>
-      <button type="button" class="btn btn-outline-secondary" (click)="confirm()">Create</button>
-    </ng-container>
-    <ng-container *ngIf="data.message.type == 'InformExcludedCredentialRequest'">
-      A passkey already exists in Bitwarden for this account
-      <div class="box list">
-        <div class="box-content">
-          <app-cipher-row *ngFor="let cipher of ciphers" [cipher]="cipher"></app-cipher-row>
+      </ng-container>
+      <ng-container *ngIf="data.message.type == 'ConfirmNewCredentialRequest'">
+        A site wants to create the following passkey in your vault
+        <div class="box list">
+          <div class="box-content">
+            <app-cipher-row [cipher]="ciphers[0]"></app-cipher-row>
+          </div>
         </div>
-      </div>
-    </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>
+        <button type="button" class="btn btn-outline-secondary" (click)="confirm()">Create</button>
+      </ng-container>
+      <ng-container *ngIf="data.message.type == 'InformExcludedCredentialRequest'">
+        A passkey already exists in Bitwarden for this account
+        <div class="box list">
+          <div class="box-content">
+            <app-cipher-row *ngFor="let cipher of ciphers" [cipher]="cipher"></app-cipher-row>
+          </div>
         </div>
-      </div>
+      </ng-container>
+      <ng-container *ngIf="data.message.type == 'InformCredentialNotFoundRequest'">
+        You do not have a matching login for this site.
+      </ng-container>
     </ng-container>
     <button type="button" class="btn btn-outline-secondary" (click)="abort(true)">
       Use browser built-in
diff --git a/apps/browser/src/fido2/popup/fido2/fido2.component.ts b/apps/browser/src/fido2/popup/fido2/fido2.component.ts
index 9e48b55a100..7cd1616dcbf 100644
--- a/apps/browser/src/fido2/popup/fido2/fido2.component.ts
+++ b/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$)