<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="icon" type="image/x-icon" href="/static/img/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DamageBDD {{action_label}} Password Form</title>
    <link rel="stylesheet" type="text/css" href='/static/css/main.css'/>

  </head>
  <body class="reset-password-page">
    <h2>DamageBDD - {{action_label}} Password</h2>
    <form id="resetPasswdForm" action="/accounts/{{action}}" method="post">
      <!--<label for="current_password">Current Password:</label>-->
      <input type="hidden" name="token" value="{{token}}" required><br><br>

      <div class="password-wrapper">
        <input type="password" name="new_password" placeholder="New Password" required />
        <button type="button" class="toggle-password" data-target="new_password">
          👁️
        </button>
      </div>

      <div class="password-wrapper">
        <input type="password" name="new_password_confirm" placeholder="Confirm New Password" required />
        <button type="button" class="toggle-password" data-target="new_password_confirm">
          👁️
        </button>
      </div>
          <button class='submit-button' id="resetPasswdBtn" type="submit">{{action_label}} Password</button>
      <h3>Password complexity requirement</h3>
      <ul>
        <li>minimum 8 characters</li>
        <li>with at least one uppercase letter,</li>
        <li>one lowercase letter,</li>
        <li>one digit,</li>
        <li> and one special character.</li>
        <ul>

    </form>
    <script>
      document.addEventListener("DOMContentLoaded", async function() {
          document.querySelectorAll(".toggle-password").forEach((btn) => {
              btn.addEventListener("click", () => {
                  const input = document.querySelector(`input[name='${btn.dataset.target}']`);
                  if (input.type === "password") {
                      input.type = "text";
                      btn.textContent = "🙈"; // Eye with slash
                  } else {
                      input.type = "password";
                      btn.textContent = "👁️"; // Eye
                  }
              });
          });

          document.getElementById('resetPasswdForm').addEventListener('submit', function(e) {
              const newPassword = document.querySelector('input[name="new_password"]').value;
              const confirmPassword = document.querySelector('input[name="new_password_confirm"]').value;

              // Password must be at least 8 characters long, with at least one lowercase letter,
              // one uppercase letter, one number, and one special character.
              const passwordRegex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[!@#$%^&*()_\-=\[\]{};':"\\|,.<>\/?]).{8,}$/;

              if (!passwordRegex.test(newPassword)) {
                  alert('Password must be at least 8 characters long and include:\n- One uppercase letter\n- One lowercase letter\n- One digit\n- One special character');
                  e.preventDefault();
                  return;
              }

              if (newPassword !== confirmPassword) {
                  alert('New password and confirmation do not match.');
                  e.preventDefault();
              }
          });
      });
      </script>

  </body>
</html>
