Feature: password removal action (#11656)

src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.html

@@ -0,0 +1,75 @@
+<div class="modal-header">
+  <h4 class="modal-title" id="modal-basic-title">{{title}}</h4>
+  <button type="button" class="btn-close" aria-label="Close" (click)="cancel()">
+  </button>
+</div>
+<div class="modal-body">
+  @if (message) {
+    <p class="mb-3" [innerHTML]="message"></p>
+  }
+  <div class="btn-group mb-3" role="group">
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeReplace"
+      [(ngModel)]="updateDocument"
+      [value]="true"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeReplace">
+      <i-bs name="pencil"></i-bs>
+      <span class="ms-2" i18n>Replace current document</span>
+    </label>
+    <input
+      type="radio"
+      class="btn-check"
+      name="passwordRemoveMode"
+      id="removeCreate"
+      [(ngModel)]="updateDocument"
+      [value]="false"
+      (ngModelChange)="onUpdateDocumentChange($event)"
+    />
+    <label class="btn btn-outline-primary btn-sm" for="removeCreate">
+      <i-bs name="plus"></i-bs>
+      <span class="ms-2" i18n>Create new document</span>
+    </label>
+  </div>
+  @if (!updateDocument) {
+    <div class="d-flex flex-column flex-md-row w-100 gap-3 align-items-center">
+      <div class="form-group d-flex">
+        <div class="form-check">
+          <input class="form-check-input" type="checkbox" id="copyMetaRemove" [(ngModel)]="includeMetadata" />
+          <label class="form-check-label" for="copyMetaRemove" i18n> Copy metadata
+          </label>
+        </div>
+        <div class="form-check ms-3">
+          <input class="form-check-input" type="checkbox" id="deleteOriginalRemove" [(ngModel)]="deleteOriginal" />
+          <label class="form-check-label" for="deleteOriginalRemove" i18n> Delete original</label>
+        </div>
+      </div>
+    </div>
+  }
+</div>
+<div class="modal-footer flex-nowrap gap-2">
+  <button
+    type="button"
+    class="btn"
+    [class]="cancelBtnClass"
+    (click)="cancel()"
+    [disabled]="!buttonsEnabled"
+  >
+    <span class="d-inline-block" style="padding-bottom: 1px;">
+      {{cancelBtnCaption}}
+    </span>
+  </button>
+  <button
+    type="button"
+    class="btn"
+    [class]="btnClass"
+    (click)="confirm()"
+    [disabled]="!confirmButtonEnabled || !buttonsEnabled"
+  >
+    {{btnCaption}}
+  </button>
+</div>

src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.spec.ts

@@ -0,0 +1,53 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing'
+import { By } from '@angular/platform-browser'
+import { NgbActiveModal } from '@ng-bootstrap/ng-bootstrap'
+import { NgxBootstrapIconsModule, allIcons } from 'ngx-bootstrap-icons'
+import { PasswordRemovalConfirmDialogComponent } from './password-removal-confirm-dialog.component'
+
+describe('PasswordRemovalConfirmDialogComponent', () => {
+  let component: PasswordRemovalConfirmDialogComponent
+  let fixture: ComponentFixture<PasswordRemovalConfirmDialogComponent>
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      providers: [NgbActiveModal],
+      imports: [
+        NgxBootstrapIconsModule.pick(allIcons),
+        PasswordRemovalConfirmDialogComponent,
+      ],
+    }).compileComponents()
+
+    fixture = TestBed.createComponent(PasswordRemovalConfirmDialogComponent)
+    component = fixture.componentInstance
+    fixture.detectChanges()
+  })
+
+  it('should default to replacing the document', () => {
+    expect(component.updateDocument).toBe(true)
+    expect(
+      fixture.debugElement.query(By.css('#removeReplace')).nativeElement.checked
+    ).toBe(true)
+  })
+
+  it('should allow creating a new document with metadata and delete toggle', () => {
+    component.onUpdateDocumentChange(false)
+    fixture.detectChanges()
+
+    expect(component.updateDocument).toBe(false)
+    expect(fixture.debugElement.query(By.css('#copyMetaRemove'))).not.toBeNull()
+
+    component.includeMetadata = false
+    component.deleteOriginal = true
+    component.onUpdateDocumentChange(true)
+    expect(component.updateDocument).toBe(true)
+    expect(component.includeMetadata).toBe(true)
+    expect(component.deleteOriginal).toBe(false)
+  })
+
+  it('should emit confirm when confirmed', () => {
+    let confirmed = false
+    component.confirmClicked.subscribe(() => (confirmed = true))
+    component.confirm()
+    expect(confirmed).toBe(true)
+  })
+})

src-ui/src/app/components/common/confirm-dialog/password-removal-confirm-dialog/password-removal-confirm-dialog.component.ts

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core'
+import { FormsModule } from '@angular/forms'
+import { NgxBootstrapIconsModule } from 'ngx-bootstrap-icons'
+import { ConfirmDialogComponent } from '../confirm-dialog.component'
+
+@Component({
+  selector: 'pngx-password-removal-confirm-dialog',
+  templateUrl: './password-removal-confirm-dialog.component.html',
+  styleUrls: ['./password-removal-confirm-dialog.component.scss'],
+  imports: [FormsModule, NgxBootstrapIconsModule],
+})
+export class PasswordRemovalConfirmDialogComponent extends ConfirmDialogComponent {
+  updateDocument: boolean = true
+  includeMetadata: boolean = true
+  deleteOriginal: boolean = false
+
+  @Input()
+  override title = $localize`Remove password protection`
+
+  @Input()
+  override message =
+    $localize`Create an unprotected copy or replace the existing file.`
+
+  @Input()
+  override btnCaption = $localize`Start`
+
+  constructor() {
+    super()
+  }
+
+  onUpdateDocumentChange(updateDocument: boolean) {
+    this.updateDocument = updateDocument
+    if (this.updateDocument) {
+      this.deleteOriginal = false
+      this.includeMetadata = true
+    }
+  }
+}