feat: use new IPAddress component

composer.json

@@ -20,7 +20,7 @@
     ],
     "require": {
         "php": "^8.0",
-        "flarum/core": "^1.8.2",
+        "flarum/core": "^1.8.7",
         "guzzlehttp/guzzle": "^7.3"
     },
     "authors": [

js/src/@shims/shims.d.ts

@@ -12,3 +12,10 @@ declare module 'flarum/common/models/User' {
     canSeeCountry: () => boolean;
   }
 }
+
+declare module 'flarum/common/components/IPAddress' {
+  export default interface IPAddress {
+    ipInfo?: IPInfo;
+    loadIpInfo: () => void;
+  }
+}

js/src/admin/extend.ts

@@ -0,0 +1,5 @@
+import Extend from 'flarum/common/extenders';
+
+import { default as commonExtend } from '../common/extend';
+
+export default [...commonExtend];

js/src/admin/index.ts

@@ -2,6 +2,7 @@ import app from 'flarum/admin/app';
 import GeoipSettingsPage from './components/GeoipSettingsPage';
 
 export * from './components';
+export { default as extend } from './extend';
 
 app.initializers.add('fof/geoip', () => {
   app.extensionData

js/src/common/extend.ts

@@ -0,0 +1,3 @@
+import Extend from 'flarum/common/extenders';
+
+export default [];

js/src/forum/components/MapModal.tsx

@@ -18,27 +18,12 @@ export default class MapModal extends Modal<MapModalAttrs> {
   oninit(vnode: Mithril.Vnode<MapModalAttrs, this>) {
     super.oninit(vnode);
     this.ipInfo = this.attrs.ipInfo;
-    if (this.ipInfo === undefined) {
-      this.loadIpInfo();
-    }
   }
 
   className() {
     return 'MapModal Modal--medium';
   }
 
-  loadIpInfo() {
-    app.store
-      .find<IPInfo>('ip_info', encodeURIComponent(this.attrs.ipAddr))
-      .then((ipInfo) => {
-        this.ipInfo = ipInfo;
-        m.redraw();
-      })
-      .catch((error) => {
-        console.error('Failed to load IP information from the store', error);
-      });
-  }
-
   title() {
     return app.translator.trans('fof-geoip.forum.map_modal.title');
   }

js/src/forum/extend.ts

@@ -1,14 +1,18 @@
 import Extend from 'flarum/common/extenders';
-import IPInfo from './models/IPInfo';
-import Post from 'flarum/common/models/Post';
 import User from 'flarum/common/models/User';
 
+import { default as commonExtend } from '../common/extend';
+import Post from 'flarum/common/models/Post';
+import IPInfo from './models/IPInfo';
+
 export default [
+  ...commonExtend,
+
   new Extend.Store() //
     .add('ip_info', IPInfo),
 
   new Extend.Model(Post) //
-    .hasOne('ip_info'),
+    .hasOne<IPInfo>('ip_info'),
 
   new Extend.Model(User) //
     .attribute('showIPCountry')

js/src/forum/extenders/extendIpAddress.tsx

@@ -0,0 +1,73 @@
+import app from 'flarum/forum/app';
+import { extend, override } from 'flarum/common/extend';
+import IPAddress from 'flarum/common/components/IPAddress';
+import IPInfo from '../models/IPInfo';
+import { getIPData } from '../helpers/IPDataHelper';
+import Tooltip from 'flarum/common/components/Tooltip';
+import Button from 'flarum/common/components/Button';
+import { handleCopyIP } from '../helpers/ClipboardHelper';
+import MapModal from '../components/MapModal';
+
+export default function extendIpAddress() {
+  extend(IPAddress.prototype, 'viewItems', function (items) {
+    if (!this.ipInfo) {
+      this.loadIpInfo();
+    }
+    if (this.ipInfo && items.has('ip')) {
+      items.remove('ip');
+
+      const { description, threat, image } = getIPData(this.ipInfo);
+
+      items.add(
+        'ipInfo',
+        <span className="ip-info">
+          {image}
+          <Tooltip text={`${description} ${threat ? `(${threat})` : ''}`}>
+            <code>{this.ip}</code>
+          </Tooltip>
+        </span>,
+        100
+      );
+
+      items.add(
+        'copyButton',
+        <Tooltip text={app.translator.trans('fof-geoip.forum.copy_ip_label')}>
+          <Button
+            icon="fas fa-copy"
+            className="Button Button--icon Button--link"
+            onclick={handleCopyIP(this.ip)}
+            aria-label={app.translator.trans('fof-geoip.forum.copy_ip_label')}
+          />
+        </Tooltip>,
+        95
+      );
+
+      items.add(
+        'infoButton',
+        <Tooltip text={app.translator.trans('fof-geoip.forum.map_button_label')}>
+          <Button
+            icon="fas fa-info-circle"
+            className="Button Button--icon Button--link"
+            onclick={(e: Event) => {
+              e.stopPropagation();
+              app.modal.show(MapModal, { ipInfo: this.ipInfo, ipAddr: this.ip });
+            }}
+            aria-label={app.translator.trans('fof-geoip.forum.map_button_label')}
+          />
+        </Tooltip>,
+        90
+      );
+    }
+  });
+
+  override(IPAddress.prototype, 'view', function () {
+    return <span className="IPAddress IPAddress--enhanced ip-container">{this.viewItems().toArray()}</span>;
+  });
+
+  IPAddress.prototype.loadIpInfo = async function () {
+    if (this.ip.length === 0) return;
+    const ipInfo = app.store.getBy<IPInfo>('ip_info', 'ip', this.ip) || (await app.store.find<IPInfo>('ip_info', encodeURIComponent(this.ip)));
+    this.ipInfo = ipInfo;
+    m.redraw();
+  };
+}

js/src/forum/helpers/IPDataHelper.tsx

@@ -12,7 +12,7 @@ export const getThreat = (ipInfo: IPInfo) => {
 };
 
 export const getFlagImage = (ipInfo: IPInfo) => {
-  if (ipInfo && ipInfo.countryCode() && ipInfo.countryCode().length > 1) {
+  if ((ipInfo?.countryCode() ?? '').length > 1) {
     const url = getFlagEmojiUrl(ipInfo.countryCode());
 
     const currentLocale = app.translator.getLocale() as string;
@@ -21,7 +21,7 @@ export const getFlagImage = (ipInfo: IPInfo) => {
     const displayNames = new Intl.DisplayNames([currentLocale], { type: 'region' });
 
     // Get the full country name using the country code
-    const countryName = displayNames.of(ipInfo.countryCode());
+    const countryName = displayNames.of(ipInfo.countryCode() || '');
 
     if (url) {
       return (

js/src/forum/index.ts

@@ -1,16 +1,14 @@
 import app from 'flarum/forum/app';
-import extendPostMeta from './extenders/extendPostMeta';
 import extendBanIPModal from './extenders/extendBanIPModal';
-import extendAccessTokensList from './extenders/extendAccessTokensList';
 import extendCommentPost from './extenders/extendCommentPost';
 import extendUserPreferences from './extenders/extendUserPreferences';
+import extendIpAddress from './extenders/extendIpAddress';
 
 export { default as extend } from './extend';
 
 app.initializers.add('fof/geoip', () => {
-  extendPostMeta();
   extendBanIPModal();
-  extendAccessTokensList();
   extendCommentPost();
   extendUserPreferences();
+  extendIpAddress();
 });

js/src/forum/models/IPInfo.ts

@@ -5,6 +5,10 @@ export default class IPInfo extends Model {
     return Model.attribute<string>('id').call(this);
   }
 
+  ip() {
+    return Model.attribute<string | undefined>('ip').call(this);
+  }
+
   countryCode() {
     return Model.attribute<string | null>('countryCode').call(this);
   }

resources/less/forum.less

@@ -1,28 +1,6 @@
 .PostMeta {
-  .ip-container {
-      display: flex;            
-      align-items: center;      
-      white-space: nowrap;      
-      overflow: hidden;         
-
-      > span {
-          overflow: hidden;         
-          text-overflow: ellipsis;  
-          max-width: 90%;           
-      }
-
-      img {
-          margin-right: 10px;
-          vertical-align: middle; // This ensures the image is vertically centered
-      }
-  }
-
   .PostMeta-ip, .Modal div label[for="ban-option-only"] {
       img {
-          // Remove the relative positioning
-          // position: relative;
-          // top: 3px;
-          // left: 5px;
           margin-right: 10px;
       }
 
@@ -50,6 +28,32 @@
   }
 }
 
+.ip-container {
+  display: flex;            
+  align-items: center;      
+  white-space: nowrap;      
+  overflow: hidden;         
+
+  > span {
+      overflow: hidden;         
+      text-overflow: ellipsis;  
+      max-width: 90%;           
+  }
+
+  img {
+      margin-right: 10px;
+      vertical-align: text-top;
+  }
+}
+
+.Post-header {
+  .item-country {
+    img {
+      vertical-align: text-top;
+    }
+  }
+}
+
 .Modal #geoip-map {
   height: 300px;
   resize: vertical;

resources/locale/en.yml

@@ -35,6 +35,7 @@ fof-geoip:
   forum:
     alerts:
       ip_copied: Copied IP Address
+    copy_ip_label: Copy IP to clipboard
     map_button_label: "IP Info"
     map_modal:
       title: "IP Information"

src/Api/Serializer/IPInfoSerializer.php

@@ -25,6 +25,7 @@ protected function getDefaultAttributes($ip): array
         $attrs = parent::getDefaultAttributes($ip);
 
         $moreAttrs = [
+            'ip'                => $ip->address,
             'zipCode'           => $ip->zip_code,
             'latitude'          => $ip->latitude,
             'longitude'         => $ip->longitude,