Free Mod Add Detailed IP Info Modal to the Who's Online page

[glennrocksvb]

By default in vB5, clicking the IP Address of a user in the Who's Online page (/online) just shows you the hostname information of the user. That is not very useful. What you want to know is what country, state/region, city, postal code the user is approximately in. Additional information such as internet service and timezone is also useful.

To enable you to see detailed IP information, we can utilize the ipinfo.io website to give us those information. Please see instructions below on how to do it.

1. Logon to AdminCP.
2. Go to Styles → Search in Templates
3. Choose the target style/theme in the "Search in Style" dropdown.
4. In the "Search for Text" field, type onlineuser_details.
5. Select "Yes" in the "Search Titles Only" radio button.
6. Click Find button.
7. In the search results, double-click the template to edit it or select it then click Customize button.
8. Find the following code. This is used on desktop/tablet: (Hint: This is near the middle section of the template)
   

   	<a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>

9. Replace it with the following code:
   

   	<vb:comment><a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a></vb:comment>
   	<a href="https://ipinfo.io/{vb:var onlineUser.host}/json" class="resolveIpLink-new" target="_blank" rel="noopener" onclick="var w=600,h=200,y=window.outerHeight/2 + window.screenY - (h/2),x=(window.outerWidth/2) + window.screenX - (w/2);window.open(this.href, 'ipInfoWin', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);return false;">{vb:var onlineUser.host}</a>

10. Find another instance of the same code. This is used on mobile. (Hint: This is near the bottom section of the template)
    

    <a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>

11. Replace it with the following code:
    

    <vb:comment><a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a></vb:comment>
    	<a href="https://ipinfo.io/{vb:var onlineUser.host}/json" class="resolveIpLink-new" target="_blank" rel="noopener">{vb:var onlineUser.host}</a>

12. Click Save button.
13. Repeat Steps 2-10 for other active styles/themes on your forum (if any).
14. Go to the Who's Online page on your forum (/online) to confirm the change is working. See sample IP Address modal below:
    
    

If you are using CloudFlare, Sucuri or something similar, you may not be able to see the actual user's IP address. To fix that, you have do this.

NOTE: This mod requires editing an existing vB5 template which means a template merge conflict may arise during vB5 upgrade. In which case, you'd need to resolve the conflict to make sure the template would still be working as intended. This also means that this mod cannot be done in vBCloud as it does not allow to edit existing vB5 templates.

[glennrocksvb]

You can do something similar to the New User email notifications sent to the Admins when a new user signs up. The email contains IP address of the user which you can also link to ipinfo.io. I will post it separately.

[glennrocksvb]

Here you go...

https://vbmods.rocks/forum/vbulletin-5-modifications/vbulletin-5-miscellaneous-modifications/23282-make-ip-address-in-the-new-user-email-notification-clickable-that-shows-detailed-ip-information

[Snowhog]

Can this be coded for css_additional.css and avoid the issue of updated templates?

[glennrocksvb]

Unfortunately no. This is an HTML change that includes some JavaScript for the modal. It cannot be done in CSS which is for styling purposes only.

[Snowhog]

Does this MOD allow for selection of user groups who can use this? If it doesn’t, can you modify it so it does?

[glennrocksvb]

Don't you already restrict the Who's Online module itself to specific usergroups?

[Snowhog]

Hmm. Most likely. I'll take a look.

No, I hadn't. Just did.

However, limiting which usergroups can even see Who's Online is one thing (in my way of thinking). Allowing who can see 'detailed' information about Who's Online is something else. Again, in my way of thinking, the detailed info that his MOD makes available would be useful to Administrators, and I for one, would want to restrict it to Administrators.

Just my 2-cent observation.

[glennrocksvb]

I'll take a look if usergroup information is available in this template. Since this is only a template-only modification, it doesn't have any settings you usually see and flexibility in XML Product-based modifications.

[glennrocksvb]

Unfortunately, there is no usergroup information in the Who's Online template and it would require calling an API to get it for each user which would cost a performance hit.

There is a workaround by keeping both the default IP link and the new IP link in the template and then hiding the new link using CSS. On the page, there is usergroup information of the currently logged-in user in the <body> tag. We can leverage that to hide the new link.

In onlineuser_details template:

<a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>
<a href="https://ipinfo.io/{vb:var onlineUser.host}/json" class="resolveIpLink-new" target="_blank" rel="noopener" onclick="var w=600,h=200,y=window.outerHeight/2 + window.screenY - (h/2),x=(window.outerWidth/2) + window.screenX - (w/2);window.open(this.href, 'ipInfoWin', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);return false;">{vb:var onlineUser.host}</a>

In css_additional template:

/* Hide Detailed IP Info link with Modal - START */
#vb-page-body[data-usergroupid="5"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="7"] .resolveIpLink-new {
    display: none;
}
/* Hide Detailed IP Info link with Modal - END */

Adjust the usergroup IDs in the code as needed. You can add as many usergroups by simply adding new CSS selector #vb-page-body[data-usergroupid="XXX"] .resolveIpLink-new in the CSS above where XXX is the usergroup ID. Make sure you separate each selector by comma and the last one should have no trailing comma. Of course, you will only add the usergroup IDs that are included in the Who's Online module-level permissions you've set and that you want to restrict the detailed IP info modal to.

[Snowhog]

To be clear (for me), the HTLM Code in onlineuser_details above is simply clarification of your statement about it, and isn't something that needs to be changed? The only 'tweak' is to write the Code above into css_additional template via Site Builder. Is that correct?

[glennrocksvb]

Yes, there's a change in the HTML in onlineuser_details template. Originally, the original IP link was commented out inside <vb:comment> </vb:comment> tags. I removed those comment tags to keep the original IP link. So essentially in the end, you only actually need to add the second line of HTML for the new IP link with detailed IP info modal since you're keeping the original link and not replacing it anymore with comment tags.

[Snowhog]

Sorry. Still attempting to comprehend.

So, one searches for:

<a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>

in onlineuser_details template, then 'adds' the following 'new' line below it:

<a href="https://ipinfo.io/{vb:var onlineUser.host}/json" class="resolveIpLink-new" target="_blank" rel="noopener" onclick="var w=600,h=200,y=window.outerHeight/2 + window.screenY - (h/2),x=(window.outerWidth/2) + window.screenX - (w/2);window.open(this.href, 'ipInfoWin', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);return false;">{vb:var onlineUser.host}</a>

Then in In css_additional template we include:

/* Hide Detailed IP Info link with Modal - START */ #vb-page-body[data-usergroupid="5"] .resolveIpLink-new, #vb-page-body[data-usergroupid="7"] .resolveIpLink-new { display: none; } /* Hide Detailed IP Info link with Modal - END */

Do I have that correct?

[glennrocksvb]

Yes, that's correct. But don't forget to change usergroupd ID 5 and 7 if not correct. That's just a sample I provided.

[Snowhog]

Thank you. Understand.

[Snowhog]

Okay, I've likely not done something correctly, as this doesn't work.

This is what I now have in onlineuser_details:

 <vb:comment><a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a></vb:comment>

<a href="https://ipinfo.io/{vb:var onlineUser.host}/json" class="resolveIpLink-new" target="_blank" rel="noopener" onclick="var w=600,h=200,y=window.outerHeight/2 + window.screenY - (h/2),x=(window.outerWidth/2) + window.screenX - (w/2);window.open(this.href, 'ipInfoWin', 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width=' + w + ', height=' + h + ', top=' + y + ', left=' + x);return false;">{vb:var onlineUser.host}</a>

<vb:else />

And this is what I added into css_additional:

/* Hide Detailed IP Info link with Modal - START */
#vb-page-body[data-usergroupid="6"] .resolveIpLink-new {
display: none;
}
/* Hide Detailed IP Info link with Modal - END */

But this is what I see when in Who's Online:


And clicking on an IP Address:


Oh! Doh (I think)! This mod 'hides' specified usergroup ids from seeing the extra information. I've identified just one; the Administrator usergroup ID; so of course I'm not going to see additional info, yes?