<!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>