Adding "pre" actions to JS actions in ATK UI?

#1

Hello again, I’d like to know if there’s an already working solution to having the user log out/timeout in the middle of their session.

Obviously this is not a question about how to implement authentication and such, I’d simply like to know if there’s a way for me to display something before the atk4 ui js code will “fully” run, so to have it detect if a call was “interrupted” by my code in PHP saying that the user has logged out/timed out and needs to reauthenticate (in a window popup thing), similar to how WordPress does it.

This could be rather easily be done by modifying the source code of the application but I’d like to know if there’s already something like that out there.

#2

I don’t know of any, but I sure can use one :slight_smile:

#3

Well, since it’d be impractical to cause another request, I’d suggest that the requests being sent back could contain a name of a callback that’d be previously registered in the JSON response.
For example, a typical response looks something along the lines of

{
  atkjs: "<script>↵$(function() {↵  $("#atk_admin_filemodal_"
  html: "<div id="atk_admin_filemodal_view" class=" dynamic"
  id: "atk_admin_filemodal_view"
  message: "Success"
  success: true
}

I’d suggest adding another property to it, called “override” or something similar, maybe with something like inserting an object into the JS response (it wouldn’t ever conflict, since those requests would only be made when it’s looking for JS callbacks, something like new jsOverride('login_required') possibly?
Then hook into it by interacting with the atk4 js application like so:

window.atk4.api.override["loginRequired"] = myCallback;

Where myCallback would return a promise, and override would await that promise.
Then read that data and see what it contains. It should contain something along the lines of html properties, possibly success and so on, along with a special property called retryRequest or something similar, which would re-run the same request again.

That way there’d be no need to modify HTTP headers for this, no real change to flow of the code, other than addidg promise support (which should be in there by now most likely).

a function like myCallback would work something like this

function myCallback(response) {
    // login requested
    const myLoginUrl = '/whatever/here';
    const frame = $('body').find('#login-iframe-popup');
    frame.show();
    frame.find("> iframe").src(myLoginUrl);
    
    return new Promise((resolve, reject) => {
        // logic here to check for the login success or not
        // on iframe successful login
        resolve({
            success: true,
            retryRequest: true
        });
    });
}
#4

this was done in one of my projects (long ago) by sending “TIMEOUT” in the response and looking for that on the JS end by overriding loader.

Technically if you can create a PR for ATK UI with some minimal changes to implement a very basic timeout functionality, that would be great.

Also join us on a weekly hangouts to discuss https://atk.saasty.app/