Merge pull request #7219 from timvandermeij/password-prompt-class

Convert the password prompt to a class

web/app.js

@@ -285,14 +285,13 @@ var PDFViewerApplication = {
       });
     }
 
-    PasswordPrompt.initialize({
+    this.passwordPrompt = new PasswordPrompt({
       overlayName: 'passwordOverlay',
-      passwordField: document.getElementById('password'),
-      passwordText: document.getElementById('passwordText'),
-      passwordSubmit: document.getElementById('passwordSubmit'),
-      passwordCancel: document.getElementById('passwordCancel')
+      label: document.getElementById('passwordText'),
+      input: document.getElementById('password'),
+      submitButton: document.getElementById('passwordSubmit'),
+      cancelButton: document.getElementById('passwordCancel')
     });
-    this.passwordPrompt = PasswordPrompt;
 
     this.pdfOutlineViewer = new PDFOutlineViewer({
       container: document.getElementById('outlineView'),
@@ -687,10 +686,9 @@ var PDFViewerApplication = {
     var loadingTask = pdfjsLib.getDocument(parameters);
     this.pdfLoadingTask = loadingTask;
 
-    loadingTask.onPassword = function passwordNeeded(updatePassword, reason) {
-      PasswordPrompt.updatePassword = updatePassword;
-      PasswordPrompt.reason = reason;
-      PasswordPrompt.open();
+    loadingTask.onPassword = function passwordNeeded(updateCallback, reason) {
+      self.passwordPrompt.setUpdateCallback(updateCallback, reason);
+      self.passwordPrompt.open();
     };
 
     loadingTask.onProgress = function getDocumentProgress(progressData) {

web/password_prompt.js

@@ -32,41 +32,53 @@
 var mozL10n = uiUtils.mozL10n;
 var OverlayManager = overlayManager.OverlayManager;
 
-var PasswordPrompt = {
-  overlayName: null,
-  updatePassword: null,
-  reason: null,
-  passwordField: null,
-  passwordText: null,
-  passwordSubmit: null,
-  passwordCancel: null,
-
-  initialize: function secondaryToolbarInitialize(options) {
-    this.overlayName = options.overlayName;
-    this.passwordField = options.passwordField;
-    this.passwordText = options.passwordText;
-    this.passwordSubmit = options.passwordSubmit;
-    this.passwordCancel = options.passwordCancel;
+/**
+ * @typedef {Object} PasswordPromptOptions
+ * @property {string} overlayName - Name of the overlay for the overlay manager.
+ * @property {HTMLParagraphElement} label - Label containing instructions for
+ *                                          entering the password.
+ * @property {HTMLInputElement} input - Input field for entering the password.
+ * @property {HTMLButtonElement} submitButton - Button for submitting the
+ *                                              password.
+ * @property {HTMLButtonElement} cancelButton - Button for cancelling password
+ *                                              entry.
+ */
 
-    // Attach the event listeners.
-    this.passwordSubmit.addEventListener('click',
-      this.verifyPassword.bind(this));
+/**
+ * @class
+ */
+var PasswordPrompt = (function PasswordPromptClosure() {
+  /**
+   * @constructs PasswordPrompt
+   * @param {PasswordPromptOptions} options
+   */
+  function PasswordPrompt(options) {
+    this.overlayName = options.overlayName;
+    this.label = options.label;
+    this.input = options.input;
+    this.submitButton = options.submitButton;
+    this.cancelButton = options.cancelButton;
 
-    this.passwordCancel.addEventListener('click', this.close.bind(this));
+    this.updateCallback = null;
+    this.reason = null;
 
-    this.passwordField.addEventListener('keydown', function (e) {
+    // Attach the event listeners.
+    this.submitButton.addEventListener('click', this.verify.bind(this));
+    this.cancelButton.addEventListener('click', this.close.bind(this));
+    this.input.addEventListener('keydown', function (e) {
       if (e.keyCode === 13) { // Enter key
-        this.verifyPassword();
+        this.verify();
       }
     }.bind(this));
 
     OverlayManager.register(this.overlayName, this.close.bind(this), true);
-  },
+  }
 
-  open: function passwordPromptOpen() {
+  PasswordPrompt.prototype = {
+    open: function PasswordPrompt_open() {
       OverlayManager.open(this.overlayName).then(function () {
-      this.passwordField.type = 'password';
-      this.passwordField.focus();
+        this.input.type = 'password';
+        this.input.focus();
 
         var promptString = mozL10n.get('password_label', null,
           'Enter the password to open this PDF file.');
@@ -76,25 +88,34 @@ var PasswordPrompt = {
             'Invalid password. Please try again.');
         }
 
-      this.passwordText.textContent = promptString;
+        this.label.textContent = promptString;
       }.bind(this));
     },
 
-  close: function passwordPromptClose() {
+    close: function PasswordPrompt_close() {
       OverlayManager.close(this.overlayName).then(function () {
-      this.passwordField.value = '';
-      this.passwordField.type = '';
+        this.input.value = '';
+        this.input.type = '';
       }.bind(this));
     },
 
-  verifyPassword: function passwordPromptVerifyPassword() {
-    var password = this.passwordField.value;
+    verify: function PasswordPrompt_verify() {
+      var password = this.input.value;
       if (password && password.length > 0) {
         this.close();
-      return this.updatePassword(password);
+        return this.updateCallback(password);
       }
+    },
+
+    setUpdateCallback:
+        function PasswordPrompt_setUpdateCallback(updateCallback, reason) {
+      this.updateCallback = updateCallback;
+      this.reason = reason;
     }
-};
+  };
+
+  return PasswordPrompt;
+})();
 
 exports.PasswordPrompt = PasswordPrompt;
 }));