diff --git a/js/app.js b/js/app.js index 8d6ac21..6d34ac1 100644 --- a/js/app.js +++ b/js/app.js @@ -109,6 +109,23 @@ Router.start('#app-view'); + // ---- IP address masking ---- + window.maskIp = function (ip) { + if (!ip) return ''; + return '••••••••'; + }; + + document.addEventListener('click', function (e) { + var el = e.target.closest('.ip-masked'); + if (el) { + el.classList.remove('ip-masked'); + el.classList.add('ip-revealed'); + el.textContent = el.dataset.ip; + el.title = ''; + e.preventDefault(); + } + }); + // ---- Initial state ---- showDisconnected(); })(); diff --git a/js/pages/playerInfo.js b/js/pages/playerInfo.js index fcd26b7..4594562 100644 --- a/js/pages/playerInfo.js +++ b/js/pages/playerInfo.js @@ -59,7 +59,11 @@ function PlayerInfoPage(params, container) { var fieldsHtml = ''; for (var key in info) { if (info.hasOwnProperty(key)) { - fieldsHtml += '

' + key + ': ' + info[key] + '

'; + var value = info[key]; + if (key === 'Address') { + value = maskIp(value); + } + fieldsHtml += '

' + key + ': ' + value + '

'; } } document.getElementById('pi-fields').innerHTML = fieldsHtml; diff --git a/js/pages/playerlist.js b/js/pages/playerlist.js index 19c805a..4ea9930 100644 --- a/js/pages/playerlist.js +++ b/js/pages/playerlist.js @@ -84,7 +84,7 @@ function PlayerListPage(params, container) { '' + (p.DisplayName || '') + '' + '' + p.SteamID + '' + '' + (p.VoiationLevel || 0) + '' + - '' + (p.Address || '') + '' + + '' + maskIp(p.Address) + '' + '' + (p.Ping || 0) + '' + '' + secondsToDuration(p.ConnectedSeconds || 0) + '' + ''; diff --git a/rcon.css b/rcon.css index f778c43..eb0870c 100644 --- a/rcon.css +++ b/rcon.css @@ -47,6 +47,20 @@ a:hover { color: #fff; text-decoration: none; } /* Fade utility */ .fade { opacity: 0.5; } +/* IP address masking */ +.ip-masked { + cursor: pointer; + color: rgba(255,255,255,0.35); + transition: color 0.2s; + user-select: none; +} +.ip-masked:hover { + color: var(--rcon-accent); +} +.ip-revealed { + color: rgba(255,255,255,0.85); +} + /* Table styles */ #PlayerListController .table-responsive { min-height: calc(100vh - 200px);