Initial commit

awg-ui/src/tabs/apikeys/apikeys.css

@@ -0,0 +1,72 @@
+/* Стили вкладки «API-ключи». Общая дизайн-система — в App.css. */
+
+/* Открытый API-ключ (показывается один раз при создании) */
+.apikey-value {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--on-surface);
+    background: var(--surface-container);
+    border: 1px solid var(--outline-variant);
+    border-radius: 12px;
+    padding: 12px 14px;
+    width: 100%;
+    word-break: break-all;
+    user-select: all;
+}
+
+.apikey-cards-list { display: none; flex-direction: column; gap: 12px; }
+
+.apikey-count { font-size: 12px; color: var(--neutral-text); }
+.apikey-empty {
+    font-size: 14px;
+    color: var(--neutral-text);
+    text-align: center;
+    padding: 48px 0;
+}
+.apikey-card {
+    background: var(--surface-bright);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--r-card);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.apikey-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.apikey-card-title {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+}
+.apikey-card-num   { font-size: 12px; color: var(--neutral-dot); flex-shrink: 0; }
+.apikey-card-label {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--on-surface);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.apikey-card-prefix {
+    font-family: var(--mono);
+    font-size: 13px;
+    color: var(--neutral-text);
+    word-break: break-all;
+}
+.apikey-card-meta {
+    display: flex;
+    justify-content: space-between;
+    gap: 8px;
+    font-size: 12px;
+    color: var(--neutral-text);
+}
+
+@media (max-width: 640px) {
+    .apikey-cards-list { display: flex; }
+}

awg-ui/src/tabs/apikeys/index.tsx

@@ -0,0 +1,145 @@
+import { useState, useEffect, useCallback } from 'react';
+import { apiFetch, copyText, timeAgo, type ApiKey, type PageProps } from '../../lib/shared';
+import { IcoPlus, IcoTrash, IcoCopy } from '../../components/icons';
+import './apikeys.css';
+
+// Вкладка «API-ключи»: ключи внешнего API (/api/v1). Открытый ключ показывается
+// один раз при создании (в БД хранится только хэш). Сервер-бар сверху рендерит App.
+//   TODO multi-server: сейчас сервер один (server_id = 0). Когда появится список
+//   серверов — ключ будет привязываться к выбранному в сервер-баре.
+export default function ApiKeysPage({ token, showMsg }: PageProps) {
+    const [keys, setKeys]       = useState<ApiKey[]>([]);
+    const [label, setLabel]     = useState('');
+    const [created, setCreated] = useState<{ label: string; key: string } | null>(null);
+
+    const load = useCallback(async () => {
+        try {
+            const data = await apiFetch('GET', '/ui/apikeys', token);
+            setKeys(data.keys ?? []);
+        } catch {
+            showMsg('Ошибка загрузки ключей');
+        }
+    }, [token, showMsg]);
+
+    const createKey = useCallback(async () => {
+        if (!label.trim()) return;
+        const r = await apiFetch('POST', '/ui/apikeys', token, { label: label.trim(), server_id: 0 });
+        if (r.error) { showMsg(r.error); return; }
+        setLabel('');
+        setCreated({ label: r.label, key: r.key });
+        await load();
+    }, [label, token, load, showMsg]);
+
+    const deleteKey = useCallback(async (id: number, lbl: string) => {
+        if (!confirm('Удалить ключ «' + lbl + '»? Клиенты с ним потеряют доступ.')) return;
+        await apiFetch('DELETE', '/ui/apikeys/' + id, token);
+        showMsg('Ключ удалён: ' + lbl);
+        await load();
+    }, [token, load, showMsg]);
+
+    useEffect(() => { if (token) load(); }, [token, load]);
+
+    return (
+        <>
+            {/* Сервер-бар сверху рендерит App; к выбранному в нём серверу и привязывается ключ.
+                TODO multi-server: server_id берётся из выбранной карточки (пока 0). */}
+            <div className="toolbar">
+                <input
+                    className="field"
+                    placeholder="Метка ключа (напр. ci-bot)"
+                    value={label}
+                    onChange={e => setLabel(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && createKey()}
+                />
+                <div className="toolbar-btns">
+                    <button className="btn btn--primary" onClick={createKey}>
+                        <IcoPlus /> Создать ключ
+                    </button>
+                </div>
+            </div>
+
+            <div className="table-card">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Метка</th>
+                            <th>Ключ</th>
+                            <th>Создан</th>
+                            <th>Последний раз</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {keys.length === 0 ? (
+                            <tr><td colSpan={6} className="empty">Нет ключей</td></tr>
+                        ) : keys.map((k, i) => (
+                            <tr key={k.id}>
+                                <td className="td-num">{i + 1}</td>
+                                <td>{k.label}</td>
+                                <td className="td-mono">{k.prefix}</td>
+                                <td>{new Date(k.created_at * 1000).toLocaleDateString()}</td>
+                                <td>{k.last_used ? timeAgo(k.last_used) + ' назад' : 'никогда'}</td>
+                                <td className="td-actions">
+                                    <div className="actions">
+                                        <button
+                                            className="btn-icon btn-icon--danger"
+                                            title="Удалить ключ"
+                                            onClick={() => deleteKey(k.id, k.label)}
+                                        ><IcoTrash /></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            {/* Мобильный вид: таблица скрыта (.table-card), ключи — карточками */}
+            <div className="apikey-cards-list">
+                <p className="apikey-count">{keys.length} ключей</p>
+                {keys.length === 0 ? (
+                    <p className="apikey-empty">Нет ключей</p>
+                ) : keys.map((k, i) => (
+                    <div className="apikey-card" key={k.id}>
+                        <div className="apikey-card-header">
+                            <div className="apikey-card-title">
+                                <span className="apikey-card-num">#{i + 1}</span>
+                                <span className="apikey-card-label">{k.label}</span>
+                            </div>
+                            <button
+                                className="btn btn--danger btn--sq"
+                                aria-label="Удалить ключ"
+                                onClick={() => deleteKey(k.id, k.label)}
+                            ><IcoTrash /></button>
+                        </div>
+                        <code className="apikey-card-prefix">{k.prefix}</code>
+                        <div className="apikey-card-meta">
+                            <span>Создан {new Date(k.created_at * 1000).toLocaleDateString()}</span>
+                            <span>{k.last_used ? timeAgo(k.last_used) + ' назад' : 'не использован'}</span>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {created && (
+                <div className="qr-backdrop" onClick={() => setCreated(null)}>
+                    <div className="qr-card" onClick={e => e.stopPropagation()}>
+                        <p className="qr-name">Ключ «{created.label}» создан</p>
+                        <p className="qr-hint">
+                            Скопируй ключ сейчас — он показывается один раз и больше не будет доступен.
+                        </p>
+                        <code className="apikey-value">{created.key}</code>
+                        <div className="qr-actions">
+                            <button className="btn btn--primary" onClick={async () => {
+                                await copyText(created.key);
+                                showMsg('Ключ скопирован');
+                            }}><IcoCopy /> Скопировать</button>
+                            <button className="btn btn--tonal" onClick={() => setCreated(null)}>Закрыть</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

awg-ui/src/tabs/apikeys/metadata.json

@@ -0,0 +1,6 @@
+{
+  "id": "apikeys",
+  "label": "API-ключи",
+  "icon": "key",
+  "order": 2
+}

awg-ui/src/tabs/index.ts

@@ -0,0 +1,88 @@
+// Автообнаружение вкладок. Каждая вкладка — самодостаточная папка tabs/<name>/:
+//   index.tsx      — компонент + логика
+//   <name>.css     — стили вкладки (импортит сам компонент)
+//   metadata.json  — { id, label, icon, order?, chrome? } (манифест: описание + порядок)
+// Реестр сам находит все папки через import.meta.glob и собирает «живые» части
+// (Page-компонент, Icon по имени из ICONS) к метадате. Добавить вкладку = просто
+// создать папку с index.tsx и metadata.json — этот файл трогать НЕ нужно.
+//   metadata.json НЕ проверяется компилятором (это JSON), поэтому содержимое
+//   валидируется здесь в рантайме — кривой/неполный манифест падает с внятной
+//   ошибкой при сборке TABS, а не «тихо» в UI.
+import type { ComponentType } from 'react';
+import type { PageProps } from '../lib/shared';
+import { ICONS } from '../components/icons';
+
+// Видимость общего хрома (сервер-бар) для вкладки. Любой флаг по умолчанию true.
+export interface TabChrome {
+    serverBar?: boolean;
+    addServer?: boolean;
+    restart?:   boolean;
+}
+
+// Сериализуемая часть из metadata.json.
+export interface TabMeta {
+    id:      string;
+    label:   string;
+    icon:    string;     // имя иконки → ICONS
+    order?:  number;     // порядок в меню (по возрастанию; без него — 0)
+    chrome?: TabChrome;
+}
+
+// Собранная вкладка: метадата + резолвнутые Icon и Page.
+export interface TabDef extends TabMeta {
+    Icon: () => JSX.Element;
+    Page: ComponentType<PageProps>;
+}
+
+const metas = import.meta.glob<{ default: unknown }>('./*/metadata.json', { eager: true });
+const pages = import.meta.glob<{ default: ComponentType<PageProps> }>('./*/index.tsx', { eager: true });
+
+// './users/metadata.json' → 'users'
+const folderOf = (path: string) => path.split('/')[1];
+
+// Валидация сырого metadata.json → типизированный TabMeta (или внятная ошибка).
+function toMeta(name: string, raw: unknown): TabMeta {
+    const m = (raw ?? {}) as Record<string, unknown>;
+    const str = (key: string): string => {
+        const v = m[key];
+        if (typeof v !== 'string' || v.trim() === '') {
+            throw new Error(`tabs/${name}/metadata.json: поле "${key}" должно быть непустой строкой`);
+        }
+        return v;
+    };
+    if (m.order !== undefined && typeof m.order !== 'number') {
+        throw new Error(`tabs/${name}/metadata.json: "order" должно быть числом`);
+    }
+    if (m.chrome !== undefined && (typeof m.chrome !== 'object' || m.chrome === null)) {
+        throw new Error(`tabs/${name}/metadata.json: "chrome" должно быть объектом`);
+    }
+    return {
+        id:     str('id'),
+        label:  str('label'),
+        icon:   str('icon'),
+        order:  m.order as number | undefined,
+        chrome: m.chrome as TabChrome | undefined,
+    };
+}
+
+export const TABS: TabDef[] = Object.entries(metas)
+    .map(([path, mod]) => {
+        const name = folderOf(path);
+        const meta = toMeta(name, mod.default);
+        const page = pages[`./${name}/index.tsx`]?.default;
+        if (!page) {
+            throw new Error(`tabs/${name}: нет index.tsx рядом с metadata.json`);
+        }
+        if (!ICONS[meta.icon]) {
+            throw new Error(`tabs/${name}: иконка "${meta.icon}" не зарегистрирована в ICONS (components/icons.tsx)`);
+        }
+        return { ...meta, Icon: ICONS[meta.icon], Page: page };
+    })
+    .sort((a, b) => (a.order ?? 0) - (b.order ?? 0));
+
+// id вкладок используются как ключ активной вкладки — дубли ломают переключение.
+const ids = TABS.map(t => t.id);
+const dup = ids.find((id, i) => ids.indexOf(id) !== i);
+if (dup) {
+    throw new Error(`tabs: дублирующийся id "${dup}" — id вкладок должны быть уникальны`);
+}

awg-ui/src/tabs/users/index.tsx

@@ -0,0 +1,230 @@
+import { useState, useEffect, useRef, useCallback } from 'react';
+import QRCode from 'qrcode';
+import {
+    apiFetch, vpnKeyToConf, downloadFile, copyText, bytes, timeAgo,
+    type User, type PageProps,
+} from '../../lib/shared';
+import { IcoPlus, IcoRefresh, IcoQR, IcoTrash, IcoGlobe } from '../../components/icons';
+import './users.css';
+
+// Вкладка «Пользователи»: форма создания + таблица (десктоп) / карточки (мобильный)
+// + модалка QR. Сервер-бар сверху рендерит App. Свой стейт и поллинг — здесь.
+export default function UsersPage({ token, showMsg }: PageProps) {
+    const [users, setUsers]     = useState<User[]>([]);
+    const [newName, setNewName] = useState('');
+    const [qrModal, setQrModal] = useState<{ name: string; dataUrl: string; vpnKey: string } | null>(null);
+    const statsRef              = useRef<ReturnType<typeof setInterval> | null>(null);
+
+    const loadStats = useCallback(async (tok: string) => {
+        try {
+            const data = await apiFetch('GET', '/api/users/stats', tok);
+            setUsers(prev => prev.map(u => {
+                const s = (data.users as User[] ?? []).find(x => x.name === u.name);
+                return s ? { ...u, online: s.online, lastHandshake: s.lastHandshake, rx: s.rx, tx: s.tx } : u;
+            }));
+        } catch { /* silent */ }
+    }, []);
+
+    const loadUsers = useCallback(async (tok: string) => {
+        try {
+            const data = await apiFetch('GET', '/api/users', tok);
+            setUsers(data.users ?? []);
+            await loadStats(tok);
+        } catch {
+            showMsg('Ошибка загрузки');
+        }
+    }, [loadStats, showMsg]);
+
+    const createUser = useCallback(async () => {
+        if (!newName) return;
+        const u = await apiFetch('POST', '/api/users', token, { name: newName });
+        if (u.error) { showMsg(u.error); return; }
+        setNewName('');
+        showMsg('Создан: ' + newName);
+        await loadUsers(token);
+    }, [newName, token, loadUsers, showMsg]);
+
+    const deleteUser = useCallback(async (name: string) => {
+        if (!confirm('Удалить ' + name + '?')) return;
+        await apiFetch('DELETE', '/api/users/' + name, token);
+        showMsg('Удалён: ' + name);
+        await loadUsers(token);
+    }, [token, loadUsers, showMsg]);
+
+    const showQR = useCallback(async (name: string) => {
+        try {
+            const u       = await apiFetch('POST', '/api/users/' + name, token);
+            const vpnKey  = u.vpn_key ?? '';
+            // errorCorrectionLevel 'L' (а не 'H'): ключ vpn:// длинный (~1.3 КБ),
+            // при 'H' ёмкость QR падает до ~1273 байт и кодирование падает.
+            const dataUrl = await QRCode.toDataURL(vpnKey, {
+                width: 560,
+                margin: 2,
+                errorCorrectionLevel: 'L',
+            });
+            setQrModal({ name, dataUrl, vpnKey });
+        } catch {
+            showMsg('Не удалось сгенерировать QR-код');
+        }
+    }, [token, showMsg]);
+
+    // Загрузить пользователей и запустить поллинг статистики, пока вкладка открыта.
+    useEffect(() => {
+        if (!token) return;
+        loadUsers(token);
+        statsRef.current = setInterval(() => loadStats(token), 60_000);
+        return () => { if (statsRef.current) clearInterval(statsRef.current); };
+    }, [token, loadUsers, loadStats]);
+
+    return (
+        <>
+            <div className="toolbar">
+                <input
+                    className="field"
+                    placeholder="Имя пользователя"
+                    value={newName}
+                    onChange={e => setNewName(e.target.value)}
+                    onKeyDown={e => e.key === 'Enter' && createUser()}
+                />
+                <div className="toolbar-btns">
+                    <button className="btn btn--primary" onClick={createUser}>
+                        <IcoPlus /> Создать
+                    </button>
+                    <button className="btn btn--tonal" onClick={() => loadUsers(token)}>
+                        <IcoRefresh /> Обновить
+                    </button>
+                </div>
+            </div>
+
+            <div className="table-card">
+                <table>
+                    <thead>
+                        <tr>
+                            <th>#</th>
+                            <th>Статус</th>
+                            <th>Имя</th>
+                            <th>IP</th>
+                            <th>↓ rx</th>
+                            <th>↑ tx</th>
+                            <th></th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {users.length === 0 ? (
+                            <tr><td colSpan={7} className="empty">Нет пользователей</td></tr>
+                        ) : users.map((u, i) => (
+                            <tr key={u.name}>
+                                <td className="td-num">{i + 1}</td>
+                                <td>
+                                    <span className={`chip chip--${u.online ? 'online' : 'offline'}`}>
+                                        <span className="chip-dot" />
+                                        {u.online
+                                            ? 'онлайн'
+                                            : u.lastHandshake
+                                                ? timeAgo(u.lastHandshake) + ' назад'
+                                                : 'никогда'}
+                                    </span>
+                                </td>
+                                <td>{u.name}</td>
+                                <td className="td-mono">{u.ip}</td>
+                                <td>{bytes(u.rx)}</td>
+                                <td>{bytes(u.tx)}</td>
+                                <td className="td-actions">
+                                    <div className="actions">
+                                        <button
+                                            className="btn-icon"
+                                            title="QR-код vpn://"
+                                            onClick={() => showQR(u.name)}
+                                        ><IcoQR /></button>
+                                        <button
+                                            className="btn-icon btn-icon--danger"
+                                            title="Удалить"
+                                            onClick={() => deleteUser(u.name)}
+                                        ><IcoTrash /></button>
+                                    </div>
+                                </td>
+                            </tr>
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+
+            <div className="user-cards-list">
+                <p className="users-count">{users.length} пользователей</p>
+                {users.length === 0 ? (
+                    <p className="empty-cards">Нет пользователей</p>
+                ) : users.map((u, i) => (
+                    <div className="user-card" key={u.name}>
+                        <div className="user-card-header">
+                            <div className="user-card-title">
+                                <span className="user-card-num">#{i + 1}</span>
+                                <span className="user-card-name">{u.name}</span>
+                            </div>
+                            <span className={`chip chip--${u.online ? 'online' : 'offline'}`}>
+                                <span className="chip-dot" />
+                                {u.online
+                                    ? 'онлайн'
+                                    : u.lastHandshake
+                                        ? timeAgo(u.lastHandshake) + ' назад'
+                                        : 'никогда'}
+                            </span>
+                        </div>
+                        <div className="user-card-ip">
+                            <IcoGlobe />
+                            <span className="user-card-ip-text">{u.ip}</span>
+                        </div>
+                        <div className="user-card-metrics">
+                            <div className="metric-block">
+                                <span className="metric-label">↓ rx</span>
+                                <span className="metric-value">{bytes(u.rx)}</span>
+                            </div>
+                            <div className="metric-block">
+                                <span className="metric-label">↑ tx</span>
+                                <span className="metric-value">{bytes(u.tx)}</span>
+                            </div>
+                        </div>
+                        <div className="user-card-actions">
+                            <button
+                                className="btn btn--outline"
+                                aria-label="QR-код"
+                                onClick={() => showQR(u.name)}
+                            ><IcoQR /> QR</button>
+                            <button
+                                className="btn btn--danger btn--sq"
+                                aria-label="Удалить"
+                                onClick={() => deleteUser(u.name)}
+                            ><IcoTrash /></button>
+                        </div>
+                    </div>
+                ))}
+            </div>
+
+            {qrModal && (
+                <div className="qr-backdrop" onClick={() => setQrModal(null)}>
+                    <div className="qr-card" onClick={e => e.stopPropagation()}>
+                        <p className="qr-name">{qrModal.name}</p>
+                        <img
+                            className="qr-img"
+                            src={qrModal.dataUrl}
+                            alt="QR"
+                            title="Нажми чтобы скопировать vpn:// ключ"
+                            onClick={async () => { await copyText(qrModal.vpnKey); showMsg('Ключ скопирован'); }}
+                        />
+                        <p className="qr-hint">Отсканируй в AmneziaVPN · нажми на QR чтобы скопировать</p>
+                        <div className="qr-actions">
+                            <button className="btn btn--tonal" onClick={async () => {
+                                try {
+                                    const conf = await vpnKeyToConf(qrModal.vpnKey);
+                                    const safe = qrModal.name.replace(/[\/\\:*?"<>|]+/g, '_').trim() || 'awg';
+                                    downloadFile(safe + '.conf', conf);
+                                    showMsg('Конфиг скачан');
+                                } catch { showMsg('Не удалось декодировать ключ'); }
+                            }}>Скачать .conf</button>
+                            <button className="btn btn--tonal" onClick={() => setQrModal(null)}>Закрыть</button>
+                        </div>
+                    </div>
+                </div>
+            )}
+        </>
+    );
+}

awg-ui/src/tabs/users/metadata.json

@@ -0,0 +1,6 @@
+{
+  "id": "users",
+  "label": "Пользователи",
+  "icon": "users",
+  "order": 1
+}

awg-ui/src/tabs/users/users.css

@@ -0,0 +1,70 @@
+/* Стили вкладки «Пользователи». Общая дизайн-система (палитра, btn, chip, field,
+   table-card, toolbar, layout) остаётся в App.css — здесь только уникальное вкладки. */
+
+.user-cards-list { display: none; flex-direction: column; gap: 12px; }
+
+.users-count { font-size: 12px; color: var(--neutral-text); }
+.empty-cards {
+    font-size: 14px;
+    color: var(--neutral-text);
+    text-align: center;
+    padding: 48px 0;
+}
+.user-card {
+    background: var(--surface-bright);
+    border: 1px solid var(--outline-variant);
+    border-radius: var(--r-card);
+    padding: 16px;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+.user-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+}
+.user-card-title {
+    display: flex;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+}
+.user-card-num  { font-size: 12px; color: var(--neutral-dot); flex-shrink: 0; }
+.user-card-name {
+    font-size: 16px;
+    font-weight: 500;
+    color: var(--on-surface);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.user-card-ip {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    color: var(--neutral-text);
+}
+.user-card-ip-text { font-family: var(--mono); font-size: 13px; }
+
+.user-card-metrics { display: flex; gap: 8px; }
+.metric-block {
+    flex: 1;
+    background: var(--surface-container);
+    border-radius: var(--r-table);
+    padding: 10px 14px;
+    display: flex;
+    flex-direction: column;
+    gap: 4px;
+}
+.metric-label { font-size: 12px; color: var(--neutral-text); }
+.metric-value  { font-family: var(--mono); font-size: 18px; font-weight: 500; color: var(--on-surface); }
+
+.user-card-actions { display: flex; gap: 8px; }
+.user-card-actions .btn--outline { flex: 1; }
+
+/* На мобильной таблица скрывается (.table-card в App.css), карточки показываются. */
+@media (max-width: 640px) {
+    .user-cards-list { display: flex; }
+}