Jquery captcha for esotalk.org

  1. 5 years ago
    Edited 5 years ago by Picos

    This is a guilines to show you how to integrate a good jquery captcha (qaptcha) to your esotalk signup form,
    You can see the demo version here:
    http://vibiz.net/user/join
    This captcha will kill all spam bots out there :)
    Ok, let start.
    First of all, here is some require javascript and style that you will need:
    (Attached files - vibiz.zip)
    Step 1: Download these attach files then upload to your forum root document.
    Step 2: We will need to fix some php files:
    In core/views/user/join.php
    + Find the code (Line 32-33):

    <li><label><?php echo T("Confirm password"); ?></label> <?php echo $form->input("confirm", "password"); ?></li>

    ADD AFTER:

    <li> <div class="QapTcha"></div> </li>

    +
    ADD AT THE END:

    <link rel="stylesheet" href="<?php echo ET::$config['esoTalk.baseURL']; ?>captcha/QapTcha.jquery.css" type="text/css" />
    <script type="text/javascript" src="<?php echo ET::$config['esoTalk.baseURL']; ?>captcha/jquery-ui.js"></script>
    <script type="text/javascript" src="<?php echo ET::$config['esoTalk.baseURL']; ?>captcha/jquery.ui.touch.js"></script>
    <script type="text/javascript">
    jQuery.QapTcha = {
    	build : function(options)
    	{
            var defaults = {
    			txtLock : 'Locked : Unlock like Iphone',
    			txtUnlock : 'Unlocked : Unlock successfully',
    			disabledSubmit : true,
    			autoRevert : true,
    			PHPfile : '<?php echo ET::$config['esoTalk.baseURL']; ?>php/Qaptcha.jquery.php',
    			autoSubmit : false
            };
    
    		if(this.length>0)
    		return jQuery(this).each(function(i) {
    			/** Vars **/
    			var
    				opts = $.extend(defaults, options),
    				$this = $(this),
    				form = $('form').has($this),
    				Clr = jQuery('<div>',{'class':'clr'}),
    				bgSlider = jQuery('<div>',{'class':'bgSlider'}),
    				Slider = jQuery('<div>',{'class':'Slider'}),
    				TxtStatus = jQuery('<div>',{'class':' TxtStatus dropError',text:opts.txtLock}),
    				inputQapTcha = jQuery('<input>',{value:generatePass(32),name:generatePass(32),type:'hidden'});
    
    			/** Disabled submit button **/
    			if(opts.disabledSubmit) form.find('input[type=\'submit\']').attr('disabled','disabled');
    
    			/** Construct DOM **/
    			bgSlider.appendTo($this);
    			Clr.insertAfter(bgSlider);
    			TxtStatus.insertAfter(Clr);
    			inputQapTcha.appendTo($this);
    			Slider.appendTo(bgSlider);
    			$this.show();
    
    			Slider.draggable({
    				revert: function(){
    					if(opts.autoRevert)
    					{
    						if(parseInt(Slider.css("left")) > (bgSlider.width()-Slider.width()-10)) return false;
    						else return true;
    					}
    				},
    				containment: bgSlider,
    				axis:'x',
    				stop: function(event,ui){
    					if(ui.position.left > (bgSlider.width()-Slider.width()-10))
    					{
    						// set the SESSION iQaptcha in PHP file
    						$.post(opts.PHPfile,{
    							action : 'qaptcha',
    							qaptcha_key : inputQapTcha.attr('name')
    						},
    						function(data) {
    							if(!data.error)
    							{
    								Slider.draggable('disable').css('cursor','default');
    								inputQapTcha.val('');
    								TxtStatus.text(opts.txtUnlock).addClass('dropSuccess').removeClass('dropError');
    								form.find('input[type=\'submit\']').removeAttr('disabled');
    								if(opts.autoSubmit) form.find('input[type=\'submit\']').trigger('click');
    							}
    						},'json');
    					}
    				}
    			});
    
    			function generatePass(nb) {
    		        var chars = 'azertyupqsdfghjkmwxcvbn23456789AZERTYUPQSDFGHJKMWXCVBN';
    		        var pass = '';
    		        for(i=0;i<nb;i++){
    		            var wpos = Math.round(Math.random()*chars.length);
    		            pass += chars.substring(wpos,wpos+1);
    		        }
    		        return pass;
    		    }
    
    		});
    	}
    }; jQuery.fn.QapTcha = jQuery.QapTcha.build;
    
    </script>
    <script type="text/javascript">
    	$(document).ready(function(){
    		$('.QapTcha').QapTcha({disabledSubmit:true,autoRevert:true,autoSubmit:false});
    	});
    </script>

    + File: Core/controller/ETUserControllers.class.php
    REPLACE:

    // Make sure the passwords match. The model will do the rest of the validation.
    		if ($form->getValue("password") != $form->getValue("confirm"))
    			$form->error("confirm", T("message.passwordsDontMatch"));
    
    		if (!$form->errorCount()) {
    
    			$data = array(
    				"username" => $form->getValue("username"),
    				"email" => $form->getValue("email"),
    				"password" => $form->getValue("password"),
    				"account" => ACCOUNT_MEMBER
    			);
    
    			if (!C("esoTalk.registration.requireEmailConfirmation")) $data["confirmedEmail"] = true;
    			else $data["resetPassword"] = md5(uniqid(rand()));
    
    			// Create the member.
    			$model = ET::memberModel();
    			$memberId = $model->create($data);
    
    			// If there were validation errors, pass them to the form.
    			if ($model->errorCount()) $form->errors($model->errors());
    
    			else {
    
    				// If we require the user to confirm their email, send them an email and show a message.
    				if (C("esoTalk.registration.requireEmailConfirmation")) {
    					$this->sendConfirmationEmail($data["email"], $data["username"], $memberId.$data["resetPassword"]);
    					$this->renderMessage(T("Success!"), T("message.confirmEmail"));
    				}
    
    				else {
    					ET::$session->login($form->getValue("username"), $form->getValue("password"));
    					$this->redirect(URL(""));
    				}
    
    				return;
    
    			}
    
    		}

    BY THIS CODE:

    $PostKey = &$_POST[$_SESSION['qaptcha_key']];
    	if (isset($PostKey) && empty($PostKey)) 
    	{
    		// Make sure the passwords match. The model will do the rest of the validation.
    		if ($form->getValue("password") != $form->getValue("confirm"))
    			$form->error("confirm", T("message.passwordsDontMatch"));
    
    		if (!$form->errorCount()) {
    
    			$data = array(
    				"username" => $form->getValue("username"),
    				"email" => $form->getValue("email"),
    				"password" => $form->getValue("password"),
    				"account" => ACCOUNT_MEMBER
    			);
    
    			if (!C("esoTalk.registration.requireEmailConfirmation")) $data["confirmedEmail"] = true;
    			else $data["resetPassword"] = md5(uniqid(rand()));
    
    			// Create the member.
    			$model = ET::memberModel();
    			$memberId = $model->create($data);
    
    			// If there were validation errors, pass them to the form.
    			if ($model->errorCount()) $form->errors($model->errors());
    
    			else {
    
    				// If we require the user to confirm their email, send them an email and show a message.
    				if (C("esoTalk.registration.requireEmailConfirmation")) {
    					$this->sendConfirmationEmail($data["email"], $data["username"], $memberId.$data["resetPassword"]);
    					$this->renderMessage(T("Success!"), T("message.confirmEmail"));
    				}
    
    				else {
    					ET::$session->login($form->getValue("username"), $form->getValue("password"));
    					$this->redirect(URL(""));
    				}
    
    				return;
    
    			}
    
    		}
    	unset($_SESSION['qaptcha_key']);
    		
    	}

    Saved and upload to your server.
    Enjoy now !
    You should see like my vibiz.net :)
    Let post here if you have any questions.
    I am using 1.0g3 esotalk version :)

  2. @Tristan Here you go :) Please have a look, i dont see any solution for me to write a plugin with that, it is really hard :)

  3. @Picos Thanks, actually that doesn't look that hard to convert to a plugin.

  4. I am not sure, because i am developing in 1.0g3 version :)
    I dont see any trigger here,
    Hope this will help you to develop a public version of this type of captcha :)

  5. I will need to finish my own CAPTCHA plugin first, then I will give it a try. ok?

  6. Toby

    29 Apr 2014 Administrator

    I'm moving this out of the plugins channel as it is not technically a plugin. :)

  7. 4 years ago

    [deleted]

    3 May 2015

    This is no more working on the latest version of esoTalk.

 

or Sign Up to reply!