- switched to jquery validated loginForm ()

- switched to jquery validated registerForm ()


git-svn-id: https://svn.spreadspace.org/mur.sat@136 7de4ea59-55d0-425e-a1af-a3118ea81d4c

2 files changed, 105 insertions, 32 deletions

diff --git a/tools/mmd/MmdWidgets.py b/tools/mmd/MmdWidgets.py
index 8361002..6094757 100644
--- a/tools/mmd/MmdWidgets.py
+++ b/tools/mmd/MmdWidgets.py
@@ -63,20 +63,27 @@ def computeTrajectory (longitude, latitude, elevation):
 
 def loginFormWidget ():
   html = '''
-   <!--
-   <script type="text/javascript" src="/jquery.js"></script>
-   <script type="text/javascript">
+   <script>
+    $(document).ready(function(){
+     $("#loginForm").validate();
+    });
    </script>
-   -->
-   Please enter your email and password in the form below.
-   <form method="post" accept-charset="UTF-8">
-    <table>
-     <tr><td class="formfield">Email:</td><td><input type="text" name="email" /></td></tr>
-     <tr><td class="formfield">Password:</td><td><input type="password" name="password" /></td></tr>
-     <tr><td class="formfield"><input type="submit" value="login" /></td><td></td></tr>
-     <!-- <tr><td class="formfield"><input type="submit" value="login" disabled="disabled" /></td><td></td></tr> -->
-    </table>
-    <input type="hidden" name="cmd" value="login" />
+   <form id="loginForm" class="cmxform" method="post" accept-charset="UTF-8">
+    <fieldset>
+     <legend>
+      Please enter your email and password in the form below.
+     </legend>
+     <p>
+      <label for="email">Email</label>
+      <em>*</em><input class="required email formfield" type="text" name="email" id="email" />
+     </p>
+     <p>
+      <label for="password">Password</label>
+      <em>*</em><input class="required password formfield" type="password" name="password" />
+     </p>
+     <input type="submit" value="login" />
+     <input type="hidden" name="cmd" value="login" />
+    </fieldset>
    </form>
    Don't have an account yet?  <a href="?cmd=registerForm">Register</a> here!
   '''
@@ -104,26 +111,77 @@ def logoutWidget ():
 
 def registerFormWidget ():
   html = '''
-   Please fill in the form below and click on register.  You will receive a confirmation email.
-   <form method="post" accept-charset="UTF-8">
-    <table>
-     <tr><td class="formfield">Firstname*:</td><td><input type="text" name="firstname" /></td></tr>
-     <tr><td class="formfield">Lastname*: </td><td><input type="text" name="lastname" /></td></tr>
-     <tr><td class="formfield">Email*: </td><td><input type="text" name="email" /></td></tr>
-     <tr><td class="formfield">Callsign: </td><td><input type="text" name="callsign" /></td></tr>
-     <tr><td class="formfield">Password*: </td><td><input type="password" name="password" /></td></tr>
-     <tr><td class="formfield">Confirm Password*: </td><td><input type="password" name="confirm" /></td></tr>
-     <tr><td colspan="2">You can enter your prefered location if you wish</td></tr>
-     <tr><td class="formfield">Name: </td><td><input type="text" name="location_name" /></td></tr>
-     <tr><td class="formfield">Longitude**: </td><td><input type="text" name="latitude" /></td></tr>
-     <tr><td class="formfield">Latitude**: </td><td><input type="text" name="longitude" /></td></tr>
-     <tr><td class="formfield">Altitude: </td><td><input type="text" name="altitude" /></td></tr>
-     <!-- <tr><td class="formfield"><input type="submit" value="Register" disabled="disabled" /></td><td></td></tr> -->
-     <tr><td class="formfield"><input type="submit" value="register" /></td><td></td></tr>
-    </table>
-    <input type="hidden" name="cmd" value="register" />
+   <script>
+    $(document).ready(function(){
+     $("#registerForm").validate({
+      rules: {
+        longitude: {
+          range: [-180, 180],
+          required: "#location:checked"
+        },
+        latitude: {
+          range: [-90, 90],
+          required: "#location:checked"
+        }
+      }
+     });
+    });
+   </script>
+   <form id="registerForm" method="post" accept-charset="UTF-8">
+    <fieldset>
+     <legend>
+      Please fill in the form below and click on register.
+     </legend>
+     <p>
+      <label for="firstname">Firstname</label>
+      <em>*</em><input class="required formfield" id="firstname" type="text" name="firstname" />
+     </p>
+     <p>
+      <label for="lastname">Lastname</label>
+      <em>*</em><input class="required formfield" id="lastname" type="text" name="lastname" />
+     </p>
+     <p>
+      <label for="email">Email</label>
+      <em>*</em>
+      <input class="required email formfield" id="email" type="text" name="email" />
+     </p>
+     <p>
+      <label for="callsign">Callsign</label>
+      <input class="formfield" type="text" name="callsign" />
+     </p>
+     <p>
+      <label for="password">Password</label>
+      <em>*</em><input class="required password formfield" id="password" type="password" name="password" />
+     </p>
+     <p>
+      <label for=="confirm">Confirm Password</label>
+      <em>*</em><input class="required password formfield" id="confirm" equalTo="#password" type="password" name="confirm" />
+     </p>
+     <p>
+      <label for="location">Check to enter location</label>
+      <input type="checkbox" id="location" />
+     </p>
+     <p>
+      <label for="location_name">Name</label>
+      <input class="formfield" type="text" name="location_name" />
+     </p>
+     <p>
+      <label for="longitude">Longitude</label>
+      <em>*</em><input class="formfield" type="text" id="longitude" name="latitude" />
+     </p>
+     <p>
+      <label for="latitude">Latitude</label>
+      <em>*</em><input class="formfield" type="text" id="latitude" name="longitude" />
+     </p>
+     <p>
+      <label for="altitude">Altitude</label>
+      <td><input class="formfield" type="text" id="altitude" name="altitude" />
+     </p>
+     <input type="submit" value="register" />
+     <input type="hidden" name="cmd" value="register" />
+    </fieldset>
    </form>
-   Fields marked with * are mandatory.  Fields markde with ** are mandatory iff you enter your preferred location.
+   Fields marked with * are mandatory.
   '''
 
   return html
@@ -349,6 +407,8 @@ def indexWidget (lcol, rcol, status, debug_info = False):
   <title>MURSAT1 Dashboard</title>
   <meta charset="utf-8" />
   <link rel="stylesheet" type="text/css" href="static/mmd.css" />
+  <script type="text/javascript" src="static/jquery.js"></script>
+  <script type="text/javascript" src="static/jquery.validate.js"></script>
  </head>
  <body>
   <div id="status">
diff --git a/tools/mmd/mmd.css b/tools/mmd/mmd.css
index f72ab30..f8d038a 100644
--- a/tools/mmd/mmd.css
+++ b/tools/mmd/mmd.css
@@ -106,3 +106,16 @@ pre.debug
     padding: 1px;
     margin: 1px;
 }
+
+label
+{
+    width: 10em;
+    float: left;
+}
+
+em
+{
+    padding-right: 1em;
+    font-weight: bold;
+    vertical-align: top;
+}