Upgraded to Recaptcha v3

botanjs/src/Astro/Blog/Components/Comment.js

@@ -30,6 +30,7 @@
 
 	/** @type {_3rdParty_.Recaptcha} */
 	var Recaptcha;
+	var RECAPTCHA_SITE_KEY = null;
 
 	/** @type {_AstConf_.UserInfo} */
 	var currentUser = Conf.get( "UserInfo" );
@@ -84,7 +85,6 @@
 		// If nameField exists, we assume logged in
 		, loggedIn = !nameField
 
-
 		, contentHadHaveText = false
 		, commentInput = function ()
 		{
@@ -137,7 +137,6 @@
 			if( rf && rf.hasChildNodes() )
 			{
 				// if capcha opened
-				closeCaptcha();
 				hideSubmit();
 				Cycle.delay( function() {
 					closeInputPanel( reviveInputpanel.bind( c_reply.parentNode.parentNode ) )
@@ -188,7 +187,6 @@
 				// Create capcha
 				if(!fieldReady && contentHaveText && nameHaveText)
 				{
-					createCaptcha();
 					// show submit button
 					showSubmit();
 					fieldReady = true;
@@ -243,12 +241,13 @@
 				if( getFieldsValidated( p ) )
 				{
 					popBubble();
-					captcha_wrapper.readOnly = true;
-
-					closeCaptcha();
-					// Post the data, bind obj to Handler
-					postData( Config.processor, p, commentSuccess.bind(p), commentFailed );
-
+					Recaptcha.execute( RECAPTCHA_SITE_KEY, { "action": "submit" } )
+						.then(function( token )
+						{
+							p[ "token" ] = token;
+							// Post the data, bind obj to Handler
+							postData( Config.processor, p, commentSuccess.bind(p), commentFailed );
+						});
 				}
 				else
 				{
@@ -340,7 +339,6 @@
 					if(obj.reload)
 					{
 						// reload the recaptcha
-						createCaptcha();
 						Cycle.delay(showSubmit, 1500);
 
 						// Wrong answer.
@@ -368,7 +366,6 @@
 				else
 				{
 					// reload the recaptcha
-					createCaptcha();
 					Cycle.delay(showSubmit, 1500);
 
 					Cycle.delay(function (){cBubble.blurp();}, 500);
@@ -390,7 +387,7 @@
 		, captchaKey = new EventKey("KeyDown", function(e) { if(e.keyCode == 13) submitComment(); })
 
 
-		, _showSubmit = function ()
+		, showSubmit = function ()
 		{
 			// prevent multiple prop assign
 			if( !submit_button.hasListener( submitKey ) )
@@ -402,7 +399,7 @@
 			submit_button.addEventListener( submitKey );
 		}
 
-		, _hideSubmit = function ()
+		, hideSubmit = function ()
 		{
 			// prevent multiple prop assign
 			if( submit_button.hasListener( submitKey ) )
@@ -414,21 +411,6 @@
 			submit_button.removeEventListener( submitKey );
 		}
 
-		, showSubmit = loggedIn
-		? /* Overload */ _showSubmit
-		: /* Overload */ function ()
-			{
-				_showSubmit();
-				captcha_wrapper.addEventListener(captchaKey);
-			}
-		, hideSubmit = loggedIn
-		? /* Overload */ _hideSubmit
-		: /* Overload */ function ()
-		{
-			_hideSubmit();
-			captcha_wrapper.removeEventListener(captchaKey);
-		}
-
 		, __createContentText = function( text )
 		{
 			var e = wrapc( "c_text", text );
@@ -514,54 +496,9 @@
 			}.bind(c_stack), 600);
 		}
 
-		//// Captcha
-		, createCaptcha = loggedIn
-		? function() {}
-		: function ()
-		{
-			// Remove capcha
-			Dand.id( "recaptcha_field", true ).clear();
-			try
-			{
-				Recaptcha.render( "recaptcha_field", {
-					"theme": "light"
-					, "sitekey": Config.siteKey
-				} );
-			}
-			catch( ex ) { }
-
-			openCaptcha();
-		}
-
-		, openCaptcha = loggedIn
-		? function() {}
-		:function ()
-		{
-			var rf = Dand.id( "recaptcha_field" );
-
-			var k = function () {
-				return ( 0 < this.a.clientHeight );
-			}.bind({ a: rf });
-
-			Trigger.register(
-				k , function() {
-					captcha_wrapper.style.height = rf.clientHeight + "px";
-				}
-			, 50 );
-		}
-
-		, closeCaptcha = loggedIn
-		? function() {}
-		:function ()
-		{
-			captcha_wrapper.style.height = "0";
-		}
-
-
-
 		// Validation
 		, fields = loggedIn ? ["content"] : [ "content", "name", "email", "website", "email_notify" ]
-		, _getFieldsValidated = function (obj)
+		, getFieldsValidated = function (obj)
 		{
 			var name, field, falsefield, f;
 
@@ -631,29 +568,6 @@
 			return true;
 		}
 
-		, getFieldsValidated = loggedIn
-		? /* Overload */ _getFieldsValidated
-		: /* Overload */ function(obj)
-		{
-			var f = Dand.id("false_capcha");
-			f.style.height = 0;
-			// get the response field
-			if(!( obj["recaptcha_response_field"] = Recaptcha.getResponse().trim() ))
-			{
-				Cycle.delay(
-					function()
-					{
-						this.innerHTML = "You need to prove that you are a human";
-						this.style.height = elmH;
-					}.bind(f)
-				, 500 );
-			}
-			// get the challenge field
-			// else obj["recaptcha_challenge_field"] = Recaptcha.get_challenge();
-
-			return _getFieldsValidated(obj);
-		}
-
 		, showReplyButton = function ()
 		{
 			this.style.width = "1.2em";
@@ -708,6 +622,7 @@
 			var limit = 5;
 			var i = 0;
 			var reUUID = Perf.uuid;
+			RECAPTCHA_SITE_KEY = Dand.id( "recaptcha-js" ).src.split( "?render=" )[1];
 			Cycle.perma(
 				reUUID, function()
 				{
@@ -717,7 +632,7 @@
 						if( mesg.length ) mesg[0].style.display = "block";
 					}
 
-					if( Recaptcha = window["grecaptcha"] )
+					if(( Recaptcha = window["grecaptcha"] ))
 					{
 						Cycle.permaRemove( reUUID );
 						debug.Info( "Recaptcha instance is up" );
@@ -725,6 +640,9 @@
 				} , 500
 			);
 		}
+
+		Cycle.next( nameInput );
+		Cycle.next( commentInput );
 	};
 
 	Bootstrap.regInit( init );

botanjs/src/Astro/Blog/Layout/MainFrame.js

@@ -158,6 +158,7 @@
 
 		/** @type {_3rdParty_.Recaptcha} */
 		var Recaptcha;
+		var RECAPTCHA_SITE_KEY = null;
 
 		if( !cBubble )
 		{
@@ -168,36 +169,35 @@
 		var i = 0;
 		var errMesg = Dand.id( "contact-errmesg" );
 
-		var submitMessage = function( action, name, email, mesg )
+		var submitMessage = function( action, data )
 		{
-			postData( action, {
-				"name": name, "email": email, "mesg": mesg
-				, "recaptcha_response_field": Recaptcha.getResponse().trim()
-			}
-			, function ( e ) {
-			   	doCollapse();
+			postData(
+				action, data
+				, function ( e ) {
+					doCollapse();
 
-				if( e.status )
-				{
-					// pop message
-					cBubble.setColor( "cornflowerblue" );
-					Cycle.next( function () { cBubble.pop( "Message sent" ); } );
+					if( e.status )
+					{
+						// pop message
+						cBubble.setColor( "cornflowerblue" );
+						Cycle.next( function () { cBubble.pop( "Message sent" ); } );
 
-					// blurp after 1 sec
-					Cycle.delay( function () { cBubble.blurp(); }, 3500 );
+						// blurp after 1 sec
+						Cycle.delay( function () { cBubble.blurp(); }, 3500 );
+					}
 				}
-			}
-			, function( err )
-			{
-				errMesg.innerHTML = "Error occurred";
-
-				if( !err.status )
+				, function( err )
 				{
-					errMesg.innerHTML = err[ "mesg" ];
-				}
+					errMesg.innerHTML = "Error occurred";
 
-				errMesg.removeAttribute( "data-disabled" );
-			} );
+					if( !err.status )
+					{
+						errMesg.innerHTML = err[ "mesg" ];
+					}
+
+					errMesg.removeAttribute( "data-disabled" );
+				}
+			);
 		};
 
 		mesgform.addEventListener( "Submit", function( e ) {
@@ -223,24 +223,16 @@
 				return;
 			}
 
-			submitMessage( action, name, email, mesg );
-
-		} );
-
-		var CaptchaReady = function()
-		{
-			captcha.clear();
-			try
-			{
-				Recaptcha.render( "contact-recaptcha", {
-					"theme": "light", "sitekey": sitekey
+			Recaptcha.execute( RECAPTCHA_SITE_KEY, { "action": "submit" } )
+				.then(function( token ) {
+					submitMessage( action, {
+						"name": name
+						, "email": email
+						, "mesg": mesg
+						, "token": token
+					});
 				} );
-			}
-			catch( ex )
-			{
-			   debug.Error( ex );	
-			}
-		};
+		} );
 
 		Cycle.perma(
 			reUUID, function()
@@ -253,8 +245,8 @@
 
 				if( Recaptcha = window["grecaptcha"] )
 				{
+					RECAPTCHA_SITE_KEY = Dand.id( "recaptcha-js" ).src.split( "?render=" )[1];
 					Cycle.permaRemove( reUUID );
-					CaptchaReady();
 				}
 			} , 500
 		);

botanjs/src/externs/_3rdParty_.Recaptcha.js

@@ -1,12 +1,5 @@
 /** @constructor */
 _3rdParty_.Recaptcha = function() {};
 
-/** @type {Number} */
-_3rdParty_.Recaptcha.timer_id;
-
 /** @type {Function} */
-_3rdParty_.render;
-/** @type {Function} */
-_3rdParty_.reset;
-/** @type {Function} */
-_3rdParty_.getResponse;
+_3rdParty_.execute;