Skeleton v2

Pro-M felugró ablak bejelentkezés előtt

Jogszabályi háttér:

A változott a jogszabályi környezet szerint a igy 41/2015 kormányrendelet megszűnését követően 2025.01.01.-től az új NIS2 alapú a7/2024. (VI. 24.) MK rendeletvette át.
Ennek nagyon sok minden egyéb mellet, a bejelentkezési üzenet un. „A rendszerhasználat jelzése” névre változott.

Az EIR mindaddig fenntartja a rendszerhasználati értesítést a képernyőn, amíg a felhasználók nem fogadják el a használati feltételeket és nem tesznek egyértelmű lépéseket a rendszerbe való bejelentkezésre vagy a rendszerhez való további hozzáférésre.
A nyilvános EIR rendszer mindaddig fenntartja a rendszerhasználati értesítést a képernyőn, amíg a felhasználók nem fogadják el a használati feltételeket és nem tesznek egyértelmű lépéseket a rendszerbe való bejelentkezésre vagy a rendszerhez való további hozzáférésre.

Fontos hogy ezt az Üzenet minden konszolidációban érintett rendszernél el kell végezni.

Kód:

Verzió: v1.1.3
Dátuma: 2025-01-28

Changelog

v1.1.1: Szövegmódosítás
v1.1.2: -
v1.1.3: .proMPrompt position absolite -> sticky (hogy hosszú oldalaknál is középen legyen az üzenet)

<div>
    <div class="proMPrompt" id="proM72024MKPrompt">
        <style>
            .proMPrompt {
                backdrop-filter : blur(2px);
                position        : sticky;
                left            : 0;
                right           : 0;
                top             : 0;
                bottom          : 0;
                z-index         : 999999;
                background-color: rgba(255, 255, 255, 0.3);
                transition      : opacity .5s;
                opacity         : 1;
                display         : none;
            }
            .proMPrompt h5 {
                font-size    : 1.25rem;
                margin-bottom: .5rem;
                font-family  : inherit;
                font-weight  : 500;
                line-height  : 1.2;
                color        : inherit;
            }
            .proMPrompt button {
                background-color   : #f8f9fa;
                border-color       : #ddd;
                display            : none;
                font-weight        : 400;
                color              : #212529;
                text-align         : center;
                vertical-align     : middle;
                cursor             : pointer;
                -webkit-user-select: none;
                -moz-user-select   : none;
                -ms-user-select    : none;
                user-select        : none;
                border             : 1px solid transparent;
                padding            : .375rem .75rem;
                font-size          : 1rem;
                line-height        : 1.5;
                border-radius      : .25rem;
                transition         : color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
                display            : inline-block;
            }
            .proMPrompt button:hover {
                background-color: #e9ecef;
                color: #2b2b2b;
            }

            .proMAlertBox {
                padding      : .75rem 1.25rem;
                border       : 1px solid transparent;
                border-radius: .25rem;
                text-align   : left;

                color        : #fff;
                background   : #17a2b8;
                border-color : #148ea1;
                margin-left  : auto !important;
                margin-right : auto !important;
                margin-bottom: 3rem !important;

                max-width    : 750px;
            }
            .proMPrompt .proMAlertBox {
                position     : absolute;
                top          : 50%;
                -ms-transform: translate(-50%, -50%);
                transform    : translate(-50%, -50%);
                left         : 50%;
            }
            .proMPrompt .proMAlertBox p {
                display: none;
            }
        </style>
        <script>
        !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e=e||self).cookie=t()}(this,function(){"use strict";var e=function(){return e.get.apply(e,arguments)},t=e.utils={isArray:Array.isArray||function(e){return"[object Array]"===Object.prototype.toString.call(e)},isPlainObject:function(e){return!!e&&"[object Object]"===Object.prototype.toString.call(e)},toArray:function(e){return Array.prototype.slice.call(e)},getKeys:Object.keys||function(e){var t=[],r="";for(r in e)e.hasOwnProperty(r)&&t.push(r);return t},encode:function(e){return String(e).replace(/[,;"\\=\s%]/g,function(e){return encodeURIComponent(e)})},decode:function(e){return decodeURIComponent(e)},retrieve:function(e,t){return null==e?t:e}};return e.defaults={},e.expiresMultiplier=86400,e.set=function(e,r,i){if(t.isPlainObject(e))for(var n in e)e.hasOwnProperty(n)&&this.set(n,e[n],r);else{var o=void 0!==(i=t.isPlainObject(i)?i:{expires:i}).expires?i.expires:this.defaults.expires||"",s=typeof o;"string"===s&&""!==o?o=new Date(o):"number"===s&&(o=new Date(+new Date+1e3*this.expiresMultiplier*o)),""!==o&&"toUTCString"in o&&(o=";expires="+o.toUTCString());var u=i.path||this.defaults.path;u=u?";path="+u:"";var a=i.domain||this.defaults.domain;a=a?";domain="+a:"";var c=i.secure||this.defaults.secure?";secure":"";!1===i.secure&&(c="");var f=i.sameSite||this.defaults.sameSite;f=f?";SameSite="+f:"",null===i.sameSite&&(f=""),document.cookie=t.encode(e)+"="+t.encode(r)+o+u+a+c+f}return this},e.setDefault=function(r,i,n){if(t.isPlainObject(r)){for(var o in r)void 0===this.get(o)&&this.set(o,r[o],i);return e}if(void 0===this.get(r))return this.set.apply(this,arguments)},e.remove=function(e){for(var r=0,i=(e=t.isArray(e)?e:t.toArray(arguments)).length;r<i;r++)this.set(e[r],"",-1);return this},e.removeSpecific=function(e,r){if(!r)return this.remove(e);e=t.isArray(e)?e:[e],r.expires=-1;for(var i=0,n=e.length;i<n;i++)this.set(e[i],"",r);return this},e.empty=function(){return this.remove(t.getKeys(this.all()))},e.get=function(e,r){var i=this.all();if(t.isArray(e)){for(var n={},o=0,s=e.length;o<s;o++){var u=e[o];n[u]=t.retrieve(i[u],r)}return n}return t.retrieve(i[e],r)},e.all=function(){if(""===document.cookie)return{};for(var e=document.cookie.split("; "),r={},i=0,n=e.length;i<n;i++){var o=e[i].split("="),s=t.decode(o.shift()),u=t.decode(o.join("="));r[s]=u}return r},e.enabled=function(){if(navigator.cookieEnabled)return!0;var t="_"===e.set("_","_").get("_");return e.remove("_"),t},e});
        class ProMPrompt {
            
            // Prompt management library
            // Version: v1.1.2
            // Version date: 2025-01-24

            // Cookie management library: https://github.com/florian/cookie.js/

            constructor () {


                /*************/
                /*  CONFIG   */
                /*************/
                this.public           = false                   // Ezt kell állítani, hogy publikus, vagy zárt körűen használják-e az oldalt
                this.debug            = true;                   // Konzolra folyamat jelentés
                this.promptBoxID      = 'proM72024MKPrompt';    // A prompt szülő dobozának ID-ja. Akkor érdemes megváltoztatni, ha egy oldalon belül 2 prompt is kell, pl publikus/privát felülete is van.
                this.promptExpiryTime = 7;                      // 7 days

            }

            init() {

                let self = this;
                
                // Megvizsgáljuk, hogy meg kell-e jeleníteni a promptot
                let promptStatus = cookie.get( self.promptBoxID );
                
                // Debug, cookie értéke
                if (self.debug) console.log( 'Prompt cookie értéke:', typeof promptStatus, promptStatus );
                
                if (promptStatus !== 'true') {
                    document.getElementById( self.promptBoxID ).style.display = 'block';

                    if (this.public) {
                        document.querySelector( `#${self.promptBoxID} .promptTextPublic` ).style.display = 'block';
                    } else {
                        document.querySelector( `#${self.promptBoxID} .promptTextClosed` ).style.display = 'block';
                    }
                
                    // Debug, prompt megjelenítése
                    if (self.debug) console.log('Prompt megjelenítve');
                }
                
            }

            // Ezzel becsukjuk
            close () {

                let self = this;

                // Eltároljuk az eltüntetés gomb megnyomásának dátumát
                cookie.set(self.promptBoxID, 'true', {
                    expires: self.promptExpiryTime,
                });
                
                // Debug, prompt megjelenítése
                if (self.debug) console.log('Prompt állapota eltárolva. Visszakért érték:', cookie.get( self.promptBoxID ));

                // Eltüntetjük a promptor
                document.getElementById( self.promptBoxID ).style.opacity = 0;
                setTimeout(() => { document.getElementById( self.promptBoxID ).style.display = 'none'; }, 750);
                
                // Debug, prompt megjelenítése
                if (self.debug) console.log('Prompt eltüntetve');

            }

            // Ez reseteli a promt működését, újra fel fog ugrani
            reset () {

                let self = this;

                cookie.remove( self.promptBoxID );
                
                // Debug, prompt megjelenítése
                if (self.debug) console.log('Prompt visszaállítva');

            }

        }
        let proMPrompt = new ProMPrompt();
        </script>
        <div class="proMAlertBox">
            <h5>Figyelem!</h5>
            <p class="promptTextClosed">
                Ön a Pro-M Zrt védett információs rendszerét kívánja használni.<br>                                           
                A 7/2024  MK rendelet alapján a rendszer használatát megfigyelhetik, rögzíthetik, naplózhatják.<br>
                A rendszer jogosulatlan használata tilos és büntető- vagy polgári jogi felelősséggel jár.<br>
                A rendszer használata az előbbiekben részletezett feltételek elfogadását jelenti.
            </p>
            <p class="promptTextPublic">
                Ön a Pro-M Zrt. nyilvános rendszerét kívánja használni.<br>
                A 7/2024  MK rendelet alapján a rendszer használatát megfigyelhetik, rögzíthetik, naplózhatják.<br>
                A rendszer jogosulatlan használata tilos és büntető- vagy polgári jogi felelősséggel jár.
            </p>

            <button onclick="proMPrompt.close();">Megértettem</button>
        </div>
        <script> proMPrompt.init(); </script>
    </div>
    <noscript>
        <div class="proMAlertBox" style="display: block;">
            <h5>Figyelem!</h5>
            <p>
                Ön a Pro-M Zrt védett információs rendszerét kívánja használni.<br>                                           
                A 7/2024  MK rendelet alapján a rendszer használatát megfigyelhetik, rögzíthetik, naplózhatják.<br>
                A rendszer jogosulatlan használata tilos és büntető- vagy polgári jogi felelősséggel jár.<br>
                A rendszer használata az előbbiekben részletezett feltételek elfogadását jelenti.
            </p>
        </div>
    </noscript>
</div>