From 3ef2be680472fb22982355f69ee6dbd6dfae88c6 Mon Sep 17 00:00:00 2001
From: llj <lingjun.li1@gmail.com>
Date: Tue, 17 Dec 2024 16:41:14 +0800
Subject: [PATCH] [pdf file view] redesigned the 'decrypt document' dialog for
 encrypted files (#7207)

---
 frontend/src/components/pdf-viewer.js | 24 ++++++++++++++----------
 frontend/src/css/pdf-file-view.css    |  4 +++-
 media/js/pdf/web/viewer.js            |  5 ++++-
 3 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/pdf-viewer.js b/frontend/src/components/pdf-viewer.js
index d334c4335c..588161e943 100644
--- a/frontend/src/components/pdf-viewer.js
+++ b/frontend/src/components/pdf-viewer.js
@@ -330,16 +330,20 @@ class PDFViewer extends React.Component {
           {/* <!-- mainContainer -->*/}
 
           <div id="dialogContainer">
-            <dialog id="passwordDialog">
-              <div className="row">
-                <label htmlFor="password" id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</label>
-              </div>
-              <div className="row">
-                <input type="password" id="password" className="toolbarField" />
-              </div>
-              <div className="buttonRow">
-                <button id="passwordCancel" className="dialogButton"><span data-l10n-id="password_cancel">Cancel</span></button>
-                <button id="passwordSubmit" className="dialogButton"><span data-l10n-id="password_ok">OK</span></button>
+            <dialog id="passwordDialog" className="modal-dialog p-0 rounded border-0 shadow-none">
+              <div className="modal-content">
+                <div className="modal-header">
+                  <h5 className="modal-title">{gettext('Decrypt document')}</h5>
+                  <button type="button" id="passwordCancel2" className="align-self-center bg-transparent border-0 sf3-font sf3-font-x-01 modal-close" aria-label={gettext('Close')}></button>
+                </div>
+                <div className="modal-body py-6 text-left">
+                  <label htmlFor="password" id="passwordText" data-l10n-id="password_label">Enter the password to open this PDF file:</label>
+                  <input type="password" id="password" className="form-control" />
+                </div>
+                <div className="modal-footer">
+                  <button id="passwordCancel" className="btn btn-secondary"><span data-l10n-id="password_cancel">Cancel</span></button>
+                  <button id="passwordSubmit" className="btn btn-primary"><span data-l10n-id="password_ok">OK</span></button>
+                </div>
               </div>
             </dialog>
             <dialog id="documentPropertiesDialog">
diff --git a/frontend/src/css/pdf-file-view.css b/frontend/src/css/pdf-file-view.css
index 1d200a6346..2786dbf26d 100644
--- a/frontend/src/css/pdf-file-view.css
+++ b/frontend/src/css/pdf-file-view.css
@@ -153,7 +153,9 @@ input#findInput {
   background: #f5f5f5;
 }
 
-#printServiceDialog {
+#printServiceDialog,
+#passwordDialog {
+  color: inherit;
   font-size: inherit;
 }
 
diff --git a/media/js/pdf/web/viewer.js b/media/js/pdf/web/viewer.js
index 99b8f45659..072a5351b7 100644
--- a/media/js/pdf/web/viewer.js
+++ b/media/js/pdf/web/viewer.js
@@ -3997,11 +3997,13 @@ class PasswordPrompt {
     this.input = options.input;
     this.submitButton = options.submitButton;
     this.cancelButton = options.cancelButton;
+    this.cancelButton2 = options.cancelButton2;
     this.overlayManager = overlayManager;
     this.l10n = l10n;
     this._isViewerEmbedded = isViewerEmbedded;
     this.submitButton.addEventListener("click", this.#verify.bind(this));
     this.cancelButton.addEventListener("click", this.close.bind(this));
+    this.cancelButton2.addEventListener("click", this.close.bind(this));
     this.input.addEventListener("keydown", e => {
       if (e.keyCode === 13) {
         this.#verify();
@@ -13717,7 +13719,8 @@ function getViewerConfiguration() {
       label: document.getElementById("passwordText"),
       input: document.getElementById("password"),
       submitButton: document.getElementById("passwordSubmit"),
-      cancelButton: document.getElementById("passwordCancel")
+      cancelButton: document.getElementById("passwordCancel"),
+      cancelButton2: document.getElementById("passwordCancel2")
     },
     documentProperties: {
       dialog: document.getElementById("documentPropertiesDialog"),