From 302876b2f744673c265f24493f438b3355238d5d Mon Sep 17 00:00:00 2001
From: Andreas Coroiu <andreas.coroiu@gmail.com>
Date: Fri, 5 May 2023 09:05:50 +0200
Subject: [PATCH] [PM-2014] feat: add icons and other content

---
 .../create-credential-dialog.component.html   | 28 +++++++++++++++++--
 .../create-credential-dialog.component.ts     |  6 ++++
 .../create-passkey-failed.icon.ts             | 28 +++++++++++++++++++
 .../create-passkey.icon.ts                    | 26 +++++++++++++++++
 apps/web/src/locales/en/messages.json         | 12 ++++++++
 5 files changed, 97 insertions(+), 3 deletions(-)
 create mode 100644 apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey-failed.icon.ts
 create mode 100644 apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey.icon.ts

diff --git a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
index d4c57c7183..9b3691ee2e 100644
--- a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
+++ b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.html
@@ -4,7 +4,7 @@
       >{{ "loginWithPasskey" | i18n }}
       <span class="tw-text-sm tw-normal-case tw-text-muted">{{ "newPasskey" | i18n }}</span>
     </span>
-    <span bitDialogContent>
+    <ng-container bitDialogContent>
       <ng-container *ngIf="currentStep === 'userVerification'">
         <p bitTypography="body1">
           {{ "passkeyEnterMasterPassword" | i18n }}
@@ -16,7 +16,22 @@
           <bit-hint>{{ "confirmIdentity" | i18n }}</bit-hint>
         </bit-form-field>
       </ng-container>
-    </span>
+
+      <div *ngIf="currentStep === 'credentialCreation'" class="tw-flex tw-flex-col tw-items-center">
+        <bit-icon [icon]="Icons.CreatePasskeyIcon" class="tw-mb-6"></bit-icon>
+        <h3 bitTypography="h3">{{ "readingPasskeyLoading" | i18n }}</h3>
+        <p bitTypography="body1">{{ "readingPasskeyLoadingInfo" | i18n }}</p>
+      </div>
+
+      <div
+        *ngIf="currentStep === 'credentialCreationFailed'"
+        class="tw-flex tw-flex-col tw-items-center"
+      >
+        <bit-icon [icon]="Icons.CreatePasskeyFailedIcon" class="tw-mb-6"></bit-icon>
+        <h3 bitTypography="h3">{{ "errorReadingPasskey" | i18n }}</h3>
+        <p bitTypography="body1">{{ "errorReadingPasskeyInfo" | i18n }}</p>
+      </div>
+    </ng-container>
     <ng-container bitDialogFooter>
       <button type="submit" bitButton bitFormButton buttonType="primary">
         <ng-container *ngIf="currentStep === 'userVerification'">
@@ -32,7 +47,14 @@
           {{ "turnOn" | i18n }}
         </ng-container>
       </button>
-      <button type="button" bitButton bitFormButton buttonType="secondary">
+      <button
+        type="button"
+        bitButton
+        bitFormButton
+        buttonType="secondary"
+        bitDialogClose
+        [bit-dialog-close]="CreateCredentialDialogResult.Canceled"
+      >
         {{ "cancel" | i18n }}
       </button>
     </ng-container>
diff --git a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
index 3740b9f52b..d959de1ebb 100644
--- a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
+++ b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-credential-dialog.component.ts
@@ -4,6 +4,9 @@ import { FormBuilder, Validators } from "@angular/forms";
 
 import { DialogService } from "@bitwarden/components";
 
+import { CreatePasskeyFailedIcon } from "./create-passkey-failed.icon";
+import { CreatePasskeyIcon } from "./create-passkey.icon";
+
 export enum CreateCredentialDialogResult {
   Success,
   Canceled,
@@ -19,6 +22,9 @@ type Step =
   templateUrl: "create-credential-dialog.component.html",
 })
 export class CreateCredentialDialogComponent {
+  protected readonly CreateCredentialDialogResult = CreateCredentialDialogResult;
+  protected readonly Icons = { CreatePasskeyIcon, CreatePasskeyFailedIcon };
+
   protected currentStep: Step = "userVerification";
   protected formGroup = this.formBuilder.group({
     userVerification: this.formBuilder.group({
diff --git a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey-failed.icon.ts b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey-failed.icon.ts
new file mode 100644
index 0000000000..39a2389c5a
--- /dev/null
+++ b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey-failed.icon.ts
@@ -0,0 +1,28 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const CreatePasskeyFailedIcon = svgIcon`
+<svg xmlns="http://www.w3.org/2000/svg" width="163" height="115" fill="none">
+  <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.46H9v22h22v-22Zm-24-2v26h26v-26H7Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M0 43.46a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.205a4 4 0 0 1-1 2.645L4 91.475v17.985h32V91.475l-1.572-1.783a4 4 0 0 1-1-2.645V64.842a4 4 0 0 1 .867-2.486L36 60.207V56.46h4v3.747a4 4 0 0 1-.867 2.487l-1.704 2.148v22.205L39 88.83a4 4 0 0 1 1 2.645v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.475a4 4 0 0 1 1-2.645l1.571-1.783V64.842L.867 62.694A4 4 0 0 1 0 60.207V43.46Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M19.74 63.96a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.353V77.56c2.585 1.188 4.407 3.814 4.407 6.865 0 4.183-3.357 7.534-7.5 7.534-4.144 0-7.5-3.376-7.5-7.534a7.546 7.546 0 0 1 4.478-6.894v-1.443a.5.5 0 0 1 .146-.353l1.275-1.281-1.322-1.33a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.352v-1.114a.5.5 0 0 1 .145-.352l2.357-2.369a.5.5 0 0 1 .355-.147Zm-1.856 3.075v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .705l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.095c0 3.61 2.913 6.534 6.5 6.534 3.588 0 6.5-2.901 6.5-6.534 0-2.749-1.707-5.105-4.095-6.074a.5.5 0 0 1-.312-.463V67.532L19.74 65.17l-1.857 1.866ZM20 85.623a1.27 1.27 0 0 0-1.268 1.276c0 .702.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.623Zm-2.268 1.276A2.27 2.27 0 0 1 20 84.623a2.27 2.27 0 0 1 2.268 2.276c0 1.269-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM57.623 114a1 1 0 0 1 1-1h63.048a1 1 0 0 1 0 2H58.623a1 1 0 0 1-1-1Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M78.022 114V95.654h2V114h-2ZM98.418 114V95.654h2V114h-2Z" clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M16 14.46c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.477 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M25 15.46a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500"
+    d="M104.269 32.86a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.407.75 3.597a13.22 13.22 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.516 1.612.862 2.007 1.043.394.181.714.326.95.42.18.083.373.128.583.128.21 0 .403-.041.582-.128.241-.099.557-.239.956-.42.394-.181 1.064-.532 2.006-1.043a36.595 36.595 0 0 0 2.712-1.636c.867-.576 1.813-1.302 2.838-2.171a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.166 9.19 9.19 0 0 0 .749-3.597V33.812c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V35.93h10.593v14.228Z" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.46h-5v-2h5v2ZM27 24.46h-5v-2h5v2Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-danger-500"
+    d="M51.066 66.894a2.303 2.303 0 0 1-2.455-.5l-10.108-9.797L28.375 66.4l-.002.002a2.294 2.294 0 0 1-3.185.005 2.24 2.24 0 0 1-.506-2.496c.117-.27.286-.518.503-.728l10.062-9.737-9.945-9.623a2.258 2.258 0 0 1-.698-1.6c-.004-.314.06-.619.176-.894a2.254 2.254 0 0 1 1.257-1.222 2.305 2.305 0 0 1 1.723.014c.267.11.518.274.732.486l10.01 9.682 9.995-9.688.009-.008a2.292 2.292 0 0 1 3.159.026c.425.411.68.98.684 1.59a2.242 2.242 0 0 1-.655 1.6l-.01.01-9.926 9.627 10.008 9.7.029.027a2.237 2.237 0 0 1 .53 2.496l-.002.004a2.258 2.258 0 0 1-1.257 1.222Z" />
+</svg>
+`;
diff --git a/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey.icon.ts b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey.icon.ts
new file mode 100644
index 0000000000..c0e984bbee
--- /dev/null
+++ b/apps/web/src/app/settings/fido2-login-settings/create-credential-dialog/create-passkey.icon.ts
@@ -0,0 +1,26 @@
+import { svgIcon } from "@bitwarden/components";
+
+export const CreatePasskeyIcon = svgIcon`
+<svg xmlns="http://www.w3.org/2000/svg" width="163" height="116" fill="none">
+  <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M31 19.58H9v22h22v-22Zm-24-2v26h26v-26H7Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M0 43.58a4 4 0 0 1 4-4h32a4 4 0 0 1 4 4v7h-4v-7H4v16.747l1.705 2.149a4 4 0 0 1 .866 2.486v22.204a4 4 0 0 1-1 2.646L4 91.595v17.985h32V91.595l-1.572-1.783a4 4 0 0 1-1-2.646V64.962a4 4 0 0 1 .867-2.486L36 60.327V56.58h4v3.747a4 4 0 0 1-.867 2.486l-1.704 2.149v22.204L39 88.95a4 4 0 0 1 1 2.646v17.985a4 4 0 0 1-4 4H4a4 4 0 0 1-4-4V91.595a4 4 0 0 1 1-2.646l1.571-1.783V64.962L.867 62.813A4 4 0 0 1 0 60.327V43.58Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M19.74 64.08a.5.5 0 0 1 .355.147l2.852 2.866a.5.5 0 0 1 .146.352V77.68c2.585 1.189 4.407 3.814 4.407 6.865 0 4.183-3.357 7.535-7.5 7.535-4.144 0-7.5-3.377-7.5-7.535a7.546 7.546 0 0 1 4.478-6.894V76.21a.5.5 0 0 1 .146-.353l1.275-1.282-1.322-1.329a.5.5 0 0 1 0-.705l.332-.334-.262-.263a.5.5 0 0 1-.005-.7l1.332-1.377-1.445-1.452a.5.5 0 0 1-.145-.353v-1.113a.5.5 0 0 1 .145-.353l2.357-2.368a.5.5 0 0 1 .355-.147Zm-1.856 3.074v.7l1.645 1.654a.5.5 0 0 1 .005.7l-1.332 1.377.267.268a.5.5 0 0 1 0 .706l-.333.334 1.323 1.329a.5.5 0 0 1 0 .705l-1.48 1.488v1.57a.5.5 0 0 1-.32.466 6.545 6.545 0 0 0-4.159 6.094c0 3.61 2.913 6.535 6.5 6.535 3.588 0 6.5-2.902 6.5-6.535 0-2.748-1.707-5.104-4.095-6.073a.5.5 0 0 1-.312-.463V67.651l-2.352-2.364-1.857 1.866ZM20 85.742a1.27 1.27 0 0 0-1.268 1.277c0 .701.56 1.276 1.268 1.276.712 0 1.268-.555 1.268-1.276A1.27 1.27 0 0 0 20 85.742Zm-2.268 1.277A2.27 2.27 0 0 1 20 84.742a2.27 2.27 0 0 1 2.268 2.277c0 1.268-1 2.276-2.268 2.276a2.27 2.27 0 0 1-2.268-2.276ZM41.796 42.844a1 1 0 0 1 1.413.058l5.526 6A1 1 0 0 1 48 50.58H27a1 1 0 1 1 0-2h18.72l-3.982-4.323a1 1 0 0 1 .058-1.413ZM33.315 62.315a1 1 0 0 1-1.413-.058l-5.526-6a1 1 0 0 1 .735-1.677h21a1 1 0 1 1 0 2h-18.72l3.982 4.322a1 1 0 0 1-.058 1.413ZM57.623 114.12a1 1 0 0 1 1-1h63.048a1 1 0 1 1 0 2H58.623a1 1 0 0 1-1-1Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M78.022 114.12V95.774h2v18.346h-2ZM98.418 114.12V95.774h2v18.346h-2Z" clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M16 14.58c0-7.732 6.268-14 14-14h119c7.732 0 14 6.268 14 14v68c0 7.732-6.268 14-14 14H39.5v-4H149c5.523 0 10-4.478 10-10v-68c0-5.523-4.477-10-10-10H30c-5.523 0-10 4.477-10 10v5h-4v-5Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd"
+    d="M25 15.58a6 6 0 0 1 6-6h117a6 6 0 0 1 6 6v66a6 6 0 0 1-6 6H36.5v-2H148a4 4 0 0 0 4-4v-66a4 4 0 0 0-4-4H31a4 4 0 0 0-4 4v3h-2v-3Z"
+    clip-rule="evenodd" />
+  <path class="tw-fill-secondary-500"
+    d="M104.269 32.98a1.42 1.42 0 0 0-1.007-.4h-25.83c-.39 0-.722.132-1.007.4a1.26 1.26 0 0 0-.425.947v16.199c0 1.207.25 2.406.75 3.597a13.222 13.222 0 0 0 1.861 3.165c.74.919 1.62 1.817 2.646 2.69a30.93 30.93 0 0 0 2.834 2.172c.868.577 1.77 1.121 2.712 1.636.942.515 1.612.861 2.007 1.043.394.18.714.325.95.42.18.082.373.128.583.128.21 0 .403-.042.582-.128.241-.099.557-.24.956-.42.394-.182 1.064-.532 2.006-1.043a36.56 36.56 0 0 0 2.712-1.636c.867-.577 1.813-1.302 2.838-2.172a19.943 19.943 0 0 0 2.646-2.69 13.24 13.24 0 0 0 1.862-3.165c.5-1.187.749-2.386.749-3.597V33.93c.005-.367-.14-.684-.425-.952Zm-3.329 17.298c0 5.864-10.593 10.916-10.593 10.916V36.049h10.593v14.23Z" />
+  <path class="tw-fill-secondary-500" fill-rule="evenodd" d="M18 24.58h-5v-2h5v2ZM27 24.58h-5v-2h5v2Z"
+    clip-rule="evenodd" />
+</svg>
+`;
diff --git a/apps/web/src/locales/en/messages.json b/apps/web/src/locales/en/messages.json
index b4926ac744..4b11fc9a01 100644
--- a/apps/web/src/locales/en/messages.json
+++ b/apps/web/src/locales/en/messages.json
@@ -643,6 +643,18 @@
   "passkeyEnterMasterPassword": {
     "message": "Enter your master password to modify log in with passkey settings."
   },
+  "readingPasskeyLoading": {
+    "message": "Reading passkey..."
+  },
+  "readingPasskeyLoadingInfo": {
+    "message": "Keep this window open and follow prompts from your browser."
+  },
+  "errorReadingPasskey": {
+    "message": "Error reading passkey"
+  },
+  "errorReadingPasskeyInfo": {
+    "message": "There was a problem reading your passkey."
+  },
   "tryAgain": {
     "message": "Try again"
   },