[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,33 +12,44 @@
       >
     </bit-form-field>
     <bit-form-field>
-      <bit-label *ngIf="!shouldShowNewPassword">{{ "password" | i18n }}</bit-label>
+      <bit-label>{{ "password" | i18n }}</bit-label>
-      <bit-label *ngIf="shouldShowNewPassword">{{ "newPassword" | i18n }}</bit-label>
       <input bitInput type="password" formControlName="password" />
+      <ng-container *ngIf="!hasPassword">
+        <button
+          data-testid="toggle-visibility-for-password"
+          type="button"
+          bitIconButton
+          bitSuffix
+          bitPasswordInputToggle
+        ></button>
+        <button
+          type="button"
+          bitIconButton="bwi-generate"
+          bitSuffix
+          [appA11yTitle]="'generatePassword' | i18n"
+          [disabled]="!config.areSendsAllowed"
+          (click)="generatePassword()"
+          data-testid="generate-password"
+        ></button>
+        <button
+          type="button"
+          bitIconButton="bwi-clone"
+          bitSuffix
+          [appA11yTitle]="'copyPassword' | i18n"
+          [disabled]="!config.areSendsAllowed || !sendOptionsForm.get('password').value"
+          [valueLabel]="'password' | i18n"
+          [appCopyClick]="sendOptionsForm.get('password').value"
+          showToast
+        ></button>
+      </ng-container>
       <button
-        data-testid="toggle-visibility-for-password"
+        *ngIf="hasPassword"
+        class="tw-border-l-0 last:tw-rounded-r focus-visible:tw-border-l focus-visible:tw-ml-[-1px]"
         type="button"
-        bitIconButton
+        buttonType="danger"
-        bitSuffix
+        bitIconButton="bwi-minus-circle"
-        bitPasswordInputToggle
+        [appA11yTitle]="'removePassword' | i18n"
-      ></button>
+        [bitAction]="removePassword"
-      <button
-        type="button"
-        bitIconButton="bwi-generate"
-        bitSuffix
-        [appA11yTitle]="'generatePassword' | i18n"
-        [disabled]="!config.areSendsAllowed"
-        (click)="generatePassword()"
-        data-testid="generate-password"
-      ></button>
-      <button
-        type="button"
-        bitIconButton="bwi-clone"
-        bitSuffix
-        [appA11yTitle]="'copyPassword' | i18n"
-        [disabled]="!config.areSendsAllowed || !sendOptionsForm.get('password').value"
-        [valueLabel]="'password' | i18n"
-        [appCopyClick]="sendOptionsForm.get('password').value"
         showToast
       ></button>
       <bit-hint>{{ "sendPasswordDescV3" | i18n }}</bit-hint>

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();
     }