2023-09-04 10:43:31 +00:00
<!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;
2023-09-06 03:30:20 +00:00
border-radius: 5px;
2023-09-04 10:43:31 +00:00
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>
2023-09-06 03:14:49 +00:00
2023-09-04 10:43:31 +00:00
<div class="container">
<h2>Reset Password</h2>
2023-09-06 03:14:49 +00:00
2023-09-05 07:00:45 +00:00
<form id="resetForm">
2023-09-04 10:43:31 +00:00
<div class="form-group">
2023-09-05 07:00:45 +00:00
<label for="new_password">New Password</label>
2023-09-06 03:22:35 +00:00
<input id="new_password" type="password" placeholder="New Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]). { 8 , } $" title="The password must be at least 8 characters in length, and contain at least 1 number, 1 lowercase letter and 1 uppercase letter."/>
2023-09-04 10:43:31 +00:00
</div>
2023-09-06 03:14:49 +00:00
2023-09-04 10:43:31 +00:00
<div class="form-group">
2023-09-05 07:00:45 +00:00
<label for="confirm_password">Confirm Password</label>
2023-09-06 03:22:35 +00:00
<input id="confirm_password" type="password" placeholder="Confirm Password" required pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]). { 8 , } $" title="The password must be at least 8 characters in length, and contain at least 1 number, 1 lowercase letter and 1 uppercase letter."/>
2023-09-04 10:43:31 +00:00
</div>
2023-09-05 07:00:45 +00:00
<button type="button" onclick="resetPassword()">Reset Password</button>
</form>
</div>
2023-09-04 10:43:31 +00:00
2023-09-05 07:00:45 +00:00
<script>
2023-09-06 03:14:49 +00:00
2023-09-05 07:00:45 +00:00
function resetPassword() {
const new_password = document.getElementById("new_password").value;
const confirm_password = document.getElementById("confirm_password").value;
2023-09-06 03:30:20 +00:00
if (!/^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]). { 8 , } $/.test(new_password)) {
alert("The password must be at least 8 characters in length, and contain at least 1 number, 1 lowercase letter and 1 uppercase letter.");
return;
}
2023-09-05 07:00:45 +00:00
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)
})
2023-09-05 08:59:24 +00:00
.then(response => response.json())
.then(data => {
if (data.code == 200 ) {
2023-09-06 03:30:20 +00:00
alert("reset password success");
window.location.href = " { { . HomePage } } ";
{ { / * setTimeout ( function ( ) {
2023-09-06 03:14:49 +00:00
window.location.href = " { { . HomePage } } ";
2023-09-06 03:30:20 +00:00
}, 1000); */}}
2023-09-05 07:00:45 +00:00
} else {
2023-09-05 09:35:33 +00:00
alert(data.msg);
2023-09-05 07:00:45 +00:00
}
})
.catch(error => {
console.error('Error:', error);
});
});
}
2023-09-04 10:43:31 +00:00
2023-09-05 07:00:45 +00:00
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>
2023-09-04 10:43:31 +00:00
</body>
</html>
