window.onload = () => {
  document.getElementById("username").focus();
};

function showPasswd() {
  let x = document.getElementById("password");
  let y = document.getElementById("sPassword");
  if (x.type == "password") {
    x.type = "text";
    y.type = "text";
  } else {
    x.type = "password";
    y.type = "password";
  }
}

document
  .getElementById("signupForm")
  .addEventListener("submit", async function (event) {
    event.preventDefault();
    const messageBox = document.getElementById("messageBox");
    const username = document.getElementById("username").value.trim();
    const password = document.getElementById("password").value.trim();
    const sPassword = document.getElementById("sPassword").value.trim();
    const jsonData = JSON.stringify({ username, password });

    if (password !== sPassword) {
      messageBox.innerText = "Passwords don't match!";
      return;
    }

    const response = await fetch("/auth/signup", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: jsonData,
    });
    console.log(jsonData);
    const result = await response.json();
    if (response.ok) {
      messageBox.innerText = result.message;
      messageBox.style.color = "green";
    } else {
      messageBox.innerText = result.message;
      messageBox.style.color = "red";
    }
  });