blite
Version:
Lightweight batteries-included backend library.
147 lines (123 loc) • 3.91 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="username"><b>Username or Email</b></label>
<input type="text" placeholder="Enter Username" name="username" required>
<button type="submit" id="reset-btn">Reset Password</button>
</div>
<div class="container" style="background-color:#f1f1f1">
<p id="error" style="color:#ff0000" hidden=""></p>
<p id="success" hidden=""></p>
<a href="/login">Back</a>
</div>
</form>
<script>
function submitForm(e) {
e.preventDefault();
e.stopPropagation();
const btn = document.getElementById("reset-btn")
btn.disabled = true
btn.innerText = "Sending..."
const formData = new FormData(document.getElementById("form"));
const data = {};
formData.forEach((value, key) => data[key] = value);
fetch("/api/forgot", {
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
}, 3000)
})
.catch(err => {
btn.disabled = false
btn.innerText = "Reset Password"
const errElm = document.getElementById("error")
errElm.innerText = err.message
errElm.hidden = false
setTimeout(()=>{
errElm.hidden = true
}, 5000)
});
}
</script>
</body>
</html>