v2.5.2: redesign Tunnels section in Settings
This commit is contained in:
orohi
+169
-110
@@ -204,112 +204,147 @@
|
||||
</div>
|
||||
|
||||
<!-- BLOCK Tunnels -->
|
||||
<div class="card">
|
||||
<h3 class="card-title" style="margin-bottom: var(--space-lg);">🌍 {{ _('tunnels_title') }}</h3>
|
||||
<div style="display: flex; flex-direction: column; gap: var(--space-md);">
|
||||
<div style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
|
||||
<strong>{{ _('local_server') }}</strong>
|
||||
<span class="badge badge-info">{{ _('active') }}</span>
|
||||
</div>
|
||||
<div style="display:flex; gap:var(--space-sm); align-items:center;">
|
||||
<code id="localServerUrl" style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-secondary);">{{ request.url.scheme }}://{{ request.url.netloc }}</code>
|
||||
<div class="card tunnels-card">
|
||||
<div class="tunnels-header">
|
||||
<h3 class="card-title">🌍 {{ _('tunnels_title') }}</h3>
|
||||
<p class="tunnels-subtitle">{{ _('tunnels_subtitle') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="tunnels-local">
|
||||
<div class="tunnels-local-icon" aria-hidden="true">🏠</div>
|
||||
<div class="tunnels-local-body">
|
||||
<div class="tunnels-local-label">{{ _('local_server') }}</div>
|
||||
<div class="tunnels-local-url">
|
||||
<code id="localServerUrl">{{ request.url.scheme }}://{{ request.url.netloc }}</code>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="copyElementText('localServerUrl')">{{ _('copy') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<span class="tunnel-status-pill tunnel-status-pill--ok">{{ _('active') }}</span>
|
||||
</div>
|
||||
|
||||
<div class="tunnel-row" data-provider="cloudflare" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
|
||||
<strong>Cloudflare Quick Tunnel</strong>
|
||||
<span class="badge badge-secondary" id="cloudflareInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div id="cloudflarePublicUrls" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('tunnel_no_public_url') }}</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm);">
|
||||
<button type="button" class="btn btn-primary" id="cloudflareTunnelBtn" onclick="enableTunnel('cloudflare')">
|
||||
<span id="cloudflareTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareTunnelSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary hidden" id="cloudflareStopBtn" onclick="stopTunnel('cloudflare')">
|
||||
<span id="cloudflareStopBtnText">{{ _('tunnel_stop') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareStopSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger hidden" id="cloudflareDeleteBtn" onclick="deleteTunnel('cloudflare')">
|
||||
<span id="cloudflareDeleteBtnText">{{ _('tunnel_delete') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareDeleteSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunnels-section">
|
||||
<h4 class="tunnels-section-title">{{ _('tunnels_section_inbound') }}</h4>
|
||||
<div class="tunnels-grid">
|
||||
<article class="tunnel-card tunnel-row" data-provider="cloudflare" id="tunnelCard-cloudflare">
|
||||
<div class="tunnel-card-head">
|
||||
<div class="tunnel-card-icon tunnel-card-icon--cloudflare" aria-hidden="true">☁</div>
|
||||
<div class="tunnel-card-meta">
|
||||
<h5 class="tunnel-card-title">Cloudflare Quick Tunnel</h5>
|
||||
<p class="tunnel-card-desc">{{ _('tunnel_cloudflare_desc') }}</p>
|
||||
</div>
|
||||
<span class="tunnel-status-pill" id="cloudflareInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div class="tunnel-card-body">
|
||||
<div id="cloudflarePublicUrls" class="tunnel-url-box tunnel-url-box--empty">{{ _('tunnel_no_public_url') }}</div>
|
||||
</div>
|
||||
<div class="tunnel-card-actions tunnel-card-actions--triple">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="cloudflareTunnelBtn" onclick="enableTunnel('cloudflare')">
|
||||
<span id="cloudflareTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareTunnelSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm hidden" id="cloudflareStopBtn" onclick="stopTunnel('cloudflare')">
|
||||
<span id="cloudflareStopBtnText">{{ _('tunnel_stop') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareStopSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm hidden" id="cloudflareDeleteBtn" onclick="deleteTunnel('cloudflare')">
|
||||
<span id="cloudflareDeleteBtnText">{{ _('tunnel_delete') }}</span>
|
||||
<div class="spinner hidden" id="cloudflareDeleteSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<div class="tunnel-row" data-provider="ngrok" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
|
||||
<strong>ngrok Tunnel + Authtoken</strong>
|
||||
<span class="badge badge-secondary" id="ngrokInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div class="form-group" style="margin-bottom: var(--space-sm);">
|
||||
<input type="password" class="form-input" id="ngrokAuthtoken" placeholder="{{ _('ngrok_authtoken_placeholder') }}" autocomplete="off">
|
||||
</div>
|
||||
<div id="ngrokPublicUrls" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('tunnel_no_public_url') }}</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--space-sm);">
|
||||
<button type="button" class="btn btn-primary" id="ngrokTunnelBtn" onclick="enableTunnel('ngrok')">
|
||||
<span id="ngrokTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
|
||||
<div class="spinner hidden" id="ngrokTunnelSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary hidden" id="ngrokStopBtn" onclick="stopTunnel('ngrok')">
|
||||
<span id="ngrokStopBtnText">{{ _('tunnel_stop') }}</span>
|
||||
<div class="spinner hidden" id="ngrokStopSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger hidden" id="ngrokDeleteBtn" onclick="deleteTunnel('ngrok')">
|
||||
<span id="ngrokDeleteBtnText">{{ _('tunnel_delete') }}</span>
|
||||
<div class="spinner hidden" id="ngrokDeleteSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="tunnel-row" data-provider="warp" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
|
||||
<strong>Cloudflare WARP</strong>
|
||||
<span class="badge badge-secondary" id="warpInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div id="warpStatusText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('warp_status_unknown') }}</div>
|
||||
<div id="warpHintText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('warp_hint') }}</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);">
|
||||
<button type="button" class="btn btn-primary" id="warpConnectBtn" onclick="connectWarp()">
|
||||
<span id="warpConnectBtnText">{{ _('warp_connect') }}</span>
|
||||
<div class="spinner hidden" id="warpConnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary hidden" id="warpDisconnectBtn" onclick="disconnectWarp()">
|
||||
<span id="warpDisconnectBtnText">{{ _('warp_disconnect') }}</span>
|
||||
<div class="spinner hidden" id="warpDisconnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="tunnel-row" data-provider="nordvpn" style="padding: var(--space-md); border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-primary);">
|
||||
<div style="display:flex; align-items:center; justify-content:space-between; gap:var(--space-md); margin-bottom: var(--space-sm);">
|
||||
<strong>NordVPN</strong>
|
||||
<span class="badge badge-secondary" id="nordvpnInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div id="nordvpnStatusText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('nordvpn_status_unknown') }}</div>
|
||||
<div id="nordvpnServerText" class="form-hint hidden" style="margin-bottom: var(--space-sm);"></div>
|
||||
<div id="nordvpnHintText" class="form-hint" style="margin-bottom: var(--space-sm);">{{ _('nordvpn_hint') }}</div>
|
||||
<div class="grid" style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm); margin-bottom: var(--space-sm);">
|
||||
<input type="text" class="form-input" id="nordvpnCountry" placeholder="{{ _('nordvpn_country_placeholder') }}" autocomplete="off">
|
||||
<input type="text" class="form-input" id="nordvpnCity" placeholder="{{ _('nordvpn_city_placeholder') }}" autocomplete="off">
|
||||
</div>
|
||||
<div style="display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);">
|
||||
<button type="button" class="btn btn-primary" id="nordvpnConnectBtn" onclick="connectNordvpn()">
|
||||
<span id="nordvpnConnectBtnText">{{ _('nordvpn_connect') }}</span>
|
||||
<div class="spinner hidden" id="nordvpnConnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary hidden" id="nordvpnDisconnectBtn" onclick="disconnectNordvpn()">
|
||||
<span id="nordvpnDisconnectBtnText">{{ _('nordvpn_disconnect') }}</span>
|
||||
<div class="spinner hidden" id="nordvpnDisconnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
<article class="tunnel-card tunnel-row" data-provider="ngrok" id="tunnelCard-ngrok">
|
||||
<div class="tunnel-card-head">
|
||||
<div class="tunnel-card-icon tunnel-card-icon--ngrok" aria-hidden="true">N</div>
|
||||
<div class="tunnel-card-meta">
|
||||
<h5 class="tunnel-card-title">ngrok</h5>
|
||||
<p class="tunnel-card-desc">{{ _('tunnel_ngrok_desc') }}</p>
|
||||
</div>
|
||||
<span class="tunnel-status-pill" id="ngrokInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div class="tunnel-card-body">
|
||||
<input type="password" class="form-input" id="ngrokAuthtoken" placeholder="{{ _('ngrok_authtoken_placeholder') }}" autocomplete="off">
|
||||
<div id="ngrokPublicUrls" class="tunnel-url-box tunnel-url-box--empty">{{ _('tunnel_no_public_url') }}</div>
|
||||
</div>
|
||||
<div class="tunnel-card-actions tunnel-card-actions--triple">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="ngrokTunnelBtn" onclick="enableTunnel('ngrok')">
|
||||
<span id="ngrokTunnelBtnText">{{ _('tunnel_install_enable') }}</span>
|
||||
<div class="spinner hidden" id="ngrokTunnelSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm hidden" id="ngrokStopBtn" onclick="stopTunnel('ngrok')">
|
||||
<span id="ngrokStopBtnText">{{ _('tunnel_stop') }}</span>
|
||||
<div class="spinner hidden" id="ngrokStopSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger btn-sm hidden" id="ngrokDeleteBtn" onclick="deleteTunnel('ngrok')">
|
||||
<span id="ngrokDeleteBtnText">{{ _('tunnel_delete') }}</span>
|
||||
<div class="spinner hidden" id="ngrokDeleteSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
<p class="form-hint" style="margin-top: var(--space-md);">{{ _('tunnels_hint') }}</p>
|
||||
|
||||
<div class="tunnels-section">
|
||||
<h4 class="tunnels-section-title">{{ _('tunnels_section_outbound') }}</h4>
|
||||
<div class="tunnels-grid">
|
||||
<article class="tunnel-card tunnel-row" data-provider="warp" id="tunnelCard-warp">
|
||||
<div class="tunnel-card-head">
|
||||
<div class="tunnel-card-icon tunnel-card-icon--warp" aria-hidden="true">W</div>
|
||||
<div class="tunnel-card-meta">
|
||||
<h5 class="tunnel-card-title">Cloudflare WARP</h5>
|
||||
<p class="tunnel-card-desc">{{ _('tunnel_warp_desc') }}</p>
|
||||
</div>
|
||||
<span class="tunnel-status-pill" id="warpInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div class="tunnel-card-body">
|
||||
<p id="warpStatusText" class="tunnel-status-line">{{ _('warp_status_unknown') }}</p>
|
||||
<p id="warpHintText" class="tunnel-hint">{{ _('warp_hint') }}</p>
|
||||
</div>
|
||||
<div class="tunnel-card-actions">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="warpConnectBtn" onclick="connectWarp()">
|
||||
<span id="warpConnectBtnText">{{ _('warp_connect') }}</span>
|
||||
<div class="spinner hidden" id="warpConnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm hidden" id="warpDisconnectBtn" onclick="disconnectWarp()">
|
||||
<span id="warpDisconnectBtnText">{{ _('warp_disconnect') }}</span>
|
||||
<div class="spinner hidden" id="warpDisconnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
|
||||
<article class="tunnel-card tunnel-row" data-provider="nordvpn" id="tunnelCard-nordvpn">
|
||||
<div class="tunnel-card-head">
|
||||
<div class="tunnel-card-icon tunnel-card-icon--nordvpn" aria-hidden="true">N</div>
|
||||
<div class="tunnel-card-meta">
|
||||
<h5 class="tunnel-card-title">NordVPN</h5>
|
||||
<p class="tunnel-card-desc">{{ _('tunnel_nordvpn_desc') }}</p>
|
||||
</div>
|
||||
<span class="tunnel-status-pill" id="nordvpnInstallBadge">{{ _('not_installed') }}</span>
|
||||
</div>
|
||||
<div class="tunnel-card-body">
|
||||
<p id="nordvpnStatusText" class="tunnel-status-line">{{ _('nordvpn_status_unknown') }}</p>
|
||||
<p id="nordvpnServerText" class="tunnel-status-line tunnel-status-line--server hidden"></p>
|
||||
<p id="nordvpnHintText" class="tunnel-hint">{{ _('nordvpn_hint') }}</p>
|
||||
<div class="tunnel-nordvpn-fields">
|
||||
<input type="text" class="form-input" id="nordvpnCountry" placeholder="{{ _('nordvpn_country_placeholder') }}" autocomplete="off">
|
||||
<input type="text" class="form-input" id="nordvpnCity" placeholder="{{ _('nordvpn_city_placeholder') }}" autocomplete="off">
|
||||
</div>
|
||||
</div>
|
||||
<div class="tunnel-card-actions">
|
||||
<button type="button" class="btn btn-primary btn-sm" id="nordvpnConnectBtn" onclick="connectNordvpn()">
|
||||
<span id="nordvpnConnectBtnText">{{ _('nordvpn_connect') }}</span>
|
||||
<div class="spinner hidden" id="nordvpnConnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary btn-sm hidden" id="nordvpnDisconnectBtn" onclick="disconnectNordvpn()">
|
||||
<span id="nordvpnDisconnectBtnText">{{ _('nordvpn_disconnect') }}</span>
|
||||
<div class="spinner hidden" id="nordvpnDisconnectSpinner" style="width:14px; height:14px;"></div>
|
||||
</button>
|
||||
</div>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<p class="tunnels-footnote">{{ _('tunnels_hint') }}</p>
|
||||
</div>
|
||||
|
||||
<!-- BLOCK SSL/HTTPS -->
|
||||
@@ -949,31 +984,45 @@
|
||||
const el = document.getElementById(`${provider}PublicUrls`);
|
||||
if (!el) return;
|
||||
if (!urls || !urls.length) {
|
||||
el.className = 'tunnel-url-box tunnel-url-box--empty';
|
||||
el.textContent = _('tunnel_no_public_url');
|
||||
return;
|
||||
}
|
||||
el.className = 'tunnel-url-box';
|
||||
el.innerHTML = urls.map((url, idx) => `
|
||||
<div style="display:flex; gap:var(--space-sm); align-items:center; margin-top:${idx ? 'var(--space-xs)' : '0'};">
|
||||
<code id="${provider}PublicUrl${idx}" style="flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color: var(--text-secondary);">${escapeHTML(url)}</code>
|
||||
<div class="tunnel-url-row">
|
||||
<code id="${provider}PublicUrl${idx}">${escapeHTML(url)}</code>
|
||||
<button type="button" class="btn btn-secondary btn-sm" onclick="copyElementText('${provider}PublicUrl${idx}')">${_('copy')}</button>
|
||||
</div>
|
||||
`).join('');
|
||||
}
|
||||
|
||||
function setTunnelStatusPill(badge, { ok, info, text }) {
|
||||
if (!badge) return;
|
||||
badge.className = 'tunnel-status-pill' + (ok ? ' tunnel-status-pill--ok' : (info ? ' tunnel-status-pill--info' : ''));
|
||||
badge.textContent = text;
|
||||
}
|
||||
|
||||
function updateTunnelProvider(provider, status) {
|
||||
const badge = document.getElementById(`${provider}InstallBadge`);
|
||||
const text = document.getElementById(`${provider}TunnelBtnText`);
|
||||
const startBtn = document.getElementById(`${provider}TunnelBtn`);
|
||||
const stopBtn = document.getElementById(`${provider}StopBtn`);
|
||||
const deleteBtn = document.getElementById(`${provider}DeleteBtn`);
|
||||
const card = document.getElementById(`tunnelCard-${provider}`);
|
||||
if (!badge || !text) return;
|
||||
|
||||
badge.className = status.installed ? 'badge badge-success' : 'badge badge-secondary';
|
||||
badge.textContent = status.installed ? _('installed') : _('not_installed');
|
||||
text.textContent = status.running ? _('tunnel_running') : (status.installed ? _('tunnel_enable') : _('tunnel_install_enable'));
|
||||
if (startBtn) startBtn.disabled = !!status.running;
|
||||
if (stopBtn) stopBtn.classList.toggle('hidden', !status.running);
|
||||
const running = !!status.running;
|
||||
setTunnelStatusPill(badge, {
|
||||
ok: running,
|
||||
info: !running && status.installed,
|
||||
text: running ? _('tunnel_running') : (status.installed ? _('installed') : _('not_installed')),
|
||||
});
|
||||
text.textContent = running ? _('tunnel_running') : (status.installed ? _('tunnel_enable') : _('tunnel_install_enable'));
|
||||
if (startBtn) startBtn.disabled = running;
|
||||
if (stopBtn) stopBtn.classList.toggle('hidden', !running);
|
||||
if (deleteBtn) deleteBtn.classList.toggle('hidden', !status.installed);
|
||||
if (card) card.classList.toggle('tunnel-card--running', running);
|
||||
renderTunnelUrls(provider, status.public_urls || (status.public_url ? [status.public_url] : []));
|
||||
}
|
||||
|
||||
@@ -997,12 +1046,16 @@
|
||||
const connectBtn = document.getElementById('warpConnectBtn');
|
||||
const disconnectBtn = document.getElementById('warpDisconnectBtn');
|
||||
const connectText = document.getElementById('warpConnectBtnText');
|
||||
const card = document.getElementById('tunnelCard-warp');
|
||||
if (!badge || !statusText || !connectBtn || !disconnectBtn || !connectText) return;
|
||||
|
||||
const installed = !!status.installed;
|
||||
const connected = !!status.connected || status.status === 'connected';
|
||||
badge.className = connected ? 'badge badge-success' : (installed ? 'badge badge-info' : 'badge badge-secondary');
|
||||
badge.textContent = connected ? _('warp_connected') : (installed ? _('installed') : _('not_installed'));
|
||||
setTunnelStatusPill(badge, {
|
||||
ok: connected,
|
||||
info: !connected && installed,
|
||||
text: connected ? _('warp_connected') : (installed ? _('installed') : _('not_installed')),
|
||||
});
|
||||
|
||||
const statusKey = `warp_status_${status.status || 'unknown'}`;
|
||||
statusText.textContent = _(statusKey) || status.status || _('warp_status_unknown');
|
||||
@@ -1010,6 +1063,7 @@
|
||||
connectText.textContent = installed ? _('warp_connect') : _('warp_install_required');
|
||||
connectBtn.disabled = connected;
|
||||
disconnectBtn.classList.toggle('hidden', !connected);
|
||||
if (card) card.classList.toggle('tunnel-card--connected', connected);
|
||||
}
|
||||
|
||||
async function connectWarp() {
|
||||
@@ -1062,12 +1116,16 @@
|
||||
const connectBtn = document.getElementById('nordvpnConnectBtn');
|
||||
const disconnectBtn = document.getElementById('nordvpnDisconnectBtn');
|
||||
const connectText = document.getElementById('nordvpnConnectBtnText');
|
||||
const card = document.getElementById('tunnelCard-nordvpn');
|
||||
if (!badge || !statusText || !connectBtn || !disconnectBtn || !connectText) return;
|
||||
|
||||
const installed = !!status.installed;
|
||||
const connected = !!status.connected || status.status === 'connected';
|
||||
badge.className = connected ? 'badge badge-success' : (installed ? 'badge badge-info' : 'badge badge-secondary');
|
||||
badge.textContent = connected ? _('nordvpn_connected') : (installed ? _('installed') : _('not_installed'));
|
||||
setTunnelStatusPill(badge, {
|
||||
ok: connected,
|
||||
info: !connected && installed,
|
||||
text: connected ? _('nordvpn_connected') : (installed ? _('installed') : _('not_installed')),
|
||||
});
|
||||
|
||||
const statusKey = `nordvpn_status_${status.status || 'unknown'}`;
|
||||
statusText.textContent = _(statusKey) || status.status || _('nordvpn_status_unknown');
|
||||
@@ -1080,6 +1138,7 @@
|
||||
connectText.textContent = installed ? _('nordvpn_connect') : _('nordvpn_install_required');
|
||||
connectBtn.disabled = connected;
|
||||
disconnectBtn.classList.toggle('hidden', !connected);
|
||||
if (card) card.classList.toggle('tunnel-card--connected', connected);
|
||||
}
|
||||
|
||||
async function connectNordvpn() {
|
||||
|
||||
Reference in New Issue
Block a user