commit b014148c315645c4bb0ba4087f6481b75c1e709f
| author | 斟酌 鵬兄 <tgckpg@gmail.com> |
|---|
| date | 2024-11-15T00:23:32Z |
|---|
| subject | Upgraded to Recaptcha v3 |
|---|
commit b014148c315645c4bb0ba4087f6481b75c1e709f
Author: 斟酌 鵬兄 <tgckpg@gmail.com>
Date: 2024-11-15T00:23:32Z
Upgraded to Recaptcha v3
---
botanjs/src/Astro/Blog/Components/Comment.js | 114 ++++-----------------------
botanjs/src/Astro/Blog/Layout/MainFrame.js | 78 ++++++++----------
botanjs/src/externs/_3rdParty_.Recaptcha.js | 9 +--
3 files changed, 52 insertions(+), 149 deletions(-)
diff --git a/botanjs/src/Astro/Blog/Components/Comment.js b/botanjs/src/Astro/Blog/Components/Comment.js
index 8c84620..463fa66 100644
--- a/botanjs/src/Astro/Blog/Components/Comment.js
+++ b/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 );
diff --git a/botanjs/src/Astro/Blog/Layout/MainFrame.js b/botanjs/src/Astro/Blog/Layout/MainFrame.js
index d5ef45a..1dffd6d 100644
--- a/botanjs/src/Astro/Blog/Layout/MainFrame.js
+++ b/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();
-
- if( e.status )
+ postData(
+ action, data
+ , function ( e ) {
+ doCollapse();
+
+ 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 );
+ }
+ }
+ , function( err )
{
- // pop message
- cBubble.setColor( "cornflowerblue" );
- Cycle.next( function () { cBubble.pop( "Message sent" ); } );
+ errMesg.innerHTML = "Error occurred";
- // blurp after 1 sec
- Cycle.delay( function () { cBubble.blurp(); }, 3500 );
- }
- }
- , function( err )
- {
- errMesg.innerHTML = "Error occurred";
+ if( !err.status )
+ {
+ errMesg.innerHTML = err[ "mesg" ];
+ }
- if( !err.status )
- {
- errMesg.innerHTML = err[ "mesg" ];
+ errMesg.removeAttribute( "data-disabled" );
}
-
- 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
);
diff --git a/botanjs/src/externs/_3rdParty_.Recaptcha.js b/botanjs/src/externs/_3rdParty_.Recaptcha.js
index e4c340c..14c2bcb 100644
--- a/botanjs/src/externs/_3rdParty_.Recaptcha.js
+++ b/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;