Skip to content

Commit 261eb61

Browse files
JackywathyJackywathy
committed
Timer before prompting user on the username field in signup
1 parent 57f1009 commit 261eb61

File tree

3 files changed

+76
-55
lines changed

3 files changed

+76
-55
lines changed

‎back_end/ajax.py

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@ def username_handler(request):
99
valid = db_api.User.find(username=user.lower())
1010
# checks if the user already signed up
1111
# if there is no user, it is valid
12-
print(user, valid)
1312
valid = True if valid is None else False
13+
print(user, valid)
1414
request.write({"user_valid" : valid})
1515
else:
1616
reply_malformed(request)

‎static/js/validate.js

+42-18
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
ERROR_TIME = 600;
12
function writeError($input, text){
23
$input.parent().find(".error").text(text)
34
}
@@ -66,6 +67,10 @@ function validateSignupForm() {
6667
var validPassword = validatePassword($password) && validatePasswordRepeat($password, $password_again);
6768
var validEmail = checkIfPresent($email) && validateEmail($email);
6869

70+
71+
$("#webcam-input").value = document.querySelector("#webcam-canvas").toDataURL("image/png");
72+
alert(document.querySelector("#webcam-canvas").toDataURL("image/png"));
73+
6974
return Boolean(validUsername && validNickname && validPassword && validEmail);
7075
}
7176

@@ -101,26 +106,45 @@ function validatePost(){
101106

102107

103108
$(document).ready(function(){
104-
// The blur event is for when a selector has lost focus
105-
$("#username").on("change keyup", function(){
106-
var $form = $('form.sign-in');
107109

110+
var username_timer;
111+
$("#username").on("input propertychange", function(){
112+
// check if the username is correct
113+
var $form = $('form.sign-in');
108114
var $username = $form.find('#username');
109-
var isValidUsername = checkIfPresent($username) && validateName($username);
110-
111-
$.ajax("/ajax/user_validate", {datatype: "json", type: "post", data: {username: $username.val()},
112-
success: function(data){
113-
if(!data.user_valid){
114-
writeError($username, "This username is already taken! Click here to <a href=\"/signin\">login</a> or <a>here</a> to reset password (WIP)");
115-
isValidUsername = false;
116-
}
117-
},
118-
failure: function(){
119-
alert("failed to ajax");
120-
}
121-
});
122-
return Boolean(isValidUsername);
123-
// Boolean converts a value into true or false.
115+
clearError($username);
116+
117+
// check if the username is correct
118+
function checkUser(do_write){
119+
do_write = isUndefined(do_write) ? true : do_write;
120+
var isValidUsername = checkIfPresent($username, do_write) && validateName($username, do_write);
121+
if (isValidUsername){ //only ajax if needed
122+
$.when($.ajax("/ajax/user_validate", {datatype: "json", type: "post", data: {username: $username.val()},
123+
success: function(data){
124+
if(!data.user_valid){
125+
if (do_write){
126+
$username.parent().find(".error").html("This username is already taken! Click here to <a href=\"/signin\">login</a> or <a>here</a> to reset password (WIP)");
127+
}
128+
isValidUsername = false;
129+
}
130+
},
131+
failure: function(){
132+
alert("failed to ajax! Check your internet connection");
133+
}
134+
})).done(function(){return isValidUsername}); // only return after the ajax request is finished
135+
}
136+
else{
137+
return isValidUsername;
138+
}
139+
}
140+
141+
if (!isUndefined(username_timer)){
142+
clearTimeout(username_timer);
143+
}
144+
if (!checkUser(false) && $username.val() !== ''){
145+
setTimeout(function(){checkUser(true);}, ERROR_TIME);
146+
}
147+
124148
});
125149

126150

‎templates/signup.html

+33-36
Original file line numberDiff line numberDiff line change
@@ -48,53 +48,50 @@ <h2>Sign Up</h2>
4848
</div>
4949

5050
<!-- Experimental live profile pic + Matilda, Tracey, Steph and Sam -->
51-
<div class='photobox'>
52-
<video autoplay></video>
53-
<img src="" hidden class='profile_image'>
54-
<canvas hidden width='200' height='150'> </canvas>
55-
<label>Click on preview to take snapshot</label>
51+
<div class="signup_div photobox">
52+
<video autoplay id="webcam-vid"></video>
53+
<canvas width='200' height='150' id='webcam-canvas'> </canvas>
54+
<input id="webcam-input" type="text" name="webcam-input" value="" hidden>
5655
</div>
5756

5857
<script>
59-
var canvas = document.querySelector('canvas');
60-
var profile_image = document.querySelector('.profile_image');
61-
var profile_label = document.querySelector('.photobox label');
58+
var canvas = $('#webcam-canvas').first()[0];
59+
var profile_image = $('#webcam-photo').first()[0];
6260
var ctx = canvas.getContext('2d');
6361
var video = document.querySelector('video');
64-
var localMediaStream = null;
65-
navigator.getUserMedia = navigator.getUserMedia ||
66-
navigator.webkitGetUserMedia ||
67-
navigator.mozGetUserMedia ||
68-
navigator.msGetUserMedia;
69-
var errorCallback = function(e) {
70-
console.log('Reeeejected!', e);
71-
};
7262

73-
function snapshot() {
74-
if (localMediaStream) {
75-
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
76-
// "image/webp" works in Chrome.
77-
// Other browsers will fall back to image/png.
78-
profile_image.src = canvas.toDataURL('image/webp');
79-
profile_image.hidden = false;
80-
profile_label.hidden = true;
63+
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
64+
65+
66+
if (navigator.getUserMedia){
67+
// set up the video -> canvas
68+
navigator.getUserMedia({video: true, audio: false},
69+
// success
70+
function(stream) {
71+
video.srcObject = stream;
72+
},
73+
// failure
74+
function(){
75+
console.log("Media failed. Probably denied webcam")
8176
}
82-
}
77+
);
78+
// set up canvas by drawing font on it
79+
ctx.font = "15px Calibri"
80+
ctx.fillText("Click on preview ", canvas.width/2, canvas.height/2 - 8)
81+
ctx.fillText("to take snapshot", canvas.width/2, canvas.height/2 + 8)
82+
// listener on the video element
83+
video.addEventListener("click", function(){
84+
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
85+
});
86+
}
87+
else{
88+
alert("Your brower does not support webcam :(")
89+
}
90+
8391

84-
video.addEventListener('click', snapshot, false);
8592

86-
// Not showing vendor prefixes.
87-
navigator.getUserMedia({video: true, audio: false}, function(stream) {
88-
video.src = window.URL.createObjectURL(stream);
8993

90-
localMediaStream = stream;
9194

92-
// Note: onloadedmetadata doesn't fire in Chrome when using it with getUserMedia.
93-
// See crbug.com/110938.
94-
video.onloadedmetadata = function(e) {
95-
// Ready to go. Do some stuff.
96-
};
97-
}, errorCallback);
9895
</script>
9996
</p>
10097
<p>

0 commit comments

Comments
 (0)