API tools faq
paste
sayanriju

Change Password HTML

sayanriju
Aug 14th, 2017
71
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang=en>
  3.     <head>
  4.         <title>Reset Password</title>
  5.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
  6.         <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  7.         <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet">
  8.         <link href='https://fonts.googleapis.com/css?family=Roboto:400,500italic' rel='stylesheet' type='text/css'>
  9.         <script src="http://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
  10.         <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  11.         <style type="text/css">
  12.  
  13. body {
  14.  background:#eff2f7;
  15.  background-size: cover;
  16.  height:100%; height:100vh;
  17.   display: -webkit-flex; /* Safari */
  18.   -webkit-align-items: center; /* Safari 7.0+ */
  19.   display: flex;
  20.   align-items: center;
  21. }
  22.  
  23. .create-new-password-bg {
  24.   display:block;
  25.   margin-left:auto;
  26.   margin-right:auto;
  27.   border:2px solid #999;
  28.   padding:9px 50px 12px;
  29.   border-radius:10px;
  30.   -moz-box-shadow: 0px 0px 6px #666666;
  31. -webkit-box-shadow: 0px 0px 6px #666666;
  32. box-shadow: 0px 0px 6px #666666;
  33. background:#f4f4f4;
  34. }
  35.  
  36. .create-new-password-bg h1 {
  37.  font-size:28px;
  38.  font-family:Roboto;
  39.  color:#000;
  40.  text-align:center;
  41.  margin-bottom:30px;
  42. }
  43.  
  44. .create-new-password-bg form input {
  45.  display:block;
  46.  margin:0 auto 15px;
  47.  width:100%;
  48.  border:1px solid #ccc;
  49.  border-radius:3px;
  50.  padding:6px 10px;
  51.  font-family:Roboto;
  52.  color:#333;
  53. }
  54.  
  55. .create-new-password-bg form input:last-child {
  56.  display:block;
  57.  margin:20px auto 15px;
  58.  border:1px solid #ccc;
  59.  width:initial;
  60.  border-radius:3px;
  61.  padding:6px 15px;
  62.  font-family:Roboto;
  63.  background-color: #5cb85c;
  64.     border-color: #4cae4c;
  65. color:#fff;
  66. font-size:16px;
  67. }
  68.  
  69.     </style>
  70.     </head>
  71.     <body>
  72.       <div class="create-new-password-bg">
  73.  
  74.         <div id="success-msg" style='display: none; text-align: center;'>
  75.           <h1>Successfully Changed password for <%= handle %></h1>
  76.           You can now use the new password to <a href="http://app.donatemytime.in">Login</a>
  77.         </div>
  78.         <div id="error-msg" style='display: none; text-align: center;'>
  79.           <h1>Failed to Change password for <%= handle %></h1>
  80.           Reason: <span id='error-reason'></span>
  81.         </div>
  82.         <form name="changepass-form" id="changepass-form">
  83.           <h1>Change Password Form</h1>
  84.           <div class="alert alert-danger" id="alert" style="display: none;">
  85.             <a href="#" class="close" data-dismiss="alert" aria-label="close">&times;</a>
  86.             <p>Passwords Must Match!</p>
  87.           </div>
  88.            <input type="hidden" name="token" id="token" placeholder="Password" value="<%= token %>"  />
  89.            <input type="text" disabled readonly id="handle" placeholder="Email" value="<%= handle %>" />
  90.            <input type="password" name="newpass" id="newpass" placeholder="Enter New Password" />
  91.            <input type="password" name="newpass-verify" id="newpass-verify" placeholder="Confirm New Password" />
  92.            <input type="submit" name="submit" id="submit" value="Submit" />
  93.         </form>
  94.  
  95.       </div>
  96. <script>
  97.   $(document).ready(function () {
  98.  
  99.     $("#changepass-form").submit(function (e) {
  100.       e.preventDefault();
  101.       if ($("#newpass").val() != $("#newpass-verify").val()) {
  102.         $("#alert").slideDown();
  103.         $("#newpass").focus();
  104.         return false;
  105.       }
  106.       $.ajax({
  107.         method: "POST",
  108.         type: "POST",
  109.         url: "/changepass",
  110.         data: {
  111.           token: $("#token").val(),
  112.           newpass: $("#newpass").val()
  113.         },
  114.         success: function (resp) {
  115.           console.log(resp);
  116.           if (resp.error) {
  117.             $("#changepass-form").hide();
  118.             $("#error-reason").html(resp.message);
  119.             $("#error-msg").show();
  120.           }  else {
  121.             $("#changepass-form").hide();
  122.             $("#success-msg").show();
  123.           }
  124.         }
  125.       })
  126.     })
  127.  
  128.   })
  129. </script>
Add Comment
Please, Sign In to add comment
Public Pastes
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!