const API_BASE = "https://spectralvpn.ru:8500";
const getCookie = (name) => {
const match = document.cookie.match(new RegExp('(^| )' + name + '=([^;]+)'));
return match ? decodeURIComponent(match[2]) : null;
};
const deleteCookie = (name) => {
document.cookie = `${name}=; path=/; expires=Thu, 01 Jan 1970 00:00:00 GMT; Secure; SameSite=Strict`;
};
const sha256 = async (str) => {
const buf = new TextEncoder().encode(str);
const hash = await crypto.subtle.digest("SHA-256", buf);
return Array.from(new Uint8Array(hash)).map(b => b.toString(16).padStart(2, "0")).join("");
};
const showNotification = (text, color = "cyan") => {
const notification = document.createElement("div");
notification.textContent = text;
notification.style.cssText = `
position: fixed; top: 20px; right: 20px; padding: 15px 25px; border-radius: 12px;
z-index: 9999; font-weight: 600; background: ${color === "cyan" ? "#00ffff22" : "#ff444422"};
color: ${color}; border: 1px solid ${color === "cyan" ? "cyan" : "#f66"};
`;
document.body.appendChild(notification);
setTimeout(() => notification.remove(), 3000);
};
let currentEmail = null;
let currentHash = null;
const modal = document.getElementById("loginModal");
const showModal = () => modal.classList.add("active");
const hideModal = () => modal.classList.remove("active");
const showLoginError = (msg) => {
document.getElementById("loginError").textContent = msg;
};
const renderUrls = (urls) => {
const container = document.getElementById("urlsList");
container.innerHTML = "";
if (urls.length === 0) {
container.innerHTML = "
У вас пока нет конфигураций
";
return;
}
urls.forEach(name => {
const card = document.createElement("div");
card.className = "url-card";
card.innerHTML = `
`;
card.querySelector(".btn-copy").onclick = async () => {
try {
const url = `${API_BASE}/get_url?email=${encodeURIComponent(currentEmail)}&password=${encodeURIComponent(currentHash)}&urls_name=${encodeURIComponent(name)}`;
const res = await fetch(url);
const data = await res.json();
if (res.ok && data.url) {
await navigator.clipboard.writeText(data.url);
showNotification(`Конфиг "${name}" скопирован!`);
} else {
showNotification("Ошибка получения конфига", "red");
}
} catch (e) {
showNotification("Нет связи с сервером", "red");
}
};
card.querySelector(".btn-delete").onclick = async () => {
if (!confirm(`Удалить конфиг "${name}"?`)) return;
try {
const url = `${API_BASE}/del_url?email=${encodeURIComponent(currentEmail)}&password=${encodeURIComponent(currentHash)}&urls_name=${encodeURIComponent(name)}`;
const res = await fetch(url, { method: "DELETE" });
if (res.ok) {
card.remove();
showNotification(`Конфиг "${name}" удалён`, "red");
} else {
showNotification("Не удалось удалить", "red");
}
} catch (e) {
showNotification("Ошибка сети", "red");
}
};
container.appendChild(card);
});
};
const tryAutoLogin = async () => {
currentEmail = getCookie("user_email");
currentHash = getCookie("user_hash");
if (!currentEmail || !currentHash) {
showModal();
return;
}
try {
const res = await fetch(`${API_BASE}/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email: currentEmail, password: currentHash })
});
if (res.ok) {
const data = await res.json();
document.getElementById("userEmail").textContent = currentEmail;
document.getElementById("mainContent").classList.remove("hidden");
renderUrls(data.urls || []);
} else {
deleteCookie("user_email");
deleteCookie("user_hash");
showModal();
}
} catch (e) {
showModal();
}
};
document.getElementById("loginSubmit").onclick = async () => {
const email = document.getElementById("loginEmail").value.trim();
const pass = document.getElementById("loginPassword").value;
if (!email || !pass) {
showLoginError("Заполните все поля");
return;
}
const hash = await sha256(pass);
try {
const res = await fetch(`${API_BASE}/login`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ email, password: hash })
});
const data = await res.json();
if (res.ok) {
currentEmail = email;
currentHash = hash;
document.cookie = `user_email=${encodeURIComponent(email)}; path=/; max-age=2592000; Secure; SameSite=Strict`;
document.cookie = `user_hash=${hash}; path=/; max-age=2592000; Secure; SameSite=Strict`;
document.getElementById("userEmail").textContent = email;
hideModal();
document.getElementById("mainContent").classList.remove("hidden");
renderUrls(data.urls || []);
} else {
showLoginError("Неверный email или пароль");
}
} catch (e) {
showLoginError("Ошибка подключения");
}
};
document.getElementById("addUrlBtn").onclick = async () => {
const name = prompt("Введите название конфигурации:");
if (!name?.trim()) return;
try {
const res = await fetch(`${API_BASE}/add_url`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({
email: currentEmail,
password: currentHash,
urls_name: name.trim()
})
});
const data = await res.json();
if (res.ok) {
renderUrls(data.urls);
showNotification(`Конфиг "${name}" создан! Скопируйте через кнопку.`);
} else {
showNotification("Ошибка: " + (data.detail || "неизвестно"), "red");
}
} catch (e) {
showNotification("Нет связи с сервером", "red");
}
};
document.getElementById("logoutBtn").onclick = () => {
deleteCookie("user_email");
deleteCookie("user_hash");
location.reload();
};
document.getElementById("closeModal").onclick = hideModal;
tryAutoLogin();
document.querySelectorAll('.tab-btn').forEach(btn => {
btn.addEventListener('click', () => {
document.querySelectorAll('.tab-btn').forEach(b => b.classList.remove('active'));
btn.classList.add('active');
document.querySelectorAll('.instructions').forEach(el => el.classList.add('hidden'));
const platform = btn.dataset.platform;
const target = document.getElementById(`${platform}-instructions`);
if (target) {
target.classList.remove('hidden');
}
});
});
document.addEventListener('DOMContentLoaded', () => {});