fix bootstrap 5 modal usage

kudos @kanna5

js/privatebin.js

@@ -2237,8 +2237,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         const me = {};
 
         let $passwordDecrypt,
-            $passwordForm,
             $passwordModal,
+            bootstrap5PasswordModal = null,
             password = '';
 
         /**
@@ -2257,8 +2257,8 @@ jQuery.PrivateBin = (function($, RawDeflate) {
             password = $passwordDecrypt.val();
 
             // hide modal
-            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+            if (bootstrap5PasswordModal) {
-                (new bootstrap.Modal($passwordModal[0])).hide();
+                bootstrap5PasswordModal.hide();
             } else {
                 $passwordModal.modal('hide');
             }
@@ -2308,24 +2308,11 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         {
             // show new bootstrap method (if available)
             if ($passwordModal.length !== 0) {
-                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                if (bootstrap5PasswordModal) {
-                    (new bootstrap.Modal($passwordModal[0], {
+                    bootstrap5PasswordModal.show();
-                        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
-                setTimeout(function () {
-                    $passwordDecrypt.focus();
-                }, 500);
                 return;
             }
 
@@ -2369,7 +2356,7 @@ jQuery.PrivateBin = (function($, RawDeflate) {
 
             // and also reset UI
             $passwordDecrypt.val('');
-        }
+        };
 
         /**
          * init status manager
@@ -2382,11 +2369,26 @@ jQuery.PrivateBin = (function($, RawDeflate) {
         me.init = function()
         {
             $passwordDecrypt = $('#passworddecrypt');
-            $passwordForm = $('#passwordform');
             $passwordModal = $('#passwordmodal');
 
             // bind events - handle Model password submission
-            $passwordForm.submit(submitPasswordModal);
+            if ($passwordModal.length !== 0) {
+                $('#passwordform').submit(submitPasswordModal);
+
+                const disableClosingConfig = {
+                    backdrop: 'static',
+                    keyboard: false,
+                    show: false
+                };
+                if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    bootstrap5PasswordModal = new bootstrap.Modal($passwordModal[0], disableClosingConfig);
+                } else {
+                    $passwordModal.modal(disableClosingConfig);
+                }
+                $passwordModal.on('shown.bs.modal', () => {
+                    $passwordDecrypt.focus();
+                });
+            }
         };
 
         return me;
@@ -3985,10 +3987,6 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 text: window.location.href
             });
             $('#qrcode-display').html(qrCanvas);
-            // only necessary for bootstrap 5, other templates won't have this
-            if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
-                (new bootstrap.Modal('#qrcodemodal')).show();
-            }
         }
 
         /**
@@ -4077,32 +4075,34 @@ jQuery.PrivateBin = (function($, RawDeflate) {
                 if (expirationDate !== null) {
                     const $emailconfirmTimezoneCurrent = $emailconfirmmodal.find('#emailconfirm-timezone-current');
                     const $emailconfirmTimezoneUtc = $emailconfirmmodal.find('#emailconfirm-timezone-utc');
-                    $emailconfirmTimezoneCurrent.off('click.sendEmailCurrentTimezone');
+                    let localeConfiguration = { dateStyle: 'long', timeStyle: 'long' };
-                    $emailconfirmTimezoneCurrent.on('click.sendEmailCurrentTimezone', () => {
+                    const bootstrap5EmailConfirmModal = typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION ?
-                        const emailBody = templateEmailBody(expirationDateRoundedToSecond.toLocaleString(), isBurnafterreading);
+                        new bootstrap.Modal($emailconfirmmodal[0]) : null;
-                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+
-                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
+                    function sendEmailAndHideModal() {
+                        const emailBody = templateEmailBody(
+                            // we don't use Date.prototype.toUTCString() because we would like to avoid GMT
+                            expirationDateRoundedToSecond.toLocaleString(
+                                [], localeConfiguration
+                            ), isBurnafterreading
+                        );
+                        if (bootstrap5EmailConfirmModal) {
+                            bootstrap5EmailConfirmModal.hide();
                         } else {
                             $emailconfirmmodal.modal('hide');
                         }
                         triggerEmailSend(emailBody);
-                    });
+                    };
+
+                    $emailconfirmTimezoneCurrent.off('click.sendEmailCurrentTimezone');
+                    $emailconfirmTimezoneCurrent.on('click.sendEmailCurrentTimezone', sendEmailAndHideModal);
                     $emailconfirmTimezoneUtc.off('click.sendEmailUtcTimezone');
                     $emailconfirmTimezoneUtc.on('click.sendEmailUtcTimezone', () => {
-                        const emailBody = templateEmailBody(expirationDateRoundedToSecond.toLocaleString(
+                        localeConfiguration.timeZone = 'UTC';
-                            undefined,
+                        sendEmailAndHideModal();
-                            // we don't use Date.prototype.toUTCString() because we would like to avoid GMT
-                            { timeZone: 'UTC', dateStyle: 'long', timeStyle: 'long' }
-                        ), isBurnafterreading);
-                        if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
-                            (new bootstrap.Modal($emailconfirmmodal[0])).hide();
-                        } else {
-                            $emailconfirmmodal.modal('hide');
-                        }
-                        triggerEmailSend(emailBody);
                     });
-                    if (typeof bootstrap !== 'undefined' && bootstrap.Tooltip.VERSION) {
+                    if (bootstrap5EmailConfirmModal) {
-                        (new bootstrap.Modal($emailconfirmmodal[0])).show();
+                        bootstrap5EmailConfirmModal.show();
                     } else {
                         $emailconfirmmodal.modal('show');
                     }

lib/Configuration.php

@@ -108,7 +108,7 @@ class Configuration
             'js/kjua-0.9.0.js'       => 'sha512-CVn7af+vTMBd9RjoS4QM5fpLFEOtBCoB0zPtaqIDC7sF4F8qgUSRFQQpIyEDGsr6yrjbuOLzdf20tkHHmpaqwQ==',
             'js/legacy.js'           => 'sha512-UxW/TOZKon83n6dk/09GsYKIyeO5LeBHokxyIq+r7KFS5KMBeIB/EM7NrkVYIezwZBaovnyNtY2d9tKFicRlXg==',
             'js/prettify.js'         => 'sha512-puO0Ogy++IoA2Pb9IjSxV1n4+kQkKXYAEUtVzfZpQepyDPyXk8hokiYDS7ybMogYlyyEIwMLpZqVhCkARQWLMg==',
-            'js/privatebin.js'       => 'sha512-5JuYesxfZ0hS5Auqm5QkDsUy7ZzVabjcfS3zbVLfwkhJVt8ekzU5tYLbhaDTM+wmq3xwV+8N8krpp9fuF5kS3A==',
+            'js/privatebin.js'       => 'sha512-1RKY0XUEbDtZ6M4/YUwmLsav/qSzteqc/93jvEaH5mFLhCl8f+dItPy6Q8hUcydz10oyCYrB4DFSAtYfcaKZMg==',
             '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==',

tpl/bootstrap5.php

@@ -193,7 +193,7 @@ if ($EMAIL) :
 endif;
 if ($QRCODE) :
 ?>
-							<button id="qrcodelink" type="button" data-toggle="modal" data-target="#qrcodemodal" class="hidden btn btn-secondary flex-fill">
+							<button id="qrcodelink" type="button" data-bs-toggle="modal" data-bs-target="#qrcodemodal" class="hidden btn btn-secondary flex-fill">
 								<svg width="16" height="16" fill="currentColor" aria-hidden="true"><use href="img/bootstrap-icons.svg#qr-code" /></svg> <?php echo I18n::_('QR code'), PHP_EOL; ?>
 							</button>
 <?php