2024-03-25 17:29:30 +01:00
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
|
|
|
|
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
|
|
|
|
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous">
|
|
|
|
|
</script>
|
|
|
|
|
</head>
|
|
|
|
|
|
2024-03-26 17:05:17 +01:00
|
|
|
<body style="display: none;">
|
|
|
|
|
<div class="alert alert-success" role="alert" id="successAlert" style="display: none;">
|
2024-03-25 17:29:30 +01:00
|
|
|
</div>
|
2024-03-26 17:05:17 +01:00
|
|
|
|
|
|
|
|
<div class="alert alert-danger" role="alert" id="errorAlert" style="display: none;">
|
2024-03-25 17:29:30 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="container d-flex flex-column">
|
|
|
|
|
<div class="row align-items-center justify-content-center
|
|
|
|
|
min-vh-100 g-0">
|
|
|
|
|
<div class="col-12 col-md-8 col-lg-4 border-top border-3 border-primary">
|
|
|
|
|
<div class="card shadow-sm">
|
|
|
|
|
<div class="card-body">
|
|
|
|
|
<div class="mb-4">
|
|
|
|
|
<h5>Reset password</h5>
|
|
|
|
|
</div>
|
|
|
|
|
<form>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<input type="password" id="password" class="form-control" name="password"
|
2024-03-26 23:32:27 +01:00
|
|
|
placeholder="Your new password">
|
2024-03-26 17:05:17 +01:00
|
|
|
<div class="invalid-feedback" id="password-invalid-feedback">
|
|
|
|
|
</div>
|
2024-03-25 17:29:30 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3">
|
|
|
|
|
<input type="password" id="confirmPassword" class="form-control" name="confirmPassword"
|
2024-03-26 23:32:27 +01:00
|
|
|
placeholder="Confirm password">
|
2024-03-26 17:05:17 +01:00
|
|
|
<div class="invalid-feedback" id="confirmpassword-invalid-feedback">
|
|
|
|
|
</div>
|
2024-03-25 17:29:30 +01:00
|
|
|
</div>
|
|
|
|
|
<div class="mb-3 d-grid">
|
2024-03-26 17:05:17 +01:00
|
|
|
<button type="button" class="btn btn-primary" onclick="resetPassword();">
|
2024-03-25 17:29:30 +01:00
|
|
|
Reset
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</form>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
2024-03-26 17:05:17 +01:00
|
|
|
<script src="../js/constants.js"></script>
|
|
|
|
|
<script src="../js/utils.js"></script>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
window.addEventListener("load", function () {
|
|
|
|
|
const secret = new URLSearchParams(window.location.search).get('secret');
|
2024-03-26 23:27:52 +01:00
|
|
|
if (!secret) {
|
2024-03-26 17:05:17 +01:00
|
|
|
alert('Invalid URL');
|
2024-03-26 23:27:52 +01:00
|
|
|
} else {
|
2024-03-26 17:05:17 +01:00
|
|
|
document.body.style.display = "block"; // Show page
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
async function resetPassword() {
|
|
|
|
|
if (!validateFields()) {
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const password = document.getElementById("password").value;
|
|
|
|
|
const secret = new URLSearchParams(window.location.search).get('secret');
|
|
|
|
|
|
|
|
|
|
const response = await fetch(`${API_URL}/resetpassword/reset`, {
|
|
|
|
|
method: "POST",
|
|
|
|
|
body: JSON.stringify({
|
|
|
|
|
password,
|
|
|
|
|
secret
|
|
|
|
|
}),
|
|
|
|
|
headers: createHeaders(null)
|
|
|
|
|
});
|
|
|
|
|
if (response.ok) {
|
|
|
|
|
showSuccessAlert('Your password has been changed. You can now <a href="/login.html">log in</a>');
|
|
|
|
|
} else {
|
2024-03-26 23:27:52 +01:00
|
|
|
showErrorAlert(
|
|
|
|
|
'URL either not valid or the link has expired. Please require another <a href="forgot-password.html">password reset</a>'
|
|
|
|
|
);
|
2024-03-26 17:05:17 +01:00
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function validateFields() {
|
|
|
|
|
const passwordField = document.getElementById("password");
|
|
|
|
|
const confirmPasswordField = document.getElementById("confirmPassword");
|
|
|
|
|
var isFormValid = true;
|
|
|
|
|
|
|
|
|
|
if (!passwordField.value) {
|
|
|
|
|
passwordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('password-invalid-feedback').innerHTML = 'Please fill out this field';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
} else if (passwordField.value.length < 5) {
|
|
|
|
|
passwordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('password-invalid-feedback').innerHTML =
|
|
|
|
|
'Password must be at least 5 characters';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
} else if (passwordField.value != confirmPasswordField.value) {
|
|
|
|
|
passwordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('password-invalid-feedback').innerHTML = 'Passwords do not match';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (!confirmPasswordField.value) {
|
|
|
|
|
confirmPasswordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('confirmpassword-invalid-feedback').innerHTML = 'Please fill out this field';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
} else if (confirmPasswordField.value.length < 5) {
|
|
|
|
|
confirmPasswordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('confirmpassword-invalid-feedback').innerHTML =
|
|
|
|
|
'Password must be at least 5 characters';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
} else if (passwordField.value != confirmPasswordField.value) {
|
|
|
|
|
confirmPasswordField.classList.add("is-invalid");
|
|
|
|
|
document.getElementById('confirmpassword-invalid-feedback').innerHTML = 'Passwords do not match';
|
|
|
|
|
isFormValid = false;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (isFormValid) {
|
|
|
|
|
confirmPasswordField.classList.remove("is-invalid");
|
|
|
|
|
passwordField.classList.remove("is-invalid");
|
|
|
|
|
}
|
|
|
|
|
return isFormValid;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showSuccessAlert(message) {
|
|
|
|
|
const successAlert = document.getElementById('successAlert');
|
|
|
|
|
successAlert.innerHTML = message;
|
|
|
|
|
successAlert.style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showErrorAlert(message) {
|
|
|
|
|
const errorAlert = document.getElementById('errorAlert');
|
|
|
|
|
errorAlert.innerHTML = message;
|
|
|
|
|
errorAlert.style.display = 'block';
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
2024-03-25 17:29:30 +01:00
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
