https://inno-talk.de/wp-content/themes/inno-talk/js/site.js?ver=261002-100605

1console.log("site.js loaded");
2var shadowDivId = 'shadow-div';
3var loginDivId = 'login-div';
4var loginWindowOpened = false;
5
6
7document.addEventListener("DOMContentLoaded", function (event) {
8    // Your code to run since DOM is loaded and ready
9
10    addLoginDiv();
11    changeLoginButtons();
12
13    var divs = document.querySelectorAll('.window-close');
14    divs.forEach(el => el.addEventListener('click', event => {
15        closeWindow();
16    }));
17
18    divs = document.querySelectorAll('.login');
19    divs.forEach(el => el.addEventListener('click', event => {
20        if (window.auth.loggedin) {
21            window.location = window.events.latest_href;
22        } else {
23            openWindow();
24        }
25    }));
26
27    window.onclick = function (event) {
28        var containingElement = document.getElementById(loginDivId);
29        if (!containingElement.contains(event.target)) {
30            closeWindow();
31        }
32    }
33
34    divs = document.querySelectorAll('.login-button');
35    divs.forEach(el => el.addEventListener('click', async event => {
36        var email = document.getElementById('email').value;
37        if (email.length <= 0) {
38            email = "-";
39        }
40        var password = document.getElementById('password').value;
41        if (email.length <= 0) {
42            password = "-";
43        }
44        // Login per POST: Zugangsdaten im Body statt in der URL (kein Passwort
45        // im Browser-Verlauf / in Server-Logs).
46        var response = await fetch("/login-handler/", {
47            "credentials": "include",
48            "headers": {
49                "Pragma": "no-cache",
50                "Cache-Control": "no-cache",
51                "Content-Type": "application/x-www-form-urlencoded"
52            },
53            "method": "POST",
54            "body": "email=" + encodeURIComponent(email) + "&password=" + encodeURIComponent(password)
55        });
56
57        var json = await response.json();
58        if (json.hasOwnProperty('errors')) {
59            console.log(json.errors);
60            document.getElementById('login-error').style.display = 'block';
61            document.getElementById('login-error').classList.add('fade-in');
62
63        } else {
64            console.log(json);
65            closeWindow();
66            // Standard: zum Livestream. Seiten wie die Newsletter-Einstellungen
67            // können window.loginRedirect setzen, um danach dorthin zurückzukehren.
68            window.location = window.loginRedirect || window.events.latest_href;
69        }
70    }));
71});
72
73function changeLoginButtons() {
74    if (window.auth.loggedin) {
75        if (window.events.has_next_event) {
76            divs = document.querySelectorAll('.login');
77            divs.forEach(el => {
78                el.classList.add('is-style-square-button');
79                el.classList.add('live');
80
81                var a = el.querySelectorAll('a');
82                a.forEach(a => a.innerHTML = 'LIVESTREAM');
83            });
84        } else {
85            divs = document.querySelectorAll('.login');
86            divs.forEach(el => {
87                el.style.display = 'none';
88            });
89        }
90    }
91}
92
93function closeWindow() {
94    if (loginWindowOpened) {
95        var shadowDiv = document.getElementById(shadowDivId);
96        shadowDiv.classList.add('fade-out');
97        shadowDiv.classList.remove('fade-in');
98        window.setTimeout(() => {
99            shadowDiv.style.display = 'none';
100        }, 220);
101        loginWindowOpened = false;
102    }
103}
104
105function openWindow() {
106    var divs = document.querySelector('.wp-block-navigation__responsive-container-close').click();
107
108    var shadowDiv = document.getElementById(shadowDivId);
109    shadowDiv.style.display = 'block';
110    shadowDiv.classList.add('fade-in');
111    shadowDiv.classList.remove('fade-out');
112
113
114    window.setTimeout(() => {
115        loginWindowOpened = true;
116    }, 200);
117}
118
119function addLoginDiv() {
120    var style = document.createElement('style');
121    style.innerHTML = `
122    .column {
123        float: none;
124        width: 100%;
125      }
126      
127      /* Clear floats after the columns */
128      .row:after {
129        content: "";
130        display: table;
131        clear: both;
132      }
133
134      @media (min-width: 768px) {
135            .column
136            {
137                float: left; 
138                width: 50%;
139            }
140        }
141
142    .live {
143        animation: 1.8s cubic-bezier(0.66, 0, 0, 1) 0s infinite normal none running pulse;
144        transition: all 300ms ease-in-out 0s;
145        display: inline-flex;
146        -webkit-box-align: center;
147        align-items: center;
148        -webkit-box-pack: center;
149        justify-content: center;
150        position: relative;
151        box-sizing: border-box;
152        outline: 0px;
153        border: 0px;
154        margin: 0px;
155        cursor: pointer;
156        user-select: none;
157        vertical-align: middle;
158        appearance: none;
159        line-height: 1.75;
160        min-width: 64px;
161        padding: 6px 0px;
162        background-color: var(--wp--preset--color--inno-primary);
163        border-radius: 4px;
164        font-weight: 700;
165        color: rgb(255, 255, 255);
166        font-size: 16px;   
167        text-transform: uppercase;
168        box-shadow: var(--wp--preset--color--inno-primary) 0px 0px 0px 0px;
169        white-space:nowrap;
170    }
171    .live a {
172        background-color:transparent !important;
173    }
174    .live:hover {
175        background-color: var(--wp--preset--color--inno-hover);
176    }

177    @keyframes pulse {
178        100% {
179            box-shadow: rgba(232, 76, 61, 0) 0px 0px 0px 12px;
180        }
181      }
182
183      .content input {
184        font: inherit;
185        letter-spacing: inherit;
186        color: currentcolor;
187        box-sizing: border-box;
188        background: none;
189        height: 1.4375em;
190        display: block;
191        min-width: 0px;
192        width:100%;
193        animation-name: mui-auto-fill-cancel;
194        animation-duration: 10ms;
195        padding: 8.5px 14px;
196        line-height: 1.4375em;
197        color: rgb(51, 51, 51);
198        box-sizing: border-box;
199        cursor: text;
200        display: inline-flex;
201        -moz-box-align: center;
202        align-items: center;
203        position: relative;
204        border-radius: 4px;
205        border: 1px solid #ccc;
206        padding:16px;
207      }
208      .login-field {
209        padding: 8px;
210      }
211      .login-line::before {
212        content: "";
213        position: absolute;
214        top: 50%;
215        left: 0px;
216        border-top: 2px solid white;
217        width: 100%;
218        transform: translateY(-50%);
219      }
220      .content p {
221        margin-right:20px;
222        font-size: 18px;
223        color:#fff;
224      }
225      .content h3 {
226        color:#fff;
227      }
228      .window-close:hover {
229        background: rgba(255, 255, 255, 0);
230        box-shadow: none;
231        transform: scale(1.1);
232        cursor: pointer;
233      }
234
235      @keyframes fade-out {
236        0% { opacity: 1;display: block; }
237        100% { opacity: 0;display: none !important; }
238      }
239
240      @keyframes fade-in {        
241        0% { opacity: 0;display: block; }
242        100% { opacity: 1;display: block; }
243      }
244      .fade-in {
245        animation:fade-in 0.25s ease-in forwards;
246      }
247
248      .fade-out {
249        animation:fade-out 0.25s ease-in forwards;
250      }
251 
252      
253    `;
254    document.head.appendChild(style);
255
256    backgroundImage = window.login.image_url;
257    textLeft = window.login.text;
258
259
260    var shadowDiv = document.createElement('div');
261    shadowDiv.id = shadowDivId;
262    shadowDiv.style.cssText = 'position:fixed;width:100%;height:100%;z-index:100;background:rgba(0,0,0,0.3);top:0;display:none';
263    document.body.appendChild(shadowDiv);
264
265    var loginDiv = document.createElement('div');
266    loginDiv.id = loginDivId;
267    loginDiv.style.cssText = 'max-height: calc(100% - 128px);  max-width: calc(100% - 128px); width: 100%;background-color: rgb(255, 255, 255); color: rgb(51, 51, 51);  transition: box-shadow 300ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;    border-radius: 4px;    box-shadow: rgba(0, 0, 0, 0.2) 0px 11px 15px -7px, rgba(0, 0, 0, 0.14) 0px 24px 38px 3px, rgba(0, 0, 0, 0.12) 0px 9px 46px 8px; position: relative; overflow-y: auto; display: flex; flex-direction: column;margin: 64px;background-size: cover; background-image: url("' + backgroundImage + '");';
268    shadowDiv.appendChild(loginDiv);
269
270
271    var contentDiv = document.createElement('div');
272    contentDiv.innerHTML = `
273    <div class="row content">
274        <div style="display: flex; justify-content: flex-end;margin-bottom:40px;"><svg style="width:20px;" class="window-close" focusable="false" aria-hidden="true" viewBox="0 0 261.229 261.222"><path style="color:#fff;fill:currentcolor;" d="M169.138,130.611l83.605-83.602c10.639-10.639,10.639-27.892,0-38.531 c-10.638-10.639-27.892-10.639-38.529,0L130.61,92.082L47.006,8.479C36.37-2.16,19.129-2.16,8.489,8.479 C-2.149,19.118-2.149,36.371,8.479,47.002l83.613,83.609L8.479,214.214c-10.638,10.639-10.638,27.894,0,38.529 c10.637,10.638,27.891,10.638,38.528,0l83.604-83.603l83.613,83.603c10.628,10.638,27.882,10.638,38.52,0 c10.639-10.636,10.649-27.891,0.015-38.529L169.138,130.611z"></path></svg></div>
275        <div class="column">
276            ` + textLeft + `
277        </div>
278        <div class="column">
279            <div style="background-color:#fff;padding:16px;border-radius: 8px;">
280            <div class="is-style-square-button"><div class="login-field"><a class="wp-block-button__link wp-element-button" style="width:100%" href="` + window.backend_url + `/site/event/participate.php?event_id=` + window.events.latest + `">Jetzt anmelden</a></div></div>
281            </div>
282            <div style="flex-basis: 45%;text-align: center; position: relative;margin-bottom:20px;margin-top:20px;" class="login-line"><div style="display: inline-flex;background: rgb(255, 255, 255);z-index: 1; border-radius: 16px; position: relative;"><span style="padding-left: 12px; text-transform: uppercase;padding-right: 12px;font-size: 0.8125rem;padding-top: 4px;padding-bottom: 4px;">oder</span></div></div>
283            <div style="background-color:#fff;padding:16px;border-radius: 8px;">
284                <div class="row">
285                    <h3 style="text-align:center;color:rgb(216, 58, 104);margin-top:2px;">Schon angemeldet? Bitte hier einloggen.</h3>
286                </div>    
287                <div class="row" id="login-error" style="background-color:red;color:#fff;padding:4px 4px 4px 14px;display:none;border-radius:5px;">
288                    Login fehlgeschlagen: Ihre E-Mail und Kennwort stimmen nicht überein.
289                </div>            
290                <div class="row">
291                    <div class="column"><div class="login-field"><input id="email" placeholder="E-Mail" type="text" value=""></div></div>
292                    <div class="column"><div class="login-field"><input id="password" placeholder="Password" type="password" value="">  </div></div>
293                </div>
294                <div class="row" style="padding-top:8px;">
295                    <div class="column"><div class="login-field"><a class="wp-block-button__link wp-element-button" style="width:100%;background-color:#fff;color:#000;" href="` + window.backend_url + `/site/event2go/list.php?action=pwreset_start_form">Passwort vergessen</a></div></div>
296                    <div class="column is-style-square-button"><div class="login-field"><a class="wp-block-button__link wp-element-button login-button" style="width:100%">Login</a></div></div>
297                </div>
298            </div>
299        </div>
300  </div> 
301  
302    `;
303    contentDiv.style.cssText = "min-height:500px;max-height:1000px;padding:32px;";
304    loginDiv.appendChild(contentDiv);
305
306}