<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;  
}

.container {
  margin: 0 auto;
  max-width: 400px;
  margin: 50px auto;
  background-color: #fff;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);  
}

h2 {
  text-align: center;
  margin-bottom: 20px;
} 

.form-group {
  margin-bottom: 15px;
  display: flex;
}

input[type="password"] {
  flex: 1; 
}

label {
  display: block;
  margin-bottom: 5px;
  width: 9rem;
}

input[type="password"] {
  padding: 1rem;
  border: 1px solid #ccc;
  border-radius: 3px;
}

button {
  width: 100%;  
  padding: 10px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer; 
}

button:hover {
  background-color: #0056b3;
}


/* Mobile */
@media screen and (max-width: 767px) {
  .container {
    padding: 10px;
  }
   
  h2 {
    font-size: 1.5rem; 
  }
   
  .form-group {
    flex-direction: column;
    box-sizing: border-box;
  }
   
  label {
    margin-bottom: 10px;
  }
}

/* Tablet */
@media screen and (min-width: 768px) and (max-width: 1023px) {
  .container {
    padding: 30px;
  }
   
  .form-group {
    flex-direction: row;
  }
}

/* Desktop */
@media screen and (min-width: 1024px) {
  .container {
    max-width: 600px;  
  }
}

</style>
</head>

<body>
<div class="container">
<h2>Reset Password</h2>
<form id="resetForm">
  <div class="form-group">
    <label for="new_password">New Password</label>
    <input id="new_password" type="password" placeholder="New password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$">
  </div>
  <div class="form-group">  
    <label for="confirm_password">Confirm Password</label>
    <input id="confirm_password" type="password" placeholder="Confirm password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}$">
  </div>
  <button type="button" onclick="resetPassword()">Reset Password</button>
</form>
</div>

<div id="messageContainer">
  <p id="successMessage" class="message success"></p>
  <p id="errorMessage" class="message error"></p>
</div>

<script>
function resetPassword() {
  const new_password = document.getElementById("new_password").value;
  const confirm_password = document.getElementById("confirm_password").value;

  if (new_password !== confirm_password) {
    alert("Passwords do not match");
    return;
  }
  
  sha256ToBase64(new_password).then((hash) => {
    const data = {
      new_password: hash,
      reset_token: "{{.ResetToken}}",
    };

    fetch('{{.ResetPasswordLink}}', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(data)
    })
    .then(response => response.json())
    .then(data => {
      if (data.code == 200 ) {
        document.getElementById('successMessage').innerText = JSON.stringify(data);
      } else {
        document.getElementById('errorMessage').innerText = JSON.stringify(data);
      }
    })
    .catch(error => {
      console.error('Error:', error);
      // 在这里处理其他错误情况
    });
  });
}

function sha256ToBase64(message) {
  const msgBuffer = new TextEncoder().encode(message);

  return crypto.subtle.digest('SHA-256', msgBuffer).then((hashBuffer) => {
    const hashArray = Array.from(new Uint8Array(hashBuffer));
    const hashBase64 = btoa(hashArray.reduce((str, byte) => str + String.fromCharCode(byte), ''));

    return hashBase64;
  });
}
</script>
</body>
</html>