Function createLoginDialog

loop-library/site/script.js:675–724

()

      // Storage may be unavailable in hardened browser modes.
    }
    link.removeAttribute("aria-disabled");
    showToast(error.message || "GitHub sign-in is unavailable.");
  }
}

function createLoginDialog() {
  if (loginDialog) {
    return loginDialog;
  }

  const dialog = document.createElement("dialog");
  dialog.className = "login-dialog";
  dialog.setAttribute("aria-labelledby", "vote-login-title");

  const panel = document.createElement("div");
  panel.className = "login-dialog-panel";
  const eyebrow = document.createElement("p");
  eyebrow.className = "eyebrow";
  eyebrow.textContent = "Community voting";
  const title = document.createElement("h2");
  title.id = "vote-login-title";
  title.textContent = "Sign in to vote";
  const explanation = document.createElement("p");
  explanation.textContent =
    "Use GitHub. One account gets one vote per loop, and you can change it anytime.";
  const providers = document.createElement("div");
  providers.className = "login-providers";

  const githubLink = document.createElement("a");
  githubLink.className = "login-provider login-provider-github";
  githubLink.href = voteLoginUrl("github");
  githubLink.textContent = "Continue with GitHub";
  githubLink.addEventListener("click", (event) => {
    event.preventDefault();
    if (githubLink.getAttribute("aria-disabled") === "true") return;
    githubLink.setAttribute("aria-disabled", "true");
    beginGithubLogin(githubLink);
  });
  providers.append(githubLink);

  const cancel = document.createElement("button");
  cancel.className = "login-cancel";
  cancel.type = "button";
  cancel.textContent = "Not now";
  cancel.addEventListener("click", () => dialog.close());
  dialog.addEventListener("click", (event) => {
    if (event.target === dialog) dialog.close();
  });

  panel.append(eyebrow, title, explanation, providers, cancel);
  dialog.append(panel);
  document.body.append(dialog);
  loginDialog = dialog;