mirror of https://github.com/ospab/ostp.git
414 lines
15 KiB
JavaScript
414 lines
15 KiB
JavaScript
import { t, toggleLang, applyTranslations } from './i18n.js';
|
|
|
|
// ── Tauri invoke shim ────────────────────────────────────────────────────────
|
|
let invoke = () => Promise.resolve(null);
|
|
if (window.__TAURI__?.core) {
|
|
invoke = window.__TAURI__.core.invoke;
|
|
}
|
|
|
|
// ── State ────────────────────────────────────────────────────────────────────
|
|
let appState = 'disconnected'; // 'disconnected' | 'connecting' | 'connected'
|
|
let pollTimer = null;
|
|
let uptimeTimer = null;
|
|
let uptimeSecs = 0;
|
|
let rawConfig = null; // parsed config.json object
|
|
let serverAddr = ''; // current server address (for badge)
|
|
|
|
// ── DOM refs ─────────────────────────────────────────────────────────────────
|
|
const $ = id => document.getElementById(id);
|
|
|
|
const homeScreen = $('home-screen');
|
|
const settingsScreen = $('settings-screen');
|
|
const btnConnect = $('btn-connect');
|
|
const orbitWrap = $('orbit-wrap');
|
|
const brandDot = $('brand-dot');
|
|
const statusLabel = $('status-text');
|
|
const statusSub = $('uptime-text');
|
|
const serverBadge = $('server-badge');
|
|
const serverBadgeTxt = $('server-badge-text');
|
|
const metricDown = $('metric-down');
|
|
const metricUp = $('metric-up');
|
|
const metricMode = $('metric-mode');
|
|
const metricPing = $('metric-ping');
|
|
const pingIconBlock = $('ping-icon-block');
|
|
const toast = $('toast');
|
|
|
|
const btnGoSettings = $('btn-go-settings');
|
|
const btnBack = $('btn-back');
|
|
const btnLang = $('btn-lang');
|
|
const btnImport = $('btn-import-url');
|
|
const btnPeekKey = $('btn-peek-key');
|
|
const btnSave = $('btn-save-config');
|
|
const importInput = $('in-import-url');
|
|
const inServer = $('in-server');
|
|
const inKey = $('in-key');
|
|
const inSocks = $('in-socks');
|
|
const inDns = $('in-dns');
|
|
const inTransport = $('in-transport');
|
|
const inSni = $('in-stealth-sni');
|
|
const inPbk = $('in-pbk');
|
|
const inSid = $('in-sid');
|
|
const inMtu = $('in-mtu');
|
|
const inTun = $('in-tun-mode');
|
|
const inMux = $('in-mux-mode');
|
|
const inMuxSessions = $('in-mux-sessions');
|
|
const inDebug = $('in-debug');
|
|
const inDomains = $('in-ex-domains');
|
|
const inIps = $('in-ex-ips');
|
|
const inProcesses = $('in-ex-processes');
|
|
|
|
// ── Utilities ────────────────────────────────────────────────────────────────
|
|
function fmtBytes(b) {
|
|
if (!b || b === 0) return '0 B';
|
|
const units = ['B', 'KB', 'MB', 'GB', 'TB'];
|
|
const i = Math.min(Math.floor(Math.log2(b) / 10), 4);
|
|
return (b / Math.pow(1024, i)).toFixed(i === 0 ? 0 : 1) + ' ' + units[i];
|
|
}
|
|
|
|
function fmtTime(s) {
|
|
const h = Math.floor(s / 3600);
|
|
const m = Math.floor((s % 3600) / 60);
|
|
const sec = s % 60;
|
|
const pad = n => String(n).padStart(2, '0');
|
|
return h > 0
|
|
? `${h}:${pad(m)}:${pad(sec)}`
|
|
: `${pad(m)}:${pad(sec)}`;
|
|
}
|
|
|
|
function splitLines(val) {
|
|
return val.split('\n').map(l => l.trim()).filter(Boolean);
|
|
}
|
|
|
|
// ── Toast ────────────────────────────────────────────────────────────────────
|
|
let toastTimer = null;
|
|
function showToast(msg, variant = '') {
|
|
toast.textContent = msg;
|
|
toast.className = 'toast show' + (variant ? ' is-' + variant : '');
|
|
clearTimeout(toastTimer);
|
|
toastTimer = setTimeout(() => {
|
|
toast.classList.remove('show');
|
|
}, 2400);
|
|
}
|
|
|
|
// ── State machine ────────────────────────────────────────────────────────────
|
|
function setState(next) {
|
|
if (appState === next) return;
|
|
appState = next;
|
|
|
|
// Reset all dynamic classes
|
|
btnConnect.className = 'power-btn';
|
|
orbitWrap.className = 'orbit-wrap';
|
|
brandDot.className = 'brand-dot';
|
|
statusLabel.className = 'status-label';
|
|
|
|
if (next === 'disconnected') {
|
|
statusLabel.textContent = t('status_disconnected');
|
|
statusSub.textContent = t('hint_tap');
|
|
statusLabel.classList.add('');
|
|
serverBadge.classList.add('hidden');
|
|
metricDown.textContent = '0 B';
|
|
metricUp.textContent = '0 B';
|
|
metricMode.textContent = '—';
|
|
clearInterval(pollTimer);
|
|
clearInterval(uptimeTimer);
|
|
pollTimer = uptimeTimer = null;
|
|
uptimeSecs = 0;
|
|
|
|
} else if (next === 'connecting') {
|
|
btnConnect.classList.add('connecting');
|
|
orbitWrap.classList.add('connecting');
|
|
brandDot.classList.add('connecting');
|
|
statusLabel.classList.add('is-connecting');
|
|
statusLabel.textContent = t('status_connecting');
|
|
statusSub.textContent = t('hint_connecting');
|
|
serverBadge.classList.add('hidden');
|
|
clearInterval(uptimeTimer);
|
|
uptimeSecs = 0;
|
|
|
|
} else if (next === 'connected') {
|
|
btnConnect.classList.add('connected');
|
|
orbitWrap.classList.add('connected');
|
|
brandDot.classList.add('connected');
|
|
statusLabel.classList.add('is-connected');
|
|
statusLabel.textContent = t('status_connected');
|
|
|
|
// Show server badge
|
|
if (serverAddr) {
|
|
serverBadgeTxt.textContent = serverAddr;
|
|
serverBadge.classList.remove('hidden');
|
|
}
|
|
|
|
// Start uptime counter
|
|
if (!uptimeTimer) {
|
|
uptimeSecs = 0;
|
|
uptimeTimer = setInterval(() => {
|
|
uptimeSecs++;
|
|
statusSub.textContent = fmtTime(uptimeSecs);
|
|
}, 1000);
|
|
}
|
|
}
|
|
}
|
|
|
|
// ── Polling ──────────────────────────────────────────────────────────────────
|
|
async function poll() {
|
|
try {
|
|
const code = await invoke('get_tunnel_status');
|
|
if (code === 0) { setState('disconnected'); return; }
|
|
else if (code === 1) setState('connecting');
|
|
else if (code === 2) setState('connected');
|
|
|
|
const metrics = await invoke('get_metrics');
|
|
if (metrics) {
|
|
metricDown.textContent = fmtBytes(metrics.bytes_recv);
|
|
metricUp.textContent = fmtBytes(metrics.bytes_sent);
|
|
|
|
const isTun = rawConfig?.tun?.enable;
|
|
metricMode.textContent = isTun ? 'TUN' : 'SOCKS5';
|
|
|
|
const rtt = metrics.rtt_ms || 0;
|
|
if (rtt > 0) {
|
|
metricPing.textContent = rtt + ' ms';
|
|
// Color code: green < 80ms, yellow < 200ms, red >= 200ms
|
|
if (rtt < 80) {
|
|
metricPing.style.color = 'var(--ping-good, #4ade80)';
|
|
pingIconBlock.style.color = 'var(--ping-good, #4ade80)';
|
|
} else if (rtt < 200) {
|
|
metricPing.style.color = 'var(--ping-mid, #facc15)';
|
|
pingIconBlock.style.color = 'var(--ping-mid, #facc15)';
|
|
} else {
|
|
metricPing.style.color = 'var(--ping-bad, #f87171)';
|
|
pingIconBlock.style.color = 'var(--ping-bad, #f87171)';
|
|
}
|
|
} else {
|
|
metricPing.textContent = '— ms';
|
|
metricPing.style.color = '';
|
|
pingIconBlock.style.color = '';
|
|
}
|
|
}
|
|
} catch {
|
|
setState('disconnected');
|
|
}
|
|
}
|
|
|
|
function startPolling() {
|
|
clearInterval(pollTimer);
|
|
poll();
|
|
pollTimer = setInterval(poll, 1000);
|
|
}
|
|
|
|
// ── Connect / Disconnect ─────────────────────────────────────────────────────
|
|
async function handleToggle() {
|
|
if (appState === 'disconnected') {
|
|
// Read server address for badge before connecting
|
|
try {
|
|
const raw = await invoke('get_config');
|
|
const cfg = JSON.parse(raw);
|
|
serverAddr = cfg.server || '';
|
|
|
|
// Determine mode label
|
|
const isTun = cfg.tun?.enable;
|
|
metricMode.textContent = isTun ? 'TUN' : 'SOCKS5';
|
|
} catch { serverAddr = ''; }
|
|
|
|
setState('connecting');
|
|
|
|
try {
|
|
const ok = await invoke('start_tunnel');
|
|
if (ok) {
|
|
startPolling();
|
|
} else {
|
|
setState('disconnected');
|
|
showToast(t('toast_error') || 'Failed to connect', 'error');
|
|
}
|
|
} catch (err) {
|
|
setState('disconnected');
|
|
showToast(String(err), 'error');
|
|
}
|
|
} else {
|
|
try { await invoke('stop_tunnel'); } catch { /* ignore */ }
|
|
setState('disconnected');
|
|
showToast(t('toast_disconnected') || 'Disconnected');
|
|
}
|
|
}
|
|
|
|
// ── Screen navigation ────────────────────────────────────────────────────────
|
|
function showScreen(name) {
|
|
if (name === 'settings') {
|
|
loadConfigIntoForm();
|
|
homeScreen.classList.remove('active');
|
|
settingsScreen.classList.add('active');
|
|
} else {
|
|
settingsScreen.classList.remove('active');
|
|
homeScreen.classList.add('active');
|
|
}
|
|
}
|
|
|
|
// ── Config — load ─────────────────────────────────────────────────────────────
|
|
async function loadConfigIntoForm() {
|
|
try {
|
|
const raw = await invoke('get_config');
|
|
rawConfig = JSON.parse(raw);
|
|
const c = rawConfig.mode === 'client' ? rawConfig : null;
|
|
if (!c) return;
|
|
|
|
inServer.value = c.server || '';
|
|
inKey.value = c.access_key || '';
|
|
inSocks.value = c.socks5_bind || '127.0.0.1:1088';
|
|
inTransport.value = c.transport?.mode || 'udp';
|
|
inSni.value = c.transport?.stealth_sni || '';
|
|
inPbk.value = c.reality?.pbk || '';
|
|
inSid.value = c.reality?.sid || '';
|
|
inMtu.value = c.mtu || '';
|
|
inTun.checked = !!c.tun?.enable;
|
|
inMux.checked = !!c.mux?.enabled;
|
|
inMuxSessions.value = c.mux?.sessions || '';
|
|
inDns.value = c.tun?.dns || '';
|
|
inDebug.checked = !!c.debug;
|
|
|
|
const ex = c.exclude || {};
|
|
inDomains.value = (ex.domains || []).join('\n');
|
|
inIps.value = (ex.ips || []).join('\n');
|
|
inProcesses.value = (ex.processes || []).join('\n');
|
|
} catch (err) {
|
|
showToast(String(err), 'error');
|
|
}
|
|
}
|
|
|
|
// ── Config — save ─────────────────────────────────────────────────────────────
|
|
async function handleSave() {
|
|
if (!rawConfig) rawConfig = { mode: 'client', log_level: 'info' };
|
|
|
|
const server = inServer.value.trim();
|
|
const key = inKey.value.trim();
|
|
|
|
if (!server) { showToast(t('err_server_req') || 'Server address required', 'error'); return; }
|
|
if (!key) { showToast(t('err_key_req') || 'Access key required', 'error'); return; }
|
|
|
|
rawConfig.mode = 'client';
|
|
rawConfig.server = server;
|
|
rawConfig.access_key = key;
|
|
rawConfig.socks5_bind = inSocks.value.trim() || null;
|
|
rawConfig.debug = inDebug.checked;
|
|
|
|
rawConfig.transport = rawConfig.transport || {};
|
|
rawConfig.transport.mode = inTransport.value;
|
|
rawConfig.transport.stealth_sni = inSni.value.trim() || undefined;
|
|
|
|
const pbk = inPbk.value.trim();
|
|
if (pbk) {
|
|
rawConfig.reality = {
|
|
enabled: true,
|
|
dest: '',
|
|
private_key: '',
|
|
pbk: pbk,
|
|
sid: inSid.value.trim(),
|
|
sni_list: []
|
|
};
|
|
} else {
|
|
delete rawConfig.reality;
|
|
}
|
|
|
|
const mtuStr = inMtu.value.trim();
|
|
if (mtuStr) rawConfig.mtu = parseInt(mtuStr, 10);
|
|
else delete rawConfig.mtu;
|
|
|
|
if (inMux.checked) {
|
|
const s = parseInt(inMuxSessions.value.trim(), 10);
|
|
rawConfig.mux = { enabled: true, sessions: isNaN(s) ? 1 : s };
|
|
} else {
|
|
delete rawConfig.mux;
|
|
}
|
|
|
|
if (!rawConfig.tun) {
|
|
rawConfig.tun = { wintun_path: './wintun.dll', ipv4_address: '10.1.0.2/24' };
|
|
}
|
|
rawConfig.tun.enable = inTun.checked;
|
|
rawConfig.tun.dns = inDns.value.trim() || null;
|
|
|
|
rawConfig.exclude = {
|
|
domains: splitLines(inDomains.value),
|
|
ips: splitLines(inIps.value),
|
|
processes: splitLines(inProcesses.value),
|
|
};
|
|
|
|
try {
|
|
const ok = await invoke('save_config', { jsonContent: JSON.stringify(rawConfig, null, 2) });
|
|
if (ok) {
|
|
showToast(t('toast_saved'), 'ok');
|
|
setTimeout(() => showScreen('home'), 700);
|
|
} else {
|
|
showToast(t('toast_error'), 'error');
|
|
}
|
|
} catch (err) {
|
|
showToast(String(err), 'error');
|
|
}
|
|
}
|
|
|
|
// ── Import share link ─────────────────────────────────────────────────────────
|
|
function handleImport() {
|
|
const raw = importInput.value.trim();
|
|
if (!raw) return;
|
|
try {
|
|
if (!raw.startsWith('ostp://')) throw new Error('Link must start with ostp://');
|
|
const url = new URL(raw);
|
|
const key = decodeURIComponent(url.username);
|
|
const host = url.host;
|
|
if (!key || !host) throw new Error('Incomplete link parameters');
|
|
inServer.value = host;
|
|
inKey.value = key;
|
|
inSni.value = url.searchParams.get('sni') || '';
|
|
inPbk.value = url.searchParams.get('pbk') || '';
|
|
inSid.value = url.searchParams.get('sid') || '';
|
|
|
|
const type = url.searchParams.get('type');
|
|
if (type === 'tcp' || type === 'http') inTransport.value = 'uot';
|
|
else inTransport.value = 'udp';
|
|
|
|
importInput.value = '';
|
|
showToast(t('toast_imported'), 'ok');
|
|
} catch (err) {
|
|
showToast(err.message, 'error');
|
|
}
|
|
}
|
|
|
|
// ── Peek key ──────────────────────────────────────────────────────────────────
|
|
let peeking = false;
|
|
function togglePeek() {
|
|
peeking = !peeking;
|
|
inKey.type = peeking ? 'text' : 'password';
|
|
btnPeekKey.style.color = peeking
|
|
? 'var(--c-accent)'
|
|
: 'var(--c-txt-3)';
|
|
}
|
|
|
|
// ── Init ──────────────────────────────────────────────────────────────────────
|
|
window.addEventListener('DOMContentLoaded', async () => {
|
|
applyTranslations();
|
|
setState('disconnected');
|
|
|
|
// Event wiring
|
|
btnConnect.addEventListener('click', handleToggle);
|
|
btnGoSettings.addEventListener('click', () => showScreen('settings'));
|
|
btnBack.addEventListener('click', () => showScreen('home'));
|
|
btnSave.addEventListener('click', handleSave);
|
|
btnImport.addEventListener('click', handleImport);
|
|
btnPeekKey.addEventListener('click', togglePeek);
|
|
importInput.addEventListener('keydown', e => { if (e.key === 'Enter') handleImport(); });
|
|
|
|
btnLang.addEventListener('click', () => {
|
|
toggleLang();
|
|
// Refresh dynamic text without losing state
|
|
const cur = appState;
|
|
appState = '';
|
|
setState(cur);
|
|
document.getElementById('lang-label').textContent =
|
|
localStorage.getItem('ostp_lang') === 'ru' ? 'RU' : 'EN';
|
|
});
|
|
|
|
// Restore status on app open
|
|
try {
|
|
const code = await invoke('get_tunnel_status');
|
|
if (code > 0) startPolling();
|
|
} catch { /* not in Tauri context */ }
|
|
});
|