Insights Hub Module Details

<script>
	// Insights Hub specific part-1: We have to use the XSRF-TOKEN on fetch requests.
	// This script should placed before "mxui.js" as this script makes the fetch requests
	(function () {
        const sessionExpiredReloadAppPopup = function () {
            // get localized texts for popup from sessionstorage. In case of error use fallbackText.
            const getTextFromSessionStorage = () => {
                const fallbackText = {
                    title: "Session expired",
                    message: "The session is expired. Please reload the app.",
                    button: "Reload app",
                }
                try {
                    const text = JSON.parse(sessionStorage.getItem('sessionExpired'));
                    if (text.hasOwnProperty("title") && text.hasOwnProperty("message") && text.hasOwnProperty("button")) {
                        return text;
                    }
                    return fallbackText;
                } catch (error) {
                    return fallbackText;
                }
            }
            const text = getTextFromSessionStorage();
            // div structure is copied from the "SessionExpired" page in the module SiemensInsightsHubWebContent
            // As we can not load the page dynamically due to expiration of the gateway session.
            // When user click the button location.reload() is triggered - which initiates an new session with gateway
            const sessionExpiredPopup = `
            <div role="dialog" class="modal-dialog mx-window  mx-window-active utx-session-expired"
                style="opacity: 1; z-index: 1002; top: calc(50% - 141px); left: calc(50% - 300px);" data-focus-capturing="modal">
                <div class="modal-content mx-window-content">
                    <div class="modal-header mx-window-header" style="user-select: none; cursor: auto;">
                        <h4>${text.title}</h4>
                    </div>
                    <div data-focusindex="0" class="modal-body mx-window-body">
                        <div class="mx-scrollcontainer mx-scrollcontainer-horizontal mx-scrollcontainer-fixed"
                            style="">
                            <div class="mx-placeholder">
                                <div class="" id="mxui_widget_Wrapper_21" style="display: contents !important;">
                                    <div class="mx-name-layoutGrid1 mx-layoutgrid mx-layoutgrid-fluid container-fluid">
                                        <h1 class="mx-title mx-name-pageTitle1">
                                            ${text.title}
                                        </h1>
                                        <div>
                                            ${text.message}
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="modal-footer mx-dialog-footer">
                        <button type="button" class="btn mx-button mx-name-actionButton1 pull-right btn-primary"
                            title="" data-button-id="2.SiemensInsightsHubWebContent.SessionExpired.actionButton1"
                            data-disabled="false" onClick="location.reload()">${text.button}</button>
                    </div>
                </div>
            </div>
            <div class="mx-underlay" id="mxui_widget_Underlay_0" widgetid="mxui_widget_Underlay_0" style="z-index: 101;"></div>`
            const body = document.getElementsByTagName('body')[0];
            body.insertAdjacentHTML('afterbegin', sessionExpiredPopup);
        };

        // Read cookie below
        function getCookie(name) {
            match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
            if (match) return match[2];
            else return '';
        }
        var xrsfToken = getCookie('XSRF-TOKEN');
        if (window.fetch) {
            var originalFetch = window.fetch;
            window.fetch = function (url, init) {
                if (!init) {
                    init = {};
                }
                if (!init.headers) {
                    init.headers = new Headers();
                }
                var tokenAvailable =
                    typeof init.headers.get === 'function'
                        ? init.headers.get('x-xsrf-token')
                        : init.headers.hasOwnProperty('x-xsrf-token');
                if (!tokenAvailable) {
                    if (typeof init.headers.set === 'function') {
                        init.headers.set('x-xsrf-token', xrsfToken);
                    } else {
                        init.headers['x-xsrf-token'] = xrsfToken;
                    }
                }
                return new Promise((resolve, reject) => {
                    // Change default redirect mode from "error" to "manual"
                    // And handle "opaqueredirect" response type.
                    init.redirect = "manual";
                    originalFetch(url, init)
                        .then(response => {
                            if (response.type === "opaqueredirect") {
                                sessionExpiredReloadAppPopup();
                            } else {
                                return resolve(response);
                            }
                        })
                        .catch(e => {
                            reject(e);
                        });
                })
            };
        }
        if (!window.fetch || (window.fetch && /Edge/.test(navigator.userAgent))) {
            var originalXMLHttpRequest = window.XMLHttpRequest;
            window.XMLHttpRequest = function () {
                var result = new originalXMLHttpRequest(arguments);
                // overwrite setRequestHeader function to make sure to set the x-xsrf-token only once
                result.setRequestHeader = function (header, value) {
                    if (header) {
                        if (header.toLowerCase().indexOf('x-xsrf-token') !== -1) {
                            if (this.xsfrTokenSet === true) {
                                // token is already in place -> so do nothing
                                return;
                            }
                            this.xsfrTokenSet = true;
                        }
                    }
                    originalXMLHttpRequest.prototype.setRequestHeader.apply(this, arguments);
                };
                // overwrite open function to make sure to set the x-xsrf-token at least once
                result.open = function () {
                    originalXMLHttpRequest.prototype.open.apply(this, arguments);
                    this.setRequestHeader('x-xsrf-token', xrsfToken);
                };
                return result;
            };
        }
    })();
    // Insights Hub specific part-1: ends
</script>

if (\!document.cookie || \!document.cookie.match(/(^|;)originURI=/gi))
document.cookie = "originURI=/login.html";

<script>
	// Insights Hub specific part-2: Use the sso-login.html to prevent the Gateway taking over login.html and perform SSO
        // Always set originURI Cookie.
        document.cookie = 'originURI=/sso-login.html';
        // Insights Hub specific part-2: ends
</script>

   <script>
		// Insights Hub specific part-3: OS Bar related code
        var loadMendix = function () {
            // dojoConfig needs to be defined before loading mxui.js
            dojoConfig = {
                isDebug: false,
                baseUrl: 'mxclientsystem/dojo/',
                cacheBust: '{{cachebust}}',
                rtlRedirect: 'index-rtl.html',
            };
            // make sure that the mxui.js is loaded after /rest/os-bar/v1/loader to prevent problems with the height calculation of some elements
            (function (d2, script2) {
                script2 = d2.createElement('script');
                script2.src = 'mxclientsystem/mxui/mxui.js?{{cachebust}}';
                script2.onload = function () {
                    // Load localized texts for session expired popup and store them in the session context.
                    // In case the session is expired we can not load the texts anymore.
                    mx.addOnLoad(() => {
                        mx.data.create({
                            entity: "SiemensInsightsHubWebContent.SessionExpired",
                            callback: function (obj) {
                                const title = obj.getRawValue('Title');
                                const message = obj.getRawValue('Message');
                                const button = obj.getRawValue('Button');
                                sessionStorage.setItem('sessionExpired', JSON.stringify({ title, message, button }));
                            },
                            error: function (e) {
                                console.error(e);
                            }
                        });
                    });
                }
                script2.async = true;
                d2.getElementsByTagName('body')[0].appendChild(script2);
            })(document);
        };
        var onError = function (d1) {
            var body = d1.getElementsByTagName('body')[0];
            var content = d1.getElementById('content');
            var html =
                '<osbar-root id="OSBarErrorText" class="mdsp_osbf_outer">' +
                '<div class="mdsp_osbf_inner">Insights Hub OSBar could not be loaded. Please check your ' +
                '<a title="Proxy Settings" class="mdsp_osbf_link" target="_blank" rel="noopener" href="https://docs.mendix.com/partners/siemens/mindsphere-development-considerations#localtesting"> proxy settings</a>' +
                '<span> or the OSBarURL in the InsightsHubOSBarConnector</span>' +
                '</div>' +
                '</osbar-root>';

            body.insertAdjacentHTML('afterbegin', html);
            body.className = body.className + " mdsp_osbf_body";
            content.className = content.className + "_mdsp_osbf_content";
            loadMendix();
        };

        var initOsBar = function (url, d1, script1) {
            script1 = d1.createElement('script');
            script1.type = 'text/javascript';
            script1.async = true;
            script1.onload = function () {
                _mdsp.init({
                    appId: 'content',
                    appInfoPath: '/rest/os-bar/v1/config',
                    initialize: true,
                });
                loadMendix();
            };
            script1.onerror = () => onError(d1);
            script1.src = url;
            d1.getElementsByTagName('head')[0].appendChild(script1);
        };

        (async function () {
            try {
                const resp = await window.fetch('/rest/os-bar/v1/osbar.url');
                const body = await resp.json();
                if (body.osBarUrl) {
                    initOsBar(body.osBarUrl, document);
                }
            } catch (error) {
                onError(document);
            }

        })();
        // Insights Hub specific part-3: ends
	</script>

<!doctype html>
<html>

<head>
	<title>Insights Hub</title>
	<script>
		window.location.assign("/sso" + window.location.search)
	</script>
</head>

</html>