From b2a7a29842d024307b6f7d45b7352d30b64d0767 Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Wed, 10 May 2023 09:49:56 +0200
Subject: [PATCH] [PM-2014] feat: Basic list of credentials

---
 .../response/webauthn-credential.response.ts  | 14 +++++++++++++
 .../services/webauthn/webauthn-api.service.ts |  6 ++++++
 .../services/webauthn/webauthn.service.ts     |  6 ++++++
 .../core/views/webauth-credential.view.ts     |  5 +++++
 .../fido2-login-settings.component.html       |  4 ++++
 .../fido2-login-settings.component.ts         | 20 +++++++++++++++----
 6 files changed, 51 insertions(+), 4 deletions(-)
 create mode 100644 apps/web/src/app/auth/core/services/webauthn/response/webauthn-credential.response.ts
 create mode 100644 apps/web/src/app/auth/core/views/webauth-credential.view.ts

diff --git a/apps/web/src/app/auth/core/services/webauthn/response/webauthn-credential.response.ts b/apps/web/src/app/auth/core/services/webauthn/response/webauthn-credential.response.ts
new file mode 100644
index 00000000000..32459d5e2d3
--- /dev/null
+++ b/apps/web/src/app/auth/core/services/webauthn/response/webauthn-credential.response.ts
@@ -0,0 +1,14 @@
+import { BaseResponse } from "@bitwarden/common/models/response/base.response";
+
+export class WebauthnCredentialResponse extends BaseResponse {
+  id: string;
+  name: string;
+  prf: "active" | "inactive" | "unsupported";
+
+  constructor(response: unknown) {
+    super(response);
+    this.id = this.getResponseProperty("id");
+    this.name = this.getResponseProperty("name");
+    this.prf = this.getResponseProperty("prf");
+  }
+}
diff --git a/apps/web/src/app/auth/core/services/webauthn/webauthn-api.service.ts b/apps/web/src/app/auth/core/services/webauthn/webauthn-api.service.ts
index 11fec06962d..c525eda725f 100644
--- a/apps/web/src/app/auth/core/services/webauthn/webauthn-api.service.ts
+++ b/apps/web/src/app/auth/core/services/webauthn/webauthn-api.service.ts
@@ -2,12 +2,14 @@ import { Injectable } from "@angular/core";
 
 import { ApiService } from "@bitwarden/common/abstractions/api.service";
 import { UserVerificationService } from "@bitwarden/common/abstractions/userVerification/userVerification.service.abstraction";
+import { ListResponse } from "@bitwarden/common/models/response/list.response";
 import { Verification } from "@bitwarden/common/types/verification";
 
 import { CoreAuthModule } from "../../core.module";
 
 import { SaveCredentialRequest } from "./request/save-credential.request";
 import { CredentialCreateOptionsResponse } from "./response/credential-create-options.response";
+import { WebauthnCredentialResponse } from "./response/webauthn-credential.response";
 
 @Injectable({ providedIn: CoreAuthModule })
 export class WebauthnApiService {
@@ -28,4 +30,8 @@ export class WebauthnApiService {
     await this.apiService.send("POST", "/webauthn", request, true, true);
     return true;
   }
+
+  getCredentials(): Promise<ListResponse<WebauthnCredentialResponse>> {
+    return this.apiService.send("GET", "/webauthn", null, true, true);
+  }
 }
diff --git a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts b/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts
index 3474af231c8..717cd8cdc9d 100644
--- a/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts
+++ b/apps/web/src/app/auth/core/services/webauthn/webauthn.service.ts
@@ -1,4 +1,5 @@
 import { Injectable, Optional } from "@angular/core";
+import { from, map, Observable } from "rxjs";
 
 import { I18nService } from "@bitwarden/common/abstractions/i18n.service";
 import { LogService } from "@bitwarden/common/abstractions/log.service";
@@ -8,6 +9,7 @@ import { Verification } from "@bitwarden/common/types/verification";
 
 import { CoreAuthModule } from "../../core.module";
 import { CredentialCreateOptionsView } from "../../views/credential-create-options.view";
+import { WebauthnCredentialView } from "../../views/webauth-credential.view";
 
 import { SaveCredentialRequest } from "./request/save-credential.request";
 import { WebauthnAttestationResponseRequest } from "./request/webauthn-attestation-response.request";
@@ -86,4 +88,8 @@ export class WebauthnService {
       return false;
     }
   }
+
+  getCredentials$(): Observable<WebauthnCredentialView[]> {
+    return from(this.apiService.getCredentials()).pipe(map((response) => response.data));
+  }
 }
diff --git a/apps/web/src/app/auth/core/views/webauth-credential.view.ts b/apps/web/src/app/auth/core/views/webauth-credential.view.ts
new file mode 100644
index 00000000000..c89546070f9
--- /dev/null
+++ b/apps/web/src/app/auth/core/views/webauth-credential.view.ts
@@ -0,0 +1,5 @@
+export class WebauthnCredentialView {
+  id: string;
+  name: string;
+  prf: "active" | "inactive" | "unsupported";
+}
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html
index 1dbcdcab2ed..07dc7c12c61 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html
+++ b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html
@@ -6,6 +6,10 @@
   <a bitLink href="???">{{ "learnMoreAboutPasswordless" | i18n }}</a>
 </p>
 
+<ul>
+  <li *ngFor="let credential of credentials$ | async">{{ credential.name }}</li>
+</ul>
+
 <button
   type="button"
   bitButton
diff --git a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts
index 012dd42db69..16e8544a3cc 100644
--- a/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts
+++ b/apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts
@@ -1,8 +1,11 @@
-import { Component } from "@angular/core";
-import { firstValueFrom } from "rxjs";
+import { Component, OnInit } from "@angular/core";
+import { firstValueFrom, Observable } from "rxjs";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
+import { WebauthnService } from "../../core";
+import { WebauthnCredentialView } from "../../core/views/webauth-credential.view";
+
 import {
   CreateCredentialDialogResult,
   openCreateCredentialDialog,
@@ -12,8 +15,17 @@ import {
   selector: "app-fido2-login-settings",
   templateUrl: "fido2-login-settings.component.html",
 })
-export class Fido2LoginSettingsComponent {
-  constructor(private dialogService: DialogServiceAbstraction) {}
+export class Fido2LoginSettingsComponent implements OnInit {
+  protected credentials$: Observable<WebauthnCredentialView[]>;
+
+  constructor(
+    private webauthnService: WebauthnService,
+    private dialogService: DialogServiceAbstraction
+  ) {}
+
+  ngOnInit(): void {
+    this.credentials$ = this.webauthnService.getCredentials$();
+  }
 
   protected async createCredential() {
     const dialogRef = openCreateCredentialDialog(this.dialogService, {});