blite
Version:
Lightweight batteries-included backend library.
166 lines (138 loc) • 4.49 kB
HTML
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, Helvetica, sans-serif;
width: 100%;
}
form {
border: 3px solid #f1f1f1;
max-width: 500px;
margin: auto;
}
input[type=text],
input[type=password] {
width: 100%;
padding: 12px 20px;
margin: 8px 0;
display: inline-block;
border: 1px solid #ccc;
box-sizing: border-box;
}
button {
background-color: #04AA6D;
color: white;
padding: 14px 20px;
margin: 8px 0;
border: none;
cursor: pointer;
width: 100%;
}
button:hover {
opacity: 0.8;
}
.cancelbtn {
width: auto;
padding: 10px 18px;
background-color: #f44336;
}
.imgcontainer {
text-align: center;
margin: 24px 0 12px 0;
}
img.avatar {
width: 40%;
border-radius: 50%;
}
.container {
padding: 16px;
}
span.psw {
float: right;
padding-top: 16px;
}
/* Change styles for span and cancel button on extra small screens */
@media screen and (max-width: 300px) {
span.psw {
display: block;
float: none;
}
.cancelbtn {
width: 100%;
}
}
</style>
</head>
<body>
<h2 style="text-align: center;">Reset Form</h2>
<form id="form" action="/api/login" method="post" onsubmit="submitForm(event)">
<div class="container" id="inputs">
<label for="password"><b>Password</b></label>
<input type="password" placeholder="New Password" name="password" required>
<label for="passwordb"><b>Password</b></label>
<input type="password" placeholder="Re-Enter New Password" name="passwordb" required>
<button type="submit">Change</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<p id="error" style="color:#ff0000" hidden=""></p>
<p id="success" hidden=""></p>
<a href="/forgot">Back</a>
</div>
</form>
<script>
let queryString = window.location.search;
let urlParams = new URLSearchParams(queryString);
let token = urlParams.get('token');
if(!token){
window.location.href = "/forgot";
}
function submitForm(e) {
e.preventDefault();
e.stopPropagation();
const formData = new FormData(document.getElementById("form"));
if(formData.get("password") !== formData.get("passwordb")){
const errElm = document.getElementById("error")
errElm.innerText = "Passwords are not matching."
errElm.hidden = false
setTimeout(()=>{
errElm.hidden = true
}, 5000)
return
}
const data = {
token,
password:formData.get("password")
};
fetch("/api/reset", {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(data)
}).then(async (response) => {
if (!response.ok) {
throw await response.json();
}
document.getElementById("inputs").hidden = true
const succElm = document.getElementById("success")
succElm.innerText = (await response.json()).message
succElm.hidden = false
setTimeout(()=>{
succElm.hidden = true
window.location.href = "/login";
}, 3000)
})
.catch(err => {
const errElm = document.getElementById("error")
errElm.innerText = err.message
errElm.hidden = false
setTimeout(()=>{
errElm.hidden = true
}, 5000)
});
}
</script>
</body>
</html>