a7md0/callback.html

## callback.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Callback</title>

    <script>
      if (window.opener != null) {
        const message = {
          location: window.location.href,
          referrer: document.referrer,
        };

        window.opener.postMessage(message, window.location.origin);
      }
    </script>

    <style>
      .loader-container {
        font-family: "Open Sans", Arial, sans-serif;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
      }

      .loader-message {
        color: #282A2D;
        text-align: center;
        position: absolute;
        left: 50%;
        top: 25%;
        transform: translate(-50%, -50%);
      }

      .loader {
        border: 5px solid #ccc;
        -webkit-animation: spin 1s linear infinite;
        animation: spin 1s linear infinite;
        border-top: 5px solid #282A2D;
        border-radius: 50%;
        width: 50px;
        height: 50px;
        position: relative;
        left: calc(50% - 25px);
      }

      @keyframes spin {
        0% {
          transform: rotate(0deg);
        }

        100% {
          transform: rotate(360deg);
        }
      }
    </style>
  </head>
  <body>
    <div class="loader-container">
      <div class="loader-message">
        <div class="loader"></div>
        <br>
        <span>Finalizing authorization...</span>
      </div>
    </div>
  </body>
</html>

## oauth.html
<button id="login-button">Login with Localhost</button>

<script>
  const oauth_loader = `<style>.loader-container {font-family: "Open Sans", Arial, sans-serif;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}.loader-message {color: #282A2D;text-align: center;position: absolute;left: 50%;top: 25%;transform: translate(-50%, -50%);}.loader {border: 5px solid #ccc;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-top: 5px solid #282A2D;border-radius: 50%;width: 50px;height: 50px;position: relative;left: calc(50% - 25px);}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style><div class="loader-container"><div class="loader-message"><div class="loader"></div><br>Redirecting to the authentication page...</div></div>`;

  const popupCenter = ({url, title, w, h}) => {
    // Fixes dual-screen position                             Most browsers      Firefox
    const dualScreenLeft = window.screenLeft !==  undefined ? window.screenLeft : window.screenX;
    const dualScreenTop = window.screenTop !==  undefined   ? window.screenTop  : window.screenY;

    const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
    const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

    const left = (width - w) / 2 + dualScreenLeft
    const top = (height - h) / 2 + dualScreenTop
    const newWindow = window.open(
      url,
      title,
      `toolbar=no,
      scrollbars=yes,
      width=${w},
      height=${h},
      top=${top},
      left=${left}`
    );

    if (newWindow !== null && window.focus) {
      newWindow.focus();
    }

    return newWindow;
  }

  const loginButton = document.querySelector("#login-button");
  loginButton.addEventListener("click", (event) => {
    const oauth_window = popupCenter({url: '', title: 'Localhost-OAuth', w: 600, h: 700});
    if (oauth_window) {
      loginButton.innerText = "Waiting for authentication...";
      window.addEventListener("message", (event) => {
        if (event.origin === window.location.origin) {
          console.log(event.data);
          loginButton.innerText = "Authentication successful";
          if (interval !== null) {
            clearInterval(interval);
          }

          oauth_window.close();
        }
      }, false);
      const interval = setInterval(() => {
        if (oauth_window.closed) {
          loginButton.innerText = "Error communicating with Localhost (Authentication window closed)";
          console.log("closed window");
          if (interval !== null) {
            clearInterval(interval);
          }
        }
      }, 250);

      oauth_window.document.open();
      oauth_window.document.write(oauth_loader);
      oauth_window.document.close();

      setTimeout(() => {
        oauth_window.location = 'https://bit.ly/3RRfVPx';
      }, 100);
    }
  });
</script>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Callback</title>

	<script>
	if (window.opener != null) {
	const message = {
	location: window.location.href,
	referrer: document.referrer,
	};

	window.opener.postMessage(message, window.location.origin);
	}
	</script>

	<style>
	.loader-container {
	font-family: "Open Sans", Arial, sans-serif;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	}

	.loader-message {
	color: #282A2D;
	text-align: center;
	position: absolute;
	left: 50%;
	top: 25%;
	transform: translate(-50%, -50%);
	}

	.loader {
	border: 5px solid #ccc;
	-webkit-animation: spin 1s linear infinite;
	animation: spin 1s linear infinite;
	border-top: 5px solid #282A2D;
	border-radius: 50%;
	width: 50px;
	height: 50px;
	position: relative;
	left: calc(50% - 25px);
	}

	@keyframes spin {
	0% {
	transform: rotate(0deg);
	}

	100% {
	transform: rotate(360deg);
	}
	}
	</style>
	</head>
	<body>
	<div class="loader-container">
	<div class="loader-message">
	<div class="loader"></div>
	<br>
	<span>Finalizing authorization...</span>
	</div>
	</div>
	</body>
	</html>
	<button id="login-button">Login with Localhost</button>

	<script>
	const oauth_loader = `<style>.loader-container {font-family: "Open Sans", Arial, sans-serif;position: absolute;top: 0;right: 0;bottom: 0;left: 0;}.loader-message {color: #282A2D;text-align: center;position: absolute;left: 50%;top: 25%;transform: translate(-50%, -50%);}.loader {border: 5px solid #ccc;-webkit-animation: spin 1s linear infinite;animation: spin 1s linear infinite;border-top: 5px solid #282A2D;border-radius: 50%;width: 50px;height: 50px;position: relative;left: calc(50% - 25px);}@keyframes spin {0% { transform: rotate(0deg); }100% { transform: rotate(360deg); }}</style><div class="loader-container"><div class="loader-message"><div class="loader"></div><br>Redirecting to the authentication page...</div></div>`;

	const popupCenter = ({url, title, w, h}) => {
	// Fixes dual-screen position Most browsers Firefox
	const dualScreenLeft = window.screenLeft !== undefined ? window.screenLeft : window.screenX;
	const dualScreenTop = window.screenTop !== undefined ? window.screenTop : window.screenY;

	const width = window.innerWidth ? window.innerWidth : document.documentElement.clientWidth ? document.documentElement.clientWidth : screen.width;
	const height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight ? document.documentElement.clientHeight : screen.height;

	const left = (width - w) / 2 + dualScreenLeft
	const top = (height - h) / 2 + dualScreenTop
	const newWindow = window.open(
	url,
	title,
	`toolbar=no,
	scrollbars=yes,
	width=${w},
	height=${h},
	top=${top},
	left=${left}`
	);

	if (newWindow !== null && window.focus) {
	newWindow.focus();
	}

	return newWindow;
	}

	const loginButton = document.querySelector("#login-button");
	loginButton.addEventListener("click", (event) => {
	const oauth_window = popupCenter({url: '', title: 'Localhost-OAuth', w: 600, h: 700});
	if (oauth_window) {
	loginButton.innerText = "Waiting for authentication...";
	window.addEventListener("message", (event) => {
	if (event.origin === window.location.origin) {
	console.log(event.data);
	loginButton.innerText = "Authentication successful";
	if (interval !== null) {
	clearInterval(interval);
	}

	oauth_window.close();
	}
	}, false);
	const interval = setInterval(() => {
	if (oauth_window.closed) {
	loginButton.innerText = "Error communicating with Localhost (Authentication window closed)";
	console.log("closed window");
	if (interval !== null) {
	clearInterval(interval);
	}
	}
	}, 250);

	oauth_window.document.open();
	oauth_window.document.write(oauth_loader);
	oauth_window.document.close();

	setTimeout(() => {
	oauth_window.location = 'https://bit.ly/3RRfVPx';
	}, 100);
	}
	});
	</script>