JCB ezcard

jcb.js

// ==UserScript==
// @name         ezcard-helper
// @namespace    http://tampermonkey.net/
// @version      2024.06.05
// @description  懂的都懂
// @author       Oschangkai
// @run-at       document-start
// @match        https://ezweb.easycard.com.tw/Event01/JCBLoginServlet
// @match        https://ezweb.easycard.com.tw/Event01/JCBLoginRecordServlet
// @grant        none
// ==/UserScript==

(function () {
  'use strict';

  // default buttons, all you need to do is to modify the default ones
  var buttons = [{
    text: "測試卡 1",
    txtCreditCard1: "1111",
    txtCreditCard2: "22",
    txtCreditCard4: "3333",
    txtEasyCard1: "4444",
    txtEasyCard2: "5555",
    txtEasyCard3: "6666",
    txtEasyCard4: "7777",
  }, {
    text: "測試卡 2",
    txtCreditCard1: "8888",
    txtCreditCard2: "99",
    txtCreditCard4: "0000",
    txtEasyCard1: "1111",
    txtEasyCard2: "2222",
    txtEasyCard3: "3333",
    txtEasyCard4: "4444",
  }];

  // if injector is working, replace buttons with data from injector
  var injector = document.documentElement.getElementsByTagName('jcb-injector');
  if (injector && injector.length) {
    var data = injector[0].getAttribute("cards");
    if (!!data && !!data.length) {
      buttons = JSON.parse(data);
    }
  }

  // preconnect to google
  var googleLink = document.createElement("link");
  googleLink.rel = "preconnect";
  googleLink.href = "https://www.google.com";
  document.head.appendChild(googleLink);

  var gstaticLink = document.createElement("link");
  gstaticLink.rel = "preconnect";
  gstaticLink.href = "https://www.gstatic.com";
  gstaticLink.crossorigin = true;
  document.head.appendChild(gstaticLink);

  function recaptchaInitializer() {

    function recaptchaCallback(token) {
      if (!!document.documentElement.getElementsByTagName('g-recaptcha-response').length) {
        return;
      }
      var recaptchaTokenContainer = document.createElement("g-recaptcha-response");
      recaptchaTokenContainer.textContent = token;

      document.documentElement.appendChild(recaptchaTokenContainer);
    }
    window.recaptchaCallback = recaptchaCallback;

    function recaptchaExpired() {
      var recaptchaTokenContainer = document.documentElement.getElementsByTagName('g-recaptcha-response');
      recaptchaTokenContainer[0].textContent = '';
    }
    window.recaptchaExpired = recaptchaExpired;

    var recaptchaContainer = document.createElement("div");
    recaptchaContainer.style.position = "fixed";
    recaptchaContainer.style.bottom = "10px";
    recaptchaContainer.style.left = "35px";
    recaptchaContainer.id = "recaptcha";
    recaptchaContainer.className = "g-recaptcha";
    recaptchaContainer.setAttribute("data-sitekey", "6LfhNyoUAAAAACy6h4y3FRqxuMYhS6RXPcVlGenJ");
    recaptchaContainer.setAttribute("data-theme", "light");
    recaptchaContainer.setAttribute("data-size", "compact");
    recaptchaContainer.setAttribute("data-callback", "recaptchaCallback");
    recaptchaContainer.setAttribute("data-expired-callback", "recaptchaExpired");
    // recaptchaContainer.setAttribute("data-error-callback", "error");

    document.body.appendChild(recaptchaContainer);
  }

  /** create submit button and buttons which can be clicked to fill in card number  */
  function createButtons() {

    buttons.forEach(function (btn, index) {
      // create element
      var button = document.createElement("button");
      button.innerHTML = btn.text;

      // style
      button.style.position = "fixed";
      button.style.bottom = (10 + index * 37) + "px"; // 調整每個按鈕的位置
      button.style.right = "35px";

      var elements = {
        'accept': !!document.getElementById('accept'),
        'txtCreditCard1': !!document.getElementById('txtCreditCard1'),
        'txtCreditCard2': !!document.getElementById('txtCreditCard2'),
        'txtCreditCard3': !!document.getElementById('txtCreditCard3'),
        'txtCreditCard4': !!document.getElementById('txtCreditCard4'),
        'txtEasyCard1': !!document.getElementById('txtEasyCard1'),
        'txtEasyCard2': !!document.getElementById('txtEasyCard2'),
        'txtEasyCard3': !!document.getElementById('txtEasyCard3'),
        'txtEasyCard4': !!document.getElementById('txtEasyCard4')
      };

      button.onclick = function () {
        // check recaptcha token
        var recaptchaTokenContainer = document.documentElement.getElementsByTagName('g-recaptcha-response');
        if (!recaptchaTokenContainer || !recaptchaTokenContainer.length || recaptchaTokenContainer[0].textContent === '') {
          // if custom recaptcha is not ready, fill in the form directly
          for (var key in elements) {
            if (!elements[key]) {
              continue;
            }
            if (key === 'accept') {
              document.getElementById(key).click();
            } else {
              document.getElementById(key).value = buttons[index][key];
            }
          }
          return;
        }

        // identify action to build form
        var action = window.location.pathname.split('/')[2];
        var postData = {
          "g-recaptcha-response": recaptchaTokenContainer[0].textContent,
          "txtEasyCard1": btn.txtEasyCard1,
          "txtEasyCard2": btn.txtEasyCard2,
          "txtEasyCard3": btn.txtEasyCard3,
          "txtEasyCard4": btn.txtEasyCard4
        };
        if (action === "JCBLoginServlet") {
          postData.txtCreditCard1 = btn.txtCreditCard1;
          postData.txtCreditCard2 = btn.txtCreditCard2;
          postData.txtCreditCard4 = btn.txtCreditCard4;
          postData.accept = "";
          postData.method = "loginAccept";
        } else if (action === "JCBLoginRecordServlet") {
          postData.method = "queryLoginDate";
        }

        // build form
        var form = document.createElement("form");
        form.setAttribute("method", "post");
        form.setAttribute("action", action);

        for (var pkey in postData) {
          if (postData.hasOwnProperty(pkey)) {
            var hiddenField = document.createElement("input");
            hiddenField.setAttribute("type", "hidden");
            hiddenField.setAttribute("name", pkey);
            hiddenField.setAttribute("value", postData[pkey]);

            form.appendChild(hiddenField);
          }
        }
        document.body.appendChild(form);
        form.submit();
      };

      // show button on page
      document.body.appendChild(button);
    });
  }

  /** modify message, show card name before card number */
  function showCardNameBeforeCardNumber() {
    // find message on page
    var message = document.querySelector('.success') || document.querySelector('.card_num');

    // modify message on page
    if (message) {

      var card = message.textContent.match(/(\d{16})/);

      if (card) {

        var cardNumber = card[1];
        var foundCard = buttons.find(function (card) {
          var easyCardNumber = card.txtEasyCard1 + card.txtEasyCard2 + card.txtEasyCard3 + card.txtEasyCard4;
          return easyCardNumber === cardNumber;
        });

        if (foundCard) {
          message.innerHTML = message.innerHTML.replace(cardNumber, foundCard.text + " - " + cardNumber);
        }
      }
    }

  }

  var observer = new MutationObserver(function (mutations, observer) {
    mutations.forEach(function (mutation) {
      if (!mutation.addedNodes) {
        return;
      }
      mutation.addedNodes.forEach(function (node) {
        if (node.nodeName === "BODY") {
          createButtons();
          recaptchaInitializer();
          showCardNameBeforeCardNumber();
          observer.disconnect();
        }
      });
    });
  });
  observer.observe(document.documentElement, { childList: true });
})();