From 85bf92ad2f814e30f235f9f05937b132ce135a79 Mon Sep 17 00:00:00 2001
From: Michael Shamoon <4887959+shamoon@users.noreply.github.com>
Date: Tue, 29 Mar 2022 10:35:42 -0700
Subject: [PATCH] Show prompt on password-protected pdfs

---
 .../document-detail.component.html            | 43 ++++++++++++-------
 .../document-detail.component.scss            |  7 +++
 .../document-detail.component.ts              | 24 ++++++++---
 3 files changed, 52 insertions(+), 22 deletions(-)

diff --git a/src-ui/src/app/components/document-detail/document-detail.component.html b/src-ui/src/app/components/document-detail/document-detail.component.html
index d16acb164..f9fecdf85 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.html
+++ b/src-ui/src/app/components/document-detail/document-detail.component.html
@@ -135,20 +135,27 @@
                 </li>
 
                 <li [ngbNavItem]="4" class="d-md-none">
-                  <a ngbNavLink>Preview</a>
-                  <ng-template ngbNavContent *ngIf="pdfPreview.offsetParent == undefined">
-                    <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>
+                    <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]="{ 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>
+                                </ng-template>
+                            </ng-container>
+                            <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 #nativePdfViewer>
-                            <object [data]="previewUrl | safeUrl" class="preview-sticky" width="100%"></object>
-                        </ng-template>
-                    </ng-container>
-                    <ng-container *ngIf="getContentType() == 'text/plain'">
-                        <object [data]="previewUrl | safeUrl" type="text/plain" class="preview-sticky bg-white" width="100%"></object>
-                    </ng-container>
-                  </ng-template>
+                    </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>
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.scss b/src-ui/src/app/components/document-detail/document-detail.component.scss
index 5512b6bb0..c5823fd08 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.scss
+++ b/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%;
+}
diff --git a/src-ui/src/app/components/document-detail/document-detail.component.ts b/src-ui/src/app/components/document-detail/document-detail.component.ts
index 52593ced5..4767a2495 100644
--- a/src-ui/src/app/components/document-detail/document-detail.component.ts
+++ b/src-ui/src/app/components/document-detail/document-detail.component.ts
@@ -1,10 +1,4 @@
-import {
-  Component,
-  OnInit,
-  OnDestroy,
-  ViewChild,
-  ElementRef,
-} from '@angular/core'
+import { Component, OnInit, OnDestroy, ViewChild } 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
+    }
   }
 }