From 1b12836784cb7338075f769c3d661cf5835dbaed Mon Sep 17 00:00:00 2001
From: Jeffrey Holland <124393578+jholland-livefront@users.noreply.github.com>
Date: Tue, 27 May 2025 16:21:57 +0200
Subject: [PATCH] Adjust spacing to place new login button below other items
 (#14877)

* Adjust spacing to place new login button below other items

* Add correct design when no credentials available (#14879)
---
 .../credentials/fido2-create.component.html   | 57 ++++++++++++-------
 .../credentials/fido2-create.component.ts     |  3 +
 apps/desktop/src/locales/en/messages.json     |  6 ++
 3 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
index c52c5db16e9..7451a7c686e 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.html
@@ -1,4 +1,4 @@
-<div class="tw-flex tw-flex-col tw-h-full">
+<div class="tw-flex tw-flex-col tw-h-full tw-bg-background-alt">
   <bit-section
     disableMargin
     class="passkey-header-sticky tw-border-0 tw-border-b tw-border-solid tw-border-secondary-300"
@@ -24,25 +24,42 @@
     </bit-section-header>
   </bit-section>
 
-  <bit-section class="tw-bg-background-alt tw-p-4 tw-flex tw-flex-col tw-grow">
-    <bit-item *ngFor="let c of ciphers$ | async" class="">
-      <button type="button" bit-item-content (click)="addPasskeyToCipher(c)">
-        <app-vault-icon [cipher]="c" slot="start"></app-vault-icon>
-        <button bitLink [title]="c.name" type="button">
-          {{ c.name }}
+  <bit-section class="tw-bg-background-alt tw-p-4 tw-flex tw-flex-col">
+    <div *ngIf="(ciphers$ | async)?.length === 0; else hasCiphers">
+      <div class="tw-flex tw-items-center tw-flex-col tw-p-12 tw-gap-4">
+        <bit-icon [icon]="fido2PasskeyExistsIcon"></bit-icon>
+        <div class="tw-flex tw-flex-col tw-gap-2">
+          {{ "noMatchingLoginsForSite" | i18n }}
+        </div>
+        <button bitButton type="button" buttonType="primary" (click)="confirmPasskey()">
+          {{ "savePasskeyNewLogin" | i18n }}
         </button>
-        <span slot="secondary">{{ c.subTitle }}</span>
-        <span bitBadge slot="end">Save</span>
-      </button>
-    </bit-item>
-  </bit-section>
-  <bit-section class="tw-bg-background-alt tw-p-4">
-    <bit-item class="">
-      <button bitLink linkType="primary" type="button" bit-item-content (click)="confirmPasskey()">
-        <a bitLink linkType="primary" class="tw-font-medium tw-text-base">
-          {{ "saveNewPasskey" | i18n }}
-        </a>
-      </button>
-    </bit-item>
+      </div>
+    </div>
+    <ng-template #hasCiphers>
+      <bit-item *ngFor="let c of ciphers$ | async" class="">
+        <button type="button" bit-item-content (click)="addPasskeyToCipher(c)">
+          <app-vault-icon [cipher]="c" slot="start"></app-vault-icon>
+          <button bitLink [title]="c.name" type="button">
+            {{ c.name }}
+          </button>
+          <span slot="secondary">{{ c.subTitle }}</span>
+          <span bitBadge slot="end">Save</span>
+        </button>
+      </bit-item>
+      <bit-item class="">
+        <button
+          bitLink
+          linkType="primary"
+          type="button"
+          bit-item-content
+          (click)="confirmPasskey()"
+        >
+          <a bitLink linkType="primary" class="tw-font-medium tw-text-base">
+            {{ "saveNewPasskey" | i18n }}
+          </a>
+        </button>
+      </bit-item>
+    </ng-template>
   </bit-section>
 </div>
diff --git a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
index db5b49afb62..bfdffb3005a 100644
--- a/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
+++ b/apps/desktop/src/autofill/modal/credentials/fido2-create.component.ts
@@ -32,6 +32,8 @@ import {
   DesktopFido2UserInterfaceSession,
 } from "../../services/desktop-fido2-user-interface.service";
 
+import { Fido2PasskeyExistsIcon } from "./fido2-passkey-exists-icon";
+
 @Component({
   standalone: true,
   imports: [
@@ -55,6 +57,7 @@ export class Fido2CreateComponent implements OnInit, OnDestroy {
   private ciphersSubject = new BehaviorSubject<CipherView[]>([]);
   ciphers$: Observable<CipherView[]> = this.ciphersSubject.asObservable();
   readonly Icons = { BitwardenShield };
+  protected fido2PasskeyExistsIcon = Fido2PasskeyExistsIcon;
 
   constructor(
     private readonly desktopSettingsService: DesktopSettingsService,
diff --git a/apps/desktop/src/locales/en/messages.json b/apps/desktop/src/locales/en/messages.json
index f31763429a9..c8f9b9e4088 100644
--- a/apps/desktop/src/locales/en/messages.json
+++ b/apps/desktop/src/locales/en/messages.json
@@ -3704,6 +3704,12 @@
   "saveNewPasskey": {
     "message": "Save as new login"
   },
+  "savePasskeyNewLogin": {
+    "message": "Save passkey as new login"
+  },
+  "noMatchingLoginsForSite": {
+    "message": "No matching logins for this site"
+  },
   "overwritePasskey": {
     "message": "Overwrite passkey?"
   },