Skip to content

E
edx-platform
Commit dd50ec4e by David Ormsbee
Options

Merge design and dev JS/UI for verify student

parent 874c6314
Showing with 108 additions and 69 deletions
common/djangoapps/course_modes/views.py
...@@ -58,9 +58,11 @@ class ChooseModeView(View): ...@@ -58,9 +58,11 @@ class ChooseModeView(View):
donation_for_course[course_id] = float(amount) donation_for_course[course_id] = float(amount)
request.session["donation_for_course"] = donation_for_course request.session["donation_for_course"] = donation_for_course
# TODO: Check here for minimum pricing
return redirect( return redirect(
"{}?{}".format( "{}?{}".format(
reverse('verify_student_verify'), reverse('verify_student_show_requirements'),
urlencode(dict(course_id=course_id)) urlencode(dict(course_id=course_id))
) )
) )
......
lms/djangoapps/verify_student/urls.py
...@@ -6,11 +6,6 @@ from verify_student import views ...@@ -6,11 +6,6 @@ from verify_student import views
urlpatterns = patterns( urlpatterns = patterns(
'', '',
url( url(
r'^show_requirements',
views.show_requirements,
name="verify_student/show_requirements"
),
url(
r'^face_upload', r'^face_upload',
views.face_upload, views.face_upload,
name="verify_student/face_upload" name="verify_student/face_upload"
...@@ -29,9 +24,9 @@ urlpatterns = patterns( ...@@ -29,9 +24,9 @@ urlpatterns = patterns(
# The above are what we did for the design mockups, but what we're really # The above are what we did for the design mockups, but what we're really
# looking at now is: # looking at now is:
url( url(
r'^show_verification_page', r'^show_requirements',
views.show_verification_page, views.show_requirements,
name="verify_student/show_verification_page" name="verify_student_show_requirements"
), ),
url( url(
...@@ -44,6 +39,12 @@ urlpatterns = patterns( ...@@ -44,6 +39,12 @@ urlpatterns = patterns(
r'^create_order', r'^create_order',
views.create_order, views.create_order,
name="verify_student_create_order" name="verify_student_create_order"
) ),
url(
r'^show_verification_page',
views.show_verification_page,
name="verify_student/show_verification_page"
),
) )
lms/djangoapps/verify_student/views.py
...@@ -77,7 +77,7 @@ def create_order(request): ...@@ -77,7 +77,7 @@ def create_order(request):
def show_requirements(request): def show_requirements(request):
"""This might just be a plain template without a view.""" """This might just be a plain template without a view."""
context = { "course_id" : "edX/Certs101/2013_Test" } context = { "course_id" : request.GET.get("course_id") }
return render_to_response("verify_student/show_requirements.html", context) return render_to_response("verify_student/show_requirements.html", context)
def face_upload(request): def face_upload(request):
......
lms/templates/courseware/course_about.html
...@@ -101,7 +101,7 @@ ...@@ -101,7 +101,7 @@
%else: %else:
<a href="#" class="register">${_("Register for {course.display_number_with_default}").format(course=course) | h}</a> <a href="#" class="register">${_("Register for {course.display_number_with_default}").format(course=course) | h}</a>
<a href="${reverse('verify_student/show_requirements')}">Mock Verify Enrollment</a> <a href="${reverse('verify_student_show_requirements')}">Mock Verify Enrollment</a>
<div id="register_error"></div> <div id="register_error"></div>
%endif %endif
......
lms/templates/verify_student/photo_id_upload.html
...@@ -122,7 +122,7 @@ $(document).ready(function() { ...@@ -122,7 +122,7 @@ $(document).ready(function() {
</p> </p>
<p class="m-btn-primary green"> <p class="m-btn-primary green">
<a href="${reverse('verify_student/show_requirements')}">Select Certificate</a> <a href="${reverse('verify_student_show_requirements')}">Select Certificate</a>
</p> </p>
</div> </div>
......
lms/templates/verify_student/photo_verification.html
...@@ -93,13 +93,44 @@ ...@@ -93,13 +93,44 @@
}, onVideoFail); }, onVideoFail);
} }
function initPhotoBlocks() {
// Photo wrapping
$('.block-photo .control-redo').addClass('is-hidden');
$('.block-photo .control-approve').addClass('is-hidden');
$('.block-photo .m-btn-primary').addClass('disabled');
$( "#wrapper-facephoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-facephoto .control-redo').toggleClass('is-shown');
$('#wrapper-facephoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-facephoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-facephoto .m-btn-primary').removeClass('disabled');
});
$( "#wrapper-idphoto .control-do" ).click(function(e) {
e.preventDefault();
$(this).toggleClass('is-hidden');
$('#wrapper-idphoto .control-redo').toggleClass('is-shown');
$('#wrapper-idphoto .control-approve').toggleClass('is-shown');
});
$( "#wrapper-idphoto .control-approve" ).click(function(e) {
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
});
}
$(document).ready(function() { $(document).ready(function() {
$(".carousel-nav").addClass('sr'); $(".carousel-nav").addClass('sr');
$("#pay_button").click(submitToPaymentProcessing); $("#pay_button").click(submitToPaymentProcessing);
initPhotoBlocks();
initVideoCapture(); initVideoCapture();
initSnapshotHandler("face"); initSnapshotHandler("face");
initSnapshotHandler("photo_id"); initSnapshotHandler("photo_id");
}); });
</script> </script>
...@@ -141,12 +172,12 @@ ...@@ -141,12 +172,12 @@
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="controls-list">
<li class="control control-do">
<a class="action action-do" id="face_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo"> <li class="control control-redo">
<a class="action action-redo" id="face_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" id="face_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li> </li>
<li class="control control-do">
<a class="action action-do" id="face_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve"> <li class="control control-approve">
<a class="action action-approve" id="face_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" id="face_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li> </li>
...@@ -170,31 +201,24 @@ ...@@ -170,31 +201,24 @@
<div class="faq facefaq"> <div class="faq facefaq">
<h4 class="sr">Common Questions</h4> <h4 class="sr">Common Questions</h4>
<dl> <dl>
<dt>Cras justo odio, dapibus ac facilisis in, egestas eget quam.</dt> <dt>Why do you need my photo?</dt>
<dd>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dd> <dd>We need your photo to confirm that you are you.</dd>
<dt>Vestibulum id ligula porta felis euismod semper.</dt>
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt> <dt>What do you do with this picture?</dt>
<dd>Aenean eu leo quam.</dd> <dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
<dd>Maecenas faucibus mollis interdum.</dd>
</dl> </dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul> <p class="m-btn-primary">
<li class="action action-next">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
<p class="tips">Once you verify your photo looks good, you can move on to step 2.</p> </p>
</li> <p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div id="wrapper-idphoto" class="block block-photo">
<div id="wrapper-idphoto" class="block-photo">
<h3 class="title">Take Your Photo</h3> <h3 class="title">Take Your Photo</h3>
<p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p> <p>Use your webcam to take a picture of your face so we can match it with the picture on your ID.</p>
...@@ -209,18 +233,17 @@ ...@@ -209,18 +233,17 @@
<div class="controls photo-controls"> <div class="controls photo-controls">
<ul class="controls-list"> <ul class="controls-list">
<li class="control control-do">
<a class="action action-do" id="photo_id_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-redo"> <li class="control control-redo">
<a class="action action-redo" id="photo_id_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a> <a class="action action-redo" id="photo_id_reset_button" href=""><i class="icon-undo"></i> <span class="sr">Retake</span></a>
</li> </li>
<li class="control control-do">
<a class="action action-do" id="photo_id_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
</li>
<li class="control control-approve"> <li class="control control-approve">
<a class="action action-approve" id="photo_id_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a> <a class="action action-approve" id="photo_id_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
<div class="photo-tips idtips"> <div class="photo-tips idtips">
...@@ -239,7 +262,7 @@ ...@@ -239,7 +262,7 @@
<div class="faq idfaq"> <div class="faq idfaq">
<h4 class="sr">Common Questions</h4> <h4 class="sr">Common Questions</h4>
<dl> <dl class="faq">
<dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt> <dt>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</dt>
<dd>Aenean eu leo quam.</dd> <dd>Aenean eu leo quam.</dd>
<dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt> <dt>Pellentesque ornare sem lacinia quam venenatis vestibulum.</dt>
...@@ -250,27 +273,24 @@ ...@@ -250,27 +273,24 @@
</dl> </dl>
</div> </div>
<div class="actions"> <div class="next-step">
<ul> <p class="m-btn-primary">
<li class="action action-next">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a> <a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
<p class="tips">Once you verify your ID photo looks good, you can move on to step 3.</p> </p>
</li> <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</ul>
</div> </div>
</div> </div>
</div> </div>
<div id="wrapper-review" class="block block-photo">
<div id="wrapper-review" class="block-photo">
<h3 class="title">Verify Your Submission</h3> <h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p> <p>Make sure we can verify your identity with the photos and information below.</p>
<div class="review-name"> <div class="review-name">
<h3>Check Your Name</h3> <h3>Check Your Name</h3>
<p>Make sure your full name on your edX account, <b>${user_full_name}</b>, matches your ID. We will also use this as the name on your certificate.</p> <p>Make sure your full name on your edX account, [User Name], matches your ID. We will also use this as the name on your certificate.</p>
<p><a href="#">Edit my name</a></p> <p><a href="#">Edit my name</a></p>
</div> </div>
...@@ -302,37 +322,54 @@ ...@@ -302,37 +322,54 @@
</div> </div>
</div> </div>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<dl>
<dt>
Select your contribution for this course:
</dt>
<dd>
<ul class="pay-options">
<li>
<input type="radio" id="contribution-25" name="contribution"> <label for="contribution-25">$25 USD</label>
</li>
<li>
<input type="radio" id="contribution-50" name="contribution"> <label for="contribution-50">$50 USD</label>
</li>
<li>
<input type="radio" id="contribution-100" name="contribution"> <label for="contribution-100">$100 USD</label>
</li>
<li class="other1">
<input type="radio" id="contribution-other" name="contribution"> <label for="contribution-other"><span class="sr">Other</span></label>
</li>
<li class="other2">
<label for="contribution-other-amt"><span class="sr">Other Amount</span> $</label> <input type="text" size="5" name="contribution-other-amt" id="contribution-other-amt">
</li>
</ul>
</dd>
</dl>
</div>
<div class="next">
<p>Photos don't meet the requirements? <a href="#start">Retake the photos</a>.</p>
<div class="next-step">
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label> <input type="checkbox" name="match" /> <label for="match">Yes! My details all match.</label>
<div class="actions"> <p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<ul> <p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
<li class="action action-next">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <a href="#">Go to Step 4: Secure Payment</a> -->
<!-- <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> -->
<input type="hidden" name="course_id" value="${course_id | h}" />
<input type="button" id="pay_button" value="Go to Step 4" name="payment">
</form>
<p class="tips">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</li>
</ul>
</div>
</div> </div>
</section> </section>
<section class="support"> <section class="support">
<p>More questions? <a rel="external" href="">Check out our FAQs.</a></p> <p class="tip">More questions? <a rel="external" href="">Check out our FAQs.</a></p>
<p>Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p> <p class="tip">Change your mind? <a href="">You can always Audit the course for free without verifying.</a></p>
</section> </section>
......
lms/templates/verify_student/show_requirements.html
...@@ -8,7 +8,7 @@ ...@@ -8,7 +8,7 @@
<section class="wrapper"> <section class="wrapper">
<header class="page-header header-white"> <header class="page-header header-white">
<h2 class="title header-white-title">You are registering for [coursename] (ID Verified)</h2> <h2 class="title header-white-title">You are registering for ${course_id} (ID Verified)</h2>
</header> </header>
<section class="progress"> <section class="progress">
...@@ -52,7 +52,7 @@ ...@@ -52,7 +52,7 @@
<h3 class="title">Steps to get Verified</h3> <h3 class="title">Steps to get Verified</h3>
<div class="next-step"> <div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p> <p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
</div> </div>
<h4 class="step"><span class="number">1</span> Take Your Photo</h4> <h4 class="step"><span class="number">1</span> Take Your Photo</h4>
...@@ -82,9 +82,8 @@ ...@@ -82,9 +82,8 @@
<p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p> <p>You are now verified. You can sign up for more courses, or get started on your course once it starts. While you will need to re-verify in the course prior to exams or expercises, you may also have to re-verify if we feel your photo we have on file may be out of date.</p>
<div class="next-step"> <div class="next-step">
<p class="m-btn-primary"><a href="${reverse('verify_student/face_upload')}">Go to Step 1: Take my Photo</a></p> <p class="m-btn-primary"><a href="${reverse('verify_student_verify') + '?course_id=' + course_id}">Go to Step 1: Take my Photo</a></p>
</div> </div>
</section> </section>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment