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