Merge pull request #564 from paperless-ngx/feature-password-protected-pdfs

Feature: Show prompt on password-protected pdfs

src-ui/src/app/components/document-detail/document-detail.component.html

@@ -137,9 +137,10 @@
                 <li [ngbNavItem]="4" class="d-md-none">
                     <a ngbNavLink>Preview</a>
                     <ng-template ngbNavContent *ngIf="pdfPreview.offsetParent == undefined">
+                        <div class="position-relative">
                             <ng-container *ngIf="getContentType() == 'application/pdf'">
                                 <div class="preview-sticky pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
-                            <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true" [show-all]="true" [render-text-mode]="2"></pdf-viewer>
+                                    <pdf-viewer [src]="{ url: previewUrl, password: password }" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (error)="onError($event)" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
                                 </div>
                                 <ng-template #nativePdfViewer>
                                     <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
@@ -148,6 +149,12 @@
                             <ng-container *ngIf="getContentType() == 'text/plain'">
                                 <object [data]="previewUrl | safeUrl" type="text/plain" class="preview-sticky bg-white" width="100%"></object>
                             </ng-container>
+                            <div *ngIf="requiresPassword" class="password-prompt">
+                                <form>
+                                    <input autocomplete="" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
+                                </form>
+                            </div>
+                        </div>
                     </ng-template>
                 </li>
             </ul>
@@ -160,10 +167,10 @@
         </form>
     </div>
 
-    <div class="col-md-6 col-xl-8 mb-3 d-none d-md-block" #pdfPreview>
+    <div class="col-md-6 col-xl-8 mb-3 d-none d-md-block position-relative" #pdfPreview>
         <ng-container *ngIf="getContentType() == 'application/pdf'">
             <div class="preview-sticky pdf-viewer-container" *ngIf="!useNativePdfViewer ; else nativePdfViewer">
-                <pdf-viewer [src]="previewUrl" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
+                <pdf-viewer [src]="{ url: previewUrl, password: password }" [original-size]="false" [show-borders]="true" [show-all]="true" [(page)]="previewCurrentPage" [render-text-mode]="2" (error)="onError($event)" (after-load-complete)="pdfPreviewLoaded($event)"></pdf-viewer>
             </div>
             <ng-template #nativePdfViewer>
                 <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
@@ -172,5 +179,11 @@
         <ng-container *ngIf="getContentType() == 'text/plain'">
             <object [data]="previewUrl | safeUrl" type="text/plain" class="preview-sticky bg-white" width="100%"></object>
         </ng-container>
+        <div *ngIf="requiresPassword" class="password-prompt">
+            <form>
+                <input autocomplete="" class="form-control" i18n-placeholder placeholder="Enter Password" type="password" (keyup)="onPasswordKeyUp($event)" />
+            </form>
         </div>
+    </div>
+
 </div>

src-ui/src/app/components/document-detail/document-detail.component.scss

@@ -17,3 +17,10 @@
   --page-margin: 1px 0 -8px;
   width: 100% !important;
 }
+
+.password-prompt {
+  position: absolute;
+  top: 30%;
+  left: 30%;
+  right: 30%;
+}

src-ui/src/app/components/document-detail/document-detail.component.ts

@@ -1,10 +1,4 @@
-import {
+import { Component, OnInit, OnDestroy, ViewChild } from '@angular/core'
-  Component,
-  OnInit,
-  OnDestroy,
-  ViewChild,
-  ElementRef,
-} from '@angular/core'
 import { FormControl, FormGroup } from '@angular/forms'
 import { ActivatedRoute, Router } from '@angular/router'
 import { NgbModal, NgbNav } from '@ng-bootstrap/ng-bootstrap'
@@ -90,6 +84,9 @@ export class DocumentDetailComponent
   isDirty$: Observable<boolean>
   unsubscribeNotifier: Subject<any> = new Subject()
 
+  requiresPassword: boolean = false
+  password: string
+
   @ViewChild('nav') nav: NgbNav
   @ViewChild('pdfPreview') set pdfPreview(element) {
     // this gets called when compontent added or removed from DOM
@@ -450,5 +447,18 @@ export class DocumentDetailComponent
 
   pdfPreviewLoaded(pdf: PDFDocumentProxy) {
     this.previewNumPages = pdf.numPages
+    if (this.password) this.requiresPassword = false
+  }
+
+  onError(event) {
+    if (event.name == 'PasswordException') {
+      this.requiresPassword = true
+    }
+  }
+
+  onPasswordKeyUp(event: KeyboardEvent) {
+    if ('Enter' == event.key) {
+      this.password = (event.target as HTMLInputElement).value
+    }
   }
 }