https://amuz.be/wp-content/themes/amuz/js/tixly-redirect-check.js

1/**
2 * Tixly Login Redirect Detectie
3 * Detecteert wanneer gebruiker al ingelogd is en terug wordt gestuurd
4 */
5
6(function() {
7  'use strict';
8
9  // Check of we terugkomen van Tixly login pagina
10  const referrer = document.referrer;
11  const isTixlyLoginReferrer = referrer && referrer.includes('tix.amuz.be') && referrer.includes('/login');
12
13  // Check of we een URL parameter hebben die aangeeft dat we van login komen
14  const urlParams = new URLSearchParams(window.location.search);
15  const fromLogin = urlParams.has('tixly_login_attempt');
16
17  // Debug logging (kan later verwijderd worden)
18  console.log('Tixly redirect check:', {
19    referrer: referrer,
20    isTixlyLoginReferrer: isTixlyLoginReferrer,
21    fromLogin: fromLogin,
22    shouldShowPopup: isTixlyLoginReferrer || fromLogin
23  });
24
25  // Als we van Tixly login komen OF de parameter aanwezig is
26  if (isTixlyLoginReferrer || fromLogin) {
27
28    // Check of we binnen 3 seconden terug zijn (= waarschijnlijk al ingelogd)
29    // Gebruik sessionStorage OF check via Performance Navigation Timing API
30    const loginClickTime = sessionStorage.getItem('tixly_login_click_time');
31    const now = Date.now();
32
33    let timeDiff;
34
35    if (loginClickTime) {
36      // We hebben een timestamp van deze sessie
37      timeDiff = now - parseInt(loginClickTime);
38    } else {
39      // Geen timestamp = nieuwe sessie/browser tab
40      // Gebruik Performance API als fallback
41      if (window.performance && window.performance.timing) {
42        const perfTiming = window.performance.timing;
43        const pageLoadTime = perfTiming.loadEventEnd - perfTiming.navigationStart;
44        timeDiff = pageLoadTime;
45      } else {
46        // Fallback: als we de parameter hebben, toon altijd popup
47        timeDiff = 1000; // Assume snel (< 3 sec)
48      }
49    }
50
51    console.log('Time since login click:', timeDiff, 'ms');
52
53    // Als minder dan 3 seconden = snel terug = waarschijnlijk al ingelogd
54    // OF als we geen timestamp hadden maar wel van Tixly komen (nieuwe sessie, al ingelogd)
55    if (timeDiff < 3000 || (isTixlyLoginReferrer && !loginClickTime)) {
56      // Verwijder de parameter uit URL (clean URL)
57      if (fromLogin) {
58        const cleanUrl = window.location.pathname;
59        window.history.replaceState({}, document.title, cleanUrl);
60      }
61
62      // Toon popup na kleine delay voor betere UX
63      setTimeout(function() {
64        showAlreadyLoggedInMessage();
65      }, 500);
66    }
67
68    // Clear de timestamp
69    sessionStorage.removeItem('tixly_login_click_time');
70  }
71
72  // Track wanneer login knop wordt geklikt
73  document.addEventListener('DOMContentLoaded', function() {
74    const loginLinks = document.querySelectorAll('a[href*="tix.amuz.be"][href*="/login"]');
75    loginLinks.forEach(function(link) {
76      link.addEventListener('click', function() {
77        // Bewaar timestamp
78        sessionStorage.setItem('tixly_login_click_time', Date.now().toString());
79        console.log('Login click tracked');
80      });
81    });
82  });
83
84  function showAlreadyLoggedInMessage() {
85    // Bepaal taal
86    const lang = document.documentElement.lang || 'nl';
87    let langCode = 'nl';
88    if (lang.includes('en')) langCode = 'en';
89
90    // Vertalingen
91    const messages = {
92      nl: {
93        title: 'Reeds aangemeld',
94        message: 'U bent al ingelogd bij Tixly.',
95        button: 'Ga naar Mijn Profiel',
96        close: 'Sluiten'
97      },
98      en: {
99        title: 'Already logged in',
100        message: 'You are already logged in to Tixly.',
101        button: 'Go to My Profile',
102        close: 'Close'
103      }
104    };
105
106    const msg = messages[langCode];
107
108    // Maak popup
109    const popup = document.createElement('div');
110    popup.id = 'tixly-already-logged-in-popup';
111    popup.innerHTML = `
112      <div class="tixly-popup-overlay">
113        <div class="tixly-popup-content">
114          <button class="tixly-popup-close" aria-label="${msg.close}">&times;</button>
115          <h3>${msg.title}</h3>
116          <p>${msg.message}</p>
117          <a href="https://tix.amuz.be/${langCode}/profile/#ProfileEdit" class="btn btn-primary">
118            ${msg.button}
119          </a>
120        </div>
121      </div>
122    `;
123
124    // Voeg toe aan body

125    document.body.appendChild(popup);
126
127    // Close handlers
128    const overlay = popup.querySelector('.tixly-popup-overlay');
129    const closeBtn = popup.querySelector('.tixly-popup-close');
130
131    closeBtn.addEventListener('click', closePopup);
132    overlay.addEventListener('click', function(e) {
133      if (e.target === overlay) closePopup();
134    });
135
136    // ESC key
137    document.addEventListener('keydown', function(e) {
138      if (e.key === 'Escape') closePopup();
139    });
140
141    function closePopup() {
142      popup.remove();
143    }
144
145    // GTM event
146    if (window.dataLayer) {
147      window.dataLayer.push({
148        'event': 'tixly_already_logged_in_popup_shown'
149      });
150    }
151  }
152
153})();