Merge pull request #1555 from edx/diana/certs-reverification-path

Verified Certificate Reverification Path

common/djangoapps/student/views.py

@@ -25,14 +25,13 @@ from django.core.validators import validate_email, validate_slug, ValidationErro
 from django.core.exceptions import ObjectDoesNotExist
 from django.db import IntegrityError, transaction
 from django.http import (HttpResponse, HttpResponseBadRequest, HttpResponseForbidden,
-                         HttpResponseNotAllowed, Http404)
+                         Http404)
 from django.shortcuts import redirect
 from django_future.csrf import ensure_csrf_cookie
-from django.utils.http import cookie_date, base36_to_int, urlencode
+from django.utils.http import cookie_date, base36_to_int
 from django.utils.translation import ugettext as _
 from django.views.decorators.http import require_POST, require_GET
 from django.contrib.admin.views.decorators import staff_member_required
-from django.utils.translation import ugettext as _u
 
 from ratelimitbackend.exceptions import RateLimitException
 
@@ -47,6 +46,8 @@ from student.models import (
 )
 from student.forms import PasswordResetFormNoActive
 
+from verify_student.models import SoftwareSecurePhotoVerification
+
 from certificates.models import CertificateStatuses, certificate_status_for_student
 
 from xmodule.course_module import CourseDescriptor
@@ -334,6 +335,8 @@ def dashboard(request):
             CourseAuthorization.instructor_email_enabled(course.id)
         )
     )
+    # Verification Attempts
+    verification_status, verification_msg = SoftwareSecurePhotoVerification.user_status(user)
     # get info w.r.t ExternalAuthMap
     external_auth_map = None
     try:
@@ -351,6 +354,8 @@ def dashboard(request):
                'all_course_modes': course_modes,
                'cert_statuses': cert_statuses,
                'show_email_settings_for': show_email_settings_for,
+               'verification_status': verification_status,
+               'verification_msg': verification_msg,
                }
 
     return render_to_response('dashboard.html', context)
@@ -657,11 +662,11 @@ def manage_user_standing(request):
         row = [user.username, user.standing.all()[0].changed_by]
         rows.append(row)
 
-
     context = {'headers': headers, 'rows': rows}
 
     return render_to_response("manage_user_standing.html", context)
 
+
 @require_POST
 @login_required
 @ensure_csrf_cookie
@@ -675,34 +680,34 @@ def disable_account_ajax(request):
     username = request.POST.get('username')
     context = {}
     if username is None or username.strip() == '':
-        context['message'] = _u('Please enter a username')
+        context['message'] = _('Please enter a username')
         return JsonResponse(context, status=400)
 
     account_action = request.POST.get('account_action')
     if account_action is None:
-        context['message'] = _u('Please choose an option')
+        context['message'] = _('Please choose an option')
         return JsonResponse(context, status=400)
 
     username = username.strip()
     try:
         user = User.objects.get(username=username)
     except User.DoesNotExist:
-        context['message'] = _u("User with username {} does not exist").format(username)
+        context['message'] = _("User with username {} does not exist").format(username)
         return JsonResponse(context, status=400)
     else:
-        user_account, _ = UserStanding.objects.get_or_create(
+        user_account, _success = UserStanding.objects.get_or_create(
             user=user, defaults={'changed_by': request.user},
         )
         if account_action == 'disable':
             user_account.account_status = UserStanding.ACCOUNT_DISABLED
-            context['message'] = _u("Successfully disabled {}'s account").format(username)
+            context['message'] = _("Successfully disabled {}'s account").format(username)
             log.info("{} disabled {}'s account".format(request.user, username))
         elif account_action == 'reenable':
             user_account.account_status = UserStanding.ACCOUNT_ENABLED
-            context['message'] = _u("Successfully reenabled {}'s account").format(username)
+            context['message'] = _("Successfully reenabled {}'s account").format(username)
             log.info("{} reenabled {}'s account".format(request.user, username))
         else:
-            context['message'] = _u("Unexpected account status")
+            context['message'] = _("Unexpected account status")
             return JsonResponse(context, status=400)
         user_account.changed_by = request.user
         user_account.standing_last_changed_at = datetime.datetime.now(UTC)

lms/djangoapps/verify_student/models.py

@@ -26,6 +26,7 @@ from django.conf import settings
 from django.core.urlresolvers import reverse
 from django.db import models
 from django.contrib.auth.models import User
+from django.utils.translation import ugettext as _
 from model_utils.models import StatusModel
 from model_utils import Choices
 
@@ -114,9 +115,6 @@ class PhotoVerification(StatusModel):
         attempt.status == "created"
         pending_requests = PhotoVerification.submitted.all()
     """
-    # We can make this configurable later...
-    DAYS_GOOD_FOR = settings.VERIFY_STUDENT["DAYS_GOOD_FOR"]
-
     ######################## Fields Set During Creation ########################
     # See class docstring for description of status states
     STATUS = Choices('created', 'ready', 'submitted', 'must_retry', 'approved', 'denied')
@@ -175,20 +173,29 @@ class PhotoVerification(StatusModel):
 
     ##### Methods listed in the order you'd typically call them
     @classmethod
+    def _earliest_allowed_date(cls):
+        """
+        Returns the earliest allowed date given the settings
+
+        """
+        DAYS_GOOD_FOR = settings.VERIFY_STUDENT["DAYS_GOOD_FOR"]
+        allowed_date = (
+            datetime.now(pytz.UTC) - timedelta(days=DAYS_GOOD_FOR)
+        )
+        return allowed_date
+
+    @classmethod
     def user_is_verified(cls, user, earliest_allowed_date=None):
         """
         Return whether or not a user has satisfactorily proved their
         identity. Depending on the policy, this can expire after some period of
         time, so a user might have to renew periodically.
         """
-        earliest_allowed_date = (
-            earliest_allowed_date or
-            datetime.now(pytz.UTC) - timedelta(days=cls.DAYS_GOOD_FOR)
-        )
         return cls.objects.filter(
             user=user,
             status="approved",
-            created_at__gte=earliest_allowed_date
+            created_at__gte=(earliest_allowed_date
+                             or cls._earliest_allowed_date())
         ).exists()
 
     @classmethod
@@ -201,14 +208,11 @@ class PhotoVerification(StatusModel):
         on the contents of the attempt, and we have not yet received a denial.
         """
         valid_statuses = ['must_retry', 'submitted', 'approved']
-        earliest_allowed_date = (
-            earliest_allowed_date or
-            datetime.now(pytz.UTC) - timedelta(days=cls.DAYS_GOOD_FOR)
-        )
         return cls.objects.filter(
             user=user,
             status__in=valid_statuses,
-            created_at__gte=earliest_allowed_date
+            created_at__gte=(earliest_allowed_date
+                             or cls._earliest_allowed_date())
         ).exists()
 
     @classmethod
@@ -225,6 +229,55 @@ class PhotoVerification(StatusModel):
         else:
             return None
 
+    @classmethod
+    def user_status(cls, user):
+        """
+        Returns the status of the user based on their past verification attempts
+
+        If no such verification exists, returns 'none'
+        If verification has expired, returns 'expired'
+        If the verification has been approved, returns 'approved'
+        If the verification process is still ongoing, returns 'pending'
+        If the verification has been denied and the user must resubmit photos, returns 'must_reverify'
+        """
+        status = 'none'
+        error_msg = ''
+
+        if cls.user_is_verified(user):
+            status = 'approved'
+        elif cls.user_has_valid_or_pending(user):
+            # user_has_valid_or_pending does include 'approved', but if we are
+            # here, we know that the attempt is still pending
+            status = 'pending'
+        else:
+            # we need to check the most recent attempt to see if we need to ask them to do
+            # a retry
+            try:
+                attempts = cls.objects.filter(user=user).order_by('-updated_at')
+                attempt = attempts[0]
+            except IndexError:
+                return ('none', error_msg)
+            if attempt.created_at < cls._earliest_allowed_date():
+                return ('expired', error_msg)
+
+            # right now, this is the only state at which they must reverify. It
+            # may change later
+            if attempt.status == 'denied':
+                status = 'must_reverify'
+            if attempt.error_msg:
+                error_msg = attempt.parsed_error_msg()
+
+        return (status, error_msg)
+
+    def parsed_error_msg(self):
+        """
+        Sometimes, the error message we've received needs to be parsed into
+        something more human readable
+
+        The default behavior is to return the current error message as is.
+        """
+        return self.error_msg
+
     @status_before_must_be("created")
     def upload_face_image(self, img):
         raise NotImplementedError
@@ -486,6 +539,42 @@ class SoftwareSecurePhotoVerification(PhotoVerification):
             self.status = "must_retry"
             self.save()
 
+    def parsed_error_msg(self):
+        """
+        Parse the error messages we receive from SoftwareSecure
+
+        Error messages are written in the form:
+
+            `[{"photoIdReasons": ["Not provided"]}]`
+
+        Returns a list of error messages
+        """
+        # Translates the category names and messages into something more human readable
+        message_dict = {
+            ("photoIdReasons", "Not provided"): _("No photo ID was provided."),
+            ("photoIdReasons", "Text not clear"): _("We couldn't read your name from your photo ID image."),
+            ("generalReasons", "Name mismatch"): _("The name associated with your account and the name on your ID do not match."),
+            ("userPhotoReasons", "Image not clear"): _("The image of your face was not clear."),
+            ("userPhotoReasons", "Face out of view"): _("Your face was not visible in your self-photo"),
+        }
+
+        try:
+            msg_json = json.loads(self.error_msg)
+            msg_dict = msg_json[0]
+
+            msg = []
+            for category in msg_dict:
+                # find the messages associated with this category
+                category_msgs = msg_dict[category]
+                for category_msg in category_msgs:
+                    msg.append(message_dict[(category, category_msg)])
+            return u", ".join(msg)
+        except (ValueError, KeyError):
+            # if we can't parse the message as JSON or the category doesn't
+            # match one of our known categories, show a generic error
+            log.error('PhotoVerification: Error parsing this error message: %s', self.error_msg)
+            return _("There was an error verifying your ID photos.")
+
     def image_url(self, name):
         """
         We dynamically generate this, since we want it the expiration clock to

lms/djangoapps/verify_student/tests/test_models.py

@@ -17,11 +17,11 @@ from util.testing import UrlResetMixin
 import verify_student.models
 
 FAKE_SETTINGS = {
-    "SOFTWARE_SECURE" : {
+    "SOFTWARE_SECURE": {
         "FACE_IMAGE_AES_KEY" : "AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA",
-        "API_ACCESS_KEY" : "BBBBBBBBBBBBBBBBBBBB",
-        "API_SECRET_KEY" : "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
-        "RSA_PUBLIC_KEY" : """-----BEGIN PUBLIC KEY-----
+        "API_ACCESS_KEY": "BBBBBBBBBBBBBBBBBBBB",
+        "API_SECRET_KEY": "CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC",
+        "RSA_PUBLIC_KEY": """-----BEGIN PUBLIC KEY-----
 MIIBIjANBgkqhkiG9w0BAQEFAAOCAQ8AMIIBCgKCAQEAu2fUn20ZQtDpa1TKeCA/
 rDA2cEeFARjEr41AP6jqP/k3O7TeqFX6DgCBkxcjojRCs5IfE8TimBHtv/bcSx9o
 7PANTq/62ZLM9xAMpfCcU6aAd4+CVqQkXSYjj5TUqamzDFBkp67US8IPmw7I2Gaa
@@ -30,10 +30,10 @@ dyZCM9pBcvcH+60ma+nNg8GVGBAW/oLxILBtg+T3PuXSUvcu/r6lUFMHk55pU94d
 9A/T8ySJm379qU24ligMEetPk1o9CUasdaI96xfXVDyFhrzrntAmdD+HYCSPOQHz
 iwIDAQAB
 -----END PUBLIC KEY-----""",
-        "API_URL" : "http://localhost/verify_student/fake_endpoint",
-        "AWS_ACCESS_KEY" : "FAKEACCESSKEY",
-        "AWS_SECRET_KEY" : "FAKESECRETKEY",
-        "S3_BUCKET" : "fake-bucket"
+        "API_URL": "http://localhost/verify_student/fake_endpoint",
+        "AWS_ACCESS_KEY": "FAKEACCESSKEY",
+        "AWS_SECRET_KEY": "FAKESECRETKEY",
+        "S3_BUCKET": "fake-bucket"
     }
 }
 
@@ -57,11 +57,13 @@ class MockKey(object):
     def generate_url(self, duration):
         return "http://fake-edx-s3.edx.org/"
 
+
 class MockBucket(object):
     """Mocking a boto S3 Bucket object."""
     def __init__(self, name):
         self.name = name
 
+
 class MockS3Connection(object):
     """Mocking a boto S3 Connection"""
     def __init__(self, access_key, secret_key):
@@ -307,3 +309,56 @@ class TestPhotoVerification(TestCase):
             attempt.save()
             assert_true(SoftwareSecurePhotoVerification.user_has_valid_or_pending(user), status)
 
+    def test_user_status(self):
+        # test for correct status when no error returned
+        user = UserFactory.create()
+        status = SoftwareSecurePhotoVerification.user_status(user)
+        self.assertEquals(status, ('none', ''))
+
+        # test for when one has been created
+        attempt = SoftwareSecurePhotoVerification(user=user)
+        attempt.status = 'approved'
+        attempt.save()
+
+        status = SoftwareSecurePhotoVerification.user_status(user)
+        self.assertEquals(status, ('approved', ''))
+
+        # create another one for the same user, make sure the right one is
+        # returned
+        attempt2 = SoftwareSecurePhotoVerification(user=user)
+        attempt2.status = 'denied'
+        attempt2.error_msg = '[{"photoIdReasons": ["Not provided"]}]'
+        attempt2.save()
+
+        status = SoftwareSecurePhotoVerification.user_status(user)
+        self.assertEquals(status, ('approved', ''))
+
+        # now delete the first one and verify that the denial is being handled
+        # properly
+        attempt.delete()
+        status = SoftwareSecurePhotoVerification.user_status(user)
+        self.assertEquals(status, ('must_reverify', "No photo ID was provided."))
+
+    def test_parse_error_msg_success(self):
+        user = UserFactory.create()
+        attempt = SoftwareSecurePhotoVerification(user=user)
+        attempt.status = 'denied'
+        attempt.error_msg = '[{"photoIdReasons": ["Not provided"]}]'
+        parsed_error_msg = attempt.parsed_error_msg()
+        self.assertEquals("No photo ID was provided.", parsed_error_msg)
+
+    def test_parse_error_msg_failure(self):
+        user = UserFactory.create()
+        attempt = SoftwareSecurePhotoVerification(user=user)
+        attempt.status = 'denied'
+        # when we can't parse into json
+        bad_messages = {
+            'Not Provided',
+            '[{"IdReasons": ["Not provided"]}]',
+            '{"IdReasons": ["Not provided"]}',
+            u'[{"ïḋṚëäṡöṅṡ": ["Ⓝⓞⓣ ⓟⓡⓞⓥⓘⓓⓔⓓ "]}]',
+        }
+        for msg in bad_messages:
+            attempt.error_msg = msg
+            parsed_error_msg = attempt.parsed_error_msg()
+            self.assertEquals(parsed_error_msg, "There was an error verifying your ID photos.")

lms/djangoapps/verify_student/tests/test_views.py

@@ -10,20 +10,31 @@ verify_student/start?course_id=MITx/6.002x/2013_Spring # create
 
 """
 import urllib
+from mock import patch, Mock, ANY
 
 from django.test import TestCase
 from django.test.utils import override_settings
+from django.conf import settings
 from django.core.urlresolvers import reverse
+from django.core.exceptions import ObjectDoesNotExist
 
 from xmodule.modulestore.tests.factories import CourseFactory
 from courseware.tests.tests import TEST_DATA_MONGO_MODULESTORE
 from student.tests.factories import UserFactory
 from course_modes.models import CourseMode
+from verify_student.views import render_to_response
+from verify_student.models import SoftwareSecurePhotoVerification
+
+
+def mock_render_to_response(*args, **kwargs):
+    return render_to_response(*args, **kwargs)
+
+render_mock = Mock(side_effect=mock_render_to_response)
 
 
 class StartView(TestCase):
 
-    def start_url(course_id=""):
+    def start_url(self, course_id=""):
         return "/verify_student/{0}".format(urllib.quote(course_id))
 
     def test_start_new_verification(self):
@@ -58,3 +69,44 @@ class TestVerifyView(TestCase):
         response = self.client.get(url)
 
         self.assertEquals(response.status_code, 302)
+
+
+@override_settings(MODULESTORE=TEST_DATA_MONGO_MODULESTORE)
+class TestReverifyView(TestCase):
+    """
+    Tests for the reverification views
+
+    """
+    def setUp(self):
+        self.user = UserFactory.create(username="rusty", password="test")
+        self.client.login(username="rusty", password="test")
+
+    @patch('verify_student.views.render_to_response', render_mock)
+    def test_reverify_get(self):
+        url = reverse('verify_student_reverify')
+        response = self.client.get(url)
+        self.assertEquals(response.status_code, 200)
+        ((_template, context), _kwargs) = render_mock.call_args
+        self.assertFalse(context['error'])
+
+    @patch('verify_student.views.render_to_response', render_mock)
+    def test_reverify_post_failure(self):
+        url = reverse('verify_student_reverify')
+        response = self.client.post(url, {'face_image': '',
+                                          'photo_id_image': ''})
+        self.assertEquals(response.status_code, 200)
+        ((template, context), _kwargs) = render_mock.call_args
+        self.assertIn('photo_reverification', template)
+        self.assertTrue(context['error'])
+
+    @patch.dict(settings.MITX_FEATURES, {'AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING': True})
+    def test_reverify_post_success(self):
+        url = reverse('verify_student_reverify')
+        response = self.client.post(url, {'face_image': ',',
+                                          'photo_id_image': ','})
+        self.assertEquals(response.status_code, 302)
+        try:
+            verification_attempt = SoftwareSecurePhotoVerification.objects.get(user=self.user)
+            self.assertIsNotNone(verification_attempt)
+        except ObjectDoesNotExist:
+            self.fail('No verification object generated')

lms/djangoapps/verify_student/urls.py

@@ -35,4 +35,15 @@ urlpatterns = patterns(
         name="verify_student_results_callback",
     ),
 
+    url(
+        r'^reverify$',
+        views.ReverifyView.as_view(),
+        name="verify_student_reverify"
+    ),
+
+    url(
+        r'^reverification_confirmation$',
+        views.reverification_submission_confirmation,
+        name="verify_student_reverification_confirmation"
+    ),
 )

lms/djangoapps/verify_student/views.py

@@ -267,3 +267,66 @@ def show_requirements(request, course_id):
         "upgrade": upgrade,
     }
     return render_to_response("verify_student/show_requirements.html", context)
+
+
+class ReverifyView(View):
+    """
+    The main reverification view. Under similar constraints as the main verification view.
+    Has to perform these functions:
+        - take new face photo
+        - take new id photo
+        - submit photos to photo verification service
+
+    Does not need to be attached to a particular course.
+    Does not need to worry about pricing
+    """
+    @method_decorator(login_required)
+    def get(self, request):
+        """
+        display this view
+        """
+        context = {
+            "user_full_name": request.user.profile.name,
+            "error": False,
+        }
+
+        return render_to_response("verify_student/photo_reverification.html", context)
+
+    @method_decorator(login_required)
+    def post(self, request):
+        """
+        submits the reverification to SoftwareSecure
+        """
+
+        try:
+            attempt = SoftwareSecurePhotoVerification(user=request.user)
+            b64_face_image = request.POST['face_image'].split(",")[1]
+            b64_photo_id_image = request.POST['photo_id_image'].split(",")[1]
+
+            attempt.upload_face_image(b64_face_image.decode('base64'))
+            attempt.upload_photo_id_image(b64_photo_id_image.decode('base64'))
+            attempt.mark_ready()
+
+            # save this attempt
+            attempt.save()
+            # then submit it across
+            attempt.submit()
+            return HttpResponseRedirect(reverse('verify_student_reverification_confirmation'))
+        except Exception:
+            log.exception(
+                "Could not submit verification attempt for user {}".format(request.user.id)
+            )
+            context = {
+                "user_full_name": request.user.profile.name,
+                "error": True,
+            }
+            return render_to_response("verify_student/photo_reverification.html", context)
+
+
+@login_required
+def reverification_submission_confirmation(_request):
+    """
+    Shows the user a confirmation page if the submission to SoftwareSecure was successful
+    """
+
+    return render_to_response("verify_student/reverification_confirmation.html")

lms/envs/acceptance.py

@@ -91,10 +91,6 @@ MITX_FEATURES['ENABLE_DISCUSSION_SERVICE'] = True
 # Use the auto_auth workflow for creating users and logging them in
 MITX_FEATURES['AUTOMATIC_AUTH_FOR_TESTING'] = True
 
-# Don't actually send any requests to Software Secure for student identity
-# verification.
-MITX_FEATURES['AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING'] = True
-
 # Enable fake payment processing page
 MITX_FEATURES['ENABLE_PAYMENT_FAKE'] = True
 
@@ -102,6 +98,9 @@ MITX_FEATURES['ENABLE_PAYMENT_FAKE'] = True
 MITX_FEATURES['ENABLE_INSTRUCTOR_EMAIL'] = True
 MITX_FEATURES['REQUIRE_COURSE_EMAIL_AUTH'] = False
 
+# Don't actually send any requests to Software Secure for student identity
+# verification.
+MITX_FEATURES['AUTOMATIC_VERIFY_STUDENT_IDENTITY_FOR_TESTING'] = True
 
 # Configure the payment processor to use the fake processing page
 # Since both the fake payment page and the shoppingcart app are using

lms/static/js/verify_student/photocapture.js

@@ -18,6 +18,23 @@ function initVideoCapture() {
   return !(navigator.getUserMedia == undefined);
 }
 
+var submitReverificationPhotos = function() {
+    // add photos to the form
+    $('<input>').attr({
+        type: 'hidden',
+        name: 'face_image',
+        value: $("#face_image")[0].src,
+    }).appendTo("#reverify_form");
+    $('<input>').attr({
+        type: 'hidden',
+        name: 'photo_id_image',
+        value: $("#photo_id_image")[0].src,
+    }).appendTo("#reverify_form");
+
+    $("#reverify_form").submit();
+
+}
+
 var submitToPaymentProcessing = function() {
   var contribution_input = $("input[name='contribution']:checked")
   var contribution = 0;
@@ -255,10 +272,15 @@ $(document).ready(function() {
       submitToPaymentProcessing();
   });
 
+  $("#reverify_button").click(function() {
+      submitReverificationPhotos();
+  });
+
   // prevent browsers from keeping this button checked
   $("#confirm_pics_good").prop("checked", false)
   $("#confirm_pics_good").change(function() {
       $("#pay_button").toggleClass('disabled');
+      $("#reverify_button").toggleClass('disabled');
   });
 
 

lms/static/sass/elements/_controls.scss

@@ -84,6 +84,23 @@
   }
 }
 
+// blue primary error color
+%btn-primary-error {
+  @extend %btn-primary;
+  box-shadow: 0 2px 1px 0 shade($error-color, 25%);
+  background: shade($error-color, 25%);
+  color: $white;
+
+  &:hover, &:active {
+    background: $error-color;
+    color: $white;
+  }
+
+  &.disabled, &[disabled] {
+    box-shadow: none;
+  }
+}
+
 // blue primary button
 %btn-primary-blue {
   @extend %btn-primary;

lms/static/sass/elements/_typography.scss

@@ -278,7 +278,7 @@
 
 %copy-badge {
   @extend %t-title8;
-  @extend %t-weight5;
+  @extend %t-weight3;
   border-radius: ($baseline/5);
   padding: ($baseline/2) $baseline;
   text-transform: uppercase;

lms/static/sass/multicourse/_dashboard.scss

@@ -75,6 +75,12 @@
           margin-bottom: 15px;
           padding-bottom: 17px;
 
+          &:last-child {
+            border-bottom: none;
+            margin-bottom: 0;
+            padding-bottom: 0;
+          }
+
           &:hover, &:focus {
             .title .icon {
               opacity: 1.0;
@@ -760,4 +766,169 @@
       margin-right: 10px;
     }
   }
+
+  // account-related
+  .user-info {
+
+    // status
+    .status {
+
+      .list--nav {
+        margin: ($baseline/2) 0 0 0;
+        padding: 0;
+      }
+
+      .nav__item {
+        @extend %t-weight4;
+        @include font-size(13);
+        margin-left: 26px;
+      }
+    }
+  }
+
+  // status - verification
+  .status-verification {
+
+    .status-title {
+      margin: 0 0 ($baseline/4) 26px;
+    }
+
+    .status-data {
+      margin: 0 0 ($baseline/2) 26px;
+      width: 80%;
+    }
+
+    .status-data-message {
+      @extend %t-copy-sub1;
+      @extend %t-weight4;
+      margin-bottom: ($baseline/2);
+    }
+
+    .list-actions {
+      @extend %ui-no-list;
+
+      .action {
+        @extend %t-weight4;
+        display: block;
+        @include font-size(14);
+      }
+    }
+
+    .status-note {
+      @extend %t-copy-sub2;
+      position: relative;
+      margin-top: $baseline;
+      border-top: 1px solid $black-t0;
+      padding-top: ($baseline/2);
+
+      p {
+        @extend %t-copy-sub2;
+      }
+
+      .deco-arrow {
+        @include triangle(($baseline/2), $m-gray-d3, up);
+        position: absolute;
+        left: 45%;
+        top: -($baseline/2);
+      }
+    }
+
+    // CASE: is denied
+    &.is-denied {
+
+      .status-data-message {
+        color: $error-color;
+        border-bottom-color: rgba($error-color, 0.25);
+      }
+
+      .status-note {
+        color: desaturate($error-color, 65%);
+        border-top-color: rgba($error-color, 0.25);
+      }
+
+      .action-reverify {
+        @extend %btn-primary-error;
+        @extend %t-weight4;
+        display: block;
+        @include font-size(14);
+      }
+
+      .deco-arrow {
+        @include triangle(($baseline/2), $error-color, up);
+      }
+    }
+
+    // CASE: is accepted
+    &.is-accepted {
+
+      .status-data-message {
+        color: $verified-color-lvl1;
+        border-bottom-color: $verified-color-lvl4;
+      }
+
+      .status-note {
+        color: $m-gray-l1;
+        border-top-color: $verified-color-lvl4;
+      }
+
+      .deco-arrow {
+        @include triangle(($baseline/2), $verified-color-lvl4, up);
+      }
+    }
+
+    // CASE: is pending
+    &.is-pending {
+
+      .status-data-message {
+        color: $m-gray-d3;
+        border-bottom-color: $m-gray-l4;
+      }
+
+      .status-note {
+        color: $m-gray-l1;
+        border-top-color: $m-gray-d3;
+      }
+    }
+  }
+
+  // status - verification
+  .status--verification {
+
+    .data {
+      white-space: normal !important;
+      text-overflow: no !important;
+      overflow: visible !important;
+    }
+
+    .list--nav {
+      margin-left: 26px;
+    }
+
+    // STATE: is denied
+    &.is-denied {
+
+      .data {
+        color: $error-color !important;
+      }
+    }
+  }
+
+  // message
+  .msg {
+    margin: ($baseline/2) 0 ($baseline/2) 26px;
+  }
+
+  .msg__title {
+    @extend %hd-lv5;
+    color: $lighter-base-font-color;
+  }
+
+  .msg__copy {
+    @extend %copy-metadata;
+    color: $lighter-base-font-color;
+
+    p {
+      @extend %t-copy;
+    }
+  }
 }

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;
     }
@@ -620,6 +628,38 @@
 
   // ====================
 
+  // UI: reverification message
+  .wrapper-reverification {
+    border-bottom: ($baseline/10) solid $m-pink;
+    margin-bottom: $baseline;
+    padding-bottom: $baseline;
+    position: relative;
+
+    .deco-arrow {
+      @include triangle($baseline, $m-pink, down);
+      position: absolute;
+      bottom: -($baseline);
+      left: 50%;
+    }
+  }
+
+  .reverification {
+
+    .message {
+
+      .title {
+        @extend %hd-lv3;
+        color: $m-pink;
+      }
+
+      .copy {
+        @extend %t-copy-sub1;
+      }
+    }
+  }
+
+  // ====================
+
   // UI: slides
   .carousel {
 
@@ -697,6 +737,10 @@
                 padding-bottom: 0;
               }
             }
+
+            .help-item-emphasis {
+              @extend %t-weight4;
+            }
           }
 
           // help - faq
@@ -1851,6 +1895,7 @@
     }
   }
 }
+// ====================
 
 // STATE: already verified
 .register.is-verified {
@@ -1904,6 +1949,8 @@
   }
 }
 
+// ====================
+
 // STATE: upgrading registration type
 .register.is-upgrading {
 
@@ -1911,3 +1958,141 @@
     margin-top: ($baseline*2) !important;
   }
 }
+
+// STATE: re-verifying
+.register.is-not-verified {
+
+  .help-item-emphasis {
+    color: $m-pink;
+  }
+
+  // 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/templates/dashboard.html

@@ -150,10 +150,10 @@
     </header>
     <section class="user-info">
       <ul>
-        <li>
+        <li class="info--username">
           <span class="title"><div class="icon name-icon"></div>${_("Full Name")} (<a href="#apply_name_change" rel="leanModal" class="edit-name">${_("edit")}</a>)</span> <span class="data">${ user.profile.name | h }</span>
         </li>
-        <li>
+        <li class="info--email">
           <span class="title"><div class="icon email-icon"></div>${_("Email")}
             % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
             (<a href="#change_email" rel="leanModal" class="edit-email">${_("edit")}</a>)
@@ -162,8 +162,8 @@
         </li>
 
         % if external_auth_map is None or 'shib' not in external_auth_map.external_domain:
-        <li>
-          <span class="title"><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">${_("Reset Password")}</a></span>
+        <li class="controls--account">
+          <span class="title"><div class="icon"></div><a href="#password_reset_complete" rel="leanModal" id="pwd_reset_button">${_("Reset Password")}</a></span>
           <form id="password_reset_form" method="post" data-remote="true" action="${reverse('password_reset')}">
             <input id="id_email" type="hidden" name="email" maxlength="75" value="${user.email}" />
             <!-- <input type="submit" id="pwd_reset_button" value="${_('Reset Password')}" /> -->
@@ -171,6 +171,8 @@
         </li>
         % endif
 
+        <%include file='dashboard/_dashboard_status_verification.html' />
+
       </ul>
     </section>
 
@@ -188,7 +190,7 @@
             <% cert_status = cert_statuses.get(course.id) %>
             <% show_email_settings = (course.id in show_email_settings_for) %>
             <% course_mode_info = all_course_modes.get(course.id) %>
-            <%include file='dashboard/dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info" />
+            <%include file='dashboard/_dashboard_course_listing.html' args="course=course, enrollment=enrollment, show_courseware_link=show_courseware_link, cert_status=cert_status, show_email_settings=show_email_settings, course_mode_info=course_mode_info" />
       % endfor
 
       </ul>

lms/templates/dashboard/dashboard_course_listing.html → lms/templates/dashboard/_dashboard_course_listing.html

@@ -57,7 +57,7 @@
         </h3>
       </hgroup>
 
-      % if course.has_ended() and cert_status:
+      % if course.has_ended() and cert_status and not enrollment.mode == 'audit':
           <%
           if cert_status['status'] == 'generating':
               status_css_class = 'course-status-certrendering'

lms/templates/dashboard/_dashboard_status_verification.html

+<%! from django.utils.translation import ugettext as _ %>
+<%!
+  from django.core.urlresolvers import reverse
+%>
+
+<%namespace name='static' file='../static_content.html'/>
+
+%if verification_status == 'approved':
+<li class="status status-verification is-accepted">
+  <span class="title status-title">${_("ID-Verification Status")}</span>
+
+  <div class="status-data">
+    <span class="status-data-message">${_("Reviewed and Verified")}</span>
+
+    <div class="status-note">
+      <span class="deco-arrow"></span>
+
+      <p>${_("Your verification status is good for one year after submission.")}</p>
+    </div>
+  </div>
+</li>
+%endif
+
+%if verification_status == 'pending':
+<li class="status status-verification is-pending">
+  <span class="title status-title">${_("ID-Verification Status")}</span>
+
+  <div class="status-data">
+    <span class="status-data-message">${_("Pending")}</span>
+
+    <div class="status-note">
+      <span class="deco-arrow"></span>
+
+      <p>${_("Your verification photos have been submitted and will be reviewed shortly.")}</p>
+    </div>
+  </div>
+</li>
+
+%endif
+
+%if verification_status == 'must_reverify':
+<li class="status status-verification is-denied">
+  <span class="title status-title">${_("ID-Verification Status")}</span>
+
+  <div class="status-data">
+    <span class="status-data-message">${verification_msg}</span>
+
+    <ul class="list-actions">
+    <li class="action-item action-item-reverify">
+      <a href="${reverse('verify_student_reverify')}" class="action action-reverify">${_("Re-verify Yourself")}</a>
+    </li>
+    </ul>
+
+    <div class="status-note">
+      <span class="deco-arrow"></span>
+
+      <p>${_("If you fail to pass a verification attempt before your course ends, you will not receive a verified certificate.")}</p>
+    </div>
+  </div>
+</li>
+%endif
+
+

lms/templates/verify_student/_reverification_support.html

+<%! 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>${_("There was a problem with your original verification.  To make sure that your identity is correctly associated with your course progress, we need to retake your photo and a photo of your identification document.  If you don't have a valid identification document, contact {link_start}{support_email}{link_end}.").format(
+          support_email=settings.DEFAULT_FEEDBACK_EMAIL,
+          link_start=u'<a href="mailto:{address}?subject={subject_line}">'.format(
+                                address=settings.DEFAULT_FEEDBACK_EMAIL,
+                                subject_line=_('Problem with ID re-verification')),
+          link_end=u'</a>')}</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

+<%! from django.utils.translation import ugettext as _ %>
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+<%namespace name='static' file='/static_content.html'/>
+
+<%block name="bodyclass">register verification-process is-not-verified step-photos</%block>
+<%block name="title"><title>${_("Re-Verification")}</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>
+<script src="${static.url('js/verify_student/photocapture.js')}"></script>
+</%block>
+
+
+<%block name="content">
+
+<div id="no-webcam" style="display: none;" class="wrapper-msg wrapper-msg-activate">
+  <div class=" msg msg-activate">
+    <i class="msg-icon icon-warning-sign"></i>
+    <div class="msg-content">
+      <h3 class="title">${_("No Webcam Detected")}</h3>
+      <div class="copy">
+        <p>${_("You don't seem to have a webcam connected. Double-check that your webcam is connected and working to continue.")}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+<div id="no-flash" style="display: none;" class="wrapper-msg wrapper-msg-activate">
+  <div class=" msg msg-activate">
+    <i class="msg-icon icon-warning-sign"></i>
+    <div class="msg-content">
+      <h3 class="title">${_("No Flash Detected")}</h3>
+      <div class="copy">
+        <p>${_("You don't seem to have Flash installed. {a_start} Get Flash {a_end} to continue your registration.").format(a_start='<a rel="external" href="http://get.adobe.com/flashplayer/">', a_end="</a>")}</p>
+      </div>
+    </div>
+  </div>
+</div>
+
+%if error:
+<div id="submission-error" class="wrapper-msg wrapper-msg-activate">
+  <div class=" msg msg-activate">
+    <i class="msg-icon icon-warning-sign"></i>
+    <div class="msg-content">
+      <h3 class="title">${_("Error submitting your images")}</h3>
+      <div class="copy">
+        <p>${_("Oops! Something went wrong. Please confirm your details and try again.")}</p>
+      </div>
+    </div>
+  </div>
+</div>
+%endif
+
+<div class="container">
+  <section class="wrapper">
+
+    <div class="wrapper-reverification">
+      <section class="reverification">
+        <div class="message">
+          <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>
+
+        <span class="deco-arrow"></span>
+      </section>
+    </div>
+
+    <div class="wrapper-progress">
+      <section class="progress">
+        <h3 class="sr title">${_("Your Progress")}</h3>
+
+        <ol class="progress-steps">
+          <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>${_("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">${_("Re-Take ID Photo")}</span>
+          </li>
+
+          <li class="progress-step" 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 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">${_("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="wrapper carousel"  data-transition="slide">
+          <div id="wrapper-facephoto" class="wrapper-view block-photo">
+            <div class="facephoto view">
+              <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>
+
+              <div class="wrapper-task">
+                <div id="facecam" class="task cam">
+                  <div class="placeholder-cam" id="face_capture_div">
+
+                    <div class="placeholder-art">
+                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission.")}</p>
+                    </div>
+
+                    <video id="face_video" autoplay></video><br/>
+                    <canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
+                  </div>
+
+                  <div class="controls photo-controls">
+                    <ul class="list-controls">
+                      <li class="control control-redo" id="face_reset_button">
+                        <a class="action action-redo" href="">
+                          <i class="icon-undo"></i> <span class="sr">${_("Retake")}</span>
+                        </a>
+                      </li>
+
+                      <li class="control control-do" id="face_capture_button">
+                        <a class="action action-do" href="">
+                          <i class="icon-camera"></i><span class="sr">${_("Take photo")}</span>
+                        </a>
+                      </li>
+
+                      <li class="control control-approve" id="face_approve_button">
+                        <a class="action action-approve" href="">
+                          <i class="icon-ok"></i> <span class="sr">${_("Looks good")}</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="wrapper-help">
+                  <div class="help help-task photo-tips facetips">
+                    <h4 class="title">${_("Tips on taking a successful photo")}</h4>
+
+                    <div class="copy">
+                      <ul class="list-help">
+                        <li class="help-item">${_("Make sure your face is well-lit")}</li>
+                        <li class="help-item">${_("Be sure your entire face is inside the frame")}</li>
+                        <li class="help-item">${_("Can we match the photo you took with the one on your ID?")}</li>
+                        <li class="help-item">${_("Once in position, use the camera button")} <span class="example">(<i class="icon-camera"></i>)</span> ${_("to capture your picture")}</li>
+                        <li class="help-item">${_("Use the checkmark button")} <span class="example">(<i class="icon-ok"></i>)</span> ${_("once you are happy with the photo")}</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <div class="help help-faq facefaq">
+                    <h4 class="sr title">${_("Common Questions")}</h4>
+
+                    <div class="copy">
+                      <dl class="list-faq">
+                        <dt class="faq-question">${_("Why do you need my photo?")}</dt>
+                        <dd class="faq-answer">${_("As part of the verification process, we need your photo to confirm that you are you.")}</dd>
+
+                        <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>
+                      </dl>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <nav class="nav-wizard" id="face_next_button_nav">
+                <span class="help help-inline">${_("Once you verify your photo looks good, you can move on to step 2.")}</span>
+
+                <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: Re-Take ID Photo")}</a>
+                  </li>
+                </ol>
+              </nav>
+
+            </div> <!-- /view -->
+          </div> <!-- /wrapper-view -->
+
+          <div id="wrapper-idphoto" class="wrapper-view block-photo">
+            <div class="idphoto view">
+              <h3 class="title">${_("Show Us Your ID")}</h3>
+              <div class="instruction">
+                <p>${_("Use your webcam to take a picture of your ID so we can match it with your photo and the name on your account.")}</p>
+              </div>
+
+              <div class="wrapper-task">
+                <div id="idcam" class="task cam">
+                  <div class="placeholder-cam" id="photo_id_capture_div">
+
+                    <div class="placeholder-art">
+                      <p class="copy">${_("Don't see your picture? Make sure to allow your browser to use your camera when it asks for permission.")}</p>
+                    </div>
+
+                    <video id="photo_id_video" autoplay></video><br/>
+                    <canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
+                  </div>
+
+                  <div class="controls photo-controls">
+                    <ul class="list-controls">
+                      <li class="control control-redo" id="photo_id_reset_button">
+                        <a class="action action-redo" href="">
+                          <i class="icon-undo"></i> <span class="sr">${_("Retake")}</span>
+                        </a>
+                      </li>
+
+                      <li class="control control-do" id="photo_id_capture_button">
+                        <a class="action action-do" href="">
+                          <i class="icon-camera"></i> <span class="sr">${_("Take photo")}</span>
+                        </a>
+                      </li>
+
+                      <li class="control control-approve" id="photo_id_approve_button">
+                        <a class="action action-approve" href="">
+                          <i class="icon-ok"></i> <span class="sr">${_("Looks good")}</span>
+                        </a>
+                      </li>
+                    </ul>
+                  </div>
+                </div>
+
+                <div class="wrapper-help">
+                  <div class="help help-task photo-tips idtips">
+                    <h4 class="title">${_("Tips on taking a successful photo")}</h4>
+
+                    <div class="copy">
+                      <ul class="list-help">
+                        <li class="help-item">${_("Make sure your ID is well-lit")}</li>
+                        <li class="help-item help-item-emphasis">${_("Acceptable IDs include drivers licenses, passports, or other goverment-issued IDs that include your name and photo")}</li>
+                        <li class="help-item">${_("Check that there isn't any glare")}</li>
+                        <li class="help-item">${_("Ensure that you can see your photo and read your name")}</li>
+                        <li class="help-item">${_("Try to keep your fingers at the edge to avoid covering important information")}</li>
+                        <li class="help-item">${_("Once in position, use the camera button")} <span class="example">(<i class="icon-camera"></i>)</span> ${_("to capture your ID")}</li>
+                        <li class="help-item">${_("Use the checkmark button")} <span class="example">(<i class="icon-ok"></i>)</span> ${_("once you are happy with the photo")}</li>
+                      </ul>
+                    </div>
+                  </div>
+
+                  <div class="help help-faq facefaq">
+                    <h4 class="sr title">${_("Common Questions")}</h4>
+
+                    <div class="copy">
+                      <dl class="list-faq">
+                        <dt class="faq-question">${_("Why do you need a photo of my ID?")}</dt>
+                        <dd class="faq-answer">${_("We need to match your ID with your photo and name to confirm that you are you.")}</dd>
+
+                        <dt class="faq-question">${_("What do you do with this picture?")}</dt>
+                        <dd class="faq-answer">${_("We encrypt it and send it to our secure authorization service for review. We use the highest levels of security and do not save the photo or information anywhere once the match has been completed.")}</dd>
+                      </dl>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <nav class="nav-wizard" id="photo_id_next_button_nav">
+                <span class="help help-inline">${_("Once you verify your ID photo looks good, you can move on to step 3.")}</span>
+
+                <ol class="wizard-steps">
+                  <li class="wizard-step">
+                    <a id="photo_id_next_link" class="next action-primary" href="#next" aria-hidden="true" title="Next">${_("Go to Step 3: Review Your Info")}</a>
+                  </li>
+                </ol>
+              </nav>
+            </div> <!-- /view -->
+          </div> <!-- /wrapper-view -->
+
+          <div id="wrapper-review" class="wrapper-view">
+            <div class="review view">
+              <h3 class="title">${_("Verify Your Submission")}</h3>
+              <div class="instruction">
+                <p>${_("Make sure we can verify your identity with the photos and information below.")}</p>
+              </div>
+
+              <div class="wrapper-task">
+                <ol class="review-tasks">
+
+                  <li class="review-task review-task-photos">
+                    <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>
+                    </div>
+
+                    <ol class="wrapper-photos">
+                      <li class="wrapper-photo">
+                        <div class="placeholder-photo">
+                          <img id="face_image" src=""/>
+                        </div>
+
+                        <div class="help-tips">
+                          <h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
+                          <ul class="list-help list-tips copy">
+                            <li class="tip">${_("Be well lit")}</li>
+                            <li class="tip">${_("Show your whole face")}</li>
+                            <li class="tip">${_("The photo on your ID must match the photo of your face")}</li>
+                          </ul>
+                        </div>
+                      </li>
+
+                      <li class="wrapper-photo">
+                       <div class="placeholder-photo">
+                         <img id="photo_id_image" src=""/>
+                       </div>
+
+                       <div class="help-tips">
+                         <h5 class="title">${_("The photo above needs to meet the following requirements:")}</h5>
+                         <ul class="list-help list-tips copy">
+                           <li class="tip">${_("Be readable (not too far away, no glare)")}</li>
+                           <li class="tip">${_("The photo on your ID must match the photo of your face")}</li>
+                           <li class="tip">${_("The name on your ID must match the name on your account below")}</li>
+                         </ul>
+                       </div>
+                      </li>
+                    </ol>
+
+                    <div class="msg msg-retake msg-followup">
+                      <div class="copy">
+                        <p>${_("Photos don't meet the requirements?")}</p>
+                      </div>
+
+                      <ul class="list-actions">
+                        <li class="action action-retakephotos">
+                        <a class="retake-photos" href="javascript:void(0);" onclick="document.location.reload(true);">${_("Retake Your Photos")}</a>
+                        </li>
+                      </ul>
+                    </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>
+                </ol>
+              </div>
+
+              <nav class="nav-wizard">
+                <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 onto to confirm your re-verification submisssion.")}</p>
+
+                  <ul class="list-actions">
+                    <li class="action action-verify">
+                      <input type="checkbox" name="match" id="confirm_pics_good" />
+                      <label for="confirm_pics_good">${_("Yes! My details all match.")}</label>
+                    </li>
+                  </ul>
+                </div>
+
+                <ol class="wizard-steps">
+                  <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 & re-verify" name="payment">
+                    </form>
+                  </li>
+                </ol>
+              </nav>
+            </div> <!-- /view -->
+          </div> <!-- /wrapper-view -->
+        </section>
+      </article>
+    </div> <!-- /wrapper-content-main -->
+
+    <%include file="_reverification_support.html" />
+  </section>
+</div>
+
+<%include file="_modal_editname.html" />
+</%block>

lms/templates/verify_student/photo_verification.html

@@ -67,7 +67,6 @@
       <section class="progress">
         <h3 class="sr title">${_("Your Progress")}</h3>
 
-        <!-- 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>

lms/templates/verify_student/reverification_confirmation.html

+
+<%! from django.utils.translation import ugettext as _ %>
+<%! from django.core.urlresolvers import reverse %>
+<%inherit file="../main.html" />
+<%namespace name='static' file='/static_content.html'/>
+
+<%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">
+
+<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>