AzerothCore-website/templates/newpassword.html

84 lines
3.1 KiB
HTML

{% extends "base.html" %}
{% block content %}
<div class="container">
<div class="heading">Set New Password</div>
<form class="form" onsubmit="event.preventDefault(); updatePassword();">
<input type="hidden" id="email" value="{{ email }}">
<input type="hidden" id="token" value="{{ token }}">
<div class="input-field">
<label for="passwd1">New Password</label>
<input type="password" id="passwd1" minlength="8" required>
</div>
<div class="input-field">
<label for="passwd2">Confirm New Password</label>
<input type="password" id="passwd2" minlength="8" required>
</div>
<div id="passwordMatchMessage" style="color: red;"></div>
<div class="btn-container">
<button type="submit" class="btn" id="updatePasswordBtn" disabled>Update Password</button>
</div>
</form>
<p id="result"></p>
</div>
<script>
function validatePasswords() {
const passwd1 = document.getElementById('passwd1').value;
const passwd2 = document.getElementById('passwd2').value;
const passwordMatchMessage = document.getElementById('passwordMatchMessage');
const updatePasswordBtn = document.getElementById('updatePasswordBtn');
if (passwd1.length >= 8 && passwd2.length >= 8 && passwd1 === passwd2) {
passwordMatchMessage.innerText = '';
updatePasswordBtn.disabled = false;
} else {
if (passwd1 !== passwd2) {
passwordMatchMessage.innerText = 'Passwords do not match.';
} else {
passwordMatchMessage.innerText = '';
}
updatePasswordBtn.disabled = true;
}
}
function updatePassword() {
const email = document.getElementById('email').value;
const token = document.getElementById('token').value;
const passwd1 = document.getElementById('passwd1').value;
const passwd2 = document.getElementById('passwd2').value;
const result = document.getElementById('result');
if (passwd1 !== passwd2) {
result.innerText = 'Passwords do not match.';
return;
}
fetch('/update_password', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
email: email,
token: token,
password: passwd1
}),
})
.then(response => response.json())
.then(data => {
if (data.message === 'Password updated successfully!') {
window.location.href = '/success';
} else {
result.innerText = data.message;
}
})
.catch((error) => {
result.innerText = 'An error occurred. Please try again.';
console.error('Error:', error);
});
}
document.getElementById('passwd1').addEventListener('input', validatePasswords);
document.getElementById('passwd2').addEventListener('input', validatePasswords);
</script>
{% endblock %}