Add sen:// subscription with master keys
A master key is a sen:// link with a device limit. Each device generates its own WireGuard keypair and registers only the public key, then polls a signed /sub/v1/config, so params and generation changes reach users without re-importing a key. - awg-ctrl: peers table and /api/peers*, /api/profile; nextIp and rebuildConf take peers into account (output unchanged without them) - awg-ui: link codec and signatures (sen.ts), registry, panel routes and the public listener on SUB_PORT (sub.ts) - responses are always Ed25519-signed; TLS with a pinned self-signed certificate is optional - devices report a client version, shown as platform-version - "Мастер-ключи" tab: a table with the devices nested under each key, a device-limit meter, per-key settings and a placeholder for the servers a key serves; cards on mobile - install.sh/CLI: subscription signing key, optional certificate, port; kept across reinstalls with KEEP_DATA - add the missing mock-server.ts used by npm run dev:mock
This commit is contained in:
@@ -0,0 +1,281 @@
|
||||
/*
|
||||
Copyright (c) 2026 Ivan Vasilev
|
||||
This source code is licensed under the MIT license found in the
|
||||
LICENSE file in the root directory of this source tree.
|
||||
*/
|
||||
/* Стили вкладки «Мастер-ключи»: дерево «мастер-ключ → устройства».
|
||||
Общая дизайн-система — в App.css. */
|
||||
|
||||
.mk-notice {
|
||||
font-size: 13px;
|
||||
color: var(--error-text);
|
||||
background: var(--error-bg);
|
||||
border-radius: 16px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.mk-empty { font-size: 14px; color: var(--neutral-text); text-align: center; padding: 48px 0; }
|
||||
.mk-limit-input { width: 88px !important; }
|
||||
|
||||
/* ── таблица (десктоп) ── */
|
||||
.mk-table td, .mk-table th { white-space: nowrap; }
|
||||
.mk-table .td-actions { width: 150px; }
|
||||
.mk-table .mk-device-id { display: inline-block; max-width: 170px; vertical-align: middle; }
|
||||
.mk-table th, .mk-table td { padding-left: 10px; padding-right: 10px; }
|
||||
.mk-table th:first-child, .mk-table td:first-child { padding-left: 20px; }
|
||||
.mk-table th:last-child, .mk-table td:last-child { padding-right: 16px; }
|
||||
.mk-tr-master td { background: var(--surface-container); font-weight: 500; padding-top: 6px; padding-bottom: 6px; }
|
||||
.mk-tr-master:hover td { background: var(--surface-container); }
|
||||
.mk-name { display: inline-flex; align-items: center; gap: 8px; color: var(--primary); }
|
||||
.mk-name .mk-caret { margin-left: -8px; }
|
||||
.mk-tr-master .mk-name { color: var(--on-surface); }
|
||||
.mk-tr-master .mk-name svg { color: var(--primary); }
|
||||
.mk-tr-tools td { background: var(--surface-container); padding-top: 4px; padding-bottom: 12px; } /* слева/справа — общие отступы колонок таблицы: блок стоит под заголовком «Имя» */
|
||||
.mk-tr-tools:hover { background: transparent; }
|
||||
.mk-tr-device td, .mk-tr-free td { padding-top: 10px; padding-bottom: 10px; }
|
||||
.mk-flag { color: var(--neutral-text); font-size: 12px; }
|
||||
/* иерархия: линия слева от имени и «ножка» к каждой строке; у последней линия обрывается */
|
||||
.mk-tr-device td:first-child, .mk-tr-free td:first-child {
|
||||
background: linear-gradient(var(--outline), var(--outline)) 30px 0 / 2px 100% no-repeat;
|
||||
}
|
||||
.mk-tr-device.mk-last td:first-child, .mk-tr-free.mk-last td:first-child { background-size: 2px 50%; }
|
||||
.mk-indent { position: relative; display: inline-block; padding-left: 36px; }
|
||||
.mk-indent::before {
|
||||
content: ''; position: absolute; left: 10px; top: 50%; width: 16px;
|
||||
border-top: 2px solid var(--outline);
|
||||
}
|
||||
.mk-tr-free td { color: var(--neutral-dot); font-size: 12px; }
|
||||
.mk-tr-free:hover { background: transparent; }
|
||||
|
||||
/* ── дерево (мобильный) ── */
|
||||
.mk-tree, .mk-children { list-style: none; margin: 0; padding: 0; }
|
||||
.mk-tree { display: none; flex-direction: column; gap: 12px; } /* только мобильный */
|
||||
|
||||
.mk-root {
|
||||
background: var(--surface-bright);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: var(--r-card);
|
||||
padding: 12px 18px 14px;
|
||||
}
|
||||
|
||||
/* родитель */
|
||||
.mk-master { display: flex; align-items: center; gap: 10px; color: var(--primary); min-height: 42px; }
|
||||
.mk-master-label {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: var(--on-surface);
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mk-caret {
|
||||
width: 28px; height: 28px;
|
||||
border: 0; border-radius: 50%;
|
||||
background: transparent;
|
||||
color: var(--neutral-text);
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.15s;
|
||||
}
|
||||
.mk-caret:hover { background: var(--state-neutral); }
|
||||
.mk-caret--folded { transform: rotate(-90deg); }
|
||||
|
||||
.mk-tools {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
|
||||
gap: 12px;
|
||||
align-items: stretch;
|
||||
margin: 6px 0 8px;
|
||||
}
|
||||
/* два одинаковых блока: слева настройки ключа, справа серверы */
|
||||
.mk-box {
|
||||
display: flex; flex-direction: column; gap: 10px;
|
||||
background: var(--surface-bright);
|
||||
border: 1px solid var(--outline-variant);
|
||||
border-radius: 16px;
|
||||
padding: 12px 16px 14px;
|
||||
}
|
||||
.mk-box-title { margin: 0; font-size: 13px; font-weight: 500; color: var(--label); }
|
||||
.mk-box .mk-box-title { margin-bottom: 2px; }
|
||||
/* строка настройки: слева название и пояснение, справа контрол */
|
||||
.mk-setting {
|
||||
display: flex; align-items: center; justify-content: space-between; gap: 16px;
|
||||
padding: 10px 0;
|
||||
border-top: 1px solid var(--outline-variant);
|
||||
}
|
||||
.mk-box-title + .mk-setting { border-top: 0; padding-top: 4px; }
|
||||
.mk-setting:last-child { padding-bottom: 0; }
|
||||
.mk-setting-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
|
||||
.mk-setting-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
|
||||
.mk-setting-hint { font-size: 12px; color: var(--neutral-text); }
|
||||
.mk-setting-ctl { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
|
||||
.mk-setting-ctl .btn { height: 36px; padding: 0 16px; font-size: 13px; }
|
||||
.mk-limit-input { height: 36px; width: 80px !important; text-align: center; }
|
||||
|
||||
/* прогресс занятых слотов с числом внутри; полный — цветом «ошибка».
|
||||
Текст дублируется: тёмный на дорожке, светлый поверх заливки (обрезается ею). */
|
||||
.mk-meter {
|
||||
--mk-w: 136px;
|
||||
--meter-fill: var(--success-dot); /* < 2/3 — зелёный */
|
||||
--meter-on: #2a2118; /* цвет числа поверх заливки */
|
||||
position: relative;
|
||||
width: var(--mk-w); height: 20px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--outline-variant);
|
||||
overflow: hidden;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.mk-meter-fill {
|
||||
position: absolute; left: 0; top: 0; bottom: 0;
|
||||
background: var(--meter-fill);
|
||||
overflow: hidden;
|
||||
transition: width 0.25s, background 0.25s;
|
||||
}
|
||||
/* числа по краям внутри полоски: текущее слева, лимит справа */
|
||||
.mk-meter-text {
|
||||
position: absolute; left: 0; top: 0;
|
||||
width: var(--mk-w); height: 100%;
|
||||
box-sizing: border-box;
|
||||
padding: 0 11px;
|
||||
display: flex; align-items: center; justify-content: space-between;
|
||||
font-size: 12px; font-weight: 500;
|
||||
font-variant-numeric: tabular-nums;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
.mk-meter-text--on { color: var(--meter-on); }
|
||||
.mk-meter--warn { --meter-fill: var(--warn-dot); } /* от 2/3 — оранжевый */
|
||||
.mk-meter--full { --meter-fill: var(--error-dot); --meter-on: #fff; } /* лимит — красный */
|
||||
:root[data-theme="dark"] .mk-meter--full { --meter-on: #2a2118; }
|
||||
|
||||
/* серверы, отдаваемые по ключу (заглушка) */
|
||||
.mk-server {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
background: var(--surface-container);
|
||||
border-radius: 12px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--on-surface);
|
||||
}
|
||||
.mk-server input { accent-color: var(--primary); margin: 0; }
|
||||
.mk-server-name { font-weight: 500; }
|
||||
.mk-server-ip, .mk-server-gen { font-size: 12px; color: var(--neutral-text); }
|
||||
.mk-server-ip { font-family: var(--mono); margin-left: auto; }
|
||||
.mk-server-add {
|
||||
width: 100%; justify-content: center;
|
||||
background: transparent;
|
||||
border: 1px dashed var(--outline);
|
||||
color: var(--neutral-dot);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.mk-box .tip-wrap { width: 100%; }
|
||||
|
||||
/* дети: вертикальная линия слева и «ножка» к каждому узлу */
|
||||
.mk-children { margin: 8px 0 0 18px; padding-left: 28px; border-left: 2px solid var(--outline); }
|
||||
.mk-node { position: relative; padding: 4px 0; }
|
||||
.mk-node::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -28px; top: 50%;
|
||||
width: 28px;
|
||||
border-top: 2px solid var(--outline);
|
||||
}
|
||||
/* последний узел: линия родителя обрывается на его «ножке» */
|
||||
.mk-node:last-child::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: -30px; top: calc(50% + 1px); bottom: 0;
|
||||
width: 2px;
|
||||
background: var(--surface-bright);
|
||||
}
|
||||
|
||||
.mk-device {
|
||||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||||
background: var(--surface-container);
|
||||
border-radius: 14px;
|
||||
padding: 8px 14px;
|
||||
}
|
||||
.mk-device-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 160px; }
|
||||
.mk-device-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
|
||||
.mk-device-id {
|
||||
font-family: var(--mono);
|
||||
font-size: 11px;
|
||||
color: var(--neutral-text);
|
||||
background: var(--surface-bright);
|
||||
border-radius: var(--r-pill);
|
||||
padding: 1px 8px;
|
||||
min-width: 0;
|
||||
max-width: 200px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.mk-device-name { font-size: 14px; font-weight: 500; color: var(--on-surface); }
|
||||
.mk-device-sub { font-size: 12px; color: var(--neutral-text); }
|
||||
.mk-device-traffic { display: flex; gap: 12px; font-family: var(--mono); font-size: 12px; color: var(--neutral-text); }
|
||||
.mk-metric { display: inline-flex; gap: 4px; }
|
||||
.mk-metric i, .mk-metric b { font-style: normal; font-weight: 400; }
|
||||
|
||||
.mk-free {
|
||||
border: 1px dashed var(--outline);
|
||||
border-radius: 14px;
|
||||
padding: 10px 14px;
|
||||
font-size: 13px;
|
||||
color: var(--neutral-dot);
|
||||
}
|
||||
|
||||
/* ── мобильный (design.md, часть IV): одна колонка, тач-цели ≥ 44px, rx/tx блоками
|
||||
50/50, действия рядом с большим пальцем ── */
|
||||
@media (max-width: 640px) {
|
||||
.mk-tree { display: flex; }
|
||||
.mk-limit-input { width: 100% !important; }
|
||||
|
||||
.mk-root { padding: 12px; }
|
||||
|
||||
/* родитель: шапка, затем ряд действий на всю ширину */
|
||||
.mk-master { flex-wrap: wrap; row-gap: 10px; }
|
||||
.mk-master .actions { width: 100%; gap: 8px; }
|
||||
.mk-caret { width: 44px; height: 44px; margin: -6px 0 -6px -8px; }
|
||||
.mk-meter { --mk-w: 112px; height: 24px; }
|
||||
|
||||
/* настройки узла: поля и кнопки на всю ширину */
|
||||
.mk-tools { grid-template-columns: minmax(0, 1fr); margin: 8px 0 4px; }
|
||||
.mk-setting { flex-direction: column; align-items: stretch; gap: 8px; }
|
||||
.mk-setting-ctl { width: 100%; }
|
||||
.mk-setting-ctl .btn { flex: 1; height: 44px; }
|
||||
.mk-setting-ctl .mk-limit-input { width: 100% !important; flex: 1; height: 44px; }
|
||||
.mk-tools .btn { width: 100%; height: 44px; justify-content: center; }
|
||||
|
||||
/* дерево уже: отступы поменьше, «ножки» короче */
|
||||
.mk-children { margin-left: 8px; padding-left: 14px; }
|
||||
.mk-node { padding: 4px 0; }
|
||||
.mk-node::before { left: -14px; width: 14px; }
|
||||
.mk-node:last-child::after { left: -16px; }
|
||||
|
||||
/* устройство — карточка: заголовок + чип, метрики 50/50, ряд действий */
|
||||
.mk-device { border-radius: 16px; padding: 12px; gap: 10px; }
|
||||
.mk-device-main { flex: 1 1 0; }
|
||||
.mk-device-title { flex-wrap: wrap; row-gap: 2px; }
|
||||
.mk-device-id { max-width: 100%; }
|
||||
.mk-device-traffic { width: 100%; gap: 8px; }
|
||||
.mk-metric {
|
||||
flex: 1; flex-direction: column; gap: 2px;
|
||||
background: var(--surface-bright);
|
||||
border-radius: 16px; padding: 8px 12px;
|
||||
}
|
||||
.mk-metric i { font-family: var(--font, inherit); font-size: 12px; color: var(--neutral-text); }
|
||||
.mk-metric-name::after { content: attr(data-sfx); }
|
||||
.mk-metric b { font-size: 16px; font-weight: 500; color: var(--on-surface); }
|
||||
|
||||
/* кнопки действий: контурные, на всю ширину ряда, 44px */
|
||||
.mk-device .actions { width: 100%; gap: 8px; }
|
||||
.mk-master .btn-icon, .mk-device .btn-icon {
|
||||
flex: 1; width: auto; height: 44px;
|
||||
border: 1px solid var(--outline);
|
||||
border-radius: var(--r-pill);
|
||||
}
|
||||
.mk-master .btn-icon--danger, .mk-device .btn-icon--danger { border-color: var(--error-dot); }
|
||||
|
||||
.mk-free { padding: 12px; font-size: 13px; }
|
||||
}
|
||||
Reference in New Issue
Block a user