(async function () {
  const root = document.getElementById("app");
  const user = await bootstrapAuth({ requireAuth: true, onlyIfMustChange: true });
  if (!user) return;

  const pw1 = el("input", { type: "password", autocomplete: "new-password" });
  const pw2 = el("input", { type: "password", autocomplete: "new-password" });
  const err = el("div", { class: "muted", style: { color: "var(--danger)", display: "none" } });

  const logoutBtn = el("button", { class: "ghost", onclick: async () => {
    try { await API.logout(); } catch (_) {}
    navigate("login");
  } }, t("logout"));

  async function submit(e) {
    e.preventDefault();
    err.style.display = "none";
    if (pw1.value.length < 6) {
      err.textContent = t("password_too_short");
      err.style.display = "block";
      return;
    }
    if (pw1.value !== pw2.value) {
      err.textContent = t("passwords_dont_match");
      err.style.display = "block";
      return;
    }
    try {
      const u = await API.updateMe({ password: pw1.value });
      if (u && !u.must_change_password) navigate("competitions");
    } catch (e) {
      err.textContent = (e.data && e.data.error) || e.message || "error";
      err.style.display = "block";
    }
  }

  const form = el("form", { onsubmit: submit, class: "col" },
    el("h1", null, t("change_password")),
    el("p", { class: "muted" }, t("force_password_explain")),
    el("div", { class: "field" }, el("label", null, t("new_password")), pw1),
    el("div", { class: "field" }, el("label", null, t("repeat_password")), pw2),
    err,
    el("div", { class: "row", style: { justifyContent: "space-between", marginTop: "0.5rem" } },
      logoutBtn,
      el("button", { type: "submit", class: "primary" }, t("save")),
    ),
  );

  root.appendChild(el("div", { class: "login-wrap" }, el("div", { class: "login-box" }, form)));
  pw1.focus();
})();