531 lines
29 KiB
HTML
531 lines
29 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t.nav_admin }} | {{ t.site_name }}{% endblock title %}
|
|
|
|
{% block head_extra %}
|
|
<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<style>
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; min-height: 100vh; background: #f6f7f8; color: #1d252d; font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
|
|
a { color: inherit; }
|
|
.shell { min-height: 100vh; display: grid; grid-template-columns: 220px minmax(0, 1fr); }
|
|
.sidebar { background: #17202a; color: #f4f7fb; padding: 1rem; }
|
|
.sidebar h1 { font-size: 1.05rem; line-height: 1.25; margin: 0 0 1.25rem; }
|
|
.sidebar a, .sidebar button { width: 100%; display: block; text-align: left; text-decoration: none; color: #d8dee6; padding: .5rem .55rem; border-radius: 4px; margin-bottom: .2rem; border: 0; background: transparent; cursor: pointer; font: inherit; }
|
|
.sidebar a:hover, .sidebar button:hover, .sidebar .active { background: #263544; color: #fff; }
|
|
.main-wrap { min-width: 0; display: flex; flex-direction: column; }
|
|
.topbar { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .5rem 1.25rem; border-bottom: 1px solid #dde2e6; background: #fff; }
|
|
.user-info { font-size: .875rem; color: #53606d; }
|
|
.app-version { font-size: .75rem; color: #9aa4ae; white-space: nowrap; }
|
|
.logout-link, .lang-switch a { font-size: .875rem; text-decoration: none; color: #53606d; padding: .25rem .45rem; border-radius: 4px; }
|
|
.logout-link:hover, .lang-switch a:hover { background: #eef1f4; color: #1d252d; }
|
|
.lang-switch a.active { color: #1d252d; font-weight: 700; }
|
|
.main { width: min(1180px, 100%); padding: 1.5rem; }
|
|
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
|
|
.toolbar h2 { font-size: 1.5rem; margin: 0; }
|
|
.actions, .row-actions { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
|
|
input, select { min-height: 36px; border: 1px solid #cbd3db; border-radius: 4px; padding: .45rem .55rem; background: #fff; color: #1d252d; width: 100%; }
|
|
input[type="checkbox"] { width: auto; min-height: auto; }
|
|
button { min-height: 36px; border: 1px solid #17202a; border-radius: 4px; padding: .45rem .75rem; background: #17202a; color: #fff; cursor: pointer; }
|
|
button.secondary { background: #fff; color: #17202a; border-color: #cbd3db; }
|
|
button.danger { background: #9d2323; border-color: #9d2323; }
|
|
button:disabled { opacity: .55; cursor: default; }
|
|
table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #dde2e6; border-radius: 6px; overflow: hidden; }
|
|
th, td { text-align: left; padding: .65rem .75rem; border-bottom: 1px solid #edf0f2; font-size: .92rem; vertical-align: middle; }
|
|
th { background: #eef1f4; font-weight: 650; color: #34414f; }
|
|
tr:last-child td { border-bottom: 0; }
|
|
code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; background: #f1f3f5; padding: .15rem .35rem; border-radius: 3px; overflow-wrap: anywhere; }
|
|
.status { margin: .75rem 0; min-height: 1.25rem; color: #53606d; }
|
|
.error { color: #9d2323; }
|
|
.empty { background: #fff; border: 1px solid #dde2e6; border-radius: 6px; padding: 1rem; color: #53606d; }
|
|
.summary-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .75rem; margin-bottom: 1rem; }
|
|
.summary-tile { background: #fff; border: 1px solid #dde2e6; border-radius: 6px; padding: .8rem; }
|
|
.summary-value { display: block; font-size: 1.6rem; font-weight: 750; line-height: 1.1; }
|
|
.summary-label { color: #53606d; font-size: .85rem; }
|
|
.section-tabs { display: flex; gap: .4rem; margin: .5rem 0 1rem; flex-wrap: wrap; }
|
|
.section-tabs button { min-height: 32px; padding: .35rem .6rem; }
|
|
.section-tabs button.active { background: #17202a; color: #fff; border-color: #17202a; }
|
|
.settings-grid { display: grid; grid-template-columns: minmax(180px, .7fr) minmax(240px, 1fr) auto; gap: .55rem .75rem; align-items: center; background: #fff; border: 1px solid #dde2e6; border-radius: 6px; padding: .75rem; }
|
|
.settings-row { display: contents; }
|
|
.settings-info-row { grid-column: 1 / -1; border: 1px solid #dde2e6; border-left: 4px solid #2d6cdf; border-radius: 6px; background: #f8fafc; padding: .75rem; display: grid; gap: .45rem; }
|
|
.settings-info-title { color: #1d2733; font-weight: 750; }
|
|
.settings-info-text { margin: 0; color: #34414f; white-space: pre-wrap; overflow-wrap: anywhere; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .84rem; line-height: 1.45; }
|
|
.field-name { font-weight: 650; color: #34414f; overflow-wrap: anywhere; }
|
|
.field-help { color: #53606d; font-size: .78rem; margin-top: .15rem; overflow-wrap: anywhere; }
|
|
.badge { display: inline-block; padding: .15rem .55rem; border-radius: 4px; font-size: .8rem; font-weight: 650; }
|
|
.badge-default { background: #e8ecef; color: #53606d; }
|
|
.badge-database { background: #d7edf1; color: #0f5560; }
|
|
.badge-env { background: #fff0c2; color: #6f4e00; }
|
|
.servers-list { display: grid; gap: .75rem; }
|
|
.server-admin-row { background: #fff; border: 1px solid #dde2e6; border-radius: 6px; padding: .8rem; display: grid; grid-template-columns: minmax(220px, 1fr) minmax(260px, 1.2fr) auto; gap: .75rem; align-items: center; }
|
|
.server-admin-name { display: grid; gap: .25rem; min-width: 0; }
|
|
.server-admin-name label { font-weight: 650; color: #34414f; font-size: .85rem; }
|
|
.server-admin-meta { display: grid; gap: .25rem; min-width: 0; }
|
|
.server-admin-meta span { color: #53606d; font-size: .78rem; }
|
|
.toggle-row { display: inline-flex; align-items: center; gap: .45rem; color: #34414f; font-weight: 650; white-space: nowrap; }
|
|
.modal-backdrop { position: fixed; inset: 0; background: rgba(23,32,42,.35); display: grid; place-items: center; padding: 1rem; z-index: 20; }
|
|
.modal { width: min(560px, 100%); background: #fff; border-radius: 6px; border: 1px solid #dde2e6; box-shadow: 0 16px 48px rgba(23,32,42,.24); padding: 1rem; }
|
|
.modal h3 { margin: 0 0 .75rem; font-size: 1.1rem; }
|
|
.form-grid { display: grid; gap: .7rem; }
|
|
.form-row label { display: block; font-weight: 650; color: #34414f; font-size: .9rem; margin-bottom: .25rem; }
|
|
.hint { color: #53606d; font-size: .78rem; margin-top: .2rem; }
|
|
.debug-grid { display: grid; gap: 1rem; }
|
|
.debug-build { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .55rem; }
|
|
@media (max-width: 760px) {
|
|
.shell { grid-template-columns: 1fr; }
|
|
.sidebar { display: flex; align-items: center; gap: .75rem; overflow-x: auto; }
|
|
.sidebar h1 { margin: 0; white-space: nowrap; }
|
|
.sidebar a, .sidebar button { margin: 0; white-space: nowrap; width: auto; }
|
|
.toolbar { align-items: stretch; flex-direction: column; }
|
|
.actions { align-items: stretch; }
|
|
.actions button { width: 100%; }
|
|
.main { padding: 1rem; }
|
|
table { display: block; overflow-x: auto; }
|
|
.settings-grid { grid-template-columns: 1fr; }
|
|
.server-admin-row { grid-template-columns: 1fr; align-items: stretch; }
|
|
.toggle-row { justify-content: space-between; }
|
|
}
|
|
</style>
|
|
{% endblock head_extra %}
|
|
|
|
{% block body %}
|
|
<div class="shell" x-data="adminApp('{{ initial_view }}')" x-init="init()">
|
|
<nav class="sidebar">
|
|
<h1>{{ t.site_name }}</h1>
|
|
<a href="/configs">{{ t.nav_configs }}</a>
|
|
<button :class="{ active: view === 'dashboard' }" @click="navigate('dashboard')">{{ t.nav_dashboard }}</button>
|
|
<button :class="{ active: view === 'users' }" @click="navigate('users')">{{ t.nav_users }}</button>
|
|
<button :class="{ active: view === 'servers' }" @click="navigate('servers')">{{ t.nav_servers }}</button>
|
|
<button :class="{ active: view === 'settings' }" @click="navigate('settings')">{{ t.nav_settings }}</button>
|
|
<button :class="{ active: view === 'debug' }" @click="navigate('debug')">{{ t.nav_debug }}</button>
|
|
</nav>
|
|
|
|
<div class="main-wrap">
|
|
<div class="topbar">
|
|
<span class="app-version">v{{ app_version }}</span>
|
|
<span class="user-info">{{ user_name }} ({{ user_role }})</span>
|
|
<div class="lang-switch">
|
|
<a href="#"{% if t.lang.code() == "en" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=en&next='+encodeURIComponent(location.pathname);return false">EN</a>
|
|
<a href="#"{% if t.lang.code() == "ru" %} class="active"{% endif %} onclick="location.href='/set-lang?lang=ru&next='+encodeURIComponent(location.pathname);return false">RU</a>
|
|
</div>
|
|
<a class="logout-link" href="/logout">{{ t.nav_logout }}</a>
|
|
</div>
|
|
|
|
<main class="main">
|
|
<div class="toolbar">
|
|
<h2 x-text="title()"></h2>
|
|
<div class="actions">
|
|
<button class="secondary" @click="reload()" :disabled="busy">{{ t.configs_refresh }}</button>
|
|
<template x-if="view === 'users'">
|
|
<button @click="openUserModal(null)" :disabled="busy">{{ t.users_add }}</button>
|
|
</template>
|
|
<template x-if="view === 'settings'">
|
|
<button @click="saveSettings()" :disabled="busy">{{ t.settings_save }}</button>
|
|
</template>
|
|
<template x-if="view === 'servers'">
|
|
<button @click="saveServers()" :disabled="busy">{{ t.settings_save }}</button>
|
|
</template>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="status" :class="{ error: error }" x-text="error || status"></div>
|
|
|
|
<section x-show="view === 'dashboard'">
|
|
<template x-if="summary">
|
|
<div>
|
|
<div class="summary-grid">
|
|
<div class="summary-tile"><span class="summary-value" x-text="summary.users_count"></span><span class="summary-label">{{ t.nav_users }}</span></div>
|
|
<div class="summary-tile"><span class="summary-value" x-text="summary.admin_users_count"></span><span class="summary-label">admin</span></div>
|
|
<div class="summary-tile"><span class="summary-value" x-text="summary.client_users_count"></span><span class="summary-label">client</span></div>
|
|
<div class="summary-tile"><span class="summary-value" x-text="summary.active_users_count"></span><span class="summary-label">{{ t.users_active }}</span></div>
|
|
</div>
|
|
<div class="debug-build">
|
|
<div class="summary-tile"><span class="summary-label">Version</span><br><code x-text="summary.build.pkg_version"></code></div>
|
|
<div class="summary-tile"><span class="summary-label">Profile</span><br><code x-text="summary.build.profile"></code></div>
|
|
<div class="summary-tile"><span class="summary-label">Target</span><br><code x-text="summary.build.target"></code></div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<section x-show="view === 'users'">
|
|
<template x-if="users.length === 0 && !busy">
|
|
<div class="empty">{{ t.users_heading }}: 0</div>
|
|
</template>
|
|
<template x-if="users.length > 0">
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ t.users_username }}</th>
|
|
<th>{{ t.users_email }}</th>
|
|
<th>{{ t.users_display_name }}</th>
|
|
<th>{{ t.users_role }}</th>
|
|
<th>{{ t.users_active }}</th>
|
|
<th>{{ t.users_actions }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="user in users" :key="user.id">
|
|
<tr>
|
|
<td x-text="user.username"></td>
|
|
<td x-text="user.email"></td>
|
|
<td x-text="user.display_name"></td>
|
|
<td><code x-text="user.role"></code></td>
|
|
<td x-text="user.active ? '{{ t.configs_yes }}' : '{{ t.configs_no }}'"></td>
|
|
<td>
|
|
<div class="row-actions">
|
|
<button class="secondary" @click="openUserModal(user)">{{ t.users_edit }}</button>
|
|
<button class="danger" @click="deleteUser(user)">{{ t.users_delete }}</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</template>
|
|
</section>
|
|
|
|
<section x-show="view === 'settings'">
|
|
<div class="section-tabs">
|
|
<template x-for="section in settingSections" :key="section">
|
|
<button class="secondary" :class="{ active: settingsSection === section }" @click="settingsSection = section" x-text="sectionLabel(section)"></button>
|
|
</template>
|
|
</div>
|
|
<template x-if="settings.fields.length > 0">
|
|
<div class="settings-grid">
|
|
<template x-for="field in visibleSettings()" :key="field.key">
|
|
<div :class="field.kind === 'info' ? 'settings-info-row' : 'settings-row'">
|
|
<template x-if="field.kind === 'info'">
|
|
<div>
|
|
<div class="settings-info-title" x-text="fieldLabel(field.key)"></div>
|
|
<pre class="settings-info-text" x-text="field.value"></pre>
|
|
</div>
|
|
</template>
|
|
<template x-if="field.kind !== 'info'">
|
|
<div class="field-name">
|
|
<span x-text="fieldLabel(field.key)"></span>
|
|
<div class="field-help" x-text="field.env_var"></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="field.kind !== 'info'">
|
|
<div>
|
|
<template x-if="field.kind === 'bool'">
|
|
<input type="checkbox" x-model="settingsForm[field.key]">
|
|
</template>
|
|
<template x-if="field.kind !== 'bool'">
|
|
<input :type="field.kind === 'password' ? 'password' : field.kind" x-model="settingsForm[field.key]">
|
|
</template>
|
|
<div class="hint">default: <code x-text="field.default_value || '(empty)'"></code></div>
|
|
</div>
|
|
</template>
|
|
<template x-if="field.kind !== 'info'">
|
|
<span class="badge" :class="`badge-${field.source}`" x-text="field.source"></span>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<section x-show="view === 'servers'">
|
|
<template x-if="servers.length === 0 && !busy">
|
|
<div class="empty">{{ t.servers_empty }}</div>
|
|
</template>
|
|
<template x-if="servers.length > 0">
|
|
<div class="servers-list">
|
|
<template x-for="server in servers" :key="server.name">
|
|
<div class="server-admin-row">
|
|
<div class="server-admin-name">
|
|
<label>{{ t.servers_display_name }}</label>
|
|
<input x-model="server.display_name" :placeholder="server.name">
|
|
</div>
|
|
<div class="server-admin-meta">
|
|
<span>{{ t.servers_technical_name }}</span>
|
|
<code x-text="server.name"></code>
|
|
<span>{{ t.servers_endpoint }}</span>
|
|
<code x-text="server.endpoint"></code>
|
|
</div>
|
|
<label class="toggle-row">
|
|
<span>{{ t.configs_enabled }}</span>
|
|
<input type="checkbox" x-model="server.enabled">
|
|
</label>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
|
|
<section x-show="view === 'debug'" class="debug-grid">
|
|
<template x-if="debug">
|
|
<div>
|
|
<div class="debug-build">
|
|
<div class="summary-tile"><span class="summary-label">Package</span><br><code x-text="debug.build.pkg_name"></code></div>
|
|
<div class="summary-tile"><span class="summary-label">Version</span><br><code x-text="debug.build.pkg_version"></code></div>
|
|
<div class="summary-tile"><span class="summary-label">Rustc</span><br><code x-text="debug.build.rustc_version"></code></div>
|
|
<div class="summary-tile"><span class="summary-label">{{ t.debug_db_status }}</span><br><code x-text="debug.db_status"></code></div>
|
|
</div>
|
|
<table>
|
|
<thead>
|
|
<tr>
|
|
<th>{{ t.debug_field }}</th>
|
|
<th>{{ t.debug_value }}</th>
|
|
<th>{{ t.debug_source }}</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<template x-for="entry in debug.config_entries" :key="entry.key">
|
|
<tr>
|
|
<td><code x-text="entry.key"></code><div class="hint" x-text="entry.env_var"></div></td>
|
|
<td><code x-text="entry.value || '(empty)'"></code></td>
|
|
<td><span class="badge" :class="`badge-${entry.source}`" x-text="entry.source"></span></td>
|
|
</tr>
|
|
</template>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</template>
|
|
</section>
|
|
</main>
|
|
</div>
|
|
|
|
<template x-if="userModalOpen">
|
|
<div class="modal-backdrop" @click.self="closeUserModal()">
|
|
<div class="modal">
|
|
<h3 x-text="userForm.id ? '{{ t.users_edit_heading }}' : '{{ t.users_new_heading }}'"></h3>
|
|
<div class="form-grid">
|
|
<div class="form-row"><label>{{ t.users_username }}</label><input x-model="userForm.username"></div>
|
|
<div class="form-row"><label>{{ t.users_email }}</label><input type="email" x-model="userForm.email"></div>
|
|
<div class="form-row"><label>{{ t.users_display_name }}</label><input x-model="userForm.display_name"></div>
|
|
<div class="form-row">
|
|
<label>{{ t.login_password }}</label>
|
|
<input type="password" x-model="userForm.password">
|
|
<template x-if="userForm.id"><div class="hint">{{ t.users_password_hint }}</div></template>
|
|
</div>
|
|
<div class="form-row">
|
|
<label>{{ t.users_role }}</label>
|
|
<select x-model="userForm.role">
|
|
<option value="client">client</option>
|
|
<option value="admin">admin</option>
|
|
</select>
|
|
</div>
|
|
<div class="actions">
|
|
<button @click="saveUser()">{{ t.settings_save }}</button>
|
|
<button class="secondary" @click="closeUserModal()">{{ t.admin_close }}</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
</div>
|
|
|
|
<script>
|
|
function adminApp(initialView) {
|
|
return {
|
|
view: initialView || 'dashboard',
|
|
busy: false,
|
|
status: '',
|
|
error: '',
|
|
summary: null,
|
|
users: [],
|
|
servers: [],
|
|
settings: { fields: [] },
|
|
settingsForm: {},
|
|
settingsSection: 'auth',
|
|
settingSections: ['auth', 'oidc', 'kubernetes', 'vpn', 'api', 'telegram'],
|
|
debug: null,
|
|
userModalOpen: false,
|
|
userForm: {},
|
|
init() {
|
|
this.loadForView();
|
|
window.addEventListener('popstate', () => {
|
|
this.view = this.viewFromPath(location.pathname);
|
|
this.loadForView();
|
|
});
|
|
},
|
|
async request(url, options = {}) {
|
|
const response = await fetch(url, {
|
|
headers: { 'content-type': 'application/json' },
|
|
...options,
|
|
});
|
|
const data = await response.json().catch(() => ({}));
|
|
if (!response.ok) throw new Error(data.error || response.statusText);
|
|
return data;
|
|
},
|
|
navigate(view) {
|
|
this.view = view;
|
|
history.pushState({}, '', this.pathForView(view));
|
|
this.loadForView();
|
|
},
|
|
pathForView(view) {
|
|
return {
|
|
dashboard: '/admin/',
|
|
users: '/admin/users',
|
|
servers: '/admin/servers',
|
|
settings: '/admin/settings',
|
|
debug: '/admin/debug',
|
|
}[view] || '/admin/';
|
|
},
|
|
viewFromPath(path) {
|
|
if (path.endsWith('/users')) return 'users';
|
|
if (path.endsWith('/servers')) return 'servers';
|
|
if (path.endsWith('/settings')) return 'settings';
|
|
if (path.endsWith('/debug')) return 'debug';
|
|
return 'dashboard';
|
|
},
|
|
title() {
|
|
return {
|
|
dashboard: '{{ t.nav_dashboard }}',
|
|
users: '{{ t.nav_users }}',
|
|
servers: '{{ t.nav_servers }}',
|
|
settings: '{{ t.nav_settings }}',
|
|
debug: '{{ t.nav_debug }}',
|
|
}[this.view] || '{{ t.nav_admin }}';
|
|
},
|
|
async loadForView() {
|
|
this.error = '';
|
|
if (this.view === 'dashboard') await this.loadSummary();
|
|
if (this.view === 'users') await this.loadUsers();
|
|
if (this.view === 'servers') await this.loadServers();
|
|
if (this.view === 'settings') await this.loadSettings();
|
|
if (this.view === 'debug') await this.loadDebug();
|
|
},
|
|
async reload() {
|
|
await this.loadForView();
|
|
},
|
|
async loadSummary() {
|
|
this.busy = true;
|
|
try { this.summary = await this.request('/admin/api/summary'); }
|
|
catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
async loadUsers() {
|
|
this.busy = true;
|
|
try { this.users = (await this.request('/admin/api/users')).users; }
|
|
catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
async loadServers() {
|
|
this.busy = true;
|
|
try { this.servers = (await this.request('/admin/api/servers')).servers; }
|
|
catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
async loadSettings() {
|
|
this.busy = true;
|
|
try {
|
|
this.settings = await this.request('/admin/api/settings');
|
|
const form = {};
|
|
for (const field of this.settings.fields) {
|
|
if (field.kind === 'info') continue;
|
|
form[field.key] = field.kind === 'bool' ? field.value === 'true' : field.value;
|
|
}
|
|
this.settingsForm = form;
|
|
} catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
async loadDebug() {
|
|
this.busy = true;
|
|
try { this.debug = await this.request('/admin/api/debug'); }
|
|
catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
visibleSettings() {
|
|
return this.settings.fields.filter((field) => field.section === this.settingsSection);
|
|
},
|
|
async saveSettings() {
|
|
this.error = '';
|
|
this.status = '';
|
|
this.busy = true;
|
|
try {
|
|
const body = { ...this.settingsForm, vpn_mtu: Number(this.settingsForm.vpn_mtu || 0) };
|
|
this.settings = await this.request('/admin/api/settings', {
|
|
method: 'POST',
|
|
body: JSON.stringify(body),
|
|
});
|
|
this.status = '{{ t.settings_saved }}';
|
|
} catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
async saveServers() {
|
|
this.error = '';
|
|
this.status = '';
|
|
this.busy = true;
|
|
try {
|
|
const data = await this.request('/admin/api/servers', {
|
|
method: 'POST',
|
|
body: JSON.stringify({ servers: this.servers }),
|
|
});
|
|
this.servers = data.servers;
|
|
this.status = '{{ t.settings_saved }}';
|
|
} catch (e) { this.error = e.message; }
|
|
finally { this.busy = false; }
|
|
},
|
|
openUserModal(user) {
|
|
this.userForm = user ? { ...user, password: '' } : {
|
|
id: null, username: '', email: '', display_name: '', password: '', role: 'client',
|
|
};
|
|
this.userModalOpen = true;
|
|
},
|
|
closeUserModal() {
|
|
this.userModalOpen = false;
|
|
this.userForm = {};
|
|
},
|
|
async saveUser() {
|
|
this.error = '';
|
|
this.status = '';
|
|
const isEdit = Boolean(this.userForm.id);
|
|
const url = isEdit ? `/admin/api/users/${this.userForm.id}` : '/admin/api/users';
|
|
try {
|
|
const data = await this.request(url, {
|
|
method: 'POST',
|
|
body: JSON.stringify(this.userForm),
|
|
});
|
|
if (isEdit) {
|
|
const index = this.users.findIndex((user) => user.id === data.user.id);
|
|
if (index !== -1) this.users[index] = data.user;
|
|
} else {
|
|
this.users.push(data.user);
|
|
}
|
|
this.closeUserModal();
|
|
this.status = '{{ t.settings_saved }}';
|
|
} catch (e) { this.error = e.message; }
|
|
},
|
|
async deleteUser(user) {
|
|
if (!confirm('{{ t.users_delete_confirm }}')) return;
|
|
this.error = '';
|
|
this.status = '';
|
|
try {
|
|
await this.request(`/admin/api/users/${user.id}/delete`, { method: 'POST' });
|
|
this.users = this.users.filter((item) => item.id !== user.id);
|
|
this.status = '{{ t.settings_saved }}';
|
|
} catch (e) { this.error = e.message; }
|
|
},
|
|
sectionLabel(section) {
|
|
return {
|
|
auth: '{{ t.settings_auth }}',
|
|
oidc: '{{ t.settings_oidc }}',
|
|
kubernetes: '{{ t.settings_kubernetes }}',
|
|
vpn: '{{ t.settings_vpn }}',
|
|
api: '{{ t.settings_api }}',
|
|
telegram: '{{ t.settings_telegram }}',
|
|
}[section] || section;
|
|
},
|
|
fieldLabel(key) {
|
|
return {
|
|
auth_password_enabled: '{{ t.settings_password_login }}',
|
|
auth_sso_enabled: '{{ t.settings_sso_login }}',
|
|
oidc_button_text: '{{ t.settings_oidc_button }}',
|
|
oidc_admin_groups: '{{ t.settings_oidc_admin_groups }}',
|
|
oidc_client_groups: '{{ t.settings_oidc_client_groups }}',
|
|
swagger_enabled: '{{ t.settings_swagger }}',
|
|
telegram_bot_enabled: '{{ t.settings_telegram_enabled }}',
|
|
telegram_bot_username: '{{ t.settings_telegram_username }}',
|
|
telegram_bot_token: '{{ t.settings_telegram_token }}',
|
|
telegram_setup_instructions: '{{ t.settings_telegram_setup_instructions }}',
|
|
}[key] || key;
|
|
},
|
|
};
|
|
}
|
|
</script>
|
|
{% endblock body %}
|