[PM-2014] feat: Basic list of credentials

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");
+  }
+}

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);
+  }
 }

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));
+  }
 }

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";
+}

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

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, {});