LMS: adds in styling and base UI for reverification flow

lms/static/sass/views/_verification.scss

@@ -226,7 +226,7 @@
   }
 
   //  reset: lists
-  .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info {
+  .list-actions, .list-steps, .progress-steps, .list-controls, .list-fields, .list-nav, .list-help, .list-faq, .nav-wizard, .list-reqs, .list-faq, .review-tasks, .list-tips, .wrapper-photos, .field-group, .list-info {
     @extend %ui-no-list;
   }
 
@@ -358,15 +358,22 @@
 
   // UI : message
   .wrapper-msg {
-    width: flex-grid(12,12);
-    margin: 0 auto ($baseline*1.5) auto;
+    margin-bottom: ($baseline*1.5);
     border-bottom: ($baseline/4) solid $m-blue;
     padding: $baseline ($baseline*1.5);
     background: tint($m-blue, 95%);
 
+    .msg {
+      @include clearfix();
+      max-width: grid-width(12);
+      min-width: 760px;
+      width: flex-grid(12);
+      margin: 0 auto;
+    }
+
     .msg-content, .msg-icon {
-      display: inline-block;
-      vertical-align: middle;
+      display: block;
+      float: left;
     }
 
     .msg-content {
@@ -385,6 +392,7 @@
     .msg-icon {
       width: flex-grid(1,12);
       @extend %t-icon2;
+      margin-right: flex-gutter();
       text-align: center;
       color: $m-blue;
     }
@@ -424,6 +432,10 @@
     }
   }
 
+  .wrapper-msg-reverify {
+
+  }
+
   // ====================
 
   // UI: inline messages
@@ -1851,6 +1863,7 @@
     }
   }
 }
+// ====================
 
 // STATE: already verified
 .register.is-verified {
@@ -1904,6 +1917,8 @@
   }
 }
 
+// ====================
+
 // STATE: upgrading registration type
 .register.is-upgrading {
 
@@ -1911,3 +1926,138 @@
     margin-top: ($baseline*2) !important;
   }
 }
+
+// STATE: re-verifying
+.register.is-not-verified {
+
+  // progress indicator
+  .progress-sts {
+    width: 72%;
+    left: 15%;
+  }
+
+  // VIEW: photo
+  &.step-photos {
+
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is current
+      &#progress-step1 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
+    .progress-sts-value {
+      width: 0% !important;
+    }
+  }
+
+  // VIEW: ID
+  &.step-photos-id {
+
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step1 {
+        border-bottom: ($baseline/5) solid $verified-color-lvl3;
+
+        .wrapper-step-number {
+          border-color: $verified-color-lvl3;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step2 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
+    .progress-sts-value {
+      width: 40% !important;
+    }
+  }
+
+  // VIEW: REVIEW
+  &.step-review {
+
+    // progress nav
+    .progress .progress-step {
+
+      // STATE: is completed
+       &#progress-step1, &#progress-step2 {
+        border-bottom: ($baseline/5) solid $verified-color-lvl3;
+
+        .wrapper-step-number {
+          border-color: $verified-color-lvl3;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-l3;
+        }
+      }
+
+      // STATE: is current
+      &#progress-step3 {
+        border-bottom: ($baseline/5) solid $m-blue-d1;
+        opacity: 1.0;
+
+        .wrapper-step-number {
+          border-color: $m-blue-d1;
+        }
+
+        .step-number, .step-name {
+          color: $m-gray-d3;
+        }
+      }
+    }
+
+    .progress-sts-value {
+      width: 70% !important;
+    }
+  }
+
+  &.step-confirmation {
+
+    .content-confirmation {
+      margin-bottom: ($baseline*2);
+    }
+
+    .view {
+
+      .title {
+        @extend %hd-lv2;
+        color: $m-blue-d1;
+      }
+
+      .instruction {
+        @extend %t-copy-lead1;
+        margin-bottom: $baseline;
+      }
+    }
+>>>>>>> LMS: adds in styling and base UI for reverification flow
+  }
+}

lms/templates/verify_student/_reverification_support.html

@@ -0,0 +1,28 @@
+<%! from django.utils.translation import ugettext as _ %>
+
+<div class="wrapper-content-supplementary">
+  <aside class="content-supplementary">
+    <ul class="list-help">
+      <li class="help-item help-item-whyreverify">
+        <h3 class="title">${_("Why Do I Need to Re-Verify?")}</h3>
+        <div class="copy">
+          <p>${_("Nulla vitae elit libero, a pharetra augue. Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit sit amet non magna.")}</p>
+        </div>
+      </li>
+
+      <li class="help-item help-item-technical">
+        <h3 class="title">${_("Having Technical Trouble?")}</h3>
+        <div class="copy">
+          <p>${_("Please make sure your browser is updated to the {strong_start}{a_start}most recent version possible{a_end}{strong_end}. Also, please make sure your {strong_start}web cam is plugged in, turned on, and allowed to function in your web browser (commonly adjustable in your browser settings).{strong_end}").format(a_start='<a rel="external" href="http://browsehappy.com/">', a_end="</a>", strong_start="<strong>", strong_end="</strong>")}</p>
+        </div>
+      </li>
+
+      <li class="help-item help-item-questions">
+        <h3 class="title">${_("Have questions?")}</h3>
+        <div class="copy">
+            <p>${_("Please read {a_start}our FAQs to view common questions about our certificates{a_end}.").format(a_start='<a rel="external" href="'+ marketing_link('WHAT_IS_VERIFIED_CERT') + '">', a_end="</a>")}</p>
+        </div>
+      </li>
+    </ul>
+  </aside>
+</div> <!-- /wrapper-content-supplementary -->

lms/templates/verify_student/photo_reverification.html

@@ -3,7 +3,7 @@
 <%inherit file="../main.html" />
 <%namespace name='static' file='/static_content.html'/>
 
-<%block name="bodyclass">register verification-process step-photos</%block>
+<%block name="bodyclass">register verification-process is-not-verified step-photos</%block>
 <%block name="title"><title>${_("Re-Verification")}</title></%block>
 
 <%block name="js_extra">
@@ -53,6 +53,18 @@
 </div>
 %endif
 
+<div id="message-reverification" class="wrapper-msg wrapper-msg-error">
+  <div class="msg msg-error">
+    <i class="msg-icon icon-warning-sign"></i>
+    <div class="msg-content">
+      <h3 class="title">${_("Please Resubmit Your Verification Information")}</h3>
+      <div class="copy">
+        <p>${_("There was an error with your previous verification")}. ${_("In order proceed in the verified certificate of achievement track of your current courses, please complete the following steps.")}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="container">
   <section class="wrapper">
 
@@ -62,19 +74,14 @@
 
         <!-- FIXME: Move the "Current Step: " text to the right DOM element -->
         <ol class="progress-steps">
-          <li class="progress-step is-completed" id="progress-step0">
-            <span class="wrapper-step-number"><span class="step-number">0</span></span>
-            <span class="step-name">${_("Intro")}</span>
-          </li>
-
           <li class="progress-step is-current" id="progress-step1">
             <span class="wrapper-step-number"><span class="step-number">1</span></span>
-            <span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Take Photo")}</span>
+            <span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Re-Take Photo")}</span>
           </li>
 
           <li class="progress-step" id="progress-step2">
             <span class="wrapper-step-number"><span class="step-number">2</span></span>
-            <span class="step-name">${_("Take ID Photo")}</span>
+            <span class="step-name">${_("Re-Take ID Photo")}</span>
           </li>
 
           <li class="progress-step" id="progress-step3">
@@ -82,12 +89,7 @@
             <span class="step-name">${_("Review")}</span>
           </li>
 
-          <li class="progress-step" id="progress-step4">
-            <span class="wrapper-step-number"><span class="step-number">4</span></span>
-            <span class="step-name">${_("Make Payment")}</span>
-          </li>
-
-          <li class="progress-step progress-step-icon" id="progress-step5">
+          <li class="progress-step progress-step-icon" id="progress-step4">
             <span class="wrapper-step-number"><span class="step-number">
               <i class="icon-ok"></i>
             </span></span>
@@ -107,7 +109,7 @@
         <section class="wrapper carousel"  data-transition="slide">
           <div id="wrapper-facephoto" class="wrapper-view block-photo">
             <div class="facephoto view">
-              <h3 class="title">${_("Take Your Photo")}</h3>
+              <h3 class="title">${_("Re-Take Your Photo")}</h3>
               <div class="instruction">
                 <p>${_("Use your webcam to take a picture of your face so we can match it with the picture on your ID.")}</p>
               </div>
@@ -172,8 +174,6 @@
 
                         <dt class="faq-question">${_("What do you do with this picture?")}</dt>
                         <dd class="faq-answer">${_("We only use it to verify your identity.  It is not displayed anywhere.")}</dd>
-                        <dt class="faq-question">${_("What if my camera isn't working?")}</dt>
-                        <dd class="faq-answer">${_("")}</dd>
                       </dl>
                     </div>
                   </div>
@@ -185,7 +185,7 @@
 
                 <ol class="wizard-steps">
                   <li class="wizard-step">
-                    <a id="face_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Take ID Photo")}</a>
+                    <a id="face_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 2: Re-Take ID Photo")}</a>
                   </li>
                 </ol>
               </nav>
@@ -291,7 +291,7 @@
                 <ol class="review-tasks">
 
                   <li class="review-task review-task-photos">
-                    <h4 class="title">${_("Review the Photos You've Taken")}</h4>
+                    <h4 class="title">${_("Review the Photos You've Re-Taken")}</h4>
 
                     <div class="copy">
                       <p>${_("Please review the photos and verify that they meet the requirements listed below.")}</p>
@@ -362,7 +362,7 @@
                 <div class="prompt-verify">
                   <h3 class="title">Before proceeding, please confirm that your details match</h3>
 
-                   <p class="copy"> ${_("Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.")}</p>
+                   <p class="copy"> ${_("Once you verify your details match the requirements, you can move onto to confirm your re-verification submisssion.")}</p>
 
                   <ul class="list-actions">
                     <li class="action action-verify">
@@ -376,7 +376,7 @@
                   <li class="wizard-step step-proceed">
                     <form id="reverify_form" method="post">
                       <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }">
-                      <input class="action-primary disabled" type="button" id="reverify_button" value="Submit photos" name="payment">
+                      <input class="action-primary disabled" type="button" id="reverify_button" value="Submit photos & re-verify" name="payment">
                     </form>
                   </li>
                 </ol>
@@ -387,6 +387,7 @@
       </article>
     </div> <!-- /wrapper-content-main -->
 
+    <%include file="_reverification_support.html" />
   </section>
 </div>
 

lms/templates/verify_student/reverification_confirmation.html

@@ -4,15 +4,75 @@
 <%inherit file="../main.html" />
 <%namespace name='static' file='/static_content.html'/>
 
-<%block name="bodyclass">register verification-process step-photos</%block>
-<%block name="title"><title>${_("Verification Submission Confirmation")}</title></%block>
+<%block name="bodyclass">register verification-process is-not-verified step-confirmation</%block>
+<%block name="title"><title>${_("Re-Verification Submission Confirmation")}</title></%block>
 
 <%block name="js_extra">
 <script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.js')}"></script>
 <script src="${static.url('js/vendor/responsive-carousel/responsive-carousel.keybd.js')}"></script>
 </%block>
 <%block name="content">
-<p>Successfully reverified!</p>
 
-<p><a href="${reverse('dashboard')}">Return to Dashboard</a></p>
+<div class="container">
+  <section class="wrapper">
+
+    <div class="wrapper-progress">
+      <section class="progress">
+        <h3 class="sr title">${_("Your Progress")}</h3>
+
+        <ol class="progress-steps">
+          <li class="progress-step is-completed" id="progress-step1">
+            <span class="wrapper-step-number"><span class="step-number">1</span></span>
+            <span class="step-name">${_("Re-Take Photo")}</span>
+          </li>
+
+          <li class="progress-step is-completed" id="progress-step2">
+            <span class="wrapper-step-number"><span class="step-number">2</span></span>
+            <span class="step-name">${_("Re-Take ID Photo")}</span>
+          </li>
+
+          <li class="progress-step is-completed" id="progress-step3">
+            <span class="wrapper-step-number"><span class="step-number">3</span></span>
+            <span class="step-name">${_("Review")}</span>
+          </li>
+
+          <li class="progress-step is-current progress-step-icon" id="progress-step4">
+            <span class="wrapper-step-number"><span class="step-number">
+              <i class="icon-ok"></i>
+            </span></span>
+            <span class="step-name"><span class="sr">${_("Current Step: ")}</span>${_("Confirmation")}</span>
+          </li>
+        </ol>
+
+        <span class="progress-sts">
+          <span class="progress-sts-value"></span>
+        </span>
+      </section>
+    </div>
+
+    <div class="wrapper-content-main">
+      <article class="content-main">
+        <section class="content-confirmation">
+          <div class="wrapper-view">
+            <div class="view">
+              <h3 class="title">${_("Your Credentials Have Been Updated")}</h3>
+
+              <div class="instruction">
+                <p>${_("We've captured your re-submitted information and will review it to verify your identity shortly. You should receive an update to your veriication status within 1-2 days. In the meantime, you still have access to all of your course content.")}</p>
+              </div>
+
+              <ol class="list-nav">
+                <li class="nav-item">
+                  <a class="action action-primary" href="${reverse('dashboard')}">${_("Return to Your Dashboard")}</a>
+                </li>
+              </ol>
+            </div> <!-- /view -->
+          </div> <!-- /wrapper-view -->
+        </section>
+      </article>
+    </div> <!-- /wrapper-content-main -->
+
+    <%include file="_reverification_support.html" />
+  </section>
+</div>
 </%block>