Edited html for the name, email and unenroll modal windows

--HG--
branch : pmitros-name-change

profile.html

@@ -78,13 +78,6 @@ $(function() {
       });
     });
 
-    $("#update_email").click(function() {
-      $("#change_email_link").click();
-    });
-
-    $("#apply_name").click(function() {
-      $("#apply_name_change_link").click();      
-    });
 
     $("#unenroll_button").click(function(){
       $("#unenroll_course_link").click();
@@ -104,14 +97,14 @@ $(function() {
       <h1>Course Progress</h1>
 
       <div id="grade-detail-graph"></div>
-            
+
       <ol class="chapters">
         %for chapter in chapters:
         %if not chapter['chapter'] == "hidden":
         <li>
           <h2><a href="${reverse('courseware_chapter', args=format_url_params([chapter['course'], chapter['chapter']])) }">
           ${ chapter['chapter'] }</a></h2>
-        
+
           <ol class="sections">
             %for section in chapter['sections']:
             <li>
@@ -150,7 +143,7 @@ $(function() {
 
       <h1>${name}</h1>
       %if True:
-        <a href="#" id="apply_name">Apply to change</a>
+        <a href="#apply_name_change" rel="leanModal">Apply to change</a>
       %else:
 	(Name change pending)
       %endif
@@ -159,7 +152,7 @@ $(function() {
 	  Forum name: <strong>${username}</strong> 
 	</li>
         <li>
-	  E-mail: <strong>${email}</strong> <a href="#" id="update_email">Update</a>
+	  E-mail: <strong>${email}</strong> <a href="#change_email" rel="leanModal">Update</a>
 	</li>
         <li>
           Location: <div id="location_sub">${location}</div><div id="description"></div> <a href="#" id="change_location">Edit</a>
@@ -178,7 +171,7 @@ $(function() {
       </div>
       
       <div id="unenroll">
-	<input type="submit" id="unenroll_button" value="Unenroll" />
+        <a href="#unenroll_course" rel="leanModal">Unenroll</a>
       </div>
     </section>
   </div>
@@ -187,39 +180,75 @@ $(function() {
 <div id="password_reset_complete" class="leanModal_box">
   <a href="#password_reset_complete" rel="leanModal" id="password_reset_complete_link"></a>
   <h1>Password Reset Email Sent</h1>
-  An email has been sent to ${email}. Follow the link in the email to change your password.
+  <p>
+    An email has been sent to ${email}. Follow the link in the email to change your password.
+  </p>
 </div>
 
 <div id="apply_name_change" class="leanModal_box">
-  <a href="#apply_name_change_link" rel="leanModal" id="apply_name_change_link"></a>
   <h1>Apply to change your name</h1>
-  Enter your desired full name, as it will appear on the MITx Certificate: 
-  <p><input id="new_name" value="" />
-  <p>Reason for name change: 
-  <p><input id="name_rationale" value="" />
-  <p>A member of the course staff will review your request, and if approved, update your information. 
-  <p><input id="submit">
+  <form>
+    <fieldset>
+      <ul>
+        <li>
+          <label>Enter your desired full name, as it will appear on the MITx Certificate: </label>
+          <input id="new_name" value="" type="text" />
+        </li>
+        <li>
+          <label>Reason for name change:</label>
+          <textarea id="name_rationale" value=""></textarea>
+        </li>
+        <li>
+          <label>A member of the course staff will review your request, and if approved, update your information. Please allow up to a week for your requested to be processed.</label> 
+          <input type="submit" id="submit">
+        </li>
+      </ul>
+    </fieldset>
+  </form>
 </div>
 
 <div id="change_email" class="leanModal_box">
-  <a href="#change_email_link" rel="leanModal" id="change_email_link"></a>
   <h1>Change e-mail</h1> 
-  <p> Please enter your new email address: 
-  <p><input id="new_name" value="" />
-  <p> Please confirm your password: 
-  <p><input id="new_name" value="" type="password" />
-  <p> We will send a confirmation to both ${email} and your new e-mail
-  as part of the process. 
-  <p><input id="submit">
+  <form>
+
+    <fieldset>
+      <ul>
+        <li>
+          <label> Please enter your new email address: </label>
+          <input id="new_name" type="email" value="" />
+        </li>
+
+        <li>
+          <label> Please confirm your password: </label>
+          <input id="new_name" value="" type="password" />
+        </li>
+        <li>
+          <p> We will send a confirmation to both ${email} and your new e-mail as part of the process.</p>
+          <input type="submit" id="submit" />
+        </li>
+      </ul>
+      </fieldset>
+    </form>
 </div>
 
 <div id="unenroll_course" class="leanModal_box">
-  <a href="#unenroll_course_link" rel="leanModal" id="unenroll_course_link"></a>
-<h1> Unenroll </h1>
-<p> At the end of the semester, all students who do not complete the
-course will be automatically dropped. If you would still prefer to
-deactivate your account, you can: 
-<p> Deactivate account, but inform me about future courses.
-<p> Deactivate account/do not inform me about future courses. 
-</p>
+  <h1> Unenroll </h1>
+  <p> At the end of the semester, all students who do not complete the
+    course will be automatically dropped. If you would still prefer to
+    deactivate your account, you can: </p>
+  <form>
+    <fieldset>
+      <ul>
+        <li>
+          <label><input type="radio" name="updates" checked /> Deactivate account/do not inform me about future courses. </label>
+        </li>
+        <li>
+          <label><input type="radio" name="updates" /> Deactivate account, but inform me about future courses.</label>
+        </li>
+        <li>
+          <input type="submit" id="" value="Unenroll" />
+        </li>
+      </ul>
+    </fieldset>
+  </form>
 </div>