### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 23, 2020, 4:30am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/1 "2020-11-23T04:30:14Z")
Hi All,
I want to display the Popup box using the Theme component when the User login first time.
**1.** I have tried to override the login action of the login controller using Theme component to display the Popup box while User successfully login.
Here in the login action, I have added **bootbox.alert(“Test Alert”);** code before **hiddenLoginForm.submit();**.
But Popup is displayed until the hidderLoginForm is submitted and then redirected to the Home page.
>
My requirement is Popup box should be displayed after redirecting to the Home page after successful login.
**2.** To check whether the User login for the first time I tried to check the value of the _ **previous\_visit\_at** _ property of the current user.
If previous\_visit\_at = null (ie. The User is login for the first time.)
But here also my test fails, as I login a second time the value of the _ **previous\_visit\_at** _ property was null.
I want to know when exactly the value of _ **previous\_visit\_at** _ property is updated.
Please help me to achieve the above requirements
Thank you,
Saurabh Khandelwal
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 24, 2020, 8:28am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/3 "2020-11-24T08:28:16Z")
Hey @Saurabh_Khandelwal 👋
> [@Saurabh\_Khandelwal](#):
>
> I have tried to override the login action
I would advise against doing it this way; login is one of the most critical actions, and any overrides to that action will be fragile and prone to breaking if we make any changes in the area in core.
> [@Saurabh\_Khandelwal](#):
>
> My requirement is Popup box should be displayed after redirecting to the Home page after successful login
If you recall, when you first signed up on this site, you saw something like this.
The conditions [we use](https://github.com/discourse/discourse/blob/530d9ab07168b425235528f05da090751d31ac1a/app/assets/javascripts/discourse/app/widgets/header.js#L84-L111) to check for this are
```javascript
!user.read_first_notification && !user.enforcedSecondFactor
```
So, if you use the same conditions in an initializer, you’ll be able to render a Bootbox on the user’s very first-page view after login.
You can try something like this in your theme component.
```javascript
import { withPluginApi } from "discourse/lib/plugin-api";
import bootbox from "bootbox";
export default {
name: "first-login-bootbox",
initialize() {
withPluginApi("0.8", api => {
const user = api.getCurrentUser();
if (!user) return;
if (!user.read_first_notification && !user.enforcedSecondFactor) {
const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor`;
bootbox.alert(text);
}
});
}
};
```
and that will give you something like this
You can use HTML in the text of the bootbox if needed. Once the user dismisses the bootbox and clicks on the circled avatar, they’ll never see the bootbox again.
Please note that bootboxes are meant for simple dialogs/confirmations. If you need something a little bit more complicated than that, then you’re probably better of using a modal with `showModal()`
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 24, 2020, 8:36am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/4 "2020-11-24T08:36:37Z")
Thanks, @Johani for your advice. I will avoid making changes in the login action and try to implement as you mention.
> [@Johani](#):
>
> The conditions [we use](https://github.com/discourse/discourse/blob/530d9ab07168b425235528f05da090751d31ac1a/app/assets/javascripts/discourse/app/widgets/header.js#L84-L111) to check for this are
>
> ```plaintext
> !user.read_first_notification && !user.enforcedSecondFactor
>
> ```
>
> So, if you use the same conditions in an initializer, you’ll be able to render a Bootbox on the user’s very first-page view after login.
>
> You can try something like this in your theme component.
.
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 25, 2020, 8:31am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/5 "2020-11-25T08:31:25Z")
Hi, @Johani I have added a simple hyperlink (say “/new-topic”) within the popup box which opens in a new tab.
When I click on that link it opens in a new tab but again it displays a Popup box as we have checked for the below conditions
```
!user.read_first_notification && !user.enforcedSecondFactor
```
In my case, the Popup box should not be displayed after visiting the link
Can we update values for these properties after the Popup box is displayed once, if yes then how can we do this?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 25, 2020, 9:22am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/6 "2020-11-25T09:22:18Z")
> [@Saurabh\_Khandelwal](#):
>
> Can we update values for these properties
I’m afraid that’s not possible.
Those properties don’t have setters; even if they did, your changes would only temporarily apply in the first window. Once the user visits the second tab, the data will be based on what’s stored in the database. Themes don’t have access to the backend; they can only change the frontend.
What you can do is add a hash to your link and check for that like this.
```javascript
import { withPluginApi } from "discourse/lib/plugin-api";
import bootbox from "bootbox";
export default {
name: "first-login-bootbox",
initialize() {
withPluginApi("0.8", api => {
const user = api.getCurrentUser();
if (!user) return;
if (
!user.read_first_notification &&
!user.enforcedSecondFactor &&
!window.location.hash
) {
const text = `Lorem ipsum dolor sit amet Link, consectetur adipiscing elit, sed do eiusmod tempor`;
bootbox.alert(text);
}
});
}
};
```
I’m not sure if linking to “/new-topic” in your post was just an example or if it’s what you want to do. If it’s the desired result, then you have another problem. Even if the bootbox is not displayed on the page with the hash, they’ll still see this…
…and the composer will not open, which makes sense since it’s very unexpected for a user to start typing a topic on their very first page-view immediately.
Might I ask what you’re trying to accomplish here? Are you trying to inform the user of something or the other?
The way I’ve seen this done on other sites is to edit the welcome message, but if that’s an option, there are alternatives.
Here’s what I suggest
1. create a topic and add all of the information you want there
2. [publish that topic](https://meta.discourse.org/t/page-publishing/151971)
3. link to that topic in the bootbox and open that link in a new tab.
This way, when the user clicks on the link, they’ll see something like this (without the overlay)
Once they’re done with that page, they can go back to the first tab, dismiss the bootbox, read the first notification and then continue using the site.
This way, you don’t even need to add/check for a hash. Here’s an example snippet
```javascript
import { withPluginApi } from "discourse/lib/plugin-api";
import bootbox from "bootbox";
export default {
name: "first-login-bootbox",
initialize() {
withPluginApi("0.8", api => {
const user = api.getCurrentUser();
if (!user) return;
if (!user.read_first_notification && !user.enforcedSecondFactor) {
const text = `Lorem ipsum dolor sit amet Link, consectetur adipiscing elit, sed do eiusmod tempor`;
bootbox.alert(text);
}
});
}
};
```
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 25, 2020, 9:35am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/7 "2020-11-25T09:35:33Z")
> [@Johani](#):
>
> Might I ask what you’re trying to accomplish here? Are you trying to inform the user of something or the other?
I’m trying to have some links like “/new-topic” “/my/preferences” within Popup.
Otherwise, I was thinking to display Popup only for the home page by checking the current URL.
So while visiting other pages Popup will not will be displayed.
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 25, 2020, 9:44am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/8 "2020-11-25T09:44:59Z")
> [@Johani](#):
>
> I’m not sure if linking to “/new-topic” in your post was just an example or if it’s what you want to do. If it’s the desired result, then you have another problem. Even if the bootbox is not displayed on the page with the hash, they’ll still see this…
>
> 
Even if I check for home page URL after clicking on “/new-topic” link, above issue will occur
---
### Author:  [@tpetrov](https://meta.discourse.org/u/tpetrov)
#### Post date: [November 25, 2020, 9:45am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/9 "2020-11-25T09:45:50Z")
Hi Saurabh,
Yes, I think checking the current url and showing the popup only on the home page should work..
---
### Author:  [@tpetrov](https://meta.discourse.org/u/tpetrov)
#### Post date: [November 25, 2020, 9:50am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/10 "2020-11-25T09:50:16Z")
We can show the new user introduction from Discobot after some time e.g. 2 mins:
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [November 25, 2020, 11:16am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/11 "2020-11-25T11:16:03Z")
> [@Johani](#):
>
> Those properties don’t have setters; even if they did, your changes would only temporarily apply in the first window. Once the user visits the second tab, the data will be based on what’s stored in the database. Themes don’t have access to the backend; they can only change the frontend.
Hi, @Johani
Can we create a widget as shown below and call bootbox() within it.
And after calling bootbox can we call “skipNewUserTips()” method. Which is also used by Discourse in the **header-notifications widget.**
```
```
Discourse code for the header-notifications widget:
[https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/header.js#L101](https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/app/widgets/header.js#L101)
Will it create any issue?
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [November 25, 2020, 12:19pm UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/12 "2020-11-25T12:19:03Z")
This skips this overlay altogether for _all new users_. So they’ll never see it.
If that’s OK with you then, yes, it should work.
You do need to change the bootbox call. Otherwise, you’ll get this.
instead of doing this
> [@Saurabh\_Khandelwal](#):
>
> ```plaintext
> title: title,
> message: body
>
> ```
You should only pass a single argument.
Those options were added to newer versions of Bootbox and won’t work with the version that we’re currently using in Discourse (we’re discussing this internally, but for now, you can’t use those)
Also, since you’re creating a PUT request, then you can also skip this.
```javascript
this.currentUser.set("skip_new_user_tips", true);
```
So, maybe something like this.
```javascript
api.createWidget("welcome-popup", {
tagName: "div.welcome-popup",
html(attrs) {
let user = this.currentUser;
if (!user) return;
if (
!user.get("read_first_notification") &&
!user.get("enforcedSecondFactor")
) {
const body = `You're a member. Welcome aboard!
`;
bootbox.alert(body);
this.skipNewUserTips();
}
return null;
},
skipNewUserTips() {
ajax(userPath(this.currentUser.username_lower), {
type: "PUT",
data: {
skip_new_user_tips: true
}
});
}
});
```
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [December 24, 2020, 5:29am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/14 "2020-12-24T05:29:34Z")
Hi @Johani,
> [@Johani](#):
>
> ```plaintext
> ajax(userPath(this.currentUser.username_lower), {
> type: "PUT",
> data: {
> skip_new_user_tips: true
> }
> });
>
> ```
As we set _ **skip\_new\_user\_tips** _ to true, the Discobot Greeting notification is also skipped. It is ok if the first notification overlay mask is not displayed but we want the Discobot Greeting notification.
Discobot notification:
For this, we had changed the code so that the Discobot Greeting notification will be loaded for all new users.
Now we added a new method to the header widget “**closeFirstNotificationMask()**” where we set “_ **ringBackdrop** _” to false and “_ **userVisible** _” to its inverse. And called this method after calling bootbox method in the welcome-popup widget.
We took reference from the “toggeleUserMenu” method of header widget which is called when the User icon is clicked.
>
```
```
One more thing, we using Bootbox 5.4.1 version by including the below script in our theme component as currently Discourse not support the multi-parameter bootbox method. Is it Ok?
```
```
Please give us your opinion, thank you!
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 24, 2020, 10:20pm UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/15 "2020-12-24T22:20:31Z")
This looks good 👍
I tried it locally and didn’t see any problems. I made a few minor changes.
```xml
```
> [@Saurabh\_Khandelwal](#):
>
> we using Bootbox 5.4.1 version by including the below script in our theme component as currently Discourse not support the multi-parameter bootbox method. Is it Ok?
Yes, that’s OK. Discourse loads the bootbox version we use as a shim, so loading a different version in your theme component won’t change anything in core. The new version will only be used in your theme component. The only downside is that it adds one extra request and ~4kb to the initial page load.
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [December 28, 2020, 5:02am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/16 "2020-12-28T05:02:12Z")
> [@Johani](#):
>
> ```plaintext
> api.decorateWidget("header-notifications:before", helper => {
> if (!helper.attrs.active && helper.attrs.ringBackdrop) {
> return helper.attach("welcome-popup", helper.attrs);
> }
> });
>
> ```
Hi @Johani as you loaded the welcome-popup widget before the header-notifications widget it seems that Discobot notification is not loaded and also after clicking on the Links within welcome-popup again welcome-popup is display to the user.
I have tested it by loading the welcome-popup widget after the header-notifications widget that works fine, So can I change it to “header-notifications:after”
---
### Author:  [@Johani](https://meta.discourse.org/u/Johani)
#### Post date: [December 30, 2020, 7:27am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/17 "2020-12-30T07:27:40Z")
That’s strange 🤔
I just tried the same code again with 3 different new users, and I get the expected result everytime. I see the popup on the first page view, and the Discobot greeting message is sent. Subsequent page views don’t have the popup.
> [@Saurabh\_Khandelwal](#):
>
> I have tested it by loading the welcome-popup widget after the header-notifications widget that works fine, So can I change it to “header-notifications:after”
Sure, if it works for you, then the decorator location shouldn’t matter.
---
### Author:  [@Saurabh\_Khandelwal](https://meta.discourse.org/u/Saurabh_Khandelwal)
#### Post date: [December 30, 2020, 8:41am UTC](https://meta.discourse.org/t/is-there-any-way-to-listen-user-login-event-using-theme-component/170976/18 "2020-12-30T08:41:18Z")
Thanks @Johani, We will use after decorator.