refactored modal dialog logic, added the new message IDs to all translation files and added the modal dialog to all bootstrap based templates (page gets the old JS input as a fallback)

CHANGELOG.md

@@ -2,6 +2,7 @@
 
   * **next (not yet released)**
     * ADDED: Translations for Italian
+    * CHANGED: Using modal dialog to request password input instead of native JS input window (#69)
     * CHANGED: Suppressed referrer HTTP header sending when following links in a paste or comment (#96) and added additional HTTP headers for XSS mitigation (#91)
     * CHANGED: Updated random_compat and jQuery libraries
   * **1.0 (2016-08-25)**

CREDITS.md

@@ -20,6 +20,7 @@ Sébastien Sauvage - original idea and main developer
 * rugk - new logo/icons
 * Sobak - PSR-4 and PSR-2 refactoring
 * Nathaniel Olsen - jQuery upgrade
+* Alexander Demenshin - modal password dialog
 
 ## Translations
 * Hexalyse - French

i18n/de.json

@@ -80,10 +80,6 @@
         ["Dieses Dokument läuft in einem Monat ab.", "Dieses Dokument läuft in %d Monaten ab."],
     "Please enter the password for this paste:":
         "Bitte gib das Passwort für diesen Text ein:",
-    "Decrypt":
-        "Entschlüsseln",
-    "Enter password":
-        "Passwort eingeben",
     "Could not decrypt data (Wrong key?)":
         "Konnte Daten nicht entschlüsseln (Falscher Schlüssel?)",
     "Could not delete the paste, it was not stored in burn after reading mode.":
@@ -144,5 +140,9 @@
     "Editor": "Bearbeiten",
     "Preview": "Vorschau",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "Der PATH muss bei PrivateBin mit einem \"%s\" enden. Bitte passe Deinen PATH in Deiner index.php an."
+        "Der PATH muss bei PrivateBin mit einem \"%s\" enden. Bitte passe Deinen PATH in Deiner index.php an.",
+    "Decrypt":
+        "Entschlüsseln",
+    "Enter password":
+        "Passwort eingeben"
 }

i18n/fr.json

@@ -149,5 +149,9 @@
     "Editor": "Éditer",
     "Preview": "Prévisualiser",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php."
+        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.",
+    "Decrypt":
+        "Decrypt",
+    "Enter password":
+        "Entrez le mot de passe"
 }

i18n/it.json

@@ -79,7 +79,7 @@
     "This document will expire in %d months.":
         ["Questo documento scadrà tra un mese.", "Questo documento scadrà in %d mesi."],
     "Please enter the password for this paste:":
-        "Inserisci la passowrd per questo messaggio:",
+        "Inserisci la password per questo messaggio:",
     "Could not decrypt data (Wrong key?)":
         "Non riesco a decifrari i dati (Chiave errata?)",
     "Could not delete the paste, it was not stored in burn after reading mode.":
@@ -140,5 +140,9 @@
     "Editor": "Editor",
     "Preview": "Preview",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "PrivateBin necessita che PATH termini con \"%s\". Aggiorna la variabile PATH nel tuo index.php."
+        "PrivateBin necessita che PATH termini con \"%s\". Aggiorna la variabile PATH nel tuo index.php.",
+    "Decrypt":
+        "Decrypt",
+    "Enter password":
+        "Inserisci la password"
 }

i18n/pl.json

@@ -140,5 +140,9 @@
     "Editor": "Edytować",
     "Preview": "Zapowiedź",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php."
+        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.",
+    "Decrypt":
+        "Decrypt",
+    "Enter password":
+        "Wpisz hasło"
 }

i18n/sl.json

@@ -149,5 +149,9 @@
     "Editor": "Uredi",
     "Preview": "Predogled",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php."
+        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.",
+    "Decrypt":
+        "Decrypt",
+    "Enter password":
+        "Prosim vnesi geslo"
 }

i18n/zh.json

@@ -140,5 +140,9 @@
     "Editor": "編輯",
     "Preview": "預習",
     "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.":
-        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php."
+        "PrivateBin requires the PATH to end in a \"%s\". Please update the PATH in your index.php.",
+    "Decrypt":
+        "Decrypt",
+    "Enter password":
+        "Enter password"
 }

js/privatebin.js

@@ -611,14 +611,26 @@ $(function() {
         },
 
         /**
-         * ask the user for the password and return it
-         *
-         * @throws error when dialog canceled
-         * @return string password
+         * ask the user for the password and set it
          */
         requestPassword: function()
         {
-            $("#passwordModal").modal();
+            if (this.passwordModal.length == 0) {
+                var password = prompt(i18n._('Please enter the password for this paste:'), '');
+                if (password === null)
+                {
+                    throw 'password prompt canceled';
+                }
+                if (password.length === 0)
+                {
+                    this.requestPassword();
+                } else {
+                    this.passwordInput.val(password);
+                    this.displayMessages();
+                }
+            } else {
+                this.passwordModal.modal();
+            }
         },
 
         /**
@@ -679,14 +691,15 @@ $(function() {
         /**
          * Show decrypted text in the display area, including discussion (if open)
          *
-         * @param string key : decryption key
-         * @param object paste : paste object including comments to display (items = array with keys ('data','meta')
+         * @param object paste (optional) object including comments to display (items = array with keys ('data','meta')
          */
-        displayMessages: function(key, paste)
+        displayMessages: function(paste)
         {
-            // Try to decrypt the paste.
+            paste = paste || $.parseJSON(this.cipherData.text());
+            var key = this.pageKey();
             var password = this.passwordInput.val();
             if (!this.prettyPrint.hasClass('prettyprinted')) {
+                // Try to decrypt the paste.
                 try
                 {
                     if (paste.attachment)
@@ -696,7 +709,8 @@ $(function() {
                         {
                             if (password.length === 0)
                             {
-                                return this.requestPassword();
+                                this.requestPassword();
+                                return;
                             }
                             attachment = filter.decipher(key, password, paste.attachment);
                         }
@@ -731,7 +745,8 @@ $(function() {
                     var cleartext = filter.decipher(key, password, paste.data);
                     if (cleartext.length === 0 && password.length === 0 && !paste.attachment)
                     {
-                        return this.requestPassword();
+                        this.requestPassword();
+                        return;
                     }
                     if (cleartext.length === 0 && !paste.attachment)
                     {
@@ -932,7 +947,7 @@ $(function() {
                             {
                                 if (data.status === 0)
                                 {
-                                    privatebin.displayMessages(privatebin.pageKey(), data);
+                                    privatebin.displayMessages(data);
                                 }
                                 else if (data.status === 1)
                                 {
@@ -1151,7 +1166,7 @@ $(function() {
         /**
          * Put the screen in "Existing paste" mode.
          *
-         * @param boolean preview (optional) : tell if the preview tabs should be displayed, defaults to false.
+         * @param boolean preview (optional) tell if the preview tabs should be displayed, defaults to false.
          */
         stateExistingPaste: function(preview)
         {
@@ -1410,6 +1425,34 @@ $(function() {
             this.fileWrap.removeClass('hidden');
         },
 
+        /**
+         * Focus on the modal password dialog.
+         */
+        focusPasswordModal: function()
+        {
+            this.passwordDecrypt.focus();
+        },
+
+        /**
+         * Decrypt using the password from the modal dialog.
+         */
+        decryptPasswordModal: function()
+        {
+            this.passwordInput.val(this.passwordDecrypt.val());
+            this.displayMessages();
+        },
+
+        /**
+         * Submit a password in the modal dialog.
+         *
+         * @param Event event
+         */
+        submitPasswordModal: function(event)
+        {
+            event.preventDefault();
+            this.passwordModal.modal('hide');
+        },
+
         /**
          * Display an error message
          * (We use the same function for paste and reply to comments)
@@ -1497,6 +1540,11 @@ $(function() {
 
             // page template drop down
             $('#language select option').click($.proxy(this.setLanguage, this));
+
+            // handle modal password request on decryption
+            this.passwordModal.on('shown.bs.modal', $.proxy(this.focusPasswordModal, this));
+            this.passwordModal.on('hidden.bs.modal', $.proxy(this.decryptPasswordModal, this));
+            this.passwordForm.submit($.proxy(this.submitPasswordModal, this));
         },
 
         /**
@@ -1533,6 +1581,9 @@ $(function() {
             this.openDiscussion = $('#opendiscussion');
             this.password = $('#password');
             this.passwordInput = $('#passwordinput');
+            this.passwordModal = $('#passwordmodal');
+            this.passwordForm = $('#passwordform');
+            this.passwordDecrypt = $('#passworddecrypt');
             this.pasteResult = $('#pasteresult');
             this.prettyMessage = $('#prettymessage');
             this.prettyPrint = $('#prettyprint');
@@ -1563,30 +1614,9 @@ $(function() {
                     return;
                 }
 
-                // List of messages to display.
-                var data = $.parseJSON(this.cipherData.text());
-
                 // Show proper elements on screen.
                 this.stateExistingPaste();
-
-                {
-                    // This part of code handles modal password request on decryption
-                    // Inside of event handler, "this" is something different... so we have to save it
-                    var self = this;
-                    $("#passwordModal").on('shown.bs.modal', function() {
-                        $("#decryptPassword").focus();
-                    });
-                    $("#passwordForm").submit(function(){
-                        $("#passwordModal").modal("hide");
-                        return false;
-                    });
-                    $("#passwordModal").on("hidden.bs.modal", function(){
-                        self.passwordInput.val($("#decryptPassword").val());
-                        self.displayMessages(self.pageKey(), data);
-                    });
-                }
-
-                this.displayMessages(this.pageKey(), data);
+                this.displayMessages();
             }
             // Display error message from php code.
             else if (this.errorMessage.text().length > 1)

tpl/bootstrap-compact.php

@@ -52,7 +52,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -66,6 +66,21 @@ endif;
 		<meta name="theme-color" content="#ffe57e" />
 	</head>
 	<body role="document" class="navbar-spacing">
+		<div id="passwordmodal" class="modal fade" role="dialog">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-body">
+						<form id="passwordform" role="form">
+							<div class="form-group">
+								<label for="passworddecrypt"><span class="glyphicon glyphicon-eye-open"></span> <?php echo I18n::_('Please enter the password for this paste:') ?></label>
+								<input id="passworddecrypt" type="password" class="form-control" placeholder="<?php echo I18n::_('Enter password') ?>" autofocus>
+							</div>
+							<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> <?php echo I18n::_('Decrypt') ?></button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
 		<nav class="navbar navbar-default navbar-fixed-top">
 			<div class="container">
 				<div class="navbar-header">

tpl/bootstrap-dark-page.php

@@ -52,7 +52,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->

tpl/bootstrap-dark.php

@@ -52,7 +52,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -66,6 +66,21 @@ endif;
 		<meta name="theme-color" content="#ffe57e" />
 	</head>
 	<body role="document">
+		<div id="passwordmodal" class="modal fade" role="dialog">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-body">
+						<form id="passwordform" role="form">
+							<div class="form-group">
+								<label for="passworddecrypt"><span class="glyphicon glyphicon-eye-open"></span> <?php echo I18n::_('Please enter the password for this paste:') ?></label>
+								<input id="passworddecrypt" type="password" class="form-control" placeholder="<?php echo I18n::_('Enter password') ?>" autofocus>
+							</div>
+							<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> <?php echo I18n::_('Decrypt') ?></button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
 		<nav class="navbar navbar-inverse navbar-static-top">
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

tpl/bootstrap-page.php

@@ -52,7 +52,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -66,6 +66,21 @@ endif;
 		<meta name="theme-color" content="#ffe57e" />
 	</head>
 	<body role="document">
+		<div id="passwordmodal" class="modal fade" role="dialog">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-body">
+						<form id="passwordform" role="form">
+							<div class="form-group">
+								<label for="passworddecrypt"><span class="glyphicon glyphicon-eye-open"></span> <?php echo I18n::_('Please enter the password for this paste:') ?></label>
+								<input id="passworddecrypt" type="password" class="form-control" placeholder="<?php echo I18n::_('Enter password') ?>" autofocus>
+							</div>
+							<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> <?php echo I18n::_('Decrypt') ?></button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
 		<nav class="navbar navbar-default navbar-static-top">
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">

tpl/bootstrap.php

@@ -52,7 +52,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-6NNTkh7KDhbUmY/iAB4wRgWtLQTuJjrfOp8Lawa9MqZrtNqGcMbWPjhkQn33RwGfO3+gHSrE19a9UWgG0ecc4w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->
@@ -66,25 +66,22 @@ endif;
 		<meta name="theme-color" content="#ffe57e" />
 	</head>
 	<body role="document">
-        <!-- Modal decryption password request -->
-        <div class="modal fade" id="passwordModal" role="dialog">
-          <div class="modal-dialog">
-            <!-- Modal content-->
-            <div class="modal-content">
-              <div class="modal-body">
-                <form role="form" id="passwordForm">
-                  <div class="form-group">
-                    <label for="decryptPassword"><span class="glyphicon glyphicon-eye-open"></span> <?php echo I18n::_('Please enter the password for this paste:') ?></label>
-                    <input type="password" class="form-control" id="decryptPassword" placeholder="<?php echo I18n::_('Enter password') ?>" autofocus>
-                  </div>
-                  <button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> <?php echo I18n::_('Decrypt') ?></button>
-                </form>
-              </div>
-            </div>
-          </div>
-        </div>
-
-        <nav class="navbar navbar-default navbar-static-top">
+		<div id="passwordmodal" class="modal fade" role="dialog">
+			<div class="modal-dialog">
+				<div class="modal-content">
+					<div class="modal-body">
+						<form id="passwordform" role="form">
+							<div class="form-group">
+								<label for="passworddecrypt"><span class="glyphicon glyphicon-eye-open"></span> <?php echo I18n::_('Please enter the password for this paste:') ?></label>
+								<input id="passworddecrypt" type="password" class="form-control" placeholder="<?php echo I18n::_('Enter password') ?>" autofocus>
+							</div>
+							<button type="submit" class="btn btn-success btn-block"><span class="glyphicon glyphicon-off"></span> <?php echo I18n::_('Decrypt') ?></button>
+						</form>
+					</div>
+				</div>
+			</div>
+		</div>
+		<nav class="navbar navbar-default navbar-static-top">
 			<div class="navbar-header">
 				<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
 					<span class="sr-only"><?php echo I18n::_('Toggle navigation'); ?></span>

tpl/page.php

@@ -47,7 +47,7 @@ if ($MARKDOWN):
 <?php
 endif;
 ?>
-		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-h/cw2lgocVvgjmYWShhbnz5nSzyUv4rVY1JgN7vmkZq8VJX9KVXPoC7oYX+YGFk+0FYw+c/uofVW9yyU5TJv+w==" crossorigin="anonymous"></script>
+		<script type="text/javascript" src="js/privatebin.js?<?php echo rawurlencode($VERSION); ?>" integrity="sha512-cQXLXYKNq6ecCb0lA9BSQ0urt16yDERYnT5vcjeE3UJb6W5PUjwN/jtVsGBoRzoGGEll+N3stvgIXGjkjaYj5g==" crossorigin="anonymous"></script>
 		<!--[if lt IE 10]>
 		<style type="text/css">body {padding-left:60px;padding-right:60px;} #ienotice {display:block;} #oldienotice {display:block;}</style>
 		<![endif]-->