Add password confirmation to choose_password (#3994)

* update choose_password to have the confirmation * update commander * reverted the base * remove some spaces * nits * more nits
parse-community · Nov 3, 2017 · 842343a · 842343a
1 parent a33c08a
commit 842343a
Showing 1 changed file with 42 additions and 3 deletions.
diff --git a/views/choose_password b/views/choose_password
@@ -108,7 +108,12 @@
       background-image: -ms-linear-gradient(#00395E,#005891);
       background-image: linear-gradient(#00395E,#005891);
     }
-
+
+    button:disabled,
+    button[disabled] {
+      opacity: 0.5;
+    }
+
     input {
       color: black;
       cursor: auto;
@@ -126,6 +131,12 @@
       word-spacing: 0px; 
     }
 
+    #password_match_info {
+      margin-top: 0px;
+      font-size: 13px;
+      color: red;
+    }
+
   </style>
 </head>
 <body>
@@ -134,11 +145,20 @@
   <div class='error' id='error'></div>
   <form id='form' action='#' method='POST'>
     <label>New Password for <span id='username_label'></span></label>
-    <input name="new_password" type="password" />
+
+    <span>New Password</span>
+    <input name="new_password" type="password" id="password"/> <br>
+
+    <span>Confirm New Password</span>
+    <input name="confirm_new_password" type="password" id="password_confirm"/>
+    <span id="password_match_info"></span>
+
     <input name='utf-8' type='hidden' value='✓' />
     <input name="username" id="username" type="hidden" />
     <input name="token" id="token" type="hidden" />
-    <button>Change Password</button>
+
+
+    <button id="change_password">Change Password</button>
   </form>
 
 <script language='javascript' type='text/javascript'>
@@ -162,6 +182,9 @@
     document.getElementById('form').setAttribute('action', base + '/apps/' + id + '/request_password_reset');
     document.getElementById('username').value = urlParams['username'];
     document.getElementById('username_label').appendChild(document.createTextNode(urlParams['username']));
+    document.getElementById("password").oninput = validatePassword;
+    document.getElementById("password_confirm").oninput = validatePassword;
+    document.getElementById("change_password").disabled = true;
 
     document.getElementById('token').value = urlParams['token'];
     if (urlParams['error']) {
@@ -170,6 +193,22 @@
     if (urlParams['app']) {
       document.getElementById('app').appendChild(document.createTextNode(' for ' + urlParams['app']));
     }
+
+    function validatePassword() {
+      var pass2 = document.getElementById("password").value;
+      var pass1 = document.getElementById("password_confirm").value;
+      if(pass1 !== pass2) {
+        if(document.getElementById("password_confirm").value) {
+          document.getElementById("change_password").disabled = true;
+          document.getElementById("password_match_info").innerHTML = "Must match the previous entry";
+        }
+      } else {
+        document.getElementById("change_password").disabled = false;	 
+        document.getElementById("password_match_info").innerHTML = "";
+      }
+      //empty string means no validation error
+    }
+
   }
   //-->
 </script>