Fix: No response toast anymore. Changed bootstrap-notify with Toastify.js due to CSP restrictions.

pub/api/classes/API_portalsettings.php

@@ -51,7 +51,5 @@ class API_portalsettings extends API
 
         $stmt = $this->pdo->prepare($query);
         $stmt->execute($params);
-
-        $this->apiOutput(200, ['success' => 'portal settings updated successfully.']);
     }
 }

pub/api/v1/frontend/response/index.php

@@ -8,7 +8,6 @@ require_once "{$_SERVER['DOCUMENT_ROOT']}/api/classes/API.php";
 $API = new API();
 
 if ($API->request_method === 'GET') {
-    ini_set('display_errors', 1);
     if (isset($_SESSION['response'])) {
         echo $_SESSION['response'];
         unset($_SESSION['response']);

pub/api/v1/office/travel-reimburse/configure/index.php

@@ -47,5 +47,5 @@ if ($API_portalsettings->request_method === 'GET') {
     # Update the permission
     $API_portalsettings->updatePortalSettingsOfficeTravelReimburse();
 
-
+    $API_portalsettings->apiOutput(200, ['success' => 'portal settings updated successfully.']);
 }

pub/api/v1/office/travel-reimburse/send/index.php

@@ -23,7 +23,6 @@ if ($API_office_travel_reimburse->request_method === 'POST') {
 
     ini_set('display_errors', 1);
     $API_office_travel_reimburse->checkPermissions('office-travel-reimburse', 'RO');
-    $API_office_travel_reimburse->return_url = false;
     $portal_settings = $GLOBALS['conn']->query("SELECT * FROM system_settings")->fetch_assoc();
     $month = $_POST['calender_month'];
     $firstDay = $month . '-01';
@@ -208,4 +207,6 @@ if ($API_office_travel_reimburse->request_method === 'POST') {
     $mail->sendMail();
 
     unlink($pdfFile);
+
+    $API_office_travel_reimburse->apiOutput(200, ['success' => 'Message send.']);
 }

pub/bin/php/Classes/pageBuilder.php

@@ -113,6 +113,7 @@ class pageBuilder
             <link rel="stylesheet" href="/src/css/sentri.min.css"/> <!-- Special css tricks for Sentri -->
             <link rel="stylesheet" href="/src/css/plugins.min.css"/> <!-- need this for scroll bars and other small things -->
             <link rel="stylesheet" href="/src/js/plugin/sweetalert2/sweetalert2.min.css"/> <!-- need this for scroll bars and other small things -->
+            <link rel="stylesheet" href="/src/js/plugin/toastify-js/toastify.css"/> <!-- This is used for the toasts -->
             <link rel="stylesheet" href="/src/css/fullcalendar/skeleton.css"/> <!-- Used for fullcalander.js -->
             <link rel="stylesheet" href="/src/css/fullcalendar/theme/theme.css"/> <!-- Used for fullcalander.js -->
             <link rel="stylesheet" href="/src/css/fullcalendar/theme/palettes/purple.css"/> <!-- Used for fullcalander.js -->
@@ -327,8 +328,8 @@ class pageBuilder
         <!-- Load the locales in js -->
         <script src="/src/js/i18n-loader.js"></script>
 
-        <!-- Bootstrap Notify -->
-        <script src="/src/js/plugin/bootstrap-notify/bootstrap-notify.min.js"></script>
+        <!-- Toastify js for toasts after actions are peformed -->
+        <script src="/src/js/plugin/toastify-js/toastify.js"></script>
 
         <!-- Sweet Alert -->
         <script src="/src/js/plugin/sweetalert2/sweetalert2.min.js"></script>
@@ -339,6 +340,8 @@ class pageBuilder
         <!-- jQuery Scrollbar -->
         <script src="/src/js/plugin/jquery-scrollbar/jquery.scrollbar.min.js"></script>
 
+        <script src="/src/js/sentri/response.js"></script>
+
         <!-- Load Other Js scripts -->
         <?php
         if (isset($this->jsScriptLoadData)) {

pub/src/css/bootstrap.gruvbox.css

@@ -50,10 +50,10 @@
     --bs-dark-text-emphasis: #a89984;
     --bs-primary-bg-subtle: #d5c4a1;
     --bs-secondary-bg-subtle: #ebdbb2;
-    --bs-success-bg-subtle: #b8bb26;
+    --bs-success-bg-subtle: #8ec07c;
     --bs-info-bg-subtle: #83a598;
-    --bs-warning-bg-subtle: #fabd2f;
-    --bs-danger-bg-subtle: #fb4934;
+    --bs-warning-bg-subtle: #d65d0e;
+    --bs-danger-bg-subtle: #cc241d;
     --bs-light-bg-subtle: #f2e5bc;
     --bs-dark-bg-subtle: #32302f;
     --bs-primary-border-subtle: #83a598;
@@ -175,10 +175,10 @@
         --bs-dark-rgb: 40, 40, 40;
         --bs-primary-text-emphasis: #076678;
         --bs-secondary-text-emphasis: #7, 102, 120;
-        --bs-success-text-emphasis: #98971a;
+        --bs-success-text-emphasis: #8ec07c;
         --bs-info-text-emphasis: #83a598;
-        --bs-warning-text-emphasis: #fe8019;
-        --bs-danger-text-emphasis: #cc241d;
+        --bs-warning-text-emphasis: #d65d0e;
+        --bs-danger-text-emphasis: #fb4934;
         --bs-light-text-emphasis: #a89984;
         --bs-dark-text-emphasis: #a89984;
         --bs-primary-bg-subtle: #d5c4a1;

pub/src/js/plugin/toastify-js/toastify.css

@@ -0,0 +1,103 @@
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */
+
+.toastify {
+    padding: 12px 20px;
+    color: var(--bs-body-color);
+    display: inline-block;
+    box-shadow: var(--bs-box-shadow);
+    background: -webkit-linear-gradient(315deg, var(--bs-secondary-bg), var(--bs-body-bg));
+    background: linear-gradient(135deg, var(--bs-secondary-bg), var(--bs-body-bg));
+    position: fixed;
+    opacity: 0;
+    transition: all 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
+    border-radius: 2px;
+    cursor: pointer;
+    text-decoration: none;
+    max-width: calc(50% - 20px);
+    z-index: 2147483647;
+}
+
+.toastify.on {
+    opacity: 1;
+}
+
+.toast-close {
+    background: transparent;
+    border: 0;
+    color: var(--bs-body-color);
+    cursor: pointer;
+    font-family: inherit;
+    font-size: 1em;
+    opacity: 0.4;
+    padding: 0 5px;
+}
+
+.toastify-right {
+    right: 15px;
+}
+
+.toastify-left {
+    left: 15px;
+}
+
+.toastify-top {
+    top: -150px;
+}
+
+.toastify-bottom {
+    bottom: -150px;
+}
+
+.toastify-rounded {
+    border-radius: 25px;
+}
+
+.toastify-avatar {
+    width: 1.5em;
+    height: 1.5em;
+    margin: -7px 5px;
+    border-radius: 2px;
+}
+
+.toastify-center {
+    margin-left: auto;
+    margin-right: auto;
+    left: 0;
+    right: 0;
+    max-width: fit-content;
+}
+
+@media only screen and (max-width: 360px) {
+    .toastify-right, .toastify-left {
+        margin-left: auto;
+        margin-right: auto;
+        left: 0;
+        right: 0;
+        max-width: fit-content;
+    }
+}
+
+.toast-success {
+    background: linear-gradient(135deg, var(--bs-success), var(--bs-success-bg-subtle));
+    color: var(--bs-body-color)
+}
+
+.toast-error,
+.toast-danger {
+    background: linear-gradient(135deg, var(--bs-danger), var(--bs-danger-bg-subtle));
+    color: var(--bs-body-color)
+}
+
+.toast-warning {
+    background: linear-gradient(135deg, var(--bs-warning), var(--bs-warning-bg-subtle));
+}
+
+.toast-info {
+    background: linear-gradient(135deg, var(--bs-info), var(--bs-info-bg-subtle));
+}

pub/src/js/plugin/toastify-js/toastify.js

@@ -0,0 +1,447 @@
+/*!
+ * Toastify js 1.12.0
+ * https://github.com/apvarun/toastify-js
+ * @license MIT licensed
+ *
+ * Copyright (C) 2018 Varun A P
+ */
+(function (root, factory) {
+    if (typeof module === "object" && module.exports) {
+        module.exports = factory();
+    } else {
+        root.Toastify = factory();
+    }
+})(this, function (global) {
+    // Object initialization
+    var Toastify = function (options) {
+            // Returning a new init object
+            return new Toastify.lib.init(options);
+        },
+        // Library version
+        version = "1.12.0";
+
+    // Set the default global options
+    Toastify.defaults = {
+        oldestFirst: true,
+        text: "Toastify is awesome!",
+        node: undefined,
+        duration: 3000,
+        selector: undefined,
+        callback: function () {
+        },
+        destination: undefined,
+        newWindow: false,
+        close: false,
+        gravity: "toastify-top",
+        positionLeft: false,
+        position: '',
+        backgroundColor: '',
+        avatar: "",
+        className: "",
+        stopOnFocus: true,
+        onClick: function () {
+        },
+        offset: {
+            x: 0,
+            y: 0
+        },
+        escapeMarkup: true,
+        ariaLive: 'polite',
+        style: {background: ''}
+    };
+
+    // Defining the prototype of the object
+    Toastify.lib = Toastify.prototype = {
+        toastify: version,
+
+        constructor: Toastify,
+
+        // Initializing the object with required parameters
+        init: function (options) {
+            // Verifying and validating the input object
+            if (!options) {
+                options = {};
+            }
+
+            // Creating the options object
+            this.options = {};
+
+            this.toastElement = null;
+
+            // Validating the options
+            this.options.text = options.text || Toastify.defaults.text; // Display message
+            this.options.node = options.node || Toastify.defaults.node;  // Display content as node
+            this.options.duration = options.duration === 0 ? 0 : options.duration || Toastify.defaults.duration; // Display duration
+            this.options.selector = options.selector || Toastify.defaults.selector; // Parent selector
+            this.options.callback = options.callback || Toastify.defaults.callback; // Callback after display
+            this.options.destination = options.destination || Toastify.defaults.destination; // On-click destination
+            this.options.newWindow = options.newWindow || Toastify.defaults.newWindow; // Open destination in new window
+            this.options.close = options.close || Toastify.defaults.close; // Show toast close icon
+            this.options.gravity = options.gravity === "bottom" ? "toastify-bottom" : Toastify.defaults.gravity; // toast position - top or bottom
+            this.options.positionLeft = options.positionLeft || Toastify.defaults.positionLeft; // toast position - left or right
+            this.options.position = options.position || Toastify.defaults.position; // toast position - left or right
+            this.options.backgroundColor = options.backgroundColor || Toastify.defaults.backgroundColor; // toast background color
+            this.options.avatar = options.avatar || Toastify.defaults.avatar; // img element src - url or a path
+            this.options.className = options.className || Toastify.defaults.className; // additional class names for the toast
+            this.options.stopOnFocus = options.stopOnFocus === undefined ? Toastify.defaults.stopOnFocus : options.stopOnFocus; // stop timeout on focus
+            this.options.onClick = options.onClick || Toastify.defaults.onClick; // Callback after click
+            this.options.offset = options.offset || Toastify.defaults.offset; // toast offset
+            this.options.escapeMarkup = options.escapeMarkup !== undefined ? options.escapeMarkup : Toastify.defaults.escapeMarkup;
+            this.options.ariaLive = options.ariaLive || Toastify.defaults.ariaLive;
+            this.options.style = options.style || Toastify.defaults.style;
+            if (options.backgroundColor) {
+                this.options.style.background = options.backgroundColor;
+            }
+
+            // Returning the current object for chaining functions
+            return this;
+        },
+
+        // Building the DOM element
+        buildToast: function () {
+            // Validating if the options are defined
+            if (!this.options) {
+                throw "Toastify is not initialized";
+            }
+
+            // Creating the DOM object
+            var divElement = document.createElement("div");
+            divElement.className = "toastify on " + this.options.className;
+
+            // Positioning toast to left or right or center
+            if (!!this.options.position) {
+                divElement.className += " toastify-" + this.options.position;
+            } else {
+                // To be depreciated in further versions
+                if (this.options.positionLeft === true) {
+                    divElement.className += " toastify-left";
+                    console.warn('Property `positionLeft` will be depreciated in further versions. Please use `position` instead.')
+                } else {
+                    // Default position
+                    divElement.className += " toastify-right";
+                }
+            }
+
+            // Assigning gravity of element
+            divElement.className += " " + this.options.gravity;
+
+            if (this.options.backgroundColor) {
+                // This is being deprecated in favor of using the style HTML DOM property
+                console.warn('DEPRECATION NOTICE: "backgroundColor" is being deprecated. Please use the "style.background" property.');
+            }
+
+            // Loop through our style object and apply styles to divElement
+            for (var property in this.options.style) {
+                divElement.style[property] = this.options.style[property];
+            }
+
+            // Announce the toast to screen readers
+            if (this.options.ariaLive) {
+                divElement.setAttribute('aria-live', this.options.ariaLive)
+            }
+
+            // Adding the toast message/node
+            if (this.options.node && this.options.node.nodeType === Node.ELEMENT_NODE) {
+                // If we have a valid node, we insert it
+                divElement.appendChild(this.options.node)
+            } else {
+                if (this.options.escapeMarkup) {
+                    divElement.innerText = this.options.text;
+                } else {
+                    divElement.innerHTML = this.options.text;
+                }
+
+                if (this.options.avatar !== "") {
+                    var avatarElement = document.createElement("img");
+                    avatarElement.src = this.options.avatar;
+
+                    avatarElement.className = "toastify-avatar";
+
+                    if (this.options.position == "left" || this.options.positionLeft === true) {
+                        // Adding close icon on the left of content
+                        divElement.appendChild(avatarElement);
+                    } else {
+                        // Adding close icon on the right of content
+                        divElement.insertAdjacentElement("afterbegin", avatarElement);
+                    }
+                }
+            }
+
+            // Adding a close icon to the toast
+            if (this.options.close === true) {
+                // Create a span for close element
+                var closeElement = document.createElement("button");
+                closeElement.type = "button";
+                closeElement.setAttribute("aria-label", "Close");
+                closeElement.className = "toast-close";
+                closeElement.innerHTML = "✖";
+
+                // Triggering the removal of toast from DOM on close click
+                closeElement.addEventListener(
+                    "click",
+                    function (event) {
+                        event.stopPropagation();
+                        this.removeElement(this.toastElement);
+                        window.clearTimeout(this.toastElement.timeOutValue);
+                    }.bind(this)
+                );
+
+                //Calculating screen width
+                var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+
+                // Adding the close icon to the toast element
+                // Display on the right if screen width is less than or equal to 360px
+                if ((this.options.position == "left" || this.options.positionLeft === true) && width > 360) {
+                    // Adding close icon on the left of content
+                    divElement.insertAdjacentElement("afterbegin", closeElement);
+                } else {
+                    // Adding close icon on the right of content
+                    divElement.appendChild(closeElement);
+                }
+            }
+
+            // Clear timeout while toast is focused
+            if (this.options.stopOnFocus && this.options.duration > 0) {
+                var self = this;
+                // stop countdown
+                divElement.addEventListener(
+                    "mouseover",
+                    function (event) {
+                        window.clearTimeout(divElement.timeOutValue);
+                    }
+                )
+                // add back the timeout
+                divElement.addEventListener(
+                    "mouseleave",
+                    function () {
+                        divElement.timeOutValue = window.setTimeout(
+                            function () {
+                                // Remove the toast from DOM
+                                self.removeElement(divElement);
+                            },
+                            self.options.duration
+                        )
+                    }
+                )
+            }
+
+            // Adding an on-click destination path
+            if (typeof this.options.destination !== "undefined") {
+                divElement.addEventListener(
+                    "click",
+                    function (event) {
+                        event.stopPropagation();
+                        if (this.options.newWindow === true) {
+                            window.open(this.options.destination, "_blank");
+                        } else {
+                            window.location = this.options.destination;
+                        }
+                    }.bind(this)
+                );
+            }
+
+            if (typeof this.options.onClick === "function" && typeof this.options.destination === "undefined") {
+                divElement.addEventListener(
+                    "click",
+                    function (event) {
+                        event.stopPropagation();
+                        this.options.onClick();
+                    }.bind(this)
+                );
+            }
+
+            // Adding offset
+            if (typeof this.options.offset === "object") {
+
+                var x = getAxisOffsetAValue("x", this.options);
+                var y = getAxisOffsetAValue("y", this.options);
+
+                var xOffset = this.options.position == "left" ? x : "-" + x;
+                var yOffset = this.options.gravity == "toastify-top" ? y : "-" + y;
+
+                divElement.style.transform = "translate(" + xOffset + "," + yOffset + ")";
+
+            }
+
+            // Returning the generated element
+            return divElement;
+        },
+
+        // Displaying the toast
+        showToast: function () {
+            // Creating the DOM object for the toast
+            this.toastElement = this.buildToast();
+
+            // Getting the root element to with the toast needs to be added
+            var rootElement;
+            if (typeof this.options.selector === "string") {
+                rootElement = document.getElementById(this.options.selector);
+            } else if (this.options.selector instanceof HTMLElement || (typeof ShadowRoot !== 'undefined' && this.options.selector instanceof ShadowRoot)) {
+                rootElement = this.options.selector;
+            } else {
+                rootElement = document.body;
+            }
+
+            // Validating if root element is present in DOM
+            if (!rootElement) {
+                throw "Root element is not defined";
+            }
+
+            // Adding the DOM element
+            var elementToInsert = Toastify.defaults.oldestFirst ? rootElement.firstChild : rootElement.lastChild;
+            rootElement.insertBefore(this.toastElement, elementToInsert);
+
+            // Repositioning the toasts in case multiple toasts are present
+            Toastify.reposition();
+
+            if (this.options.duration > 0) {
+                this.toastElement.timeOutValue = window.setTimeout(
+                    function () {
+                        // Remove the toast from DOM
+                        this.removeElement(this.toastElement);
+                    }.bind(this),
+                    this.options.duration
+                ); // Binding `this` for function invocation
+            }
+
+            // Supporting function chaining
+            return this;
+        },
+
+        hideToast: function () {
+            if (this.toastElement.timeOutValue) {
+                clearTimeout(this.toastElement.timeOutValue);
+            }
+            this.removeElement(this.toastElement);
+        },
+
+        // Removing the element from the DOM
+        removeElement: function (toastElement) {
+            // Hiding the element
+            // toastElement.classList.remove("on");
+            toastElement.className = toastElement.className.replace(" on", "");
+
+            // Removing the element from DOM after transition end
+            window.setTimeout(
+                function () {
+                    // remove options node if any
+                    if (this.options.node && this.options.node.parentNode) {
+                        this.options.node.parentNode.removeChild(this.options.node);
+                    }
+
+                    // Remove the element from the DOM, only when the parent node was not removed before.
+                    if (toastElement.parentNode) {
+                        toastElement.parentNode.removeChild(toastElement);
+                    }
+
+                    // Calling the callback function
+                    this.options.callback.call(toastElement);
+
+                    // Repositioning the toasts again
+                    Toastify.reposition();
+                }.bind(this),
+                400
+            ); // Binding `this` for function invocation
+        },
+    };
+
+    // Positioning the toasts on the DOM
+    Toastify.reposition = function () {
+
+        // Top margins with gravity
+        var topLeftOffsetSize = {
+            top: 15,
+            bottom: 15,
+        };
+        var topRightOffsetSize = {
+            top: 15,
+            bottom: 15,
+        };
+        var offsetSize = {
+            top: 15,
+            bottom: 15,
+        };
+
+        // Get all toast messages on the DOM
+        var allToasts = document.getElementsByClassName("toastify");
+
+        var classUsed;
+
+        // Modifying the position of each toast element
+        for (var i = 0; i < allToasts.length; i++) {
+            // Getting the applied gravity
+            if (containsClass(allToasts[i], "toastify-top") === true) {
+                classUsed = "toastify-top";
+            } else {
+                classUsed = "toastify-bottom";
+            }
+
+            var height = allToasts[i].offsetHeight;
+            classUsed = classUsed.substr(9, classUsed.length - 1)
+            // Spacing between toasts
+            var offset = 15;
+
+            var width = window.innerWidth > 0 ? window.innerWidth : screen.width;
+
+            // Show toast in center if screen with less than or equal to 360px
+            if (width <= 360) {
+                // Setting the position
+                allToasts[i].style[classUsed] = offsetSize[classUsed] + "px";
+
+                offsetSize[classUsed] += height + offset;
+            } else {
+                if (containsClass(allToasts[i], "toastify-left") === true) {
+                    // Setting the position
+                    allToasts[i].style[classUsed] = topLeftOffsetSize[classUsed] + "px";
+
+                    topLeftOffsetSize[classUsed] += height + offset;
+                } else {
+                    // Setting the position
+                    allToasts[i].style[classUsed] = topRightOffsetSize[classUsed] + "px";
+
+                    topRightOffsetSize[classUsed] += height + offset;
+                }
+            }
+        }
+
+        // Supporting function chaining
+        return this;
+    };
+
+    // Helper function to get offset.
+    function getAxisOffsetAValue(axis, options) {
+
+        if (options.offset[axis]) {
+            if (isNaN(options.offset[axis])) {
+                return options.offset[axis];
+            } else {
+                return options.offset[axis] + 'px';
+            }
+        }
+
+        return '0px';
+
+    }
+
+    function containsClass(elem, yourClass) {
+        if (!elem || typeof yourClass !== "string") {
+            return false;
+        } else if (
+            elem.className &&
+            elem.className
+                .trim()
+                .split(/\s+/gi)
+                .indexOf(yourClass) > -1
+        ) {
+            return true;
+        } else {
+            return false;
+        }
+    }
+
+    // Setting up the prototype for the init object
+    Toastify.lib.init.prototype = Toastify.lib;
+
+    // Returning the Toastify function to be assigned to the window object/module
+    return Toastify;
+});

pub/src/js/sentri/response.js

@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", async function () {
+document.addEventListener("DOMContentLoaded", async () => {
     try {
         const response = await fetch("/api/v1/frontend/response/");
 
@@ -13,21 +13,18 @@ document.addEventListener("DOMContentLoaded", async function () {
             return;
         }
 
-        const title = Object.keys(data)[0];
-        const messageKey = data[title];
+        const type = Object.keys(data)[0];
+        const messageKey = data[type];
 
-        $.notify({
-            icon: "fa fa-bell",
-            title: title.charAt(0).toUpperCase() + title.slice(1),
-            message: __(messageKey)
-        }, {
-            type: title === "error" ? "danger" : title,
-            placement: {
-                from: "top",
-                align: "right"
-            },
-            delay: 3000
-        });
+        Toastify({
+            text: `${type.charAt(0).toUpperCase() + type.slice(1)}: ${__(messageKey)}`,
+            duration: 2000,
+            gravity: "top",
+            position: "right",
+            close: true,
+            stopOnFocus: true,
+            className: `toast-${type}`
+        }).showToast();
 
         if ($.fn.select2) {
             $("#multiple").select2({