replicate template changes, fix bugs

- fixes QR code height introducing space even when hidden in page layout
- fix modals in bootstrap 5 (modal syntax changed heavily, no longer jQuery integrated)
- hide and show tab-toggle depending on application state
- don't encode HTML entities in translated messages containing kbd tags (in addition to links)

css/bootstrap5/privatebin.css

@@ -18,6 +18,10 @@
 	--bs-dropdown-min-width: 23rem;
 }
 
+pre {
+	margin-bottom: 0;
+}
+
 [data-bs-theme=light] pre, [data-bs-theme=light] .card {
 	background-color: RGBA(var(--bs-light-rgb), var(--bs-bg-opacity, 1));
 }

css/common.css

@@ -53,7 +53,6 @@
 
 #qrcode-display {
 	width: 200px;
-	height: 200px;
 	margin: auto;
 }
 

css/privatebin.css

@@ -125,7 +125,7 @@ h3.title {
 
 #pasteresult button { margin-left: 11px; }
 
-#toolbar, #status { margin-bottom: 5px; }
+#message, #plaintext, #prettymessage, #toolbar, #status { margin-bottom: 5px; }
 
 #copyhint { color: #666; font-size: 0.85em }
 

js/privatebin.js

@@ -2257,7 +2257,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             password = $passwordDecrypt.val();
 
             // hide modal
-            $passwordModal.modal('hide');
+            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                (new bootstrap.Modal($passwordModal[0])).hide();
+            } else {
+                $passwordModal.modal('hide');
+            }
 
             PasteDecrypter.run();
         }
@@ -2278,7 +2282,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 const $loadconfirmClose = $loadconfirmmodal.find('.close');
                 $loadconfirmClose.off('click.close');
                 $loadconfirmClose.on('click.close', Controller.newPaste);
-                $loadconfirmmodal.modal('show');
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    (new bootstrap.Modal($loadconfirmmodal[0])).show();
+                } else {
+                    $loadconfirmmodal.modal('show');
+                }
             } else {
                 if (window.confirm(
                     I18n._('This secret message can only be displayed once. Would you like to see it now?')
@@ -2300,11 +2308,18 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         {
             // show new bootstrap method (if available)
             if ($passwordModal.length !== 0) {
-                $passwordModal.modal({
-                    backdrop: 'static',
-                    keyboard: false
-                });
-                $passwordModal.modal('show');
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    (new bootstrap.Modal($passwordModal[0]), {
+                        backdrop: 'static',
+                        keyboard: false
+                    }).show();
+                } else {
+                    $passwordModal.modal({
+                        backdrop: 'static',
+                        keyboard: false
+                    });
+                    $passwordModal.modal('show');
+                }
                 // focus password input
                 $passwordDecrypt.focus();
                 // then re-focus it, when modal causes it to loose focus again
@@ -2393,6 +2408,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             $messageEditParent,
             $messagePreview,
             $messagePreviewParent,
+            $messageTab,
+            $messageTabParent,
             $message,
             isPreview = false,
             isTabSupported = true;
@@ -2410,7 +2427,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             // support disabling tab support using [Esc] and [Ctrl]+[m]
             if (event.key === 'Escape' || (event.ctrlKey && event.key === 'm')) {
                 toggleTabSupport();
-                document.getElementById('message-tab').checked = isTabSupported;
+                $messageTab[0].checked = isTabSupported;
                 event.preventDefault();
             }
             // tab was pressed
@@ -2462,6 +2479,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
 
             // reshow input
             $message.removeClass('hidden');
+            $messageTabParent.removeClass('hidden');
 
             me.focusInput();
 
@@ -2494,6 +2512,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
 
             // hide input as now preview is shown
             $message.addClass('hidden');
+            $messageTabParent.addClass('hidden');
 
             // show preview
             PasteViewer.setText($message.val());
@@ -2552,6 +2571,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         me.show = function()
         {
             $message.removeClass('hidden');
+            $messageTabParent.removeClass('hidden');
             $editorTabs.removeClass('hidden');
         };
 
@@ -2564,6 +2584,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         me.hide = function()
         {
             $message.addClass('hidden');
+            $messageTabParent.addClass('hidden');
             $editorTabs.addClass('hidden');
         };
 
@@ -2603,7 +2624,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         };
 
         /**
-         * init status manager
+         * init editor
          *
          * preloads jQuery elements
          *
@@ -2614,10 +2635,12 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         {
             $editorTabs = $('#editorTabs');
             $message = $('#message');
+            $messageTab = $('#messagetab');
+            $messageTabParent = $messageTab.parent();
 
             // bind events
             $message.keydown(supportTabs);
-            $('#message-tab').change(toggleTabSupport);
+            $messageTab.change(toggleTabSupport);
 
             // bind click events to tab switchers (a), and save parents (li)
             $messageEdit = $('#messageedit').click(viewEditor);
@@ -2638,7 +2661,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
     const PasteViewer = (function () {
         const me = {};
 
-        let $placeholder,
+        let $messageTabParent,
+            $placeholder,
             $prettyMessage,
             $prettyPrint,
             $plainText,
@@ -2718,6 +2742,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             }
             // otherwise hide the placeholder
             $placeholder.addClass('hidden');
+            $messageTabParent.addClass('hidden');
 
             if (format === 'markdown') {
                 $plainText.removeClass('hidden');
@@ -2856,6 +2881,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
          */
         me.init = function()
         {
+            $messageTabParent = $('#messagetab').parent();
             $placeholder = $('#placeholder');
             $plainText = $('#plaintext');
             $prettyMessage = $('#prettymessage');
@@ -3960,8 +3986,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             });
             $('#qrcode-display').html(qrCanvas);
             // only necessary for bootstrap 5, other templates won't have this
-            if (bootstrap.Tooltip.VERSION) {
-                $('#qrcodemodal').modal('show');
+            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                (new bootstrap.Modal('#qrcodemodal')).show();
             }
         }
 
@@ -4054,7 +4080,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                     $emailconfirmTimezoneCurrent.off('click.sendEmailCurrentTimezone');
                     $emailconfirmTimezoneCurrent.on('click.sendEmailCurrentTimezone', () => {
                         const emailBody = templateEmailBody(expirationDateRoundedToSecond.toLocaleString(), isBurnafterreading);
-                        $emailconfirmmodal.modal('hide');
+                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
+                        } else {
+                            $emailconfirmmodal.modal('hide');
+                        }
                         triggerEmailSend(emailBody);
                     });
                     $emailconfirmTimezoneUtc.off('click.sendEmailUtcTimezone');
@@ -4064,10 +4094,18 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                             // we don't use Date.prototype.toUTCString() because we would like to avoid GMT
                             { timeZone: 'UTC', dateStyle: 'long', timeStyle: 'long' }
                         ), isBurnafterreading);
-                        $emailconfirmmodal.modal('hide');
+                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
+                        } else {
+                            $emailconfirmmodal.modal('hide');
+                        }
                         triggerEmailSend(emailBody);
                     });
-                    $emailconfirmmodal.modal('show');
+                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                        (new bootstrap.Modal($emailconfirmmodal[0])).show();
+                    } else {
+                        $emailconfirmmodal.modal('show');
+                    }
                 } else {
                     triggerEmailSend(templateEmailBody(null, isBurnafterreading));
                 }

lib/Configuration.php

@@ -108,7 +108,7 @@ class Configuration
             'js/kjua-0.9.0.js'       => 'sha512-CVn7af+vTMBd9RjoS4QM5fpLFEOtBCoB0zPtaqIDC7sF4F8qgUSRFQQpIyEDGsr6yrjbuOLzdf20tkHHmpaqwQ==',
             'js/legacy.js'           => 'sha512-LYos+qXHIRqFf5ZPNphvtTB0cgzHUizu2wwcOwcwz/VIpRv9lpcBgPYz4uq6jx0INwCAj6Fbnl5HoKiLufS2jg==',
             'js/prettify.js'         => 'sha512-puO0Ogy++IoA2Pb9IjSxV1n4+kQkKXYAEUtVzfZpQepyDPyXk8hokiYDS7ybMogYlyyEIwMLpZqVhCkARQWLMg==',
-            'js/privatebin.js'       => 'sha512-Tit/JkrOoSGSvbDmnWmvK7utnjzHaErYPRrQYlGf0PEQZPYWFVYCKkV+HkNJzFXAXKWqqpA8b16TU38R/wgpRg==',
+            'js/privatebin.js'       => 'sha512-rbfSVRLvLB7zcmnDGOopePCL0BUEDH10Yd1sZig/l44MaxQGcMaAG/T5Zeln3it/0LxMOIujZV/By+0ShhwysQ==',
             'js/purify-3.1.7.js'     => 'sha512-LegvqULiMtOfboJZw9MpETN/b+xnLRXZI90gG7oIFHW+yAeHmKvRtEUbiMFx2WvUqQoL9XB3gwU+hWXUT0X+8A==',
             'js/rawinflate-0.3.js'   => 'sha512-g8uelGgJW9A/Z1tB6Izxab++oj5kdD7B4qC7DHwZkB6DGMXKyzx7v5mvap2HXueI2IIn08YlRYM56jwWdm2ucQ==',
             'js/showdown-2.1.0.js'   => 'sha512-WYXZgkTR0u/Y9SVIA4nTTOih0kXMEd8RRV6MLFdL6YU8ymhR528NLlYQt1nlJQbYz4EW+ZsS0fx1awhiQJme1Q==',

lib/I18n.php

@@ -127,12 +127,19 @@ class I18n
         } else {
             $args[0] = self::$_translations[$messageId];
         }
-        // encode any non-integer arguments and the message ID, if it doesn't contain a link
+        // encode any non-integer arguments and the message ID, if it doesn't contain a link or keyboard input
         $argsCount = count($args);
         for ($i = 0; $i < $argsCount; ++$i) {
-            if ($i > 0 ? !is_int($args[$i]) : strpos($args[0], '<a') === false) {
-                $args[$i] = self::encode($args[$i]);
+            if ($i === 0) {
+                if (strpos($args[0], '<a') !== false || strpos($args[0], '<kbd>') !== false) {
+                    continue;
+                }
+            } else {
+                if (is_int($args[$i])) {
+                    continue;
+                }
             }
+            $args[$i] = self::encode($args[$i]);
         }
         return call_user_func_array('sprintf', $args);
     }

tpl/bootstrap.php

@@ -584,6 +584,12 @@ endif;
 					</div>
 					<div id="plaintext" class="col-md-12 hidden"></div>
 					<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" class="form-control hidden"></textarea></p>
+					<p class="col-md-12 checkbox">
+						<label>
+							<input id="messagetab" type="checkbox" checked="checked" />
+							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
+						</label>
+					</p>
 				</article>
 			</section>
 			<section class="container">

tpl/bootstrap5.php

@@ -440,10 +440,10 @@ endif;
 					</div>
 					<div id="plaintext" class="col-md-12 hidden"></div>
 					<p class="col-md-12"><textarea id="message" name="message" cols="80" rows="25" aria-label="<?php echo I18n::_('Paste text'); ?>" class="form-control hidden"></textarea></p>
-					<p class="col-md-12" id="message-controls">
-						<input id="message-tab" type="checkbox" class="form-check-input" checked="checked" />
-						<label for="message-tab" class="form-check-label">
-							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?>
+					<p class="col-md-12 form-check form-switch">
+						<input id="messagetab" type="checkbox" class="form-check-input" checked="checked" />
+						<label for="messagetab" class="form-check-label">
+							<?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'), PHP_EOL; ?>
 						</label>
 					</p>
 				</article>

tpl/page.php

@@ -264,6 +264,10 @@ endif;
 				</div>
 				<div id="plaintext" class="hidden"></div>
 				<textarea id="message" name="message" cols="80" rows="25" class="hidden"></textarea>
+				<div class="button">
+					<input id="messagetab" type="checkbox" checked="checked" />
+					<label for="messagetab"><?php echo I18n::_('Tabulator key serves as character (Hit <kbd>Ctrl</kbd>+<kbd>m</kbd> or <kbd>Esc</kbd> to toggle)'); ?></label>
+				</div>
 			</article>
 		</section>
 		<section>