loopback-reset-password-mixin
Version:
Add reset password functionality to a loopback project.
175 lines (164 loc) • 6.26 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Confirm 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%;
}
.confirm-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);
}
.confirm-password-content .header {
color: #00c6cf;
font-size: 25px;
}
.confirm-password-content .header .confirm-password-form {
width: 100%;
padding: 10px;
}
.confirm-password-content .confirm-password-form {
text-align: left;
}
.confirm-password-content .confirm-password-form input[type=text],input[type=password] {
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;
}
.confirm-password-content .confirm-password-form input[type=text]:focus ,input[type=password]:focus {
border-color: #00c6cf;
}
.confirm-password-content .confirm-password-form input[type=text]::-webkit-input-placeholder,input[type=password]::-webkit-input-placeholder {
color: #b9b8b8;
font-weight: 600;
}
.confirm-password-content .confirm-password-form input[type=text]::-moz-placeholder, input[type=password]::-moz-placeholder { /* Firefox 19+ */
color: #b9b8b8;
font-weight: 600;
opacity: 1;
}
.confirm-password-content .confirm-password-form input[type=text]:-ms-input-placeholder,input[type=password]:-ms-input-placeholder { /* IE 10+ */
color: #b9b8b8;
font-weight: 600;
}
.confirm-password-content .confirm-password-form input[type=text]:-moz-placeholder , input[type=password]:-moz-placeholder{ /* Firefox 18- */
color: #b9b8b8;
font-weight: 600;
}
.confirm-password-content .confirm-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="confirm-password-content" class="confirm-password-content">
<h2 class="header">Confirm Password</h2>
<form class="confirm-password-form" method="post" onsubmit="submitConfirmPassword()">
<input id="password" type="password" name="password" placeholder="Password" required>
<input id="confirm-password" type="password" name="confirm-password" placeholder="Confirm password" required>
<input id="confirmPasswordForm" type="submit" value="Submit" >
</form>
</div>
<div id="success-content">
<h3 id="success-text">There was an error while password update.</h3>
</div>
<div id="error-content">
<h3 id="error-text">Password updated successfully</h3>
</div>
</body>
<script>
function getQueryStringValue (key) {
return decodeURIComponent(window.location.search.replace(new RegExp("^(?:.*[&\\?]" + encodeURIComponent(key).replace(/[\.\+\*]/g, "\\$&") + "(?:\\=([^&]*))?)?.*$", "i"), "$1"));
}
function submitConfirmPassword() {
event.preventDefault();
var theForm = document.getElementById('confirm-password-content');
var theSuccessMessage = document.getElementById('success-content');
var theErrorsMessage = document.getElementById('error-content');
theSuccessMessage.style.display = 'none';
theErrorsMessage.style.display = 'none';
if(document.getElementById('password').value !== document.getElementById('confirm-password').value){
document.getElementById('error-text').innerHTML = 'Both Password does not match';
theErrorsMessage.style.display = 'block';
return;
}
var data = {
password : document.getElementById('password').value
};
var http = new XMLHttpRequest();
http.open("POST", '/confirm-password-reset?access_token='+getQueryStringValue('access_token'), true);
http.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
http.setRequestHeader('Authorization', getQueryStringValue('access_token'));
http.onload = function () {
var response = JSON.parse(this.responseText);
if(response.statusCode >= 400 && response.statusCode <= 505){
if(response.message){
document.getElementById('error-text').innerHTML = response.message;
}
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>