[PM-34131] Editing ciphers with change at risk password banner fails on web (#19785)

* adds try catch in the resource loader to stop error looping

* uses computed signal instead of resource directly

* fixes strict type check

libs/vault/src/cipher-view/cipher-view.component.html

@@ -12,10 +12,10 @@
   </bit-callout>
 
   <bit-callout *ngIf="showChangePasswordLink()" type="warning" [title]="''">
-    @if (changePasswordUrl?.value()) {
+    @if (changePasswordLink()) {
       <a
         bitLink
-        [href]="changePasswordUrl?.value()"
+        [href]="changePasswordLink()"
         appStopClick
         (click)="launchChangePassword()"
         linkType="secondary"
@@ -50,7 +50,7 @@
     [cipher]="cipher()"
     [activeUserId]="activeUserId$ | async"
     [showChangePasswordLink]="showChangePasswordLink()"
-    [changePasswordUrl]="changePasswordUrl"
+    [changePasswordLink]="changePasswordLink()"
     (handleChangePassword)="launchChangePassword()"
   ></app-login-credentials-view>
 

libs/vault/src/cipher-view/cipher-view.component.ts

@@ -284,12 +284,24 @@ export class CipherViewComponent {
     params: () => ({ cipher: this.cipher(), showPwLink: this.showChangePasswordLink() }),
     loader: async ({ params }) => {
       if (!params.showPwLink) {
-        return "";
+        return undefined;
+      }
+      try {
+        return await this.changeLoginPasswordService.getChangePasswordUrl(params.cipher);
+      } catch (e: any) {
+        this.logService.error(e.message);
+        return undefined;
       }
-      return await this.changeLoginPasswordService.getChangePasswordUrl(params.cipher);
     },
   });
 
+  readonly changePasswordLink = computed(() => {
+    if (this.changePasswordUrl.hasValue()) {
+      return this.changePasswordUrl.value();
+    }
+    return undefined;
+  });
+
   launchChangePassword = async () => {
     const cipher = this.cipher();
     if (cipher != null) {

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.html

@@ -94,10 +94,10 @@
         <bit-hint class="tw-flex tw-mb-3 tw-items-center">
           <i class="bwi bwi-exclamation-triangle tw-text-warning" aria-hidden="true"></i>
           <span class="tw-ml-2 tw-mr-1">{{ "atRiskPassword" | i18n }}</span>
-          @if (changePasswordUrl()?.value()) {
+          @if (changePasswordLink()) {
             <a
               bitLink
-              [href]="changePasswordUrl().value()"
+              [href]="changePasswordLink()"
               appStopClick
               (click)="launchChangePasswordEvent()"
             >

libs/vault/src/cipher-view/login-credentials/login-credentials-view.component.ts

@@ -10,7 +10,6 @@ import {
   Input,
   OnChanges,
   Output,
-  ResourceRef,
   SimpleChanges,
   ViewChild,
 } from "@angular/core";
@@ -73,7 +72,7 @@ export class LoginCredentialsViewComponent implements OnChanges {
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-signals
   @Input() showChangePasswordLink: boolean;
-  readonly changePasswordUrl = input<ResourceRef<string>>();
+  readonly changePasswordLink = input<string | undefined>();
   // FIXME(https://bitwarden.atlassian.net/browse/CL-903): Migrate to Signals
   // eslint-disable-next-line @angular-eslint/prefer-output-emitter-ref
   @Output() handleChangePassword = new EventEmitter<void>();