Skip to content

Instantly share code, notes, and snippets.

@sayanriju

sayanriju/index.ejs

Created May 14, 2019 05:55
Show Gist options
  • Save sayanriju/62e4cc6ae1af86297cddc76b1d28063d to your computer and use it in GitHub Desktop.
Save sayanriju/62e4cc6ae1af86297cddc76b1d28063d to your computer and use it in GitHub Desktop.
Download ZIP
Reset Password Form (for ejs)
Raw
index.ejs
<!DOCTYPE html>
<html lang=en>
<head>
<title>Reset Password</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,500italic' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="/stylesheets/new-password.css" rel="stylesheet">
</head>
<body>
<div class="create-new-password-bg">
<div id="success-msg" style='display: none; text-align: center;'>
<h1>Successfully Changed password for <%= handle %></h1>
You can now use the new password to Login
</div>
<div id="error-msg" style='display: none; text-align: center;'>
<h1>Failed to Change password for <%= handle %></h1>
Reason: <span id='error-reason'></span>
</div>
<form name="changepass-form" id="changepass-form">
<h1>Change Password Form</h1>
<div class="alert alert-danger" id="alert" style="display: none;">
<a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
<p>Passwords Must Match!</p>
</div>
<input type="hidden" name="token" id="token" placeholder="Password" value="<%= token %>" />
<input type="text" readonly id="handle" placeholder="Email" value="<%= handle %>" />
<input type="password" name="newpass" id="newpass" placeholder="Enter New Password" />
<input type="password" name="newpass-verify" id="newpass-verify" placeholder="Confirm New Password" />
<input type="submit" name="submit" id="submit" value="Submit" />
</form>
</div>
<script>
$(document).ready(function () {
$("#changepass-form").submit(function (e) {
e.preventDefault();
if ($("#newpass").val() != $("#newpass-verify").val()) {
$("#alert").slideDown();
$("#newpass").focus();
return false;
}
$.ajax({
method: "POST",
type: "POST",
url: "/api/v1/resetpassword",
data: {
email: $("#handle").val(),
token: $("#token").val(),
password: $("#newpass").val()
},
success: function (resp) {
console.log(resp);
if (resp.error) {
$("#changepass-form").hide();
$("#error-reason").html(resp.message);
$("#error-msg").show();
} else {
$("#changepass-form").hide();
$("#success-msg").show();
}
}
})
})
})
</script>
Raw
new-password.css
body {
background:#eff2f7;
background-size: cover;
height:100%; height:100vh;
display: -webkit-flex; /* Safari */
-webkit-align-items: center; /* Safari 7.0+ */
display: flex;
align-items: center;
}
.create-new-password-bg {
display:block;
margin-left:auto;
margin-right:auto;
border:2px solid #999;
padding:9px 50px 12px;
border-radius:10px;
-moz-box-shadow: 0px 0px 6px #666666;
-webkit-box-shadow: 0px 0px 6px #666666;
box-shadow: 0px 0px 6px #666666;
background:#f4f4f4;
}
.create-new-password-bg h1 {
font-size:28px;
font-family:Roboto;
color:#000;
text-align:center;
margin-bottom:30px;
}
.create-new-password-bg form input {
display:block;
margin:0 auto 15px;
width:100%;
border:1px solid #ccc;
border-radius:3px;
padding:6px 10px;
font-family:Roboto;
color:#333;
}
.create-new-password-bg form input:last-child {
display:block;
margin:20px auto 15px;
border:1px solid #ccc;
width:initial;
border-radius:3px;
padding:6px 15px;
font-family:Roboto;
background-color: #5cb85c;
border-color: #4cae4c;
color:#fff;
font-size:16px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment