Skip to content

E
edx-platform
Commit 0387d766 by David Ormsbee
Options

Fix disable/enable buttons in verification workflow.

parent dd50ec4e
Showing with 58 additions and 31 deletions
lms/templates/verify_student/face_upload.html
......@@ -123,7 +123,7 @@ $(document).ready(function() {
</div>
<div class="next-step">
<p class="m-btn-primary">
<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>
......
lms/templates/verify_student/photo_verification.html
......@@ -16,21 +16,9 @@
window.URL = window.URL || window.webkitURL;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia ||
navigator.mozGetUserMedia || navigator.msGetUserMedia;
// // Make all the video pieces active
// $('video').each(function(i, video) {
// if (navigator.getUserMedia) {
// navigator.getUserMedia({video: true}, function(stream) {
// video.src = window.URL.createObjectURL(stream);
// }, onVideoFail);
// } else {
// video.src = 'somevideo.webm'; // fallback.
// }
// });
}
var submitToPaymentProcessing = function() {
// $("#pay_form")
var xhr = $.post(
"create_order",
{
......@@ -59,6 +47,7 @@
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;
......@@ -69,19 +58,50 @@
image[0].src = canvas[0].toDataURL('image/png');
}
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();
// captureButton.removeClass('is-hidden');
resetButton.hide();
// resetButton.addClass('is-hidden');
approveButton.hide();
// approveButton.addClass('is-hidden');
return false;
}
function approve() {
approveButton.addClass('approved');
nextButton.removeClass('disabled');
return false;
}
// Initialize state for this picture taker
captureButton.show();
//captureButton.removeClass('is-hidden');
resetButton.hide();
//resetButton.addClass('is-hidden');
approveButton.hide();
//approveButton.addClass('is-hidden');
nextButton.addClass('disabled');
// Connect event handlers...
video.click(snapshot);
captureButton.click(snapshot);
resetButton.click(reset);
......@@ -95,7 +115,7 @@
function initPhotoBlocks() {
// Photo wrapping
$('.block-photo .control-redo').addClass('is-hidden');
/* $('.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) {
......@@ -119,12 +139,19 @@
e.preventDefault();
$(this).addClass('approved');
$('#wrapper-idphoto .m-btn-primary').removeClass('disabled');
});
}); */
}
$(document).ready(function() {
$(".carousel-nav").addClass('sr');
$("#pay_button").click(submitToPaymentProcessing);
$("#confirm_pics_good").click(function() {
if (this.checked) {
$("#pay_button").removeClass('disabled');
}
});
$("#pay_button").addClass('disabled');
initPhotoBlocks();
initVideoCapture();
......@@ -172,14 +199,14 @@
<div class="controls photo-controls">
<ul class="controls-list">
<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>
<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">
<a class="action action-do" id="face_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
<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">
<a class="action action-approve" id="face_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
<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>
......@@ -210,7 +237,7 @@
</div>
<div class="next-step">
<p class="m-btn-primary">
<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>
......@@ -233,14 +260,14 @@
<div class="controls photo-controls">
<ul class="controls-list">
<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>
<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">
<a class="action action-do" id="photo_id_capture_button" href=""><i class="icon-camera"></i> <span class="sr">Take photo</span></a>
<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">
<a class="action action-approve" id="photo_id_approve_button" href=""><i class="icon-ok"></i> <span class="sr">Looks good</span></a>
<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>
......@@ -274,7 +301,7 @@
</div>
<div class="next-step">
<p class="m-btn-primary">
<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>
......@@ -357,9 +384,9 @@
<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" id="confirm_pics_good" /> <label for="match">Yes! My details all match.</label>
<p class="m-btn-primary"><a href="#">Go to Step 4: Secure Payment</a></p>
<p class="m-btn-primary" id="pay_button"><a href="#">Go to Step 4: Secure Payment</a></p>
<p class="tip">Once you verify your details match the requirements, you can move on to step 4, payment on our secure server.</p>
</div>
......
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