loopback-reset-password-mixin
Version:
Add reset password functionality to a loopback project.
164 lines (154 loc) • 5.3 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Reset Password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<style>
html {
height: 100%;
}
body {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100%;
}
.reset-password-content {
display: block;
max-width: 400px;
text-align: center;
border: 1px solid #eee;
padding: 20px 10px;
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
}
.reset-password-content .header {
color: #00c6cf;
font-size: 25px;
}
.reset-password-content .header .reset-password-form {
width: 100%;
padding: 10px;
}
.reset-password-content .reset-password-form {
text-align: left;
}
.reset-password-content .reset-password-form input[type=text] {
font-size: 18px;
color: #898989;
border: 1px solid #eee;
box-sizing: border-box;
outline: 0;
padding: 10px 5px;
margin: 0 0 20px 0;
width: 100%;
max-width: 100%;
vertical-align: bottom;
}
.reset-password-content .reset-password-form input[type=text]:focus {
border-color: #00c6cf;
}
.reset-password-content .reset-password-form input[type=text]::-webkit-input-placeholder {
color: #b9b8b8;
font-weight: 600;
}
.reset-password-content .reset-password-form input[type=text]::-moz-placeholder { /* Firefox 19+ */
color: #b9b8b8;
font-weight: 600;
opacity: 1;
}
.reset-password-content .reset-password-form input[type=text]:-ms-input-placeholder { /* IE 10+ */
color: #b9b8b8;
font-weight: 600;
}
.reset-password-content .reset-password-form input[type=text]:-moz-placeholder { /* Firefox 18- */
color: #b9b8b8;
font-weight: 600;
}
.reset-password-content .reset-password-form input[type=submit] {
padding: 2px 5px;
background-color: #00c6cb ;
height: 37px;
box-shadow: none ;
width: 100%;
font-size: 14px;
font-weight: 300;
outline: 0;
color: #ffffff;
border: none;
}
#success-content {
display: none;
padding: 20px 10px;
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
color: #00C853;
}
#error-content {
display: none;
padding: 20px 10px;
box-sizing: border-box;
font-family: "Roboto", Arial, sans-serif;
color: #f12b2b;
}
</style>
<body>
<div id="reset-password-content" class="reset-password-content">
<h2 class="header">Reset Password</h2>
<form class="reset-password-form" method="post" onsubmit="submitResetPassword()">
<input id="email" type="text" name="email" placeholder="Email" required>
<input id="resetPasswordForm" type="submit" value="Submit" >
</form>
</div>
<div id="success-content">
<h3 id="success-text">Reset password email sent. Please check your email to reset your password</h3>
</div>
<div id="error-content">
<h3 id="error-text">Reset password failed due to some reason. Please try again with correct email</h3>
</div>
</body>
<script>
function submitResetPassword() {
var theForm = document.getElementById('reset-password-content');
var theSuccessMessage = document.getElementById('success-content');
var theErrorsMessage = document.getElementById('error-content');
theSuccessMessage.style.display = 'none';
theErrorsMessage.style.display = 'none';
var data = {
email : document.getElementById('email').value
};
event.preventDefault();
var http = new XMLHttpRequest();
http.open("POST", '/request-password-reset', true);
http.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
http.onload = function () {
var response = JSON.parse(this.responseText);
if(response.statusCode >= 400 && response.statusCode <= 505){
if(response.code){
document.getElementById('error-text').innerHTML = response.code;
}
theErrorsMessage.style.display = 'block';
}
else if(response.statusCode === 200){
theForm.style.display = 'none';
theErrorsMessage.style.display = 'none';
if(response.message){
document.getElementById('success-text').innerHTML = response.message;
}
theSuccessMessage.style.display = 'block';
}
};
http.onerror = function () {
var theFormItself = document.getElementById('reset-password-content');
theFormItself.style.display = 'none';
var theSuccessMessage = document.getElementById('error-content');
theSuccessMessage.style.display = 'block';
};
http.send(JSON.stringify(data));
}
</script>
</html>