- import { ChevronRight, Eye, EyeOff, Search, X } from "$components/ui/icons.js";
+ import { ChevronRight, Eye, EyeOff, FileText, Search, X } from "$components/ui/icons.js";
import * as UiIcons from "$components/ui/icons.js";
import { Accordion, Switch } from "$components/ui/primitives.js";
import Dialog from "$components/ui/dialog.svelte";
@@ -123,6 +123,17 @@
closeIconPicker();
}
+ async function handleJsonFile(field, event) {
+ const file = event?.currentTarget?.files?.[0];
+ if (!file) return;
+ try {
+ const text = await file.text();
+ settingsStore.markDirty(field.key, text);
+ } finally {
+ event.currentTarget.value = "";
+ }
+ }
+
function groupSectionFields(section) {
const groups = new Map();
for (const field of section.fields || []) {
@@ -164,6 +175,7 @@
notifications: "Уведомления",
support: "Поддержка",
devices: "Устройства",
+ subscription_guides: "Connection guides",
};
return adminText(`settings_section_${id}`, {}, map[id] || id);
}
@@ -315,6 +327,41 @@
value={valueFor(field) ?? ""}
oninput={(e) => settingsStore.markDirty(field.key, e.currentTarget.value)}
>
+ {:else if field.type === "json"}
+
+
{:else if field.secret}
[
+ key,
+ {
+ ru: key === "installationGuideHeader" ? "Установка и настройка" : key,
+ en: key === "installationGuideHeader" ? "Install and configure" : key,
+ },
+ ])
+ ),
+ svgLibrary: {
+ App: '',
+ Copy: '',
+ Desktop: '',
+ Download: '',
+ Phone: '',
+ },
+ platforms: {
+ ios: {
+ displayName: "iOS",
+ svgIconKey: "Phone",
+ apps: [
+ {
+ name: "Streisand",
+ svgIconKey: "App",
+ featured: true,
+ blocks: [
+ {
+ svgIconKey: "Download",
+ svgIconColor: "green",
+ title: { ru: "Установите приложение", en: "Install the app" },
+ description: {
+ ru: "Откройте App Store и установите клиент.",
+ en: "Open the App Store and install the client.",
+ },
+ buttons: [
+ {
+ type: "external",
+ link: "https://apps.apple.com/app/streisand/id6450534064",
+ text: { ru: "Открыть App Store", en: "Open App Store" },
+ svgIconKey: "Download",
+ },
+ {
+ type: "subscriptionLink",
+ link: "streisand://import/{{SUBSCRIPTION_LINK}}",
+ text: { ru: "Импортировать", en: "Import" },
+ svgIconKey: "App",
+ },
+ {
+ type: "copyButton",
+ link: "{{SUBSCRIPTION_LINK}}",
+ text: { ru: "Скопировать ссылку", en: "Copy link" },
+ svgIconKey: "Copy",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ android: {
+ displayName: "Android",
+ svgIconKey: "Phone",
+ apps: [
+ {
+ name: "Happ",
+ svgIconKey: "App",
+ featured: true,
+ blocks: [
+ {
+ svgIconKey: "Download",
+ svgIconColor: "emerald",
+ title: { ru: "Установите Happ", en: "Install Happ" },
+ description: {
+ ru: "Загрузите приложение и добавьте подписку по ссылке.",
+ en: "Install the app and add the subscription link.",
+ },
+ buttons: [
+ {
+ type: "external",
+ link: "https://play.google.com/store/apps/details?id=com.happproxy",
+ text: { ru: "Открыть Google Play", en: "Open Google Play" },
+ svgIconKey: "Download",
+ },
+ {
+ type: "copyButton",
+ link: "{{SUBSCRIPTION_LINK}}",
+ text: { ru: "Скопировать ссылку", en: "Copy link" },
+ svgIconKey: "Copy",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ windows: {
+ displayName: "Windows",
+ svgIconKey: "Desktop",
+ apps: [
+ {
+ name: "Hiddify",
+ svgIconKey: "Desktop",
+ featured: true,
+ blocks: [
+ {
+ svgIconKey: "Download",
+ svgIconColor: "sky",
+ title: { ru: "Установите клиент", en: "Install the client" },
+ description: {
+ ru: "Скачайте приложение и импортируйте ссылку подписки.",
+ en: "Download the client and import the subscription link.",
+ },
+ buttons: [
+ {
+ type: "external",
+ link: "https://github.com/hiddify/hiddify-app/releases",
+ text: { ru: "Открыть релизы", en: "Open releases" },
+ svgIconKey: "Download",
+ },
+ {
+ type: "copyButton",
+ link: "{{SUBSCRIPTION_LINK}}",
+ text: { ru: "Скопировать ссылку", en: "Copy link" },
+ svgIconKey: "Copy",
+ },
+ ],
+ },
+ ],
+ },
+ ],
+ },
+ },
+};
+
export const DEV_MOCK = {
config: {
title: "/minishop",
@@ -103,6 +275,8 @@ export const DEV_MOCK = {
days_left: 25,
config_link: "https://sub.example.com/sub/preview-token",
connect_url: "https://sub.example.com/connect/preview-token",
+ panel_short_uuid: "preview-token",
+ install_share_url: "https://app.example.com/install/share/preview-token",
traffic_used: "18.4 GB",
traffic_limit: "100 GB",
traffic_used_bytes: 19756849561,
@@ -120,6 +294,12 @@ export const DEV_MOCK = {
can_topup_premium_traffic: true,
max_devices: 5,
},
+ subscription_guides: {
+ ok: true,
+ enabled: true,
+ config: INSTALL_GUIDES_CONFIG,
+ source: "mock",
+ },
devices: {
ok: true,
enabled: true,
@@ -227,6 +407,7 @@ export const DEV_MOCK = {
trial_traffic_strategy: "NO_RESET",
subscription_purchase_description:
"Покупая или продлевая подписку, вы получаете доступ к VPN/прокси-сервису, который помогает защищать ваше соединение и поддерживать стабильный доступ к сети.",
+ subscription_guides_enabled: true,
email_auth_enabled: true,
},
},
@@ -250,6 +431,16 @@ export function applyPreviewMock(kind) {
return;
}
+ if (mode === "guides" || mode === "install") {
+ DEV_MOCK.data.settings.subscription_guides_enabled = true;
+ DEV_MOCK.data.subscription_guides = {
+ ...DEV_MOCK.data.subscription_guides,
+ enabled: true,
+ config: INSTALL_GUIDES_CONFIG,
+ };
+ return;
+ }
+
if (mode === "traffic") {
DEV_MOCK.data.settings.traffic_mode = true;
DEV_MOCK.data.settings.trial_available = false;
diff --git a/frontend/src/lib/webapp/routes.js b/frontend/src/lib/webapp/routes.js
index ed0647b..1a1e2a5 100644
--- a/frontend/src/lib/webapp/routes.js
+++ b/frontend/src/lib/webapp/routes.js
@@ -6,6 +6,7 @@ export function normalizeSection(value) {
.toLowerCase();
if (
section === "invite" ||
+ section === "install" ||
section === "devices" ||
section === "support" ||
section === "settings" ||
@@ -28,6 +29,12 @@ export function sectionFromPath(pathname) {
return normalizeSection(section);
}
+export function publicInstallShortUuidFromPath(pathname) {
+ const normalized = String(pathname || "").trim().replace(/\/+$/, "");
+ const match = normalized.match(/^\/install\/share\/([A-Za-z0-9_-]{8,128})$/);
+ return match ? match[1] : "";
+}
+
export function adminSectionFromPath(pathname) {
const normalized = String(pathname || "")
.toLowerCase()
diff --git a/frontend/src/lib/webapp/stores/installGuidesStore.js b/frontend/src/lib/webapp/stores/installGuidesStore.js
new file mode 100644
index 0000000..f18ae7d
--- /dev/null
+++ b/frontend/src/lib/webapp/stores/installGuidesStore.js
@@ -0,0 +1,91 @@
+import { writable } from "svelte/store";
+
+export function createInstallGuidesStore({ api, t, showToast }) {
+ let inFlight = null;
+ const state = writable({
+ enabled: false,
+ config: null,
+ source: null,
+ subscription: null,
+ error: "",
+ loading: false,
+ loaded: false,
+ });
+
+ async function fetchGuides(path, force = false) {
+ if (inFlight?.path === path) return inFlight.promise;
+ let snapshot;
+ state.update((s) => {
+ snapshot = s;
+ return s;
+ });
+ if (!force && snapshot?.loaded) return snapshot;
+ const promise = (async () => {
+ state.update((s) => ({ ...s, loading: true, error: "" }));
+ try {
+ const response = await api(path);
+ const next = {
+ enabled: Boolean(response?.enabled),
+ config: response?.config || null,
+ source: response?.source || null,
+ subscription: response?.subscription || null,
+ error: response?.error || "",
+ loading: false,
+ loaded: true,
+ };
+ state.set(next);
+ return next;
+ } catch (error) {
+ const message =
+ error?.message || t("wa_install_unavailable", {}, "Instructions unavailable");
+ if (typeof showToast === "function") showToast(message);
+ const next = {
+ enabled: false,
+ config: null,
+ source: null,
+ subscription: null,
+ error: message,
+ loading: false,
+ loaded: true,
+ };
+ state.set(next);
+ return next;
+ } finally {
+ inFlight = null;
+ }
+ })();
+ inFlight = { path, promise };
+ return promise;
+ }
+
+ async function load(force = false) {
+ return fetchGuides("/subscription-guides", force);
+ }
+
+ async function loadPublic(shortUuid, force = false) {
+ const encoded = encodeURIComponent(String(shortUuid || ""));
+ return fetchGuides(`/subscription-guides/public/${encoded}`, force);
+ }
+
+ function reset() {
+ inFlight = null;
+ state.set({
+ enabled: false,
+ config: null,
+ source: null,
+ subscription: null,
+ error: "",
+ loading: false,
+ loaded: false,
+ });
+ }
+
+ return {
+ subscribe: state.subscribe,
+ set: state.set,
+ update: state.update,
+ load,
+ loadPublic,
+ reset,
+ };
+}
diff --git a/frontend/src/styles/admin-controls.css b/frontend/src/styles/admin-controls.css
index 15db751..f3c9dda 100644
--- a/frontend/src/styles/admin-controls.css
+++ b/frontend/src/styles/admin-controls.css
@@ -233,6 +233,31 @@
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
+.admin-setting-control .admin-setting-json-textarea {
+ min-height: 240px;
+ font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
+}
+
+.admin-json-toolbar {
+ display: flex;
+ flex: 1 1 100%;
+ align-items: center;
+ gap: 8px;
+}
+
+.admin-json-file-input {
+ position: absolute;
+ width: 1px;
+ height: 1px;
+ overflow: hidden;
+ clip: rect(0 0 0 0);
+ white-space: nowrap;
+}
+
+.admin-json-upload {
+ cursor: pointer;
+}
+
.admin-btn.admin-btn-icon {
width: 30px;
height: 30px;
diff --git a/frontend/src/styles/webapp.css b/frontend/src/styles/webapp.css
index efa4b92..1d8f1e9 100644
--- a/frontend/src/styles/webapp.css
+++ b/frontend/src/styles/webapp.css
@@ -26,6 +26,33 @@ a {
padding-bottom: 86px;
}
+.public-install-shell {
+ width: min(100%, 440px);
+ min-height: 100dvh;
+ margin: 0 auto;
+ overflow-x: hidden;
+ padding: max(16px, env(safe-area-inset-top)) max(var(--screen-gutter), var(--safe-inline))
+ max(18px, env(safe-area-inset-bottom)) max(var(--screen-gutter), var(--safe-inline));
+}
+
+.public-install-brand {
+ display: flex;
+ align-items: center;
+ gap: 10px;
+ width: 100%;
+ min-height: 48px;
+ box-sizing: border-box;
+ padding: 0 16px;
+ color: var(--text);
+ text-decoration: none;
+}
+
+.public-install-brand strong {
+ color: var(--accent);
+ font-size: 15px;
+ line-height: 1.2;
+}
+
.loader {
display: grid;
min-height: 100dvh;
@@ -2214,6 +2241,26 @@ a {
margin-right: auto;
}
+ .public-install-shell {
+ width: auto;
+ max-width: none;
+ min-height: 100dvh;
+ margin: 0;
+ overflow-x: visible;
+ padding: max(28px, env(safe-area-inset-top)) var(--desktop-page-gutter) 40px;
+ }
+
+ .public-install-shell > .public-install-brand,
+ .public-install-shell > main {
+ max-width: 1080px;
+ margin-left: auto;
+ margin-right: auto;
+ }
+
+ .public-install-shell > .public-install-brand {
+ width: min(100%, 1080px);
+ }
+
/* Auth screen: keep it as a focused card in the centre, hide rail. */
.phone-screen.auth-screen {
width: min(100%, 460px);
diff --git a/frontend/src/webapp/WebAppShell.svelte b/frontend/src/webapp/WebAppShell.svelte
index 6ae4f7b..27c5bfe 100644
--- a/frontend/src/webapp/WebAppShell.svelte
+++ b/frontend/src/webapp/WebAppShell.svelte
@@ -23,7 +23,7 @@
- {#if screen === "invite" || screen === "devices" || screen === "support" || screen === "settings"}
+ {#if screen === "install" || screen === "invite" || screen === "devices" || screen === "support" || screen === "settings"}
+