Announcement

Collapse
No announcement yet.

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

Collapse
X
Collapse
First Prev Next Last
 
  • Filter
  • Time
  • Show
Clear All
new posts

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

    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)
      HTML Code:
      	<a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>
    9. Replace it with the following code:
      HTML 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)
      HTML Code:
      <a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>
    11. Replace it with the following code:
      HTML 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:

      Click image for larger version  Name:	ipinfo-modal.png Views:	6 Size:	52.6 KB ID:	23280

    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.
    Last edited by glennrocksvb; 03-28-2022, 04:54 PM. Reason: Updated steps for mobile
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    #2
    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.
    Helpful? Donate. Thanks!
    Buy me a coffeePayPal QR Code
    Fast VPS Host for vBulletin:
    A2 Hosting & IONOS

    Comment


    #3
    Can this be coded for css_additional.css and avoid the issue of updated templates?
    The Linux Community has given me much. I do what I can to return the favor!

    Comment


      #4
      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.
      Helpful? Donate. Thanks!
      Buy me a coffeePayPal QR Code
      Fast VPS Host for vBulletin:
      A2 Hosting & IONOS

      Comment


        #5
        Does this MOD allow for selection of user groups who can use this? If it doesn’t, can you modify it so it does?
        The Linux Community has given me much. I do what I can to return the favor!

        Comment


          #6
          Don't you already restrict the Who's Online module itself to specific usergroups?
          Helpful? Donate. Thanks!
          Buy me a coffeePayPal QR Code
          Fast VPS Host for vBulletin:
          A2 Hosting & IONOS

          Comment


            #7
            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.
            The Linux Community has given me much. I do what I can to return the favor!

            Comment


              #8
              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.
              Helpful? Donate. Thanks!
              Buy me a coffeePayPal QR Code
              Fast VPS Host for vBulletin:
              A2 Hosting & IONOS

              Comment


                #9
                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:
                HTML Code:
                <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:
                Code:
                /* 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.
                Helpful? Donate. Thanks!
                Buy me a coffeePayPal QR Code
                Fast VPS Host for vBulletin:
                A2 Hosting & IONOS

                Comment


                  #10
                  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?
                  The Linux Community has given me much. I do what I can to return the favor!

                  Comment


                    #11
                    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.
                    Helpful? Donate. Thanks!
                    Buy me a coffeePayPal QR Code
                    Fast VPS Host for vBulletin:
                    A2 Hosting & IONOS

                    Comment


                      #12
                      Sorry. Still attempting to comprehend.

                      So, one searches for:
                      Code:
                      <a href="#" class="resolveIpLink">{vb:var onlineUser.host}</a>
                      in onlineuser_details template, then 'adds' the following 'new' line below it:
                      Code:
                      <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:
                      Code:
                      /* 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?
                      The Linux Community has given me much. I do what I can to return the favor!

                      Comment


                        #13
                        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.
                        Helpful? Donate. Thanks!
                        Buy me a coffeePayPal QR Code
                        Fast VPS Host for vBulletin:
                        A2 Hosting & IONOS

                        Comment


                          #14
                          Thank you. Understand.
                          The Linux Community has given me much. I do what I can to return the favor!

                          Comment


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

                            This is what I now have in onlineuser_details:
                            HTML 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>
                            
                            <vb:else />
                            And this is what I added into css_additional:
                            Code:
                            /* 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:
                            Click image for larger version  Name:	Screen Shot 2022-02-03 at 2.13.37 PM.png Views:	0 Size:	206.3 KB ID:	23598

                            And clicking on an IP Address:
                            Click image for larger version  Name:	Screen Shot 2022-02-03 at 2.14.48 PM.png Views:	0 Size:	121.5 KB ID:	23599

                            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?
                            The Linux Community has given me much. I do what I can to return the favor!

                            Comment

                            Latest Topics

                            Collapse

                            Working...
                            X
                            Searching...Please wait.
                            An unexpected error was returned: 'Your submission could not be processed because you have logged in since the previous page was loaded.

                            Please push the back button and reload the previous window.'
                            An unexpected error was returned: 'Your submission could not be processed because the token has expired.

                            Please push the back button and reload the previous window.'
                            An internal error has occurred and the module cannot be displayed.
                            There are no results that meet this criteria.
                            Search Result for "|||"