Login Form Generator

<!-- Login form -->
<form id="login-form" novalidate>
  <h2>Sign in</h2>

  <label for="login-email">Email address</label>
  <input id="login-email" name="email" type="email" autocomplete="email" required />

  <label for="login-password">Password</label>
  <div class="password-row">
    <input id="login-password" name="password" type="password" autocomplete="current-password" required />
    <button type="button" id="toggle-password" aria-label="Show password">Show</button>
  </div>

  <label class="remember">
    <input id="login-remember" name="remember" type="checkbox" /> Remember me
  </label>

  <p id="login-error" role="alert" hidden></p>
  <button type="submit">Log in</button>
</form>

<script>
  (function () {
    var form = document.getElementById("login-form");
    var email = document.getElementById("login-email");
    var password = document.getElementById("login-password");
    var error = document.getElementById("login-error");
    var toggle = document.getElementById("toggle-password");

    toggle.addEventListener("click", function () {
      var hidden = password.type === "password";
      password.type = hidden ? "text" : "password";
      toggle.textContent = hidden ? "Hide" : "Show";
      toggle.setAttribute("aria-label", hidden ? "Hide password" : "Show password");
    });

    function showError(message) {
      error.textContent = message;
      error.hidden = !message;
    }

    form.addEventListener("submit", function (event) {
      event.preventDefault();
      var emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]{2,}$/;

      if (!email.value.trim()) return showError("Email address is required.");
      if (!emailPattern.test(email.value.trim())) return showError("Enter a valid email address.");
      if (!password.value) return showError("Password is required.");
      if (password.value.length < 8) {
        return showError("Password must be at least 8 characters.");
      }

      showError("");
      // Replace with your own submit logic (fetch, redirect, etc.)
      console.log("Login submitted", {
        email: email.value.trim(),
        password: password.value,
        remember: document.getElementById("login-remember").checked
      });
    });
  })();
</script>