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)

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>

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,

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?"
   },