Update Font, Migrated away from JQUERY dependent libs: toastr to bootstrap5 toasts, daterangepicker to flatpickr, select2 to Tom Select, InputMask to IMask

This commit is contained in:
johnnyq
2026-08-14 17:08:40 -04:00
parent 0fe6d51bdb
commit dc6b191eed
377 changed files with 1783 additions and 3769 deletions

View File

@@ -21,7 +21,7 @@ if ($total_found_rows > 5) {
<div class="col-sm">
<form action="post.php" method="post">
<div class="mb-3">
<select onchange="this.form.submit()" class="form-control select2 col-12 col-sm-3" name="change_records_per_page">
<select onchange="this.form.submit()" class="form-select select2 col-12 col-sm-3" name="change_records_per_page">
<option <?php if ($user_config_records_per_page == 5) { echo "selected"; } ?> >5</option>
<option <?php if ($user_config_records_per_page == 10) { echo "selected"; } ?> >10</option>
<option <?php if ($user_config_records_per_page == 20) { echo "selected"; } ?> >20</option>

View File

@@ -33,12 +33,10 @@ if (basename(dirname($_SERVER['REQUEST_URI'])) === 'guest') { ?>
<script src="/libs/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Custom js-->
<script src="/libs/moment/moment.min.js"></script>
<script src="/libs/chart.js/chart.umd.min.js"></script>
<script src="/libs/tempus-dominus/js/tempus-dominus.min.js"></script>
<script src="/libs/daterangepicker/daterangepicker.js"></script>
<script src="/libs/select2/js/select2.min.js"></script>
<script src="/libs/inputmask/jquery.inputmask.min.js"></script>
<script src="/libs/flatpickr/js/flatpickr.min.js"></script>
<script src="/libs/tom-select/js/tom-select.complete.min.js"></script>
<script src="/libs/imask/js/imask.min.js"></script>
<script src="/libs/tinymce/tinymce.min.js" referrerpolicy="origin"></script>
<script src="/libs/clipboardjs/clipboard.min.js"></script>
<script src="/js/keepalive.js"></script>

View File

@@ -27,11 +27,8 @@ header("X-Frame-Options: DENY");
<link rel="stylesheet" href="/libs/fontawesome-free/css/all.min.css">
<!-- Custom Styles -->
<link rel="stylesheet" href="/libs/tempus-dominus/css/tempus-dominus.min.css">
<link rel="stylesheet" href="/libs/select2/css/select2.min.css">
<link rel="stylesheet" href="/libs/adminlte/css/adminlte-select2.min.css">
<link rel="stylesheet" href="/libs/daterangepicker/daterangepicker.css">
<link rel="stylesheet" href="/libs/toastr/toastr.min.css">
<link rel="stylesheet" href="/libs/flatpickr/css/flatpickr.min.css">
<link rel="stylesheet" href="/libs/tom-select/css/tom-select.bootstrap5.min.css">
<link rel="stylesheet" href="/libs/DataTables/datatables.min.css">
<link rel="stylesheet" href="/libs/intl-tel-input/css/intlTelInput.min.css">
<link rel="stylesheet" href="/libs/adminlte/css/adminlte.min.css">
@@ -39,7 +36,6 @@ header("X-Frame-Options: DENY");
<!-- Scripts -->
<script src="/libs/jquery/jquery.min.js"></script>
<script src="/libs/toastr/toastr.min.js"></script>
</head>
<body class="layout-fixed sidebar-expand-lg app-loaded theme-<?= escapeHtml($config_theme) ?>">
<div class="app-wrapper text-sm">

View File

@@ -1,34 +1,95 @@
<?php
//Alert Feedback
/**
* Flash alert rendering.
*
* Renders the session flash message as a Bootstrap 5 toast. Bootstrap's Toast
* component ships in bootstrap.bundle.min.js, which is already loaded, so this
* replaces toastr (and its jQuery dependency) without adding a library.
*
* SECURITY: the message is rendered into HTML here, not interpolated into a
* JavaScript string literal as it was previously. 429 of the ~653 flashAlert()
* call sites interpolate PHP variables, many of them user-controlled (custom
* link names, ticket status names, saved payment descriptions), and the old
* form allowed a stored value containing a quote or </script> to break out and
* execute. Everything is escaped, then a fixed allowlist of formatting tags is
* restored so the existing <strong> markup in those messages still renders.
*/
if (!empty($_SESSION['alert_message'])) {
if (!isset($_SESSION['alert_type'])) {
$_SESSION['alert_type'] = "success";
$alert_type = $_SESSION['alert_type'] ?? 'success';
// flashAlert() is called with more type names than toastr ever defined -
// 'danger' (19 sites), 'alert' (4) and a typo'd 'errpr' (1) all resolved to
// an undefined toastr method, threw, and showed the user nothing at all.
// Everything maps onto a real style here; anything unrecognised still shows.
$alert_styles = [
'success' => 'text-bg-success',
'info' => 'text-bg-info',
'warning' => 'text-bg-warning',
'alert' => 'text-bg-warning',
'error' => 'text-bg-danger',
'errpr' => 'text-bg-danger',
'danger' => 'text-bg-danger',
];
$alert_style = $alert_styles[$alert_type] ?? 'text-bg-secondary';
$alert_dark_text = in_array($alert_type, ['warning', 'alert', 'info'], true);
// Escape everything, then put back only these formatting tags.
$alert_allowed_tags = [
'<strong>', '</strong>',
'<b>', '</b>',
'<em>', '</em>',
'<i>', '</i>',
'<code>', '</code>',
'<br>', '<br/>', '<br />',
];
$alert_safe_message = htmlspecialchars($_SESSION['alert_message'], ENT_QUOTES, 'UTF-8');
foreach ($alert_allowed_tags as $alert_tag) {
$alert_safe_message = str_replace(
htmlspecialchars($alert_tag, ENT_QUOTES, 'UTF-8'),
$alert_tag,
$alert_safe_message
);
}
?>
<script type="text/javascript">
toastr.options = {
"closeButton": false,
"debug": false,
"newestOnTop": false,
"progressBar": false,
"positionClass": "toast-top-center",
"preventDuplicates": false,
"onclick": null,
"showDuration": "300",
"hideDuration": "1000",
"timeOut": "5000",
"extendedTimeOut": "1000",
"showEasing": "swing",
"hideEasing": "linear",
"showMethod": "fadeIn",
"hideMethod": "fadeOut"
}
toastr["<?= $_SESSION['alert_type'] ?>"]("<?= $_SESSION['alert_message'] ?>")
<div class="toast-container position-fixed top-0 start-50 translate-middle-x p-3" style="z-index: 1090;">
<div id="itflowFlashToast"
class="toast fade align-items-center <?= $alert_style ?> border-0"
role="alert" aria-live="assertive" aria-atomic="true">
<div class="d-flex">
<div class="toast-body"><?= $alert_safe_message ?></div>
<button type="button"
class="btn-close <?= $alert_dark_text ? '' : 'btn-close-white' ?> me-2 m-auto"
data-bs-dismiss="toast" aria-label="Close"></button>
</div>
</div>
</div>
<script>
(function () {
// This include runs near the top of the page but bootstrap.bundle
// loads in the footer, so the toast has to wait for scripts to
// finish. toastr did not need this - it was loaded in the header.
function showFlashToast() {
var el = document.getElementById('itflowFlashToast');
if (el && window.bootstrap && bootstrap.Toast) {
bootstrap.Toast.getOrCreateInstance(el, {
animation: true,
autohide: true,
delay: 5000
}).show();
}
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', showFlashToast);
} else {
showFlashToast();
}
})();
</script>
<?php

View File

@@ -1,5 +1,4 @@
<script src="/js/app.js"></script>
<script src="/libs/Show-Hide-Passwords-Bootstrap-4/bootstrap-show-password.min.js"></script>
<?php
$content = ob_get_clean();

View File

@@ -78,19 +78,19 @@
<i class="fas fa-user-circle me-1"></i>
<?php }else{ ?>
<img src="<?= "/uploads/users/$session_user_id/$session_avatar" ?>"
class="user-image img-circle">
class="user-image rounded-circle">
<?php } ?>
<span
class="d-none d-md-inline dropdown-toggle"><?= stripslashes(escapeHtml($session_name)) ?></span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-end">
<!-- User image -->
<li class="user-header bg-gray-dark">
<li class="user-header bg-dark">
<?php if (empty($session_avatar)) { ?>
<i class="fas fa-user-circle fa-6x"></i>
<?php }else{ ?>
<img src="<?= "/uploads/users/$session_user_id/$session_avatar" ?>" class="img-circle">
<img src="<?= "/uploads/users/$session_user_id/$session_avatar" ?>" class="rounded-circle">
<?php } ?>
<p>
<?= stripslashes(escapeHtml($session_name)) ?>