<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Forgot Password</title>
</head>
<body>
  <div style="max-width: 400px; margin: auto; text-align: center;">
    <h2>Forgot Password</h2>
    <form id="forgotPasswordForm">
      <input
        type="email"
        id="email"
        placeholder="Enter your email"
        required
        style="width: 100%; padding: 10px; margin: 10px 0;"
      />
      <button type="submit" style="padding: 10px 20px;">Submit</button>
    </form>
    <p id="responseMessage" style="color: green;"></p>
  </div>
  <script>
    const form = document.getElementById("forgotPasswordForm");
    form.addEventListener("submit", async (event) => {
      event.preventDefault();
      const email = document.getElementById("email").value;
      const responseMessage = document.getElementById("responseMessage");

      try {
        const response = await fetch("/forgot-password", {
          method: "POST",
          headers: {
            "Content-Type": "application/json",
          },
          body: JSON.stringify({ email }),
        });
        const result = await response.json();
        responseMessage.textContent = result.message;
      } catch (error) {
        responseMessage.textContent = "Failed to send email.";
        responseMessage.style.color = "red";
      }
    });
  </script>
</body>
</html>
