captcha input for webif

2 files changed, 121 insertions, 15 deletions

diff --git a/module/web/templates/default/base.html b/module/web/templates/default/base.html
index 7aa6267a3..4631ec382 100644
--- a/module/web/templates/default/base.html
+++ b/module/web/templates/default/base.html
@@ -21,11 +21,12 @@
 <title>{% block title %}pyLoad {% trans "Webinterface" %}{% endblock %}</title>

 

 <script type="text/javascript">

-var add_bg,add_box

+var add_bg, add_box, cap_box, cap_info

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

 

 	add_bg = new Fx.Tween($('add_bg'));

 	add_box = new Fx.Tween($('add_box'));

+        cap_box = new Fx.Tween($('cap_box'))

 	

 	$('add_form').onsubmit=function() {

             $('add_form').target = 'upload_target';

@@ -64,23 +65,37 @@ document.addEvent("domready", function(){
 	$('action_stop').addEvent('click', function(){

 		new Request({method: 'get', url: '/json/pause'}).send();	

 	});

-	

+

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

+                load_cap("get", "");

+                show_cap();

+        });

+

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

+            hide_cap()

+        });

+

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

+            submit_cap();

+            e.stop()

+        });

+

 	jsonStatus.startTimer();

 	

 });

 

-/*function UpdateLinks( SetInver, index )

-{

-	$("#aktiv_percent").text(parseInt($("#aktiv_percent").text)+1)

-	setTimeout( UpdateLinks( SetInver, index+1 ), SetInver[index]*1000);

-}*/

-

 function LoadJsonToContent(data)

 {

 	$("speed").set('text', Math.round(data.speed*100)/100);

 	$("aktiv").set('text', data.activ);

 	$("aktiv_from").set('text', data.queue);

 

+        if (data.captcha){

+            $("cap_info").setStyle('display', 'inline');

+        }else{

+            $("cap_info").setStyle('display', 'none');

+        }

+        

         if (data.download) {

             $("time").set('text', " {% trans "on" %}");

             $("time").setStyle('background-color', "#8ffc25");

@@ -99,25 +114,72 @@ function LoadJsonToContent(data)
             $("reconnect").setStyle('background-color', "#fc6e26");

         }

 }

-function show(){

-	add_bg.set('opacity', 0);

+function bg_show(){

+    	add_bg.set('opacity', 0);

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

 	add_bg.start('opacity',0.8);

-	

+}

+

+function bg_hide(){

+        add_bg.start('opacity',0).chain(function(){

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

+	});

+}

+

+function show(){

+        bg_show()

 	add_box.set('opacity', 0)

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

 	add_box.start('opacity',1)

 }

 

 function out(){

-	add_bg.start('opacity',0).chain(function(){

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

-	});

-	

+        bg_hide()

 	add_box.start('opacity',0).chain(function(){

 		$('add_box').setStyle('display', 'none');

 	});

 }

+function show_cap(){

+        bg_show()

+	cap_box.set('opacity', 0)

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

+	cap_box.start('opacity',1)

+}

+

+function hide_cap(){

+        bg_hide()

+	cap_box.start('opacity',0).chain(function(){

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

+	});

+}

+

+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', '{% trans "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', '{% trans "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()

 {

@@ -144,6 +206,12 @@ function AddBox()
 <div id="head-search-and-login">

 

 {% if user.is_authenticated %}

+

+<span id="cap_info" style="display: {% if captcha %}inline{%else%}none{% endif %}">

+<img src="{{ MEDIA_URL }}img/images.png" alt="Captcha:" style="vertical-align:middle; margin:2px" />

+<font style="font-weight: bold; cursor: pointer; margin-right: 2px;">{% trans "Captcha waiting" %}</font>

+</span>

+

 <img src="{{ MEDIA_URL }}img/head-login.png" alt="User:" style="vertical-align:middle; margin:2px" /><span style="padding-right: 2px;">{{user.username}}</span>

 	<ul id="user-actions">

 		<li><a href="/logout"  class="action logout" rel="nofollow">{% trans "Logout" %}</a></li>

@@ -245,5 +313,6 @@ function AddBox()
 </div>

 

 {% include "default/window.html" %}

+{% include "default/captcha.html" %}

 </body>

 </html>

diff --git a/module/web/templates/default/captcha.html b/module/web/templates/default/captcha.html
new file mode 100644
index 000000000..aa30e365c
--- /dev/null
+++ b/module/web/templates/default/captcha.html
@@ -0,0 +1,37 @@
+{% load i18n %}

+<iframe id="upload_target" name="upload_target" src="" style="display: none; width:0;height:0"></iframe>

+<div id="add_bg" style="filter:alpha(opacity:80);KHTMLOpacity:0.80;MozOpacity:0.80;opacity:0.80; background:#000; width:100%; height: 100%; position:absolute; top:0px; left:0px; display:none;">&nbsp;</div>

+<!--<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>{% trans "Captcha reading" %}</h1>

+<p>{% trans "Please read the text on the captcha." %}</p>

+

+<span id="cap_span">

+

+<label>{% trans "Captcha" %}

+<span class="small">{% trans "The captcha." %}</span>

+</label>

+<span class="cont">

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

+</span>

+

+<label>{% trans "Text" %}

+<span class="small">{% trans "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"/>

+

+</span>

+

+<button id="cap_submit" type="submit">{% trans "Submit" %}</button>

+<button id="cap_reset" style="margin-left:0px;" type="reset">{% trans "Close" %}</button>

+

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

+

+

+</form>

+

+</div>
\ No newline at end of file