From c600bbc3ab7c6fe22d213108086a44ad8f929ca4 Mon Sep 17 00:00:00 2001
From: fragonib <devnull@localhost>
Date: Mon, 30 May 2011 23:29:34 +0200
Subject: Support for positional captchas

---
 module/web/templates/default/base.html    |  46 +---------
 module/web/templates/default/captcha.html | 134 +++++++++++++++++++++++-------
 2 files changed, 109 insertions(+), 71 deletions(-)

(limited to 'module/web/templates')

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
-- 
cgit v1.2.3