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 %}
-
{{ channel_fingerprint[:4] }}-••••-···-••••-{{ channel_fingerprint[-4:] }}
+ {% endif %}
{{ channel_fingerprint[:4] }}-••••-···-••••-{{ channel_fingerprint[-4:] }}
+ {% endif %}