diff --git a/libs/components/src/form-field/form-field.component.ts b/libs/components/src/form-field/form-field.component.ts
index 6fcb4090dd..1e364115a6 100644
--- a/libs/components/src/form-field/form-field.component.ts
+++ b/libs/components/src/form-field/form-field.component.ts
@@ -1,6 +1,7 @@
import { coerceBooleanProperty } from "@angular/cdk/coercion";
import {
AfterContentChecked,
+ booleanAttribute,
Component,
ContentChild,
ContentChildren,
@@ -38,6 +39,13 @@ export class BitFormFieldComponent implements AfterContentChecked {
return this._disableMargin;
}
+ /**
+ * NOTE: Placeholder to match the API of the form-field component in the `ps/extension` branch,
+ * no functionality is implemented as of now.
+ */
+ @Input({ transform: booleanAttribute })
+ disableReadOnlyBorder = false;
+
@HostBinding("class")
get classList() {
return ["tw-block"].concat(this.disableMargin ? [] : ["tw-mb-6"]);
diff --git a/libs/vault/src/cipher-view/additional-options/additional-options.component.html b/libs/vault/src/cipher-view/additional-options/additional-options.component.html
index 6f254b8c72..0913629ad9 100644
--- a/libs/vault/src/cipher-view/additional-options/additional-options.component.html
+++ b/libs/vault/src/cipher-view/additional-options/additional-options.component.html
@@ -3,7 +3,7 @@
{{ "additionalOptions" | i18n }}
-
+
{{ "note" | i18n }}
-
+
diff --git a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
index 028417faf1..6ab2795afd 100644
--- a/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
+++ b/libs/vault/src/cipher-view/card-details/card-details-view.component.ts
@@ -13,6 +13,8 @@ import {
IconButtonModule,
} from "@bitwarden/components";
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
+
@Component({
selector: "app-card-details-view",
templateUrl: "card-details-view.component.html",
@@ -26,6 +28,7 @@ import {
TypographyModule,
FormFieldModule,
IconButtonModule,
+ ReadOnlyCipherCardComponent,
],
})
export class CardDetailsComponent {
diff --git a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
index d4c29cf262..96cb63fe39 100644
--- a/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
+++ b/libs/vault/src/cipher-view/custom-fields/custom-fields-v2.component.html
@@ -8,7 +8,7 @@
*ngFor="let field of fields; let last = last"
[ngClass]="{ 'tw-mb-4': !last }"
>
-
+
{{ field.name }}
-
+
{{ field.name }}
@@ -45,7 +45,7 @@
/>
{{ field.name }}
-
+
{{ "linked" | i18n }}: {{ field.name }}
{{ "itemName" | i18n }}
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
index 6913c34ee5..17d02658c4 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html
@@ -2,7 +2,7 @@
{{ "loginCredentials" | i18n }}
-
+
{{ "username" | i18n }}
@@ -132,5 +132,5 @@
class="disabled:tw-cursor-default"
>
-
+
diff --git a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
index 3973a66684..6f572f31e8 100644
--- a/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
+++ b/libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts
@@ -19,6 +19,7 @@ import {
} from "@bitwarden/components";
import { BitTotpCountdownComponent } from "../../components/totp-countdown/totp-countdown.component";
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
type TotpCodeValues = {
totpCode: string;
@@ -41,6 +42,7 @@ type TotpCodeValues = {
BadgeModule,
ColorPasswordModule,
BitTotpCountdownComponent,
+ ReadOnlyCipherCardComponent,
],
})
export class LoginCredentialsViewComponent {
diff --git a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html
new file mode 100644
index 0000000000..65061e818c
--- /dev/null
+++ b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.html
@@ -0,0 +1,3 @@
+
+
+
diff --git a/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
new file mode 100644
index 0000000000..ed16f3a7cc
--- /dev/null
+++ b/libs/vault/src/cipher-view/read-only-cipher-card/read-only-cipher-card.component.ts
@@ -0,0 +1,26 @@
+import { AfterViewInit, Component, ContentChildren, QueryList } from "@angular/core";
+
+import { CardComponent, BitFormFieldComponent } from "@bitwarden/components";
+
+@Component({
+ selector: "read-only-cipher-card",
+ templateUrl: "./read-only-cipher-card.component.html",
+ standalone: true,
+ imports: [CardComponent],
+})
+/**
+ * A thin wrapper around the `bit-card` component that disables the bottom border for the last form field.
+ */
+export class ReadOnlyCipherCardComponent implements AfterViewInit {
+ @ContentChildren(BitFormFieldComponent) formFields: QueryList;
+
+ ngAfterViewInit(): void {
+ // Disable the bottom border for the last form field
+ if (this.formFields.last) {
+ // Delay model update until next change detection cycle
+ setTimeout(() => {
+ this.formFields.last.disableReadOnlyBorder = true;
+ });
+ }
+ }
+}
diff --git a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
index d12a729f99..29ccd5daa6 100644
--- a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
+++ b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.html
@@ -3,7 +3,7 @@
{{ "personalDetails" | i18n }}
-
+
{{ "name" | i18n }}
@@ -43,7 +43,7 @@
[valueLabel]="'company' | i18n"
>
-
+
@@ -51,7 +51,7 @@
{{ "identification" | i18n }}
-
+
{{ "ssn" | i18n }}
@@ -111,7 +111,7 @@
[valueLabel]="'licenseNumber' | i18n"
>
-
+
@@ -119,7 +119,7 @@
{{ "contactInfo" | i18n }}
-
+
{{ "email" | i18n }}
@@ -166,5 +166,5 @@
[valueLabel]="'address' | i18n"
>
-
+
diff --git a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
index 0fd2c29295..0f3a9f8971 100644
--- a/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
+++ b/libs/vault/src/cipher-view/view-identity-sections/view-identity-sections.component.ts
@@ -12,6 +12,8 @@ import {
TypographyModule,
} from "@bitwarden/components";
+import { ReadOnlyCipherCardComponent } from "../read-only-cipher-card/read-only-cipher-card.component";
+
@Component({
standalone: true,
selector: "app-view-identity-sections",
@@ -25,6 +27,7 @@ import {
TypographyModule,
FormFieldModule,
IconButtonModule,
+ ReadOnlyCipherCardComponent,
],
})
export class ViewIdentitySectionsComponent implements OnInit {