Style password reset login page

classes/validate.class.php

@@ -2,7 +2,7 @@
 /*-- TODO ---------------------------//
 Writeup how to use the VALIDATE class, add in support for form id checks
 Complete the number and date validation
-Finish the GenerateJS stuff
+Remove the GenerateJS stuff
 //-----------------------------------*/
 
 class VALIDATE {
@@ -173,7 +173,6 @@ class VALIDATE {
 
   function GenerateJS($FormID) {
     $ReturnJS = "<script type=\"text/javascript\" language=\"javascript\">\r\n";
-    $ReturnJS .= "//<![CDATA[\r\n";
     $ReturnJS .= "function formVal() {\r\n";
     $ReturnJS .= "  clearErrors('$FormID');\r\n";
 
@@ -291,7 +290,6 @@ class VALIDATE {
     }
 
     $ReturnJS .= "}\r\n";
-    $ReturnJS .= "//]]>\r\n";
     $ReturnJS .= "</script>\r\n";
     return $ReturnJS;
   }

sections/login/recover_step2.php

@@ -1,6 +1,5 @@
 <?
 View::show_header('Recover Password');
-echo $Validate->GenerateJS('recoverform');
 ?>
 <script src="<?=(STATIC_SERVER)?>functions/validate.js" type="text/javascript"></script>
 <script src="<?=(STATIC_SERVER)?>functions/password_validate.js" type="text/javascript"></script>
@@ -14,17 +13,18 @@ if (empty($PassWasReset)) {
 ?>
     <strong class="important_text"><?=display_str($Err)?></strong><br /><br />
 <?  } ?> Any password 6 characters or longer is accepted, but a strong password is 8 characters or longer, contains at least 1 lowercase and uppercase letter, and contains at least a number or symbol.<br /><br />
-    <table class="layout" cellpadding="2" cellspacing="1" border="0" align="center" width="100%">
-      <tr valign="top">
-        <td align="right" style="width: 100px;">Password&nbsp;</td>
-        <td align="left"><input type="password" name="password" id="new_pass_1" class="inputtext" /> <strong id="pass_strength"></strong></td>
+    <table class="layout">
+      <tr>
+        <td><strong id="pass_strength"></strong></td>
+        <td><input type="password" name="password" id="new_pass_1" class="inputtext" size="40" placeholder="New password" pattern=".{6,307200}" required></td>
       </tr>
-      <tr valign="top">
-        <td align="right">Confirm Password&nbsp;</td>
-        <td align="left"><input type="password" name="verifypassword" id="new_pass_2" class="inputtext" /> <strong id="pass_match"></strong></td>
+      <tr>
+        <td><strong id="pass_match"></strong></td>
+        <td><input type="password" name="verifypassword" id="new_pass_2" class="inputtext" size="40" placeholder="Confirm password" pattern=".{6,307200}" required></td>
       </tr>
       <tr>
-        <td colspan="2" align="right"><input type="submit" name="reset" value="Reset!" class="submit" /></td>
+        <td></td>
+        <td><input type="submit" name="reset" value="Reset!" class="submit"></td>
       </tr>
     </table>
 <? } else { ?>

static/styles/public/style.css

@@ -54,15 +54,15 @@ input[type="text"]:invalid, input[type="password"]:invalid {
   border-right: 2px solid red;
 }
 
-#loginform > table {
+#loginform > table, #recoverform > div > table {
   border-spacing: 1px;
 }
 
-#loginform #username {
+#loginform #username, #recoverform #new_pass_1 {
   border-radius: 5px 5px 0 0;
 }
 
-#loginform input[type="submit"] {
+#loginform input[type="submit"], #recoverform input[type="submit"] {
   width: 100%;
   background-color: white;
   font: 500 14px/29px Helvetica, Arial, sans-serif;
@@ -70,10 +70,16 @@ input[type="text"]:invalid, input[type="password"]:invalid {
   border-radius: 0 0 5px 5px;
   cursor: pointer;
 }
-#loginform input[type="submit"]:hover {
+#loginform input[type="submit"]:hover, #recoverform input[type="submit"]:hover {
   background-color: #FFF7F7;
 }
 
+#recoverform .layout td:first-child {
+  width: 140px;
+  text-align: right;
+  padding-right: 5px;
+}
+
 #head, #foot {
   height: 30px;
   width: 100%;