[PM-2014] feat: finish up list UI

apps/web/src/app/auth/core/services/webauthn/response/webauthn-credential.response.ts

@@ -3,12 +3,12 @@ import { BaseResponse } from "@bitwarden/common/models/response/base.response";
 export class WebauthnCredentialResponse extends BaseResponse {
   id: string;
   name: string;
-  prf: "active" | "inactive" | "unsupported";
+  prfSupport: boolean;
 
   constructor(response: unknown) {
     super(response);
     this.id = this.getResponseProperty("id");
     this.name = this.getResponseProperty("name");
-    this.prf = this.getResponseProperty("prf");
+    this.prfSupport = this.getResponseProperty("prfSupport");
   }
 }

apps/web/src/app/auth/core/views/webauth-credential.view.ts

@@ -1,5 +1,5 @@
 export class WebauthnCredentialView {
   id: string;
   name: string;
-  prf: "active" | "inactive" | "unsupported";
+  prfSupport: boolean;
 }

apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.html

@@ -1,21 +1,53 @@
 <h2 bitTypography="h2">
-  {{ "loginWithPasskey" | i18n }} <span bitBadge badgeType="secondary">Not implemented</span>
-  <i *ngIf="loading" class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+  {{ "loginWithPasskey" | i18n }}
+  <ng-container *ngIf="hasData">
+    <span *ngIf="hasCredentials" bitBadge badgeType="success">{{ "on" | i18n }}</span>
+    <span *ngIf="!hasCredentials" bitBadge badgeType="secondary">{{ "off" | i18n }}</span>
+  </ng-container>
+  <ng-container *ngIf="loading">
+    <i class="bwi bwi-spinner bwi-spin tw-ml-1" aria-hidden="true"></i>
+  </ng-container>
 </h2>
 <p bitTypography="body1">
   {{ "loginWithPasskeyInfo" | i18n }}
   <a bitLink href="???">{{ "learnMoreAboutPasswordless" | i18n }}</a>
 </p>
 
-<ul>
-  <li *ngFor="let credential of credentials$ | async">{{ credential.name }}</li>
-</ul>
+<table *ngIf="hasCredentials" class="tw-mb-5">
+  <tr *ngFor="let credential of credentials">
+    <td class="tw-p-2 tw-pl-0 tw-font-semibold">{{ credential.name }}</td>
+    <td class="tw-p-2 tw-pr-0">
+      <ng-container *ngIf="credential.prfSupport">
+        <i class="bwi bwi-lock-encrypted"></i>
+        {{ "supportsEncryption" | i18n }}
+      </ng-container>
+      <ng-container *ngIf="!credential.prfSupport">-</ng-container>
+    </td>
+    <td class="tw-py-2 tw-pl-20 tw-pr-0">
+      <button type="button" bitLink [disabled]="loading">{{ "remove" | i18n }}</button>
+    </td>
+  </tr>
+</table>
 
-<button
-  type="button"
-  bitButton
-  [attr.aria-label]="'enableLoginWithPasskey' | i18n"
-  (click)="createCredential()"
->
-  {{ "enable" | i18n }}
-</button>
+<ng-container *ngIf="hasData">
+  <button
+    *ngIf="hasCredentials"
+    type="button"
+    bitButton
+    [disabled]="loading"
+    (click)="createCredential()"
+  >
+    {{ "newPasskey" | i18n }}
+  </button>
+
+  <button
+    *ngIf="!hasCredentials"
+    type="button"
+    bitButton
+    [attr.aria-label]="'enableLoginWithPasskey' | i18n"
+    [disabled]="loading"
+    (click)="createCredential()"
+  >
+    {{ "enable" | i18n }}
+  </button>
+</ng-container>

apps/web/src/app/auth/settings/fido2-login-settings/fido2-login-settings.component.ts

@@ -1,5 +1,5 @@
 import { Component, HostBinding, OnDestroy, OnInit } from "@angular/core";
-import { Observable, Subject, takeUntil } from "rxjs";
+import { Subject, takeUntil } from "rxjs";
 
 import { DialogServiceAbstraction } from "@bitwarden/angular/services/dialog";
 
@@ -18,7 +18,7 @@ import { openCreateCredentialDialog } from "./create-credential-dialog/create-cr
 export class Fido2LoginSettingsComponent implements OnInit, OnDestroy {
   private destroy$ = new Subject<void>();
 
-  protected credentials$: Observable<WebauthnCredentialView[]>;
+  protected credentials?: WebauthnCredentialView[];
   protected loading = true;
 
   constructor(
@@ -31,8 +31,18 @@ export class Fido2LoginSettingsComponent implements OnInit, OnDestroy {
     return this.loading ? "true" : "false";
   }
 
+  get hasCredentials() {
+    return this.credentials && this.credentials.length > 0;
+  }
+
+  get hasData() {
+    return this.credentials !== undefined;
+  }
+
   ngOnInit(): void {
-    this.credentials$ = this.webauthnService.credentials$;
+    this.webauthnService.credentials$
+      .pipe(takeUntil(this.destroy$))
+      .subscribe((credentials) => (this.credentials = credentials));
 
     this.webauthnService.loading$
       .pipe(takeUntil(this.destroy$))

apps/web/src/locales/en/messages.json

@@ -664,6 +664,9 @@
   "customPasskeyNameInfo": {
     "message": "Name your passkey to help you identify it."
   },
+  "supportsEncryption": {
+    "message": "supports encryption"
+  },
   "tryAgain": {
     "message": "Try again"
   },
@@ -5759,6 +5762,9 @@
   "on": {
     "message": "On"
   },
+  "off": {
+    "message": "Off"
+  },
   "members": {
     "message": "Members"
   },