-
David Ormsbee authored48484ef9
photo_verification.html 13.64 KiB
<%! from django.utils.translation import ugettext as _ %>
<%! from django.core.urlresolvers import reverse %>
<%inherit file="../main.html" />
<%block name="bodyclass">register verification-process step-photos</%block>
<%block name="js_extra">
<!-- please move link to js/vendor/responsive-carousel/responsive-carousel.js from main.html to here -->
<script type="text/javascript">
var onVideoFail = function(e) {
console.log('Failed to get camera access!', e);
};
function initVideoCapture() {
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
}
var submitToPaymentProcessing = function() {
var xhr = $.post(
"create_order",
{
"course_id" : "${course_id}"
},
function(data) {
for (prop in data) {
$('<input>').attr({
type: 'hidden',
name: prop,
value: data[prop]
}).appendTo('#pay_form');
}
}
)
.done(function(data) {
$("#pay_form").submit();
})
.fail(function() { alert("error"); });
}
function initSnapshotHandler(names) {
var name = names.pop();
if (name == undefined) {
return;
}
var video = $('#' + name + '_video');
var canvas = $('#' + name + '_canvas');
var image = $('#' + name + "_image");
var captureButton = $("#" + name + "_capture_button");
var resetButton = $("#" + name + "_reset_button");
var approveButton = $("#" + name + "_approve_button");
var nextButton = $("#" + name + "_next_button");
var ctx = canvas[0].getContext('2d');
var localMediaStream = null;
function snapshot(event) {
if (localMediaStream) {
ctx.drawImage(video[0], 0, 0);
image[0].src = canvas[0].toDataURL('image/png');
}
else {
return false;
}
video[0].pause();
captureButton.hide(); resetButton.show();
approveButton.show();
return false;
}
function reset() {
$('#face_image')[0].src = "";
video[0].play();
approveButton.removeClass('approved');
nextButton.addClass('disabled');
captureButton.show();
resetButton.hide();
approveButton.hide();
return false;
}
function approve() {
approveButton.addClass('approved');
nextButton.removeClass('disabled');
return false;
}
// Initialize state for this picture taker
captureButton.show();
resetButton.hide();
approveButton.hide();
nextButton.addClass('disabled');
// Connect event handlers...
video.click(snapshot);
captureButton.click(snapshot);
resetButton.click(reset);
approveButton.click(approve);
navigator.getUserMedia({video: true}, function(stream) {
video[0].src = window.URL.createObjectURL(stream);
localMediaStream = stream;
// We do this in a recursive call on success because Firefox seems to
// simply eat the request if you stack up two on top of each other before
// the user has a chance to approve the first one.
initSnapshotHandler(names);
}, onVideoFail);
}
$(document).ready(function() {
$(".carousel-nav").addClass('sr');
$("#pay_button").click(submitToPaymentProcessing);
$("#confirm_pics_good").click(function() {
if (this.checked) {
$("#pay_button_frame").removeClass('disabled');
}
});
$("#pay_button_frame").addClass('disabled');
initVideoCapture();
initSnapshotHandler(["photo_id", "face"]);
});
</script>
</%block>
<%block name="content"><div class="container">
<header class="page-header">
<h2 class="title">You are registering for ${course_name} (ID Verified)</h2>
</header>
<section class="progress">
<header class="section-head">
<h3 class="sr title">Your Progress</h3>
</header>
<!--<span class="progress-status"></span><span class="progress-status-value"></span>-->
<ol class="progress-steps">
<li class="progress-step done" id="progress-step0"><span class="mini number"></span> Intro</li>
<li class="progress-step current" id="progress-step1"><span class="sr">Current Step: </span> <span class="number">1</span> Take Photo</li>
<li class="progress-step" id="progress-step2"> <span class="number">2</span> Take ID Photo</li>
<li class="progress-step" id="progress-step3"> <span class="number">3</span> Confirm Submission</li>
<li class="progress-step" id="progress-step4"> <span class="number">4</span> Make Payment</li>
<li class="progress-step" id="progress-step5"><span class="number"><i class="icon-ok"></i></span> Confirmation</li>
</ol>
</section>
<section class="wrapper carousel" data-transition="slide">
<div id="wrapper-facephoto" class="block-photo">
<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>
<div class="wrapper-up">
<div id="facecam" class="cam">
<div class="wrapper-cam">
<video id="face_video" width="500" height="375" autoplay></video><br/>
<canvas id="face_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
<div class="controls photo-controls">
<ul class="controls-list">
<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="help photo-tips facetips">
<h4 class="title">Tips on taking a successful photo</h4>
<ul>
<li>Make sure your face is well-lit</li>
<li>Be sure your entire face is inside the frame</li>
<li>Can we match the photo you took with the one on your ID?</li>
<li>Click the checkmark once you are happy with the photo</li>
</ul>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need my photo?</dt>
<dd>We need your photo to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>We only use it to verify your identity. It is not displayed anywhere.</dd>
</dl>
</div>
</div>
<div class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="face_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 2: Take ID Photo</a>
</p>
<p class="tip">Once you verify your photo looks good, you can move on to step 2.</p>
</div>
</div>
</div>
<div id="wrapper-idphoto" class="block block-photo">
<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>
<div class="wrapper-up">
<div id="idcam" class="cam">
<div class="wrapper-cam">
<video id="photo_id_video" width="500" height="375" autoplay></video><br/>
<canvas id="photo_id_canvas" style="display:none;" width="640" height="480"></canvas>
</div>
<div class="controls photo-controls">
<ul class="controls-list">
<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="photo-tips idtips">
<h4 class="title">Tips on taking a successful photo</h4>
<ul>
<li>Make sure your ID is well-lit</li>
<li>Check that there isn't any glare</li>
<li>Ensure that you can see your photo and read your name</li>
<li>Try to keep your fingers at the edge to avoid covering important information</li>
</ul>
<h4 class="title">Common Questions</h4>
<dl>
<dt>Why do you need a photo of my ID?</dt>
<dd>We need to match your ID with your photo and name to confirm that you are you.</dd>
<dt>What do you do with this picture?</dt>
<dd>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 class="wrapper-down">
<div class="next-step">
<p class="m-btn-primary" id="photo_id_next_button">
<a class="next" href="#next" aria-hidden="true" title="Next">Go to Step 3: Review Your Info</a>
</p> <p class="tip">Once you verify your ID photo looks good, you can move on to step 3.</p>
</div>
</div>
</div>
<div id="wrapper-review" class="block block-photo">
<h3 class="title">Verify Your Submission</h3>
<p>Make sure we can verify your identity with the photos and information below.</p>
<div class="review-name">
<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><a href="#">Edit my name</a></p>
</div>
<div class="wrapper-up">
<div id="review-facephoto" class="review-photo">
<div class="wrapper-photo">
<img id="face_image" width="500" height="375" src=""/>
</div>
<h4 class="title">The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be well lit</li>
<li>Show your whole face</li>
<li>Match your ID</li>
</ul>
</div>
<div id="review-idphoto" class="review-photo">
<div class="wrapper-photo">
<img id="photo_id_image" width="500" height="375" src=""/>
</div>
<h4 class="title">The photo above needs to meet the following requirements:</h4>
<ul>
<li>Be readable (not too far away, no glare)</li>
<li>Show your name</li>
<li>Match the photo of your face and your name above</li>
</ul>
</div>
</div>
<p>Photos don't meet the requirements? <a href="">Retake the photos</a>.</p>
<hr />
<div class="wrapper-down">
<h3>Check Your Contribution</h3>
<%include file="/course_modes/_contribution.html" args="suggested_prices=suggested_prices, currency=currency, chosen_price=chosen_price"/>
</div>
<hr />
<div class="next-step">
<form id="pay_form" method="post" action="${purchase_endpoint}">
<!-- <input type="hidden" name="csrfmiddlewaretoken" value="${ csrf_token }"> -->
<input type="checkbox" name="match" id="confirm_pics_good" /> <label for="match">Yes! My details all match.</label>
<input type="hidden" name="course_id" value="${course_id | h}" />
<p class="m-btn-primary" id="pay_button_frame">
<input type="button" id="pay_button" value="Go to Step 4: Secure Payment" name="payment">
</p>
</form>
<p class="tip">Once you verify your details match the requirements, <br />you can move on to step 4, payment on our secure server.</p> </div>
</div>
</section>
<section class="support">
<p class="tip">More questions? <a rel="external" href="#">Check out our FAQs. (not active yet)</a></p>
<p class="tip">Change your mind? <a href="${reverse('course_modes_choose') + '?course_id=' + course_id }">You can always Audit the course for free without verifying.</a></p>
</section>
</div>
<section id="edit-name" class="modal">
<header>
<h4>${_("Edit Your Full Name")}</h4>
</header>
<form id="course-checklists" class="course-checklists" method="post" action="">
<div role="alert" class="status message submission-error" tabindex="-1">
<p class="message-title">${_("The following error occured while editing your name:")}
<span class="message-copy"> </span>
</p>
</div>
<p>
<label for="name">${_('Full Name')}</label>
<input id="name" type="text" name="name" value="" placeholder="${_('example: Jane Doe')}" required aria-required="true" />
</p>
<div class="actions">
<button class="action action-primary" type="submit">${_("Save")}</button>
<button class="action action-secondary action-cancel">${_("Cancel")}</button>
</div>
</form>
<a href="#" data-dismiss="modal" rel="view" class="action action-close action-editname-close">
<i class="icon-remove-sign"></i>
<span class="label">close</span>
</a>
</section>
</%block>