https://www.aulaformacion.org/registrar-conexion/registro-conexion.js

1(function() {
2  function crearModal() {
3    if (document.getElementById('rcOverlayGlobal')) return;
4
5    var style = document.createElement('style');
6    style.textContent =
7      '.rc-overlay{position:fixed;top:0;left:0;width:100%;height:100%;' +
8        'background:rgba(0,0,0,0.5);display:none;align-items:center;' +
9        'justify-content:center;z-index:9999;}' +
10      '.rc-modal{background:#fff;border-radius:6px;padding:30px;' +
11        'max-width:420px;width:90%;text-align:center;' +
12        'box-shadow:0 4px 20px rgba(0,0,0,0.25);}' +
13      '.rc-botones{margin-top:20px;}' +
14      '.btn-registrar-conexion{box-sizing:border-box;-webkit-appearance:none;' +
15        '-moz-appearance:none;appearance:none;display:inline-flex;' +
16        'align-items:center;justify-content:center;vertical-align:middle;' +
17        'height:42px;margin:0 6px;padding:0 22px;font-family:inherit;' +
18        'font-size:14px;line-height:normal;border:none;border-radius:4px;' +
19        'cursor:pointer;color:#fff;}' +
20      '.btn-registrar{background-color:#1e6fd9;}' +
21      '.btn-registrar:hover{background-color:#1857a8;}' +
22      '.btn-volver{background-color:#d9302f;}' +
23      '.btn-volver:hover{background-color:#a82320;}' +
24      '.btn-registrar-conexion[disabled]{opacity:0.6;cursor:default;}';
25    document.head.appendChild(style);
26
27    var overlay = document.createElement('div');
28    overlay.id = 'rcOverlayGlobal';
29    overlay.className = 'rc-overlay';
30    overlay.innerHTML =
31      '<div class="rc-modal">' +
32        '<p id="rcMensajeGlobal">Vas a registrar tu tiempo de conexión para este curso.</p>' +
33        '<div class="rc-botones">' +
34          '<button type="button" id="rcBtnRegistrarGlobal" class="btn-registrar-conexion btn-registrar">Registrar sesión</button>' +
35          '<button type="button" id="rcBtnCerrarGlobal" class="btn-registrar-conexion btn-volver">Cerrar</button>' +
36        '</div>' +
37      '</div>';
38    document.body.appendChild(overlay);
39
40    document.getElementById('rcBtnCerrarGlobal').addEventListener('click', function() {
41      overlay.style.display = 'none';
42    });
43  }
44
45  function abrirModal(registrarUrl) {
46    crearModal();
47    var overlay = document.getElementById('rcOverlayGlobal');
48    var mensaje = document.getElementById('rcMensajeGlobal');
49    var btnRegistrar = document.getElementById('rcBtnRegistrarGlobal');
50
51    mensaje.textContent = 'Vas a registrar tu tiempo de conexión para este curso.';
52    btnRegistrar.style.display = 'inline-flex';
53    btnRegistrar.disabled = false;
54    overlay.style.display = 'flex';
55
56    // Evitar acumular listeners si se abre varias veces
57    var nuevoBtn = btnRegistrar.cloneNode(true);
58    btnRegistrar.parentNode.replaceChild(nuevoBtn, btnRegistrar);
59
60    nuevoBtn.addEventListener('click', function() {
61      nuevoBtn.disabled = true;
62      mensaje.textContent = 'Registrando...';
63
64      fetch(registrarUrl, { method: 'POST', credentials: 'same-origin' })
65        .then(function(r) { return r.json(); })
66        .then(function(data) {
67          mensaje.textContent = data.message;
68          nuevoBtn.style.display = 'none';
69        })
70        .catch(function() {
71          mensaje.textContent = 'Ha ocurrido un error al registrar la conexión.';
72          nuevoBtn.disabled = false;
73        });
74    });
75  }
76
77  document.addEventListener('click', function(e) {
78    var link = e.target.closest ? e.target.closest('a') : null;
79    if (!link || !link.href) return;
80
81    // Coincide con ".../registrar-conexion/?id=X" o ".../registrar-conexion/index.php?id=X"
82    var match = link.href.match(/^(.*\/registrar-conexion\/)(?:index\.php)?(\?.*)?$/);
83    if (!match) return;
84
85    e.preventDefault();
86    var registrarUrl = match[1] + 'registrar.php' + (match[2] || '');
87    abrirModal(registrarUrl);
88  });
89})();