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

[Snowhog]

In our case, those listed in the css_additional.css are the usergoups who can see Who's Online. My understanding (correct me if I'm wrong) is that this MOD allows the additional information to be accessed by those usergroups who are allowed to access Who's Online, and the css_additional.css entry simply prevents identified usergroups from seeing the additional data the MOD provides.

Do I have that right?

[glennrocksvb]

There must be workaround to it.

[glennrocksvb]

Glad it's now working.

You have a lot of usergroups. Which usergroups did you restrict the Who's Online module permissions to? Did you allow those usergroups to see the module?

[Snowhog]

I corrected the HTML Code I cited in post #15 (input error). This is now what I have added to css_additional.css:

/* Hide Detailed IP Info link with Modal - START */
#vb-page-body[data-usergroupid="5"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="7"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="20"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="29"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="30"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="31"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="32"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="33"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="34"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="35"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="36"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="37"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="38"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="39"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="43"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="44"] .resolveIpLink-new,
#vb-page-body[data-usergroupid="53"] .resolveIpLink-new {
display: none;
}
/* Hide Detailed IP Info link with Modal - END */

The mod works as described, and with the above, I've limited the additional information to just the Administrators.

[Mitch]

this also means that this mod cannot be done in vbcloud as it does not allow to edit existing vb5 templates.

boooooo

[glennrocksvb]

6 is Administrator. The CSS is for those usergroups you don't want to see the new IP link by hiding it, not the one who should see the new IP link.

[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?

[Snowhog]

Thank you. Understand.

[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]

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, 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]

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]

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.

[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.

[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.