[PM-13809] - add remove password button (#11641)

* add remove password button

* adjust comment

* use bitAction directive

libs/tools/send/send-ui/src/send-form/components/options/send-options.component.html

@@ -12,9 +12,9 @@
       >
     </bit-form-field>
     <bit-form-field>
-      <bit-label *ngIf="!shouldShowNewPassword">{{ "password" | i18n }}</bit-label>
-      <bit-label *ngIf="shouldShowNewPassword">{{ "newPassword" | i18n }}</bit-label>
+      <bit-label>{{ "password" | i18n }}</bit-label>
       <input bitInput type="password" formControlName="password" />
+      <ng-container *ngIf="!hasPassword">
         <button
           data-testid="toggle-visibility-for-password"
           type="button"
@@ -41,6 +41,17 @@
           [appCopyClick]="sendOptionsForm.get('password').value"
           showToast
         ></button>
+      </ng-container>
+      <button
+        *ngIf="hasPassword"
+        class="tw-border-l-0 last:tw-rounded-r focus-visible:tw-border-l focus-visible:tw-ml-[-1px]"
+        type="button"
+        buttonType="danger"
+        bitIconButton="bwi-minus-circle"
+        [appA11yTitle]="'removePassword' | i18n"
+        [bitAction]="removePassword"
+        showToast
+      ></button>
       <bit-hint>{{ "sendPasswordDescV3" | i18n }}</bit-hint>
     </bit-form-field>
     <bit-form-control *ngIf="!disableHideEmail || originalSendView?.hideEmail">

libs/tools/send/send-ui/src/send-form/components/options/send-options.component.ts

@@ -7,14 +7,20 @@ import { firstValueFrom, map } from "rxjs";
 import { JslibModule } from "@bitwarden/angular/jslib.module";
 import { PolicyService } from "@bitwarden/common/admin-console/abstractions/policy/policy.service.abstraction";
 import { PolicyType } from "@bitwarden/common/admin-console/enums";
+import { I18nService } from "@bitwarden/common/platform/abstractions/i18n.service";
 import { SendView } from "@bitwarden/common/tools/send/models/view/send.view";
+import { SendApiService } from "@bitwarden/common/tools/send/services/send-api.service.abstraction";
 import {
+  AsyncActionsModule,
+  ButtonModule,
   CardComponent,
   CheckboxModule,
+  DialogService,
   FormFieldModule,
   IconButtonModule,
   SectionComponent,
   SectionHeaderComponent,
+  ToastService,
   TypographyModule,
 } from "@bitwarden/components";
 import { CredentialGeneratorService, Generators } from "@bitwarden/generator-core";
@@ -27,6 +33,8 @@ import { SendFormContainer } from "../../send-form-container";
   templateUrl: "./send-options.component.html",
   standalone: true,
   imports: [
+    AsyncActionsModule,
+    ButtonModule,
     CardComponent,
     CheckboxModule,
     CommonModule,
@@ -53,7 +61,7 @@ export class SendOptionsComponent implements OnInit {
     hideEmail: [false as boolean],
   });
 
-  get shouldShowNewPassword(): boolean {
+  get hasPassword(): boolean {
     return this.originalSendView && this.originalSendView.password !== null;
   }
 
@@ -71,8 +79,12 @@ export class SendOptionsComponent implements OnInit {
 
   constructor(
     private sendFormContainer: SendFormContainer,
+    private dialogService: DialogService,
+    private sendApiService: SendApiService,
     private formBuilder: FormBuilder,
     private policyService: PolicyService,
+    private i18nService: I18nService,
+    private toastService: ToastService,
     private generatorService: CredentialGeneratorService,
   ) {
     this.sendFormContainer.registerChildForm("sendOptionsForm", this.sendOptionsForm);
@@ -110,16 +122,49 @@ export class SendOptionsComponent implements OnInit {
     });
   };
 
+  removePassword = async () => {
+    if (!this.originalSendView || !this.originalSendView.password) {
+      return;
+    }
+    const confirmed = await this.dialogService.openSimpleDialog({
+      title: { key: "removePassword" },
+      content: { key: "removePasswordConfirmation" },
+      type: "warning",
+    });
+
+    if (!confirmed) {
+      return false;
+    }
+
+    await this.sendApiService.removePassword(this.originalSendView.id);
+
+    this.toastService.showToast({
+      variant: "success",
+      title: null,
+      message: this.i18nService.t("removedPassword"),
+    });
+
+    this.originalSendView.password = null;
+    this.sendOptionsForm.patchValue({
+      password: null,
+    });
+    this.sendOptionsForm.get("password")?.enable();
+  };
+
   ngOnInit() {
     if (this.sendFormContainer.originalSendView) {
       this.sendOptionsForm.patchValue({
         maxAccessCount: this.sendFormContainer.originalSendView.maxAccessCount,
         accessCount: this.sendFormContainer.originalSendView.accessCount,
-        password: null,
+        password: this.hasPassword ? "************" : null, // 12 masked characters as a placeholder
         hideEmail: this.sendFormContainer.originalSendView.hideEmail,
         notes: this.sendFormContainer.originalSendView.notes,
       });
     }
+    if (this.hasPassword) {
+      this.sendOptionsForm.get("password")?.disable();
+    }
+
     if (!this.config.areSendsAllowed) {
       this.sendOptionsForm.disable();
     }