diff --git a/frontends/web/static/js/stegasoo.js b/frontends/web/static/js/stegasoo.js index 29655b1..aa11294 100644 --- a/frontends/web/static/js/stegasoo.js +++ b/frontends/web/static/js/stegasoo.js @@ -765,18 +765,43 @@ const Stegasoo = { const customInputId = config.customInputId || 'channelCustomInput'; const keyInputId = config.keyInputId || 'channelKeyInput'; const generateBtnId = config.generateBtnId; + const serverInfoId = config.serverInfoId || 'channelServerInfo'; const select = document.getElementById(selectId); const customInput = document.getElementById(customInputId); const keyInput = document.getElementById(keyInputId); const generateBtn = generateBtnId ? document.getElementById(generateBtnId) : null; + const serverInfo = document.getElementById(serverInfoId); - // Show/hide custom input based on selection + // Show/hide custom input and server info based on selection const updateVisibility = () => { - const isCustom = select?.value === 'custom'; + const value = select?.value; + const isCustom = value === 'custom'; + const isPublic = value === 'none'; + const isAuto = value === 'auto'; + + // Custom input visibility customInput?.classList.toggle('d-none', !isCustom); if (isCustom && keyInput) { keyInput.focus(); + // Pulse highlight effect + customInput?.classList.add('channel-highlight'); + setTimeout(() => customInput?.classList.remove('channel-highlight'), 400); + } + + // Server info: show for auto, hide for custom, show "no key" for public + if (serverInfo) { + if (isAuto) { + serverInfo.innerHTML = 'Server: ' + (serverInfo.dataset.fingerprint || '••••-••••-···-••••-••••') + ''; + serverInfo.className = 'small text-success mt-2'; + serverInfo.classList.remove('d-none'); + } else if (isPublic) { + serverInfo.innerHTML = 'No channel key will be used'; + serverInfo.className = 'small text-muted mt-2'; + serverInfo.classList.remove('d-none'); + } else { + serverInfo.classList.add('d-none'); + } } }; @@ -912,7 +937,8 @@ const Stegasoo = { this.initChannelKey({ selectId: 'channelSelectDec', customInputId: 'channelCustomInputDec', - keyInputId: 'channelKeyInputDec' + keyInputId: 'channelKeyInputDec', + serverInfoId: 'channelServerInfoDec' }); // Form submission with channel key validation and mode display diff --git a/frontends/web/static/style.css b/frontends/web/static/style.css index eea662a..0c90d2c 100644 --- a/frontends/web/static/style.css +++ b/frontends/web/static/style.css @@ -161,6 +161,17 @@ body { .btn-group .btn-outline-secondary:hover { background-color: rgba(255, 255, 255, 0.08); } + +/* Channel key highlight pulse */ +.channel-highlight { + animation: channel-pulse 0.4s ease; +} +@keyframes channel-pulse { + 0% { box-shadow: 0 0 0 0 rgba(254, 232, 98, 0); } + 20% { box-shadow: 0 0 9px 1px rgba(254, 232, 98, 0.19); } + 40% { box-shadow: 0 0 9px 1px rgba(254, 232, 98, 0.19); } + 100% { box-shadow: 0 0 0 0 rgba(254, 232, 98, 0); } +} .btn-group .btn-outline-primary:first-of-type, .btn-group .btn-outline-secondary:first-of-type { color: #6b4d8a; diff --git a/frontends/web/templates/decode.html b/frontends/web/templates/decode.html index 28be6f2..e98d240 100644 --- a/frontends/web/templates/decode.html +++ b/frontends/web/templates/decode.html @@ -362,12 +362,12 @@ - {% if channel_configured %} -
+
+ {% if channel_configured %} Server: {{ channel_fingerprint[:4] }}-••••-···-••••-{{ channel_fingerprint[-4:] }} + {% endif %}
- {% endif %}
diff --git a/frontends/web/templates/encode.html b/frontends/web/templates/encode.html index 56d5018..b8621f4 100644 --- a/frontends/web/templates/encode.html +++ b/frontends/web/templates/encode.html @@ -429,12 +429,12 @@ - {% if channel_configured %} -
+
+ {% if channel_configured %} Server: {{ channel_fingerprint[:4] }}-••••-···-••••-{{ channel_fingerprint[-4:] }} + {% endif %}
- {% endif %}