modal functionality for edit name on vcerts

lms/static/js/verify_student/photocapture.js

@@ -70,6 +70,8 @@ function doSnapshotButton(captureButton, resetButton, approveButton) {
 
 function submitNameChange(event) {
   event.preventDefault();
+  $("#lean_overlay").fadeOut(200);
+  $("#edit-name").css({ 'display' : 'none' });
   var full_name = $('input[name="name"]').val();
   var xhr = $.post(
     "/change_name",
@@ -84,7 +86,7 @@ function submitNameChange(event) {
   .fail(function(jqXhr,text_status, error_thrown) {
     $('.message-copy').html(jqXhr.responseText);
   });
-  
+
 }
 
 function initSnapshotHandler(names, hasHtml5CameraSupport) {

lms/static/sass/views/_verification.scss

@@ -1622,6 +1622,23 @@
       color: #fff;
     }
 
+    .modal {
+
+      fieldset {
+        margin-top: $baseline;
+      }
+
+      .close-modal {
+        color: $m-blue-d3;
+
+        &:hover {
+          color: $m-blue-d1;
+          border: none;
+        }
+      }
+
+    }
+
     .nav-wizard {
 
       .help-inline {

lms/templates/verify_student/_modal_editname.html

 <%! from django.utils.translation import ugettext as _ %>
 
 <section id="edit-name" class="modal">
-  <header>
-  <h4>${_("Edit Your Full Name")}</h4>
-</header>
-  <form id="course-checklists" class="course-checklists" method="post" action="">
-    <div role="alert" class="status message submission-error" tabindex="-1">
-      <p class="message-title">${_("The following error occured while editing your name:")}
-        <span class="message-copy"> </span>
-      </p>
-    </div>
-    <p>
-      <label for="name">${_('Full Name')}</label>
-      <input id="name" type="text" name="name" value="" placeholder="${user_full_name}" required aria-required="true" />
-    </p>
+  <div class="inner-wrapper">
+    <header>
+      <h2>${_("Edit Your Name")}</h2>
+      <hr />
+    </header>
+    <div id="change_name_body">
+    <form id="course-checklists" class="course-checklists" method="post" action="">
+      <div role="alert" class="status message submission-error" tabindex="-1">
+        <p class="message-title">${_("The following error occured while editing your name:")}
+          <span class="message-copy"> </span>
+        </p>
+      </div>
+      <p>${_("To uphold the credibility of {platform} certificates, all name changes will be logged and recorded.").format(platform=settings.PLATFORM_NAME)}</p>
+      <fieldset>
+        <div class="input-group">
+          <label for="name">${_('Full Name')}</label>
+          <input id="name" type="text" name="name" value="" placeholder="${user_full_name}" required aria-required="true" />
+          <label>${_("Reason for name change:")}</label>
+          <textarea id="name_rationale_field" value=""></textarea>
+        </div>
 
-    <div class="actions">
-      <button class="action action-primary action-save">${_("Save")}</button>
-    </div>
-  </form>
-  <a href="#" data-dismiss="leanModal" rel="view" class="action action-close action-editname-close">
-    <i class="icon-remove-sign"></i>
-    <span class="label">${_("close")}</span>
-  </a>
+      <div class="actions">
+        <button id="submit" class="action action-primary action-save">${_("Change my name")}</button>
+      </div>
+    </form>
+  </div>
+    <a href="javascript:void(0)" data-dismiss="leanModal" rel="view" class="action action-close action-editname-close close-modal">
+      <i class="icon-remove-sign"></i>
+      <span class="sr">${_("close")}</span>
+    </a>
 </section>

lms/templates/verify_student/photo_verification.html

@@ -249,19 +249,6 @@
 
               <div class="wrapper-task">
                 <ol class="review-tasks">
-                  <li class="review-task review-task-name">
-                    <h4 class="title">${_("Check Your Name")}</h4>
-
-                    <div class="copy">
-                        <p>${_("Make sure your full name on your edX account ({full_name}) matches your ID. We will also use this as the name on your certificate.").format(full_name="<span id='full-name'>" + user_full_name + "</span>")}</p>
-                    </div>
-
-                    <ul class="list-actions">
-                      <li class="action action-editname">
-                        <a class="edit-name" rel="leanModal" href="#edit-name">${_("Edit your name")}</a>
-                      </li>
-                    </ul>
-                  </li>
 
                   <li class="review-task review-task-photos">
                     <h4 class="title">${_("Review the Photos You've Taken")}</h4>
@@ -315,6 +302,20 @@
                     </div>
                   </li>
 
+                  <li class="review-task review-task-name">
+                    <h4 class="title">${_("Check Your Name")}</h4>
+
+                    <div class="copy">
+                        <p>${_("Make sure your full name on your edX account ({full_name}) matches your ID. We will also use this as the name on your certificate.").format(full_name="<span id='full-name'>" + user_full_name + "</span>")}</p>
+                    </div>
+
+                    <ul class="list-actions">
+                      <li class="action action-editname">
+                        <a class="edit-name" rel="leanModal" href="#edit-name">${_("Edit your name")}</a>
+                      </li>
+                    </ul>
+                  </li>
+
                   <li class="review-task  review-task-contribution">
                     <h4 class="title">${_("Check Your Contribution Level")}</h4>