account.html

<!doctype html>
<html lang="en">
<head>
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://mcbcode.com/account">
  <meta property="og:title" content="mcbCode | Account">
  <meta property="og:description" content="Sign in or create your mcbCode account">
  <meta property="og:image" content="https://mcbcode.com/theme/favicon.png">
  <meta property="og:site_name" content="mcbCode">
  <meta name="robots" content="noindex">
  <link rel="icon" href="https://mcbcode.com/theme/favicon.png">
  <link rel="stylesheet" href="https://mcbcode.com/theme/site.css">
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />
  <title>mcbCode | Account</title>
  <style>
html,
body {
  min-height: 100%;
  margin: 0;
  font-family: "mcfont", sans-serif;
  background: #0c0c0c;
  color: #bebebe;
  text-align: center;
}
h2 {
  font-size: 25px;
  color: #ffffff;
}
a {
  text-decoration: none;
  color: #ffffff;
  transition: color 0.2s ease-in-out;
}
a:hover {
  color: #05ee93;
}
button {
  position: relative;
  overflow: hidden;
  text-align: center;
  background: #202020;
  border: 2px solid #3b3b3b;
  border-radius: 4px;
  font-size: 18px;
  padding: 8px 12px;
  color: #ffffff;
  font-family: "mcfont", sans-serif;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
button:hover {
  transform: translateY(-1px);
}
button:active {
  transform: translateY(1px);
}
button:focus-visible {
  outline: 2px solid #e7007b;
  outline-offset: 3px;
}

g {
  color: #05ee93;
}
c {
  color: #e7007b;
}
.account-card {
  background: #1a1a1a;
  border: 2px solid #2e2e2e;
  width: 100%;
  max-width: 400px;
  margin: 120px auto 60px;
  padding: 36px 32px;
  box-sizing: border-box;
}
.account-card h1 {
  font-family: "mcfontb", sans-serif;
  font-size: 28px;
  color: #ffffff;
  margin: 0 0 8px;
}
.account-card p.subtitle {
  font-size: 14px;
  color: #888;
  margin: 0 0 28px;
}
.tabs {
  display: flex;
  background: #111;
  padding: 4px;
  margin-bottom: 24px;
  gap: 4px;
}
.tab-btn {
  flex: 1;
  background: transparent;
  border-color: transparent;
  border-radius: 2px;
  font-size: 15px;
  padding: 8px;
  color: #888;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.tab-btn:hover {
  color: #ffffff;
  border-color: #05ee93;
  box-shadow: none;
}
.tab-btn.active {
  background: #2e2e2e;
  border-color: #05ee93;
  color: #ffffff;
  box-shadow: inset 0 -2px 0 #e7007b;
}
.form-group {
  text-align: left;
  margin-bottom: 16px;
}
.form-group label {
  display: block;
  font-size: 13px;
  color: #888;
  margin-bottom: 6px;
}
.form-group input {
  width: 100%;
  background: #111;
  border: 2px solid #2e2e2e;
  padding: 10px 12px;
  font-size: 15px;
  font-family: "mcfont", sans-serif;
  color: #ffffff;
  box-sizing: border-box;
  transition: border-color 0.2s;
  outline: none;
}
.form-group input:focus {
  border-color: #05ee93;
}
.submit-btn {
  width: 100%;
  background: #05ee93;
  color: #0c0c0c;
  border: 3px solid #00a459;
  border-radius: 3px;
  font-size: 16px;
  padding: 11px;
  margin-top: 8px;
  cursor: pointer;
  font-family: "mcfont", sans-serif;
  font-weight: bold;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 0 #006b43;
}
.submit-btn:hover {
  background: #23ffab;
  color: #0c0c0c;
  box-shadow: 0 4px 0 #006b43;
}
.submit-btn:active {
  box-shadow: 0 1px 0 #006b43;
}
.submit-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.github-btn,
.google-btn,
.discord-btn,
.microsoft-xbox-btn {
  width: 100%;
  border-radius: 6px;
  border-width: 2px;
  font-size: 16px;
  padding: 11px;
  margin-top: 12px;
  cursor: pointer;
  font-family: "mcfont", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.github-btn {
  background: #24292f;
  color: #ffffff;
  border-color: #57606a;
  box-shadow: 0 3px 0 #161b22;
}
.github-btn:hover {
  background: #30363d;
  color: #ffffff;
  border-color: #8b949e;
  box-shadow: 0 4px 0 #161b22;
}
.google-btn {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
  border-radius: 4px;
  box-shadow: 0 3px 0 #c5c7ca;
}
.google-btn:hover {
  background: #f8fafd;
  color: #202124;
  border-color: #4285f4;
  box-shadow: 0 4px 0 #c5c7ca;
}
.discord-btn {
  background: #5865f2;
  color: #ffffff;
  border-color: #4752c4;
  border-radius: 6px;
  box-shadow: 0 3px 0 #3c45a5;
}
.discord-btn:hover {
  background: #4752c4;
  color: #ffffff;
  border-color: #7983f5;
  box-shadow: 0 4px 0 #3c45a5;
}
.microsoft-xbox-btn {
  position: relative;
  overflow: hidden;
  background: linear-gradient(105deg, #ffffff 0%, #ffffff 49%, #107c10 51%, #107c10 100%);
  color: #000000;
  border-color: #8a8886;
  border-radius: 4px;
  box-shadow: 0 3px 0 #005d00;
}
.microsoft-xbox-btn:hover {
  color: #000000;
  border-color: #5e5e5e;
  filter: brightness(1.04);
  box-shadow: 0 4px 0 #005d00;
}
.microsoft-xbox-btn img {
  width: 16px;
  height: 16px;
  object-fit: contain;
  padding: 4px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.84);
}
.microsoft-xbox-btn img + img {
  margin-left: -6px;
  background: rgba(16, 124, 16, 0.9);
}
.microsoft-xbox-btn:active {
  box-shadow: 0 1px 0 #005d00;
}

.msg {
  font-size: 13px;
  margin-top: 14px;
  padding: 10px 12px;
  display: none;
}
.msg.error {
  background: #2a0f0f;
  border: 1px solid #ff5555;
  color: #ff5555;
  display: block;
}
.msg.success {
  background: #0a2a1a;
  border: 1px solid #05ee93;
  color: #05ee93;
  display: block;
}
.divider-text {
  font-size: 12px;
  color: #444;
  margin-top: 20px;
}
footer {
  color: #343434;
  margin-top: 40px;
  padding-bottom: 40px;
}
footer g {
  color: #008e4c;
}

  </style>
</head>
<body>

  <div class="account-card">
    <h1>mcb<g>Code</g></h1>
    <p class="subtitle">Sign in or create an account</p>
    <div class="tabs">
      <button class="tab-btn active" id="tab-login" onclick="switchTab('login')">Sign In</button>
      <button class="tab-btn" id="tab-register" onclick="switchTab('register')">Sign Up</button>
    </div>

    <div id="form-login">
      <button class="github-btn" onclick="doGithub()"><img src="https://app.mcbcode.com/img/github_logo.svg" style="width: 16px;"> GitHub Login</button>
      <button class="google-btn" onclick="doGoogle()"><img src="https://app.mcbcode.com/img/google_logo.svg" style="width: 16px;"> Google Login</button>
      <button class="discord-btn" onclick="doDiscord()"><img src="https://app.mcbcode.com/img/discord_logo.svg" style="width: 16px;"> Discord Login</button>
      <button class="microsoft-xbox-btn" onclick="doMicrosoft()"><img src="https://app.mcbcode.com/img/microsoft_logo.svg" alt="Microsoft"><img src="https://app.mcbcode.com/img/xbox_logo.svg" alt="Xbox"> Microsoft / Xbox Login</button>
      <br><br>
      <button class="submit-btn" id="login-btn" onclick="doLogin()">Sign In</button>
      <div class="msg" id="login-msg"></div>
    </div>

    <div id="form-register" style="display:none;">
      <button class="github-btn" onclick="doGithub()"><img src="https://app.mcbcode.com/img/github_logo.svg" style="width: 16px;"> GitHub Sign Up</button> 
      <button class="google-btn" onclick="doGoogle()"><img src="https://app.mcbcode.com/img/google_logo.svg" style="width: 16px;"> Google Sign Up</button>
      <button class="discord-btn" onclick="doDiscord()"><img src="https://app.mcbcode.com/img/discord_logo.svg" style="width: 16px;"> Discord Sign Up</button>
      <button class="microsoft-xbox-btn" onclick="doMicrosoft()"><img src="https://app.mcbcode.com/img/microsoft_logo.svg" alt="Microsoft"><img src="https://app.mcbcode.com/img/xbox_logo.svg" alt="Xbox"> Microsoft / Xbox Sign Up</button>
      <br><br>
      <button class="submit-btn" id="reg-btn" onclick="doRegister()">Create Account</button>     
      <div class="msg" id="reg-msg"></div>
    </div>

    <p class="divider-text">mcbCode accounts are free forever</p>
  </div>

  <footer>Not affiliated with Microsoft or Mojang AB.<br><br>© Copyright 2026 mcb<g>Code</g></footer>

  <script>
    const AUTH = "https://auth.mcbcode.com";

    function getRedirectTarget() {
      const params = new URLSearchParams(window.location.search);
      const redirectTo = params.get("redirectto");
      return redirectTo ? redirectTo : "/dashboard";
    }
        
    // check if already logged in via cookie
    (async () => {
      try {
        const res = await fetch(`${AUTH}/me`, { credentials: "include" });
        if (res.ok) window.location.href = getRedirectTarget();
    } catch {}
  })();
    
    // github now goes through the worker callback, not localStorage
    function buildLoginState() {
      const params = new URLSearchParams(window.location.search);
      const redirectTo = params.get("redirectto");
      if (!redirectTo) return "";
      const b64 = btoa(redirectTo).replace(/\+/g, "-").replace(/\//g, "_").replace(/=+$/, "");
      return "return_" + b64;
    }

    // github now goes through the worker callback, not localStorage
    function doGithub() {
      const state = buildLoginState();
      window.location.href = `https://github.com/login/oauth/authorize?client_id=Ov23liveHrlFrvFZgW13&scope=user:email&redirect_uri=https://auth.mcbcode.com/auth/github/callback&state=${state}`;
    }

    function doGoogle() {
  const state = buildLoginState();
  window.location.href =
    "https://accounts.google.com/o/oauth2/v2/auth" +
    "?client_id=494331876591-r860t073hcar5in4hm15usj30jd1lfrm.apps.googleusercontent.com" +
    "&redirect_uri=https://auth.mcbcode.com/auth/google/callback" +
    "&response_type=code" +
    "&scope=openid%20email%20profile" +
    "&access_type=offline" +
    "&prompt=consent" +
    "&state=" + state;
}

function doDiscord() {
  const state = buildLoginState();
  window.location.href =
    "https://discord.com/oauth2/authorize" +
    "?client_id=1523744647942508544" +
    "&response_type=code" +
    "&redirect_uri=" + encodeURIComponent("https://auth.mcbcode.com/discord/callback") +
    "&scope=identify%20email" +
    "&state=" + state;
}

function doMicrosoft() {
  const state = buildLoginState();

  window.location.href =
    "https://login.microsoftonline.com/consumers/oauth2/v2.0/authorize" +
    "?client_id=" + encodeURIComponent("df640457-61be-41cf-9ccb-fe8a45dc031c" ) +
    "&response_type=code" +
    "&response_mode=query" +
    "&redirect_uri=" +
    encodeURIComponent("https://auth.mcbcode.com/auth/microsoft/callback" ) +
    "&scope=" +
    encodeURIComponent("openid profile email") +
    "&prompt=select_account" +
    "&state=" +
    encodeURIComponent(state);
}

    function switchTab(tab) {
      const isLogin = tab === "login";
      document.getElementById("form-login").style.display = isLogin ? "" : "none";
      document.getElementById("form-register").style.display = isLogin ? "none" : "";
      document.getElementById("tab-login").classList.toggle("active", isLogin);
      document.getElementById("tab-register").classList.toggle("active", !isLogin);
      clearMsgs();
    }

    function showMsg(id, text, type) {
      const el = document.getElementById(id);
      el.textContent = text;
      el.className = `msg ${type}`;
    }

    function clearMsgs() {
      ["login-msg", "reg-msg"].forEach(id => {
        const el = document.getElementById(id);
        if (el) { el.className = "msg"; el.textContent = ""; }
      });
    }

    async function doLogin() {
      const email = document.getElementById("login-email").value.trim();
      const password = document.getElementById("login-password").value;
      const btn = document.getElementById("login-btn");
      if (!email || !password) return showMsg("login-msg", "Please fill in all fields.", "error");
      btn.disabled = true; btn.textContent = "Signing in...";
      try {
        const res = await fetch(`${AUTH}/login`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, password }) });
        if (res.ok) { showMsg("login-msg", "Signed in! Redirecting...", "success"); setTimeout(() => window.location.href = getRedirectTarget(), 800); }
        else { const data = await res.json(); showMsg("login-msg", data.error || "Something went wrong.", "error"); btn.disabled = false; btn.textContent = "Sign In"; }
      } catch { showMsg("login-msg", "Could not reach auth server.", "error"); btn.disabled = false; btn.textContent = "Sign In"; }
    }

    async function doRegister() {
      const email = document.getElementById("reg-email").value.trim();
      const password = document.getElementById("reg-password").value;
      const confirm = document.getElementById("reg-confirm").value;
      const btn = document.getElementById("reg-btn");
      if (!email || !password || !confirm) return showMsg("reg-msg", "Please fill in all fields.", "error");
      if (password !== confirm) return showMsg("reg-msg", "Passwords do not match.", "error");
      if (password.length < 8) return showMsg("reg-msg", "Password must be at least 8 characters.", "error");
      btn.disabled = true; btn.textContent = "Creating account...";
      try {
        const res = await fetch(`${AUTH}/register`, { method: "POST", credentials: "include", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ email, password }) });
        if (res.ok) { showMsg("reg-msg", "Account created! Redirecting...", "success"); setTimeout(() => window.location.href = getRedirectTarget(), 800); }
        else { const data = await res.json(); showMsg("reg-msg", data.error || "Something went wrong.", "error"); btn.disabled = false; btn.textContent = "Create Account"; }
      } catch { showMsg("reg-msg", "Could not reach auth server.", "error"); btn.disabled = false; btn.textContent = "Create Account"; }
    }

    document.addEventListener("keydown", e => {
      if (e.key !== "Enter") return;
      const loginVisible = document.getElementById("form-login").style.display !== "none";
      if (loginVisible) doLogin(); else doRegister();
    });
  </script>

  <script data-goatcounter="https://mcbcode.goatcounter.com/count" async src="//gc.zgo.at/count.js"></script>

  <script src="https://mcbcode.com/elements/navi.js"></script>

</body>
</html>