Can I call different functions in an extension depending on what event is fired?

Metsuryu

Or do I have to write a separate extension for each javascript function that I want to write?

Thank you.

clarkwinkelmann

Metsuryu could you give us more details about what you're trying to achieve ?

The whole purpose of events is to be able to trigger a different code on a different event.

The front-end side doesn't use events though. It's usually about extending or registering components.

Metsuryu

clarkwinkelmann I'd just like to add custom javascript to the front-end, so that I can add functionality, like linking users to another site connected to the forum after they log in.

I thought an extension was the way to do it, is there a better way?

clarkwinkelmann

Metsuryu I thought an extension was the way to do it,

it definitely is.

Metsuryu like linking users to another site connected to the forum after they log in

I'm not sure I understand what you're trying to do there.

Did you have a look at existing extensions ? They're usually a good starting point.

Let us know if you have questions about more specific aspects of the extension development ?

Metsuryu

clarkwinkelmann

I have a main site, and now I'm building the forum for the main site with flarum.

On my main site, I have some users, and there are things like profiles, achievements, and so on.

On the forum, I want to make it so when a user that was already registered on the main site logs in, their "forum account" will be linked to their "main site" account.

So, to do that, I thought about listening for the "UserLoggedIn" event, and then calling a Javascript function that would check if the user that just logged in matches a user registered on the main site, and if so, send some data to the main site's database, and do some other operations, like counting their forum posts, and so on.

So far I was able to add javascript to the page by adding the js file directly to the forum's header under /admin#/appearance, but I'm not sure how to call the functions with the login details when the user logs in.

I know how to call a function, but I don't know how to pass parameters to it.

For now I'm doing like this:

$events->listen(UserLoggedIn::class, function (UserLoggedIn $event) {
// User logged in
// TODO: Call javascript function to check if the user is also on main site, and connect them if so.
if ($event->isForum()) {
$event->addAssets(DIR."/js/forum/dist/extension.js");
$event->addBootstrapper("metsuryu/flarum-lantea/main");
}
});

extension.js simply calls a function that was inside the .js file that was added in the header, but I have no way to pass any login parameters to it.

Any idea how I can do that?

Anyway, I'm not even sure how to get the login details, could you point me to the documentation that shows it?

Thank you.

Edit: Actually that code I posted doesn't work. I took it from here:

$events->listen(ConfigureClientView::class, function (ConfigureClientView $event) {
if ($event->isForum()) {
$event->addAssets(DIR."/js/forum/dist/extension.js");
$event->addBootstrapper("metsuryu/flarum-lantea/main");
}
});

And replaced ConfigureClientView with UserLoggedIn, but it didn't work.
So, how do I call a function when a user logs in?

luceos

Metsuryu And replaced ConfigureClientView with UserLoggedIn, but it didn't work.

Nope that won't work. Each event interacts differently with the php code. The ConfigureClientView is responsible for adding less and javascript files for instance.

Looking at your new discussion you want to pass the current user information to the SPA so you can call to your main site. You can do so by listening to the PrepareApiAttribute event, check an example in the flagrow/upload extension.

A few other notes:

you say that you can only call firebase api from js, that is not true
sending user credentials to the SPA/JS is very unsafe, they are not only readable by the client, but also from the browser cache

Metsuryu

luceos I see, so I guess should do it with PHP.

I don't have much experience with PHP so it will be hard, aside from checking out the flagrow/upload extension, do you have any other pointers?

Thank you.

Metsuryu

luceos Can you please explain a bit more how to use PrepareApiAttribute to send the login data to the client?

I don't think I'm good enough to do it with PHP, so I'd rather do it with js for now, and maybe later I'll try to do it more securely with PHP.

As far as I've seen, I need to listen to the "prepareApiAttributes" event, with a function like:

public function subscribe(Dispatcher $events)
{
    $events->listen(PrepareApiAttributes::class, [$this, 'prepareApiAttributes']);
}

but where do I put this function, and where do I call it?

Also, once the events are dispatched, am I guessing correctly that it will call the function with the name in the string after the "$this"? So it would call "prepareApiAttributes", which is this:

public function prepareApiAttributes(PrepareApiAttributes $event)
{
    if ($event->isSerializer(ForumSerializer::class)) {
        $event->attributes = array_merge($event->attributes, $this->settings->toArrayFrontend());
    }
}

And that function would pass data to the Frontend? But I'm not sure what data is it passing, and then how do I get that data in the frontend?

Sorry for all the questions, hope someone can help me, and thank you again.

clarkwinkelmann

Metsuryu while probably feasible, it's very complicated to do with Flarum.

The easiest solution in my opinion is to do it via PHP, just listen for the user login event and do stuff there. Nothing else special to do.

If you want to do something in javascript when the user logs in, you need to hook up to something via javascript. The problem is that Flarum does a full page refresh after login. So either you need to perform your action after login but before the refresh, or after refresh.

To do it before refresh you could extend/replace the submit handler of the login/signup modal so you can do your own things before calling location.reload(). The downside of that is that you're holding back the process until you're done and the user has to wait (and might manually refresh if it's taking too long). Then also at this point Flarum is still in guest mode, so you'd have to hit the API to get anything you need (username or other things), adding more process time.

If you run your javascript after the refresh, you have access to anything that is injected into the page (via the api events, including the user details and your own data if you injected it via a listener). The downside is that you need some logic to decide if your javascript is run, as when the page loads there's no way of knowing if the user just logged in. You could use a custom flag you set when the login event fires or base it on whether a property exists on the user.

Either way I think you will end up writing more PHP if you try going with a javascript solution for your actual problem.

And as luceos pointed out using javascript will probably expose secrets so unless you have one API key sandboxed to each user and with only some very limited capability you will just give every user the keys to do anything with your app.

Also doing it purely with PHP you will have better error handling and can actually prevent login or do something if an error occurs. If using javascript only, your code might end up in cases where it errors or do not run and you need additional ways of deciding if it needs to run again.

I'm not sure which extension I can recommend you look at. I'm not even sure the login event is much used. One extension that hooks into login is my Chatwee extension https://github.com/clarkwinkelmann/flarum-ext-chatwee but I actually had to use a middleware instead of the login event because you can't add cookies when hooking into the login event...

Hope this helps ?

Metsuryu

Are threads bumped with new replies?

If so, can anyone help me out with this? Should I make a new thread?

jordanjay29

Metsuryu No, please stick to this one. Discussions do move to the top of All Discussions when a new reply is added, but please don't do this more often than every 72 hours just to bump it.

clarkwinkelmann

Metsuryu I have trouble understanding where you're stuck at exactly.

At this point in time the best "documentation" is to look at an extension that does something similar to what you want to do, and copy/adapt the code for what you need as well.

Where exactly are you stuck ? If you already have code that's partially working could you put it on GitHub (or similar) and share with us ? If you don't know where to look for example code, could you describe more precisely when/where you'd like to send data from the API ?

Metsuryu

clarkwinkelmann

Basically, so far I have nothing working, aside from the base forum, I don't know how to add this functionality.

What I want to do is this: when a user logs in to the forum, I should be able to invoke a function that checks if the user was also registered in my other site, and if so, it would keep track of the user's forum posts, and save them to my database (on firebase), so I can use them in the main site.

To do that, I wanted to invoke a javascript function at login, and pass to that function the user's login details (email, user UID, etc...), and from there, I would be able to do everything from the javascript function.

I don't know much PHP, that's why I was looking for a way to do it on the client-side mostly with javascript.

I was able to load custom javascript in the forum by modifying the custom header and adding my javascript file there, but I have no idea how to invoke js functions with PHP, and pass the user data to them after a user logs in.

Do you know how to do it, or if that's possible at all, or can you suggest an extension that does something similar so I can have a look at it?

Thank you very much.

Metsuryu

clarkwinkelmann Thank you so much! I'll try what you suggested, and see if I can manage to do it in PHP by seeing how the extension you linked works.

Metsuryu

clarkwinkelmann Finally I managed to get the user's data at login, and send them to a cloud function on firebase for processing, so I'm doing everything server side ?

The only issue is, this works only with the base login with username and password, not with the OAuth Google or Twitter logins, I think because they don't fire the same "UserLoggedIn" event as the base login function.

Now I just need to figure out how to listen for Google and Twitter logins. I've looked at the source code of the google login extension, but I couldn't find anything to give me a clue, I was looking for things that had "event" or "dispatch" in the name, but couldn't find anything relevant, I wonder if they even fire an event at all?

Any help would be really appreciated.

Metsuryu

Just wanted to say I finally solved it. I found all the data that I needed (user email when available, posts count, and user's ID) on the client side on the "app" variable, and from there I've been able to do everything.

You can close this thread.

Ralkage

Metsuryu can you detail your discovery in a separate discussion in a form of a tutorial? ?

Knowledge is power, my friend and we want everyone here to share the wealth ?

Metsuryu

Ralkage Not much to discuss, I think a short comment here would suffice ahah.

Basically, I figured there should be some user data on the client side somewhere, so I looked at all the variables in the window object, just by writing "window" in the console. Then I looked for any unfamiliar variable, that wasn't a default one, and "app" caught my eye. Sure enough, there was the data that I needed, so I just wrote my JavaScript to wait for the "app" variable to be populated, and then do what I wanted to do.

You can try it even on this page, look under app.session.user.data, and there is your data if you're logged in.