Support for positional captchas

3 files changed, 113 insertions, 75 deletions

diff --git a/module/web/json_app.py b/module/web/json_app.py
index 39cd81f5f..4b9c91634 100644
--- a/module/web/json_app.py
+++ b/module/web/json_app.py
@@ -317,17 +317,17 @@ def edit_package():
 def set_captcha():
     if request.environ.get('REQUEST_METHOD', "GET") == "POST":
         try:
-            PYLOAD.set_captcha_result(request.forms["cap_id"], request.forms["cap_text"])
+            PYLOAD.set_captcha_result(request.forms["cap_id"], request.forms["cap_result"])
         except:
             pass
 
-    id, binary, typ = PYLOAD.get_captcha_task()
+    id, binary, format, result_type = PYLOAD.get_captcha_task()
 
     if id:
         binary = base64.standard_b64encode(str(binary))
-        src = "data:image/%s;base64,%s" % (typ, binary)
+        src = "data:image/%s;base64,%s" % (format, binary)
 
-        return {'captcha': True, 'src': src, 'id': id}
+        return {'captcha': True, 'id': id, 'src': src, 'result_type' : result_type}
     else:
         return {'captcha': False}
 
diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index fd22abbd4..40f002a14 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -79,15 +79,6 @@ document.addEvent("domready", function(){
         show_cap();

     });

 

-    $('cap_reset').addEvent('click', function(){

-        hide_cap()

-    });

-

-    $('cap_form').addEvent('submit', function(e){

-        submit_cap();

-        e.stop()

-    });

-

     jsonStatus.startTimer();

 

 });

@@ -127,6 +118,7 @@ function LoadJsonToContent(data)
         $("reconnect").setStyle('background-color', "#fc6e26");

     }

 }

+

 function bg_show(){

     $("add_bg").setStyle('display', 'block');

     add_bg.start('opacity',0.8);

@@ -151,6 +143,7 @@ function out(){
         $('add_box').setStyle('display', 'none');

     });

 }

+

 function show_cap(){

     bg_show();

     $("cap_box").setStyle('display', 'block');

@@ -164,44 +157,11 @@ function hide_cap(){
     });

 }

 

-function load_cap(method, post){

-    new Request.JSON({

-        url: "/json/set_captcha",

-        onSuccess: function(data){

-            if (data.captcha){

-                $('cap_img').set('src', data.src);

-                $('cap_span').setStyle('display', 'block');

-                $$('#cap_form p')[0].set('text', '{{_("Please read the text on the captcha.")}}');

-                $('cap_id').set('value', data.id);

-            } else{

-                $('cap_img').set('src', '');

-                $('cap_span').setStyle('display', 'none');

-                $$('#cap_form p')[0].set('text', '{{_("No Captchas to read.")}}');

-            }

-        },

-        secure: false,

-        async: true,

-        method: method

-    }).send(post);

-}

-

-function submit_cap(){

-    load_cap("post", "cap_id="+ $('cap_id').get('value') +"&cap_text=" + $('cap_text').get('value') );

-    $('cap_text').set('value', '');

-    return false;

-}

-

-

-function AddBox()

-{

+function AddBox(){

     if ($("add_box").getStyle("display") == "hidden" || $("add_box").getStyle("display") == "none" || $("add_box").getStyle("opacity" == 0))

-    {

         show();

-    }

     else

-    {

         out();

-    }

 }

 

 </script>

diff --git a/module/web/templates/default/captcha.html b/module/web/templates/default/captcha.html
index b3be3deca..0165fed10 100644
--- a/module/web/templates/default/captcha.html
+++ b/module/web/templates/default/captcha.html
@@ -1,35 +1,113 @@
 <iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>

-<!--<div id="add_box" style="left:50%; top:200px; margin-left: -450px; width: 900px; position: absolute; background: #FFF; padding: 10px 10px 10px 10px; display:none;">-->

-  

-  <!--<div style="width: 900px; text-align: right;"><b onclick="AddBox();">[Close]</b></div>-->

-<div id="cap_box" class="myform">

-    <form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">

-<h1>{{_("Captcha reading")}}</h1>

-<p>{{_("Please read the text on the captcha.")}}</p>

-

-<span id="cap_span">

-

-<label>{{_("Captcha")}}

-<span class="small">{{_("The captcha.")}}</span>

-</label>

-<span class="cont">

-    <img id="cap_img" style="padding: 2px;" src="">

-</span>

 

-<label>{{_("Text")}}

-<span class="small">{{_("Input the text on the captcha.")}}</span>

-</label>

-<input id="cap_text" name="cap_text" type="text" size="20" />

-<input type="hidden" value="" name="cap_id" id="cap_id"/>

+<!-- Captcha form related functions -->

+<script type="text/javascript">

+	document.addEvent("domready", function() {

+	    $('cap_reset').addEvent('click', function(){

+	        hide_cap()

+	    });

+	    $('cap_form').addEvent('submit', function(e){

+	        submit_cap();

+	        e.stop()

+	    });

+	    $('cap_positional').addEvent('click', on_cap_click);

+	});

+	

+	function load_cap(method, post) {

+	    new Request.JSON({

+	        url: "/json/set_captcha",

+	        onSuccess: function(data) {

+	            if (data.captcha)

+					set_captcha(data);

+	            else

+					clear_captcha();

+	        },

+	        secure: false,

+	        async: true,

+	        method: method

+	    }).send(post);

+	}

+	

+	function set_captcha(data) {

+        $('cap_id').set('value', data.id);	

+        if (data.result_type == 'textual') {

+            $('cap_textual_img').set('src', data.src);

+        	$('cap_title').set('text', '{{_("Please read the text on the captcha.")}}');

+            $('cap_submit').setStyle('display', 'inline');

+            $('cap_textual').setStyle('display', 'block');

+            $('cap_positional').setStyle('display', 'none');

+        }

+        if (data.result_type == 'positional') {

+        	$('cap_positional_img').set('src', data.src);

+            $('cap_title').set('text', '{{_("Please click on the right captcha position.")}}');

+            $('cap_submit').setStyle('display', 'none');

+            $('cap_textual').setStyle('display', 'none');

+            $('cap_positional').setStyle('display', 'block');

+        }

+	}

+	

+	function clear_captcha() {

+        $('cap_textual').setStyle('display', 'none');

+        $('cap_textual_img').set('src', '');

+        $('cap_positional').setStyle('display', 'none');

+        $('cap_positional_img').set('src', '');

+        $('cap_title').set('text', '{{_("No Captchas to read.")}}');		

+	}

+	

+	function submit_cap() {

+	    load_cap("post", "cap_id=" + $('cap_id').get('value') + "&cap_result=" + $('cap_result').get('value') );

+	    $('cap_result').set('value', '');

+	    return false;

+	}

+	

+	function on_cap_click(e) {

+    	var position = event.target.getPosition();

+    	var x = e.page.x - position.x;

+    	var y = e.page.y - position.y;

+		$('cap_result').value = x + "," + y;

+		submit_cap();

+    }

+</script>

 

-</span>

-

-<button id="cap_submit" type="submit">{{_("Submit")}}</button>

-<button id="cap_reset" style="margin-left:0px;" type="reset">{{_("Close")}}</button>

-

-<div class="spacer"></div>

+<!-- Captcha box -->

+<div id="cap_box" class="myform">

 

+	<form id="cap_form" action="/json/set_captcha" method="POST" enctype="multipart/form-data" onsubmit="return false;">

+	

+		<h1>{{_("Captcha reading")}}</h1>

+		<p id="cap_title">{{_("Please read the text on the captcha.")}}</p>

+		

+		<div id="cap_textual">

+		

+			<input id="cap_id" name="cap_id" type="hidden" value="" />

+		

+			<label>{{_("Captcha")}}

+			<span class="small">{{_("The captcha.")}}</span>

+			</label>

+			<span class="cont">

+			    <img id="cap_textual_img" src="">

+			</span>

+			

+			<label>{{_("Text")}}

+			<span class="small">{{_("Input the text on the captcha.")}}</span>

+			</label>

+			<input id="cap_result" name="cap_result" type="text" size="20" />

+					

+		</div>

+		

+		<div id="cap_positional" style="text-align: center">

+		    <img id="cap_positional_img" src="" style="margin: 10px;">

+		</div>

 

-</form>

+		<div id="button_bar" style="text-align: center">

+			<span>

+				<button id="cap_submit" type="submit" style="margin-left: 0">{{_("Submit")}}</button>

+				<button id="cap_reset" type="reset" style="margin-left: 0">{{_("Close")}}</button>

+			</span>

+		</div>

+		

+		<div class="spacer"></div>

+	

+	</form>

 

 </div>
\ No newline at end of file