Skip to content

Commit

Permalink
Web: Recaptcha Loader: Replace jQuery.ajax "script" with add <script>
Browse files Browse the repository at this point in the history 
Add <script> tag to DOM with 'src' with URL

Update comment in other code
  • Loading branch information
@danjasuw
danjasuw committed Mar 30, 2024
1 parent 2073446 commit 837b6d9
Show file tree
Hide file tree
Showing 4 changed files with 311 additions and 192 deletions.
3 changes: 3 additions & 0 deletions ...p/front_end/src/js/page_js/data_pages/data_pages_common/googleChartLoaderForThisWebapp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,9 @@
* the function in google.charts.setOnLoadCallback(...) is called.
*
* Uses jQuery $.ajax to load Javascript
*
*
* See googleRecaptchaLoaderForThisWebapp.ts for how to replace jQuery $.ajax
*
*/

Expand Down
217 changes: 121 additions & 96 deletions ...ont_end/src/js/page_js/data_pages/data_pages_common/googleRecaptchaLoaderForThisWebapp.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,7 @@
* googleRecaptchaLoaderForThisWebapp.ts
*
* Javascript for Loading the Google Recaptcha API Library
*
* Uses jQuery $.ajax to load Javascript
*
*
* Changing this to use Javascript window.fetch(...) does NOT seem to work. Seems to be a CORS issue.
*
* When jQuery is removed from most all of Limelight, it can be loaded in the page where this is used and anywhere else like Lorikeet where it will still be needed.
*
*/


Expand All @@ -19,13 +12,82 @@

///////////////////////////////////////////

import { reportWebErrorToServer } from 'page_js/common_all_pages/reportWebErrorToServer';

const _TOTAL_WAIT_TIME__MILLISECONDS = 3000

const _EACH_WAIT_TIME__MILLISECONDS = 500


/**
* module imports
*
*/
export const loadGoogleRecaptcha = function() : { isLoaded: boolean, grecaptcha: any, loadingPromise: Promise<{ grecaptcha: any }> } {

import { reportWebErrorToServer } from 'page_js/common_all_pages/reportWebErrorToServer';
if ( googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADED_YES ) {

// @ts-ignore
const grecaptcha = window.grecaptcha

if ( ! grecaptcha ) {
const msg = "loadGoogleRecaptcha: googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADED_YES but window.grecaptcha not populated";
console.warn( msg );
throw Error( msg );
}
return { isLoaded: true, grecaptcha, loadingPromise: null };
}

if ( googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADING_IN_PROGRESS ) {

let deferred = new Deferred_Local_GoogleRecaptchaLoader();
googleRecaptcha_DeferredToResolveOnLoad.push( deferred );
// console.log("Adding to googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad");
return { loadingPromise: deferred.containedPromise(), grecaptcha: null, isLoaded: false };
}

googleRecaptcha_Loaded = GOOGLE_RECAPTCHA_LOADING_IN_PROGRESS;

return { loadingPromise : new Promise( function( resolve, reject ) {
try {
let loadGoogleRecaptcha_Loader_Promise : any = _Loader()

import { handleRawAJAXError } from 'page_js/common_all_pages/handleServicesAJAXErrors';
loadGoogleRecaptcha_Loader_Promise.catch( reason => {

reject( reason );
});

loadGoogleRecaptcha_Loader_Promise.then(function(value: any) { // On Fulfilled
try {
googleRecaptcha_Loaded = GOOGLE_RECAPTCHA_LOADED_YES;

let googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local = googleRecaptcha_DeferredToResolveOnLoad;

googleRecaptcha_DeferredToResolveOnLoad = []; // reset

if ( googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local.length > 0 ) {
googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local.forEach(function( googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoadItem, i, array) {
// console.log("Processsing entry in googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local, index: " + i );
googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoadItem.resolvePromise();
}, this)
}

// @ts-ignore
const grecaptcha = window.grecaptcha

resolve({ grecaptcha });

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
} ), isLoaded: false, grecaptcha: null };

};


/**
Expand Down Expand Up @@ -92,38 +154,21 @@ class Deferred_Local_GoogleRecaptchaLoader {
/**
*
*/
let _loadGoogleRecaptchaLoader = function() : Promise<any> {
const _Loader = function() : Promise<any> {

return new Promise<void>( function( resolve, reject ) {
try {
jQuery.ajax({
url: GOOGLE_RECAPTCHA_URL,
dataType: "script",
cache: true
}).done( function( data, textStatus, jqXHR ) {
try {
googleRecaptcha_Loaded = GOOGLE_RECAPTCHA_LOADED_YES;

let googleRecaptcha_DeferredToResolveOnLoad_Local = googleRecaptcha_DeferredToResolveOnLoad;

googleRecaptcha_DeferredToResolveOnLoad = []; // reset

if ( googleRecaptcha_DeferredToResolveOnLoad_Local.length > 0 ) {
googleRecaptcha_DeferredToResolveOnLoad_Local.forEach(function( googleRecaptcha_DeferredToResolveOnLoadItem, i, array) {
// console.log("Processsing entry in googleRecaptcha_DeferredToResolveOnLoad_Local, index: " + i );
googleRecaptcha_DeferredToResolveOnLoadItem.resolvePromise();
}, this)
}

resolve();

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
}).fail( function( jqXHR, textStatus, errorThrown ) {
handleRawAJAXError( jqXHR );
});
const scriptElement = document.createElement("script");
scriptElement.src = GOOGLE_RECAPTCHA_URL;
document.body.appendChild(scriptElement);

const promise = _check_LoadedOnPage_Overall__ResolvesReturnedPromiseWhenOnPage()
promise.catch(reason => { reject() })
promise.then(novalue => { try {

resolve()

} catch (e) { reportWebErrorToServer.reportErrorObjectToServer({errorException: e}); throw e }})
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
Expand All @@ -132,78 +177,58 @@ let _loadGoogleRecaptchaLoader = function() : Promise<any> {
};

/**
* Public functions
*
*/
const _check_LoadedOnPage_Overall__ResolvesReturnedPromiseWhenOnPage = async function ( ){ try {

/**
*
*/
let loadGoogleRecaptcha = function() : { isLoaded: boolean, grecaptcha: any, loadingPromise: Promise<{ grecaptcha: any }> } {
let elapsedWaitTime = 0

if ( googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADED_YES ) {
while ( true ) {

// @ts-ignore
const grecaptcha = window.grecaptcha
try {
await _check_LoadedOnPage_SingleCheck__ResolvesReturnedPromiseWhenOnPage( _EACH_WAIT_TIME__MILLISECONDS )

if ( ! grecaptcha ) {
const msg = "loadGoogleRecaptcha: googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADED_YES but window.grecaptcha not populated";
console.warn( msg );
throw Error( msg );
}
return { isLoaded: true, grecaptcha, loadingPromise: null };
}

if ( googleRecaptcha_Loaded === GOOGLE_RECAPTCHA_LOADING_IN_PROGRESS ) {

let deferred = new Deferred_Local_GoogleRecaptchaLoader();
googleRecaptcha_DeferredToResolveOnLoad.push( deferred );
// console.log("Adding to googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad");
return { loadingPromise: deferred.containedPromise(), grecaptcha: null, isLoaded: false };
}
// No Reject so found on window so return

googleRecaptcha_Loaded = GOOGLE_RECAPTCHA_LOADING_IN_PROGRESS;
return // EARLY RETURN

return { loadingPromise : new Promise( function( resolve, reject ) {
try {
let loadGoogleRecaptcha_Loader_Promise : any = _loadGoogleRecaptchaLoader()
} catch ( e ) {

loadGoogleRecaptcha_Loader_Promise.catch( reason => {
// Yes Reject so NOT found on window

reject( reason );
});
elapsedWaitTime += _EACH_WAIT_TIME__MILLISECONDS

loadGoogleRecaptcha_Loader_Promise.then(function(value: any) { // On Fulfilled
try {
googleRecaptcha_Loaded = GOOGLE_RECAPTCHA_LOADED_YES;
if ( elapsedWaitTime > _TOTAL_WAIT_TIME__MILLISECONDS ) {

let googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local = googleRecaptcha_DeferredToResolveOnLoad;
// Total wait time exceeded so reject by throwing exception

googleRecaptcha_DeferredToResolveOnLoad = []; // reset
throw e
}

if ( googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local.length > 0 ) {
googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local.forEach(function( googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoadItem, i, array) {
// console.log("Processsing entry in googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoad_Local, index: " + i );
googleRecaptchaCoreRecaptchas_DeferredToResolveOnLoadItem.resolvePromise();
}, this)
}
elapsedWaitTime += _EACH_WAIT_TIME__MILLISECONDS
}
}

// @ts-ignore
const grecaptcha = window.grecaptcha
} catch (e) { reportWebErrorToServer.reportErrorObjectToServer({errorException: e}); throw e }}

resolve({ grecaptcha });
/**
*
*/
const _check_LoadedOnPage_SingleCheck__ResolvesReturnedPromiseWhenOnPage = function ( waitTime: number ) {

} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
});
} catch( e ) {
reportWebErrorToServer.reportErrorObjectToServer( { errorException : e } );
throw e;
}
} ), isLoaded: false, grecaptcha: null };

};
return new Promise<void>( function( resolve, reject ) { try {
window.setTimeout( ()=> { try {

// @ts-ignore
const grecaptcha = window.grecaptcha

export { loadGoogleRecaptcha }
if ( grecaptcha ) {
resolve()
} else {
reject()
}
} catch (e) { reportWebErrorToServer.reportErrorObjectToServer({errorException: e}); throw e }
}, waitTime )

} catch (e) { reportWebErrorToServer.reportErrorObjectToServer({errorException: e}); throw e }})
}

0 comments on commit 837b6d9

Please sign in to comment.