feat: ssh auth, protocol management, and cleanup
This commit is contained in:
infosave2007
@@ -0,0 +1,343 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
|
||||
<div class="mb-8 flex items-center justify-between">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ 'Логи приложения' | trans }}</h1>
|
||||
<p class="mt-2 text-sm text-gray-600">{{ 'Просмотр, поиск и управление файлами логов' | trans }}</p>
|
||||
</div>
|
||||
{% if log_files | length > 0 %}
|
||||
<div class="flex space-x-2">
|
||||
<button class="px-4 py-2 bg-yellow-500 text-white rounded-md hover:bg-yellow-600" id="btnClearAll" title="{{ 'Удалить все логи' | trans }}">
|
||||
<i class="fas fa-trash mr-2"></i>{{ 'Очистить все' | trans }}
|
||||
</button>
|
||||
<a href="/admin/logs/download?file={{ selected_file }}"
|
||||
class="px-4 py-2 rounded-md border {{ selected_file ? 'bg-white text-gray-700 hover:bg-gray-50' : 'bg-gray-100 text-gray-400 cursor-not-allowed' }}">
|
||||
<i class="fas fa-download mr-2"></i>{{ 'Скачать' | trans }}
|
||||
</a>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
{% if user and user.role == 'admin' %}
|
||||
<div class="mb-6 border-b border-gray-200">
|
||||
<nav class="-mb-px flex space-x-8">
|
||||
<a href="/settings" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-user mr-2"></i>{{ t('settings.profile') }}
|
||||
</a>
|
||||
<a href="/settings" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-key mr-2"></i>{{ t('settings.api_keys') }}
|
||||
</a>
|
||||
<a href="/settings" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-language mr-2"></i>{{ t('settings.translations') }}
|
||||
</a>
|
||||
<a href="/settings" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-users mr-2"></i>{{ t('settings.users') }}
|
||||
</a>
|
||||
<a href="/settings/ldap" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-network-wired mr-2"></i>LDAP
|
||||
</a>
|
||||
<a href="/settings/protocols" class="tab-link border-transparent text-gray-500 hover:text-gray-700 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-cubes mr-2"></i>Protocols
|
||||
</a>
|
||||
<a href="/admin/logs" class="tab-link border-purple-500 text-purple-600 py-4 px-1 border-b-2 font-medium text-sm">
|
||||
<i class="fas fa-file-alt mr-2"></i>{{ 'Логи' | trans }}
|
||||
</a>
|
||||
</nav>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<div class="grid grid-cols-12 gap-6">
|
||||
<!-- Sidebar with file list -->
|
||||
<div class="col-span-12 md:col-span-3">
|
||||
<div class="bg-white shadow rounded-lg overflow-hidden">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ 'Файлы логов' | trans }}</h2>
|
||||
</div>
|
||||
<div class="max-h-[600px] overflow-y-auto">
|
||||
{% if log_files | length > 0 %}
|
||||
{% for file in log_files %}
|
||||
<a href="/admin/logs?file={{ file.path }}" class="block px-6 py-4 border-b border-gray-100 hover:bg-gray-50 {{ selected_file == file.path ? 'bg-purple-50' : '' }}">
|
||||
<div class="flex items-start justify-between">
|
||||
<div class="flex-1">
|
||||
<div class="text-sm font-medium" style="word-break: break-all;">{{ file.name }}</div>
|
||||
<div class="text-xs text-gray-500">{{ file.size_formatted }}</div>
|
||||
</div>
|
||||
<button type="button" class="text-red-600 hover:text-red-800 text-sm delete-log" data-file="{{ file.path }}" title="{{ 'Удалить' | trans }}">
|
||||
<i class="fas fa-trash-alt"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-2">{{ file.modified_formatted }}</div>
|
||||
</a>
|
||||
{% endfor %}
|
||||
{% else %}
|
||||
<div class="px-6 py-10 text-center text-gray-500">
|
||||
{{ 'Логи не найдены' | trans }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Main content area -->
|
||||
<div class="col-span-12 md:col-span-9">
|
||||
{% if selected_file %}
|
||||
<!-- File info -->
|
||||
<div class="bg-white shadow rounded-lg mb-4">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<div class="md:flex md:items-center md:justify-between">
|
||||
<div class="mb-2 md:mb-0">
|
||||
<h3 class="text-sm text-gray-700">{{ 'Файл:' | trans }} <code class="text-gray-900">{{ selected_file }}</code></h3>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500">
|
||||
<strong>{{ 'Размер:' | trans }}</strong> {{ file_size | default(0) | bytes_format }}
|
||||
<span class="mx-2">•</span>
|
||||
<strong>{{ 'Строк:' | trans }}</strong> {{ line_count | number_format(0, '.', ' ') }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search form -->
|
||||
<div class="bg-white shadow rounded-lg mb-4">
|
||||
<div class="px-6 py-4">
|
||||
<form id="searchForm" class="md:flex md:items-center md:space-x-3">
|
||||
<input type="hidden" name="file" value="{{ selected_file }}">
|
||||
<div class="flex-1 mb-3 md:mb-0">
|
||||
<input type="text" id="searchQuery" name="query" required
|
||||
placeholder="{{ 'Поиск в логе...' | trans }}"
|
||||
class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-purple-500 focus:border-purple-500">
|
||||
</div>
|
||||
<label class="inline-flex items-center mb-3 md:mb-0">
|
||||
<input type="checkbox" id="caseSensitive" name="case_sensitive" class="rounded border-gray-300 text-purple-600 focus:ring-purple-500">
|
||||
<span class="ml-2 text-sm text-gray-600">{{ 'Учитывать регистр' | trans }}</span>
|
||||
</label>
|
||||
<button type="submit" class="px-4 py-2 bg-purple-600 text-white rounded-md hover:bg-purple-700">
|
||||
<i class="fas fa-search mr-2"></i>{{ 'Найти' | trans }}
|
||||
</button>
|
||||
<button type="button" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200" id="statsBtn">
|
||||
<i class="fas fa-chart-bar mr-2"></i>{{ 'Статистика' | trans }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Search results -->
|
||||
<div id="searchResults" class="hidden bg-blue-50 border border-blue-200 text-blue-800 px-4 py-3 rounded mb-4">
|
||||
<strong>{{ 'Результаты поиска:' | trans }}</strong>
|
||||
<div id="resultsContent" class="mt-2 text-sm"></div>
|
||||
</div>
|
||||
|
||||
<!-- Statistics -->
|
||||
<div id="statsPanel" class="hidden bg-white shadow rounded-lg mb-4">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h3 class="text-sm font-medium text-gray-900">{{ 'Статистика логов' | trans }}</h3>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<div class="grid grid-cols-4 gap-4">
|
||||
<div class="text-center p-3 border-r">
|
||||
<div class="text-2xl text-purple-600" id="totalLines">0</div>
|
||||
<div class="text-xs text-gray-500">{{ 'Всего строк' | trans }}</div>
|
||||
</div>
|
||||
<div class="text-center p-3 border-r">
|
||||
<div class="text-2xl text-red-600" id="errorCount">0</div>
|
||||
<div class="text-xs text-gray-500">{{ 'Ошибок' | trans }}</div>
|
||||
</div>
|
||||
<div class="text-center p-3 border-r">
|
||||
<div class="text-2xl text-yellow-600" id="warningCount">0</div>
|
||||
<div class="text-xs text-gray-500">{{ 'Предупреждений' | trans }}</div>
|
||||
</div>
|
||||
<div class="text-center p-3">
|
||||
<div class="text-2xl text-green-600" id="successCount">0</div>
|
||||
<div class="text-xs text-gray-500">{{ 'Успехов' | trans }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-xs text-gray-500 mt-2" id="lastModified"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Log content -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-3 border-b border-gray-200 flex items-center justify-between">
|
||||
<h3 class="text-sm font-medium text-gray-900">{{ 'Содержание логов' | trans }}</h3>
|
||||
<button type="button" class="px-2 py-1 text-sm border rounded hover:bg-gray-50" id="toggleLineNumbers">
|
||||
<i class="fas fa-list-ol"></i>
|
||||
</button>
|
||||
</div>
|
||||
<div class="px-6 py-4">
|
||||
<pre class="mb-0 max-h-[600px] overflow-auto"><code id="logContent" class="show-line-numbers">{{ log_content }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="bg-blue-50 border border-blue-200 text-blue-800 px-6 py-10 rounded text-center">
|
||||
<i class="fas fa-info-circle text-2xl mb-3"></i>
|
||||
<div class="text-lg">{{ 'Выберите файл логов для просмотра' | trans }}</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const selectedFile = '{{ selected_file }}';
|
||||
|
||||
// Delete log file
|
||||
document.querySelectorAll('.delete-log').forEach(btn => {
|
||||
btn.addEventListener('click', function(e) {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
const file = this.dataset.file;
|
||||
if (confirm('{{ "Удалить этот файл логов?" | trans }}')) {
|
||||
fetch('/admin/logs/delete', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: 'file=' + encodeURIComponent(file)
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.location.href = data.redirect;
|
||||
} else {
|
||||
alert('{{ "Ошибка:" | trans }} ' + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Clear all logs
|
||||
const clearAllBtn = document.getElementById('btnClearAll');
|
||||
if (clearAllBtn) {
|
||||
clearAllBtn.addEventListener('click', function() {
|
||||
if (confirm('{{ "Удалить ВСЕ файлы логов? Это действие необратимо." | trans }}')) {
|
||||
fetch('/admin/logs/clear-all', {method: 'POST'})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
alert(data.message);
|
||||
window.location.href = data.redirect;
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Search logs
|
||||
document.getElementById('searchForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch('/admin/logs/search', {
|
||||
method: 'POST',
|
||||
body: new URLSearchParams(formData)
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showSearchResults(data);
|
||||
} else {
|
||||
alert('{{ "Ошибка:" | trans }} ' + data.message);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Statistics
|
||||
document.getElementById('statsBtn').addEventListener('click', function() {
|
||||
if (!selectedFile) return;
|
||||
|
||||
fetch('/admin/logs/stats', {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: 'file=' + encodeURIComponent(selectedFile)
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
showStatistics(data);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Toggle line numbers
|
||||
document.getElementById('toggleLineNumbers').addEventListener('click', function() {
|
||||
const content = document.getElementById('logContent');
|
||||
content.classList.toggle('show-line-numbers');
|
||||
});
|
||||
|
||||
function showSearchResults(data) {
|
||||
const resultsDiv = document.getElementById('searchResults');
|
||||
const resultsContent = document.getElementById('resultsContent');
|
||||
|
||||
if (data.results_count === 0) {
|
||||
resultsContent.innerHTML = '<p class="mb-0">{{ "Результатов не найдено" | trans }}</p>';
|
||||
} else {
|
||||
let html = '<p class="mb-2">{{ "Найдено совпадений:" | trans }} <strong>' + data.results_count + '</strong></p>';
|
||||
html += '<div class="results-list" style="max-height: 300px; overflow-y: auto;">';
|
||||
|
||||
data.results.forEach((result, idx) => {
|
||||
html += '<div class="border-bottom pb-2 mb-2">';
|
||||
html += '<small class="text-muted">{{ "Строка" | trans }} ' + result.line + ':</small><br>';
|
||||
html += '<code>' + escapeHtml(result.content.substring(0, 200)) + (result.content.length > 200 ? '...' : '') + '</code>';
|
||||
html += '</div>';
|
||||
});
|
||||
|
||||
html += '</div>';
|
||||
resultsContent.innerHTML = html;
|
||||
}
|
||||
|
||||
resultsDiv.style.display = 'block';
|
||||
}
|
||||
|
||||
function showStatistics(data) {
|
||||
document.getElementById('totalLines').textContent = data.total_lines;
|
||||
document.getElementById('errorCount').textContent = data.errors;
|
||||
document.getElementById('warningCount').textContent = data.warnings;
|
||||
document.getElementById('successCount').textContent = data.success;
|
||||
document.getElementById('lastModified').textContent = '{{ "Последнее обновление:" | trans }} ' + data.last_modified;
|
||||
|
||||
document.getElementById('statsPanel').style.display = 'block';
|
||||
}
|
||||
|
||||
function escapeHtml(text) {
|
||||
const map = {
|
||||
'&': '&',
|
||||
'<': '<',
|
||||
'>': '>',
|
||||
'"': '"',
|
||||
"'": '''
|
||||
};
|
||||
return text.replace(/[&<>"']/g, m => map[m]);
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style>
|
||||
#logContent {
|
||||
font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
#logContent.show-line-numbers {
|
||||
counter-reset: line;
|
||||
}
|
||||
|
||||
#logContent.show-line-numbers::before {
|
||||
content: '';
|
||||
}
|
||||
|
||||
.results-list {
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 3px;
|
||||
padding: 10px;
|
||||
background: #fafafa;
|
||||
}
|
||||
|
||||
.list-group-item.active {
|
||||
background-color: #007bff;
|
||||
border-color: #007bff;
|
||||
}
|
||||
</style>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,707 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block title %}{{ editing ? t('protocols.edit_protocol') : t('protocols.create_protocol') }} - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ editing ? t('protocols.edit_protocol') : t('protocols.create_protocol') }}</h1>
|
||||
<p class="mt-2 text-gray-600">{{ editing ? t('protocols.edit_protocol_description') : t('protocols.create_protocol_description') }}</p>
|
||||
</div>
|
||||
<a href="/settings/protocols" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ t('protocols.back_to_protocols') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
{% if success %}
|
||||
<div class="mb-4 bg-green-50 border border-green-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<p class="text-green-800">{{ success }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if error %}
|
||||
<div class="mb-4 bg-red-50 border border-red-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-red-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<p class="text-red-800">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Protocol Form -->
|
||||
<form id="protocol-form" method="POST" action="/settings/protocols/save" class="space-y-6">
|
||||
{% if editing %}
|
||||
<input type="hidden" name="id" value="{{ editing.id }}">
|
||||
{% endif %}
|
||||
|
||||
<!-- Basic Information -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('protocols.basic_information') }}</h2>
|
||||
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<div>
|
||||
<label for="name" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.name_label') }} *</label>
|
||||
<input type="text" id="name" name="name" value="{{ editing.name ?? '' }}" required class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.name_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label for="slug" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.slug_label') }} *</label>
|
||||
<input type="text" id="slug" name="slug" value="{{ editing.slug ?? '' }}" required pattern="[a-z0-9_-]+" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.slug_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mt-6">
|
||||
<label for="description" class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.description') }}</label>
|
||||
<textarea id="description" name="description" rows="3" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">{{ editing.description ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.description_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Installation Script -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.installation_script') }}</h2>
|
||||
<button type="button" id="ai-help-btn" class="inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
{{ t('ai.get_ai_help') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea id="install_script" name="install_script" rows="15" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="#!/bin/bash # Installation script here">{{ editing.install_script ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.install_script_help') }}</p>
|
||||
<div class="mt-3 flex items-center space-x-2">
|
||||
<button id="test-install-btn" type="button" class="inline-flex items-center px-3 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4"/></svg>
|
||||
{{ t('protocols.test_install') }}
|
||||
</button>
|
||||
<span class="text-xs text-gray-500">{{ t('protocols.testing_on_ubuntu22') }}</span>
|
||||
</div>
|
||||
<div id="test-install-result" class="mt-3 hidden">
|
||||
<h3 class="text-sm font-medium text-gray-900">{{ t('protocols.test_result') }}</h3>
|
||||
<pre id="test-install-output" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
|
||||
<h3 class="mt-3 text-sm font-medium text-gray-900">{{ t('protocols.client_output_preview') }}</h3>
|
||||
<pre id="test-client-preview" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Uninstallation Script -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.uninstallation_script') }}</h2>
|
||||
<button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="uninstall">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
{{ t('ai.get_ai_help') }}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<textarea id="uninstall_script" name="uninstall_script" rows="12" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="#!/bin/bash # Uninstallation script here">{{ editing.uninstall_script ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.uninstall_script_help') }}</p>
|
||||
<div class="mt-3 flex items-center space-x-2">
|
||||
<button id="test-uninstall-btn" type="button" class="inline-flex items-center px-3 py-2 bg-red-600 text-white rounded hover:bg-red-700">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/></svg>
|
||||
{{ t('protocols.test_uninstall') }}
|
||||
</button>
|
||||
<span class="text-xs text-gray-500">{{ t('protocols.testing_on_ubuntu22') }}</span>
|
||||
</div>
|
||||
<div id="test-uninstall-result" class="mt-3 hidden">
|
||||
<h3 class="text-sm font-medium text-gray-900">{{ t('protocols.test_result') }}</h3>
|
||||
<pre id="test-uninstall-output" class="mt-2 p-3 bg-gray-50 border border-gray-200 rounded text-xs whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Output Template -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.output_template') }}</h2>
|
||||
<button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="template">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
{{ t('ai.get_ai_help') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea id="output_template" name="output_template" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="[Interface] PrivateKey = {{private_key}} Address = {{client_ip}}/32">{{ editing.output_template ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.output_template_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-4 bg-blue-50 rounded-md">
|
||||
<h3 class="text-sm font-medium text-blue-900 mb-2">{{ t('protocols.available_variables') }}</h3>
|
||||
<div class="text-sm text-blue-800 space-y-1">
|
||||
<p><code>{{private_key}}</code> - {{ t('protocols.variable_private_key_help') }}</p>
|
||||
<p><code>{{public_key}}</code> - {{ t('protocols.variable_public_key_help') }}</p>
|
||||
<p><code>{{client_ip}}</code> - {{ t('protocols.variable_client_ip_help') }}</p>
|
||||
<p><code>{{server_host}}</code> - {{ t('protocols.variable_server_host_help') }}</p>
|
||||
<p><code>{{server_port}}</code> - {{ t('protocols.variable_server_port_help') }}</p>
|
||||
<p><code>{{preshared_key}}</code> - {{ t('protocols.variable_preshared_key_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- QR Code Template -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="qr_section_toggle" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded mr-3" checked>
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.qr_code_template') }}</h2>
|
||||
</div>
|
||||
<button type="button" class="ai-help-btn inline-flex items-center px-3 py-1 border border-purple-300 rounded-md text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500" data-target="qr_template">
|
||||
<svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
{{ t('ai.get_ai_help') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="qr_section_content">
|
||||
<div class="mb-4">
|
||||
<label for="qr_code_format" class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.qr_code_format') }}</label>
|
||||
<select id="qr_code_format" name="qr_code_format" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="amnezia_compressed" {% if editing.qr_code_format == 'amnezia_compressed' %}selected{% endif %}>Amnezia Compressed (Default)</option>
|
||||
<option value="raw" {% if editing.qr_code_format == 'raw' %}selected{% endif %}>Raw Content</option>
|
||||
<option value="text" {% if editing.qr_code_format == 'text' %}selected{% endif %}>{{ t('protocols.qr_code_format_text') }}</option>
|
||||
</select>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.qr_code_format_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<textarea id="qr_code_template" name="qr_code_template" rows="10" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="{"last_config":{{last_config_json}}}">{{ editing.qr_code_template ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.qr_code_template_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="mt-4 p-4 bg-blue-50 rounded-md">
|
||||
<h3 class="text-sm font-medium text-blue-900 mb-2">{{ t('protocols.available_variables') }}</h3>
|
||||
<div class="text-sm text-blue-800 space-y-1">
|
||||
<p><code>{{last_config_json}}</code> - {{ t('protocols.variable_last_config_json_help') }}</p>
|
||||
<p>{{ t('protocols.plus_all_output_variables') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Password Generation -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('protocols.password_generation') }}</h2>
|
||||
<div>
|
||||
<textarea id="password_command" name="password_command" rows="6" class="w-full px-3 py-2 border rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="echo \$(openssl rand -base64 12)">{{ editing.password_command ?? '' }}</textarea>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.password_command_help') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Settings -->
|
||||
<div class="bg-white shadow rounded-lg p-6">
|
||||
<h2 class="text-lg font-medium text-gray-900 mb-4">{{ t('common.settings') }}</h2>
|
||||
|
||||
<div class="space-y-4">
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="ubuntu_compatible" name="ubuntu_compatible" value="1" {% if editing.ubuntu_compatible %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<label for="ubuntu_compatible" class="ml-2 block text-sm text-gray-900">{{ t('protocols.ubuntu_compatible') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="show_text_content" name="show_text_content" value="1" {% if editing.show_text_content %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<label for="show_text_content" class="ml-2 block text-sm text-gray-900">{{ t('protocols.show_text_content') }}</label>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center">
|
||||
<input type="checkbox" id="is_active" name="is_active" value="1" {% if editing.is_active is not defined or editing.is_active %}checked{% endif %} class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
|
||||
<label for="is_active" class="ml-2 block text-sm text-gray-900">{{ t('protocols.active_label') }}</label>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Form Actions -->
|
||||
<div class="flex justify-end space-x-3">
|
||||
<a href="/settings/protocols" class="px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
{{ t('common.cancel') }}
|
||||
</a>
|
||||
<button type="submit" class="px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
{{ editing ? t('protocols.update_protocol') : t('protocols.create_protocol') }}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Assistant Modal -->
|
||||
<div id="ai-assistant-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">{{ t('ai.assistant') }}</h3>
|
||||
<button id="close-ai-modal" class="text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.select_model') }}</label>
|
||||
<select id="ai-model-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="openai/gpt-3.5-turbo">{{ t('ai.model_gpt35_turbo') }}</option>
|
||||
<option value="openai/gpt-4">{{ t('ai.model_gpt4') }}</option>
|
||||
<option value="anthropic/claude-3-haiku">{{ t('ai.model_claude3_haiku') }}</option>
|
||||
<option value="anthropic/claude-3-sonnet">{{ t('ai.model_claude3_sonnet') }}</option>
|
||||
</select>
|
||||
<div class="mt-2 flex items-center space-x-2">
|
||||
<input id="ai-model-custom" type="text" placeholder="{{ t('ai.custom_model_placeholder') }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
|
||||
<button id="ai-model-test-btn" type="button" class="px-3 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50">{{ t('ai.check_availability') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
<a href="https://openrouter.ai/models" target="_blank" class="text-purple-600">openrouter.ai/models</a>
|
||||
</p>
|
||||
{% if not openrouter_key %}
|
||||
<div class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-yellow-800">{{ t('settings.no_api_key') }}</span>
|
||||
<a href="/settings#api" class="px-2 py-1 text-xs bg-purple-600 text-white rounded">{{ t('settings.enter_api_key') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.protocol_type') }}</label>
|
||||
<select id="ai-protocol-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">{{ t('ai.general_vpn') }}</option>
|
||||
<option value="wireguard">WireGuard</option>
|
||||
<option value="openvpn">OpenVPN</option>
|
||||
<option value="shadowsocks">Shadowsocks</option>
|
||||
<option value="cloak">Cloak</option>
|
||||
<option value="ikev2">IKEv2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.describe_requirements') }}</label>
|
||||
<textarea id="ai-prompt" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="{{ t('ai.prompt_placeholder') }}"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<button id="generate-script-btn" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
{{ t('ai.generate_script') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="ai-loading" class="hidden text-center py-4">
|
||||
<div class="inline-flex items-center">
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>{{ t('ai.generating_script') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ai-result" class="hidden">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.generated_script') }}</label>
|
||||
<div class="bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto">
|
||||
<pre id="generated-script" class="text-sm whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ai-suggestions" class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.suggestions') }}</label>
|
||||
<ul id="suggestions-list" class="list-disc list-inside space-y-1 text-sm text-gray-600"></ul>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.compatibility') }}</label>
|
||||
<div id="ubuntu-compatibility" class="flex items-center"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button id="apply-to-current-btn" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
||||
{{ t('ai.apply_to_current_protocol') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// AI Assistant Modal
|
||||
const aiModal = document.getElementById('ai-assistant-modal');
|
||||
const aiHelpBtns = document.querySelectorAll('.ai-help-btn');
|
||||
const closeAIModal = document.getElementById('close-ai-modal');
|
||||
const generateScriptBtn = document.getElementById('generate-script-btn');
|
||||
const aiLoading = document.getElementById('ai-loading');
|
||||
const aiResult = document.getElementById('ai-result');
|
||||
const applyToCurrentBtn = document.getElementById('apply-to-current-btn');
|
||||
const installScriptTextarea = document.getElementById('install_script');
|
||||
const uninstallScriptTextarea = document.getElementById('uninstall_script');
|
||||
const outputTemplateTextarea = document.getElementById('output_template');
|
||||
|
||||
// QR Template Section Toggle
|
||||
const qrSectionToggle = document.getElementById('qr_section_toggle');
|
||||
const qrSectionContent = document.getElementById('qr_section_content');
|
||||
|
||||
if (qrSectionToggle && qrSectionContent) {
|
||||
qrSectionToggle.addEventListener('change', function() {
|
||||
qrSectionContent.style.display = this.checked ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
let currentAiTarget = 'install'; // install, uninstall, template
|
||||
|
||||
function showAIModal(target) {
|
||||
currentAiTarget = target || 'install';
|
||||
aiModal.classList.remove('hidden');
|
||||
aiResult.classList.add('hidden');
|
||||
aiLoading.classList.add('hidden');
|
||||
|
||||
// Update modal title or prompt placeholder based on target if needed
|
||||
const promptArea = document.getElementById('ai-prompt');
|
||||
if (currentAiTarget === 'template') {
|
||||
promptArea.placeholder = "{{ t('ai.prompt_placeholder_template') }}";
|
||||
} else if (currentAiTarget === 'qr_template') {
|
||||
promptArea.placeholder = "{{ t('ai.prompt_placeholder_qr_template') }}";
|
||||
} else if (currentAiTarget === 'uninstall') {
|
||||
promptArea.placeholder = "{{ t('ai.prompt_placeholder_uninstall') }}";
|
||||
} else {
|
||||
promptArea.placeholder = "{{ t('ai.prompt_placeholder') }}";
|
||||
}
|
||||
}
|
||||
|
||||
function hideAIModal() {
|
||||
aiModal.classList.add('hidden');
|
||||
}
|
||||
|
||||
// Attach event listeners to all AI help buttons
|
||||
aiHelpBtns.forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const target = this.getAttribute('data-target') || 'install';
|
||||
showAIModal(target);
|
||||
});
|
||||
});
|
||||
|
||||
// Also attach to the original ID if it exists (for backward compatibility or if I missed updating one)
|
||||
const originalAiBtn = document.getElementById('ai-help-btn');
|
||||
if (originalAiBtn) {
|
||||
originalAiBtn.addEventListener('click', function() {
|
||||
showAIModal('install');
|
||||
});
|
||||
}
|
||||
|
||||
closeAIModal.addEventListener('click', hideAIModal);
|
||||
|
||||
// Close modal when clicking outside
|
||||
aiModal.addEventListener('click', function(e) {
|
||||
if (e.target === aiModal) {
|
||||
hideAIModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Generate script with AI
|
||||
generateScriptBtn.addEventListener('click', async function() {
|
||||
const model = document.getElementById('ai-model-select').value;
|
||||
const customModel = document.getElementById('ai-model-custom').value.trim();
|
||||
const effectiveModel = customModel !== '' ? customModel : model;
|
||||
const protocolType = document.getElementById('ai-protocol-type').value;
|
||||
const prompt = document.getElementById('ai-prompt').value;
|
||||
|
||||
if (!prompt.trim()) {
|
||||
alert('{{ t('ai.please_enter_requirements') }}');
|
||||
return;
|
||||
}
|
||||
|
||||
aiLoading.classList.remove('hidden');
|
||||
generateScriptBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/ai/assist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
model: effectiveModel,
|
||||
protocol_type: protocolType,
|
||||
target: currentAiTarget
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
displayAIResult(result.data);
|
||||
} else {
|
||||
alert('{{ t('ai.error_generating_script') }}: ' + result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('{{ t('ai.error_generating_script') }}: ' + error.message);
|
||||
} finally {
|
||||
aiLoading.classList.add('hidden');
|
||||
generateScriptBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
function displayAIResult(data) {
|
||||
document.getElementById('generated-script').textContent = data.script;
|
||||
|
||||
const suggestionsList = document.getElementById('suggestions-list');
|
||||
suggestionsList.innerHTML = '';
|
||||
data.suggestions.forEach(suggestion => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = suggestion;
|
||||
suggestionsList.appendChild(li);
|
||||
});
|
||||
|
||||
const compatibilityDiv = document.getElementById('ubuntu-compatibility');
|
||||
if (data.ubuntu_compatible) {
|
||||
compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg><span class="text-green-700">Compatible with Ubuntu 22.04-24.04</span>';
|
||||
} else {
|
||||
compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg><span class="text-red-700">May not be compatible with Ubuntu 22.04-24.04</span>';
|
||||
}
|
||||
|
||||
aiResult.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Apply to current protocol
|
||||
applyToCurrentBtn.addEventListener('click', function() {
|
||||
const generatedScript = document.getElementById('generated-script').textContent;
|
||||
if (generatedScript && confirm('{{ t('ai.confirm_apply_script') }}')) {
|
||||
if (currentAiTarget === 'uninstall') {
|
||||
uninstallScriptTextarea.value = generatedScript;
|
||||
} else if (currentAiTarget === 'template') {
|
||||
outputTemplateTextarea.value = generatedScript;
|
||||
} else if (currentAiTarget === 'qr_template') {
|
||||
document.getElementById('qr_code_template').value = generatedScript;
|
||||
} else {
|
||||
installScriptTextarea.value = generatedScript;
|
||||
}
|
||||
hideAIModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Form validation
|
||||
document.getElementById('protocol-form').addEventListener('submit', function(e) {
|
||||
const name = document.getElementById('name').value.trim();
|
||||
const slug = document.getElementById('slug').value.trim();
|
||||
|
||||
if (!name || !slug) {
|
||||
e.preventDefault();
|
||||
alert('{{ t('protocols.please_fill_required_fields') }}');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!/^[a-z0-9_-]+$/i.test(slug)) {
|
||||
e.preventDefault();
|
||||
alert('{{ t('protocols.invalid_slug_format') }}');
|
||||
return;
|
||||
}
|
||||
});
|
||||
|
||||
// Auto-generate slug from name
|
||||
document.getElementById('name').addEventListener('blur', function() {
|
||||
const name = this.value.trim();
|
||||
const slugField = document.getElementById('slug');
|
||||
|
||||
if (name && !slugField.value.trim()) {
|
||||
slugField.value = name.toLowerCase()
|
||||
.replace(/[^a-z0-9\s-]/g, '')
|
||||
.replace(/\s+/g, '-')
|
||||
.replace(/-+/g, '-')
|
||||
.replace(/^-|-$/g, '');
|
||||
}
|
||||
});
|
||||
|
||||
// Test Install Script
|
||||
const testBtn = document.getElementById('test-install-btn');
|
||||
const testBox = document.getElementById('test-install-result');
|
||||
const testOut = document.getElementById('test-install-output');
|
||||
const clientPrev = document.getElementById('test-client-preview');
|
||||
|
||||
if (testBtn) {
|
||||
testBtn.addEventListener('click', function() {
|
||||
const protocolId = {{ editing ? editing.id : 'null' }};
|
||||
if (!protocolId) {
|
||||
return;
|
||||
}
|
||||
testBtn.disabled = true;
|
||||
testBtn.classList.add('opacity-50');
|
||||
testOut.textContent = '';
|
||||
clientPrev.textContent = '';
|
||||
testBox.classList.remove('hidden');
|
||||
|
||||
const appendCmd = (cmd) => {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'text-xs text-gray-800';
|
||||
line.innerHTML = `<span class="text-blue-600">$</span> <code>${cmd}</code>`;
|
||||
testOut.appendChild(line);
|
||||
};
|
||||
const appendOut = (text) => {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'mt-1 p-2 bg-gray-100 border border-gray-200 rounded text-xs whitespace-pre-wrap';
|
||||
pre.textContent = text;
|
||||
testOut.appendChild(pre);
|
||||
};
|
||||
const setError = (msg) => {
|
||||
const err = document.createElement('div');
|
||||
err.className = 'mt-2 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700';
|
||||
err.textContent = msg;
|
||||
testOut.appendChild(err);
|
||||
};
|
||||
|
||||
let es;
|
||||
try {
|
||||
es = new EventSource(`/api/protocols/${protocolId}/test-install/stream`);
|
||||
} catch (e) {
|
||||
es = null;
|
||||
}
|
||||
|
||||
if (es) {
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.type === 'start') {
|
||||
appendOut('{{ t('protocols.testing_on_ubuntu22') }}');
|
||||
} else if (data.type === 'cmd') {
|
||||
appendCmd(data.cmd);
|
||||
} else if (data.type === 'out') {
|
||||
appendOut(data.line);
|
||||
} else if (data.type === 'cmd_done') {
|
||||
if (data.rc !== 0) {
|
||||
setError('Command failed');
|
||||
}
|
||||
} else if (data.type === 'preview') {
|
||||
clientPrev.textContent = data.preview || '';
|
||||
} else if (data.type === 'done') {
|
||||
es.close();
|
||||
testBtn.disabled = false;
|
||||
testBtn.classList.remove('opacity-50');
|
||||
} else if (data.type === 'error') {
|
||||
setError(data.error || 'Unknown error');
|
||||
es.close();
|
||||
testBtn.disabled = false;
|
||||
testBtn.classList.remove('opacity-50');
|
||||
}
|
||||
} catch (_) {}
|
||||
};
|
||||
es.onerror = () => {
|
||||
es.close();
|
||||
testBtn.disabled = false;
|
||||
testBtn.classList.remove('opacity-50');
|
||||
setError('Connection failed');
|
||||
};
|
||||
} else {
|
||||
// Fallback to non-stream if needed, but we implemented stream
|
||||
testBtn.disabled = false;
|
||||
testBtn.classList.remove('opacity-50');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Test Uninstall Script
|
||||
const testUninstallBtn = document.getElementById('test-uninstall-btn');
|
||||
const testUninstallBox = document.getElementById('test-uninstall-result');
|
||||
const testUninstallOut = document.getElementById('test-uninstall-output');
|
||||
|
||||
if (testUninstallBtn) {
|
||||
testUninstallBtn.addEventListener('click', function() {
|
||||
const protocolId = {{ editing ? editing.id : 'null' }};
|
||||
if (!protocolId) {
|
||||
return;
|
||||
}
|
||||
testUninstallBtn.disabled = true;
|
||||
testUninstallBtn.classList.add('opacity-50');
|
||||
testUninstallOut.textContent = '';
|
||||
testUninstallBox.classList.remove('hidden');
|
||||
|
||||
const appendCmd = (cmd) => {
|
||||
const line = document.createElement('div');
|
||||
line.className = 'text-xs text-gray-800';
|
||||
line.innerHTML = `<span class="text-blue-600">$</span> <code>${cmd}</code>`;
|
||||
testUninstallOut.appendChild(line);
|
||||
};
|
||||
const appendOut = (text) => {
|
||||
const pre = document.createElement('pre');
|
||||
pre.className = 'mt-1 p-2 bg-gray-100 border border-gray-200 rounded text-xs whitespace-pre-wrap';
|
||||
pre.textContent = text;
|
||||
testUninstallOut.appendChild(pre);
|
||||
};
|
||||
const setError = (msg) => {
|
||||
const err = document.createElement('div');
|
||||
err.className = 'mt-2 p-2 bg-red-50 border border-red-200 rounded text-xs text-red-700';
|
||||
err.textContent = msg;
|
||||
testUninstallOut.appendChild(err);
|
||||
};
|
||||
|
||||
let es;
|
||||
try {
|
||||
es = new EventSource(`/api/protocols/${protocolId}/test-uninstall/stream`);
|
||||
} catch (e) {
|
||||
es = null;
|
||||
}
|
||||
|
||||
if (es) {
|
||||
es.onmessage = (e) => {
|
||||
try {
|
||||
const data = JSON.parse(e.data);
|
||||
if (data.type === 'start') {
|
||||
appendOut('{{ t('protocols.testing_on_ubuntu22') }}');
|
||||
} else if (data.type === 'cmd') {
|
||||
appendCmd(data.cmd);
|
||||
} else if (data.type === 'out') {
|
||||
appendOut(data.line);
|
||||
} else if (data.type === 'cmd_done') {
|
||||
if (data.rc !== 0) {
|
||||
setError('Command failed');
|
||||
}
|
||||
} else if (data.type === 'done') {
|
||||
es.close();
|
||||
testUninstallBtn.disabled = false;
|
||||
testUninstallBtn.classList.remove('opacity-50');
|
||||
} else if (data.type === 'error') {
|
||||
setError(data.error || 'Unknown error');
|
||||
es.close();
|
||||
testUninstallBtn.disabled = false;
|
||||
testUninstallBtn.classList.remove('opacity-50');
|
||||
}
|
||||
} catch (_) {}
|
||||
};
|
||||
es.onerror = () => {
|
||||
es.close();
|
||||
testUninstallBtn.disabled = false;
|
||||
testUninstallBtn.classList.remove('opacity-50');
|
||||
setError('Connection failed');
|
||||
};
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,272 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block title %}{{ t('protocols.template_editor') }} - {{ parent() }}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
<div class="min-h-screen bg-gray-50">
|
||||
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ t('protocols.template_editor') }}</h1>
|
||||
<p class="mt-2 text-gray-600">{{ t('protocols.template_editor_description') }}</p>
|
||||
</div>
|
||||
<a href="/settings/protocols" class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18"/>
|
||||
</svg>
|
||||
{{ t('protocols.back_to_protocols') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template Editor -->
|
||||
<div class="bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ protocol.name }} - {{ t('protocols.output_template') }}</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">{{ t('protocols.template_editor_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
||||
<!-- Template Editor -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700">{{ t('protocols.template_content') }}</label>
|
||||
<div class="flex space-x-2">
|
||||
<button id="format-template" class="px-3 py-1 text-xs bg-gray-100 text-gray-700 rounded hover:bg-gray-200">{{ t('common.format') }}</button>
|
||||
<button id="clear-template" class="px-3 py-1 text-xs bg-red-100 text-red-700 rounded hover:bg-red-200">{{ t('common.clear') }}</button>
|
||||
</div>
|
||||
</div>
|
||||
<textarea id="template-editor" rows="20" class="w-full px-3 py-2 border border-gray-300 rounded-md font-mono text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">{{ protocol.output_template }}</textarea>
|
||||
|
||||
<div class="mt-3 flex space-x-2">
|
||||
<button id="save-template" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7H5a2 2 0 00-2 2v9a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-3m-1 4l-3 3m0 0l-3-3m3 3V4"/>
|
||||
</svg>
|
||||
{{ t('protocols.save_template') }}
|
||||
</button>
|
||||
<button id="preview-template" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
|
||||
</svg>
|
||||
{{ t('common.preview') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Preview Panel -->
|
||||
<div>
|
||||
<div class="flex justify-between items-center mb-3">
|
||||
<label class="block text-sm font-medium text-gray-700">{{ t('common.preview') }}</label>
|
||||
<button id="refresh-preview" class="px-3 py-1 text-xs bg-green-100 text-green-700 rounded hover:bg-green-200">{{ t('common.refresh') }}</button>
|
||||
</div>
|
||||
<div class="bg-gray-900 text-green-400 p-4 rounded-md h-96 overflow-auto">
|
||||
<pre id="template-preview" class="text-sm whitespace-pre-wrap">{{ t('protocols.click_preview_to_see_output') }}</pre>
|
||||
</div>
|
||||
|
||||
<div class="mt-3">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.test_variables') }}</label>
|
||||
<div class="space-y-2">
|
||||
<input type="text" id="test-private-key" placeholder="{{ t('protocols.private_key') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="test_private_key_example_1234567890abcdef">
|
||||
<input type="text" id="test-client-ip" placeholder="{{ t('protocols.client_ip') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="10.8.1.2">
|
||||
<input type="text" id="test-server-host" placeholder="{{ t('protocols.server_host') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="vpn.example.com">
|
||||
<input type="text" id="test-server-port" placeholder="{{ t('protocols.server_port') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="51820">
|
||||
<input type="text" id="test-preshared-key" placeholder="{{ t('protocols.preshared_key') }}" class="w-full px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500" value="test_preshared_key_example">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Template Variables -->
|
||||
<div class="mt-6 bg-white shadow rounded-lg">
|
||||
<div class="px-6 py-4 border-b border-gray-200">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.template_variables') }}</h2>
|
||||
<p class="mt-1 text-sm text-gray-600">{{ t('protocols.template_variables_help') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="p-6">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{private_key}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{private_key}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_private_key_desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{public_key}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{public_key}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_public_key_desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{client_ip}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{client_ip}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_client_ip_desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{server_host}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{server_host}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_server_host_desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{server_port}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{server_port}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_server_port_desc') }}</p>
|
||||
</div>
|
||||
|
||||
<div class="variable-card p-3 border border-gray-200 rounded-md">
|
||||
<div class="flex justify-between items-center">
|
||||
<code class="text-sm bg-gray-100 px-2 py-1 rounded">{{preshared_key}}</code>
|
||||
<button class="copy-variable text-xs text-blue-600 hover:text-blue-800" data-variable="{{preshared_key}}">{{ t('common.copy') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-600">{{ t('protocols.variable_preshared_key_desc') }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const templateEditor = document.getElementById('template-editor');
|
||||
const templatePreview = document.getElementById('template-preview');
|
||||
const saveTemplateBtn = document.getElementById('save-template');
|
||||
const previewBtn = document.getElementById('preview-template');
|
||||
const refreshBtn = document.getElementById('refresh-preview');
|
||||
const formatBtn = document.getElementById('format-template');
|
||||
const clearBtn = document.getElementById('clear-template');
|
||||
|
||||
const testPrivateKey = document.getElementById('test-private-key');
|
||||
const testClientIp = document.getElementById('test-client-ip');
|
||||
const testServerHost = document.getElementById('test-server-host');
|
||||
const testServerPort = document.getElementById('test-server-port');
|
||||
const testPresharedKey = document.getElementById('test-preshared-key');
|
||||
|
||||
// Preview template
|
||||
function previewTemplate() {
|
||||
let template = templateEditor.value;
|
||||
|
||||
// Replace variables with test values
|
||||
template = template.replace(/\{\{private_key\}\}/g, testPrivateKey.value);
|
||||
template = template.replace(/\{\{public_key\}\}/g, 'test_public_key_example');
|
||||
template = template.replace(/\{\{client_ip\}\}/g, testClientIp.value);
|
||||
template = template.replace(/\{\{server_host\}\}/g, testServerHost.value);
|
||||
template = template.replace(/\{\{server_port\}\}/g, testServerPort.value);
|
||||
template = template.replace(/\{\{preshared_key\}\}/g, testPresharedKey.value);
|
||||
|
||||
templatePreview.textContent = template;
|
||||
}
|
||||
|
||||
previewBtn.addEventListener('click', previewTemplate);
|
||||
refreshBtn.addEventListener('click', previewTemplate);
|
||||
|
||||
// Auto-preview on input change
|
||||
[testPrivateKey, testClientIp, testServerHost, testServerPort, testPresharedKey].forEach(input => {
|
||||
input.addEventListener('input', function() {
|
||||
if (templatePreview.textContent !== '{{ t('protocols.click_preview_to_see_output') }}') {
|
||||
previewTemplate();
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// Save template
|
||||
saveTemplateBtn.addEventListener('click', function() {
|
||||
const protocolId = {{ protocol.id }};
|
||||
const template = templateEditor.value;
|
||||
|
||||
fetch(`/api/protocols/${protocolId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
output_template: template
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
alert('{{ t('protocols.template_saved_successfully') }}');
|
||||
} else {
|
||||
alert('{{ t('protocols.error_saving_template') }}: ' + result.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('{{ t('protocols.error_saving_template') }}: ' + error.message);
|
||||
});
|
||||
});
|
||||
|
||||
// Format template (basic formatting)
|
||||
formatBtn.addEventListener('click', function() {
|
||||
let template = templateEditor.value;
|
||||
|
||||
// Basic formatting for WireGuard configs
|
||||
if (template.includes('[Interface]') || template.includes('[Peer]')) {
|
||||
template = template.replace(/\n\s*/g, '\n');
|
||||
template = template.replace(/\[/g, '\n[');
|
||||
template = template.trim();
|
||||
}
|
||||
|
||||
templateEditor.value = template;
|
||||
alert('{{ t('protocols.template_formatted') }}');
|
||||
});
|
||||
|
||||
// Clear template
|
||||
clearBtn.addEventListener('click', function() {
|
||||
if (confirm('{{ t('protocols.confirm_clear_template') }}')) {
|
||||
templateEditor.value = '';
|
||||
templatePreview.textContent = '{{ t('protocols.click_preview_to_see_output') }}';
|
||||
}
|
||||
});
|
||||
|
||||
// Copy variables
|
||||
document.querySelectorAll('.copy-variable').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const variable = this.dataset.variable;
|
||||
const textarea = document.createElement('textarea');
|
||||
textarea.value = variable;
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand('copy');
|
||||
document.body.removeChild(textarea);
|
||||
|
||||
// Show feedback
|
||||
const originalText = this.textContent;
|
||||
this.textContent = '{{ t('common.copied') }}';
|
||||
setTimeout(() => {
|
||||
this.textContent = originalText;
|
||||
}, 1000);
|
||||
});
|
||||
});
|
||||
|
||||
// Auto-save functionality (optional)
|
||||
let autoSaveTimeout;
|
||||
templateEditor.addEventListener('input', function() {
|
||||
clearTimeout(autoSaveTimeout);
|
||||
autoSaveTimeout = setTimeout(function() {
|
||||
// Could implement auto-save here
|
||||
console.log('Template changed, could auto-save...');
|
||||
}, 2000);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,522 @@
|
||||
<div class="max-w-6xl mx-auto px-1 py-2">
|
||||
<!-- Header -->
|
||||
<div class="mb-8">
|
||||
<div class="flex justify-between items-center">
|
||||
<div>
|
||||
<h1 class="text-3xl font-bold text-gray-900">{{ t('protocols.management') }}</h1>
|
||||
<p class="mt-2 text-gray-600">{{ t('protocols.management_description') }}</p>
|
||||
</div>
|
||||
<div class="flex space-x-3">
|
||||
<button id="ai-assistant-btn" class="inline-flex items-center px-4 py-2 border border-purple-300 rounded-md shadow-sm text-sm font-medium text-purple-700 bg-white hover:bg-purple-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
{{ t('ai.assistant') }}
|
||||
</button>
|
||||
<a href="/settings/protocols/new" class="inline-flex items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
{{ t('protocols.add_protocol') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Success/Error Messages -->
|
||||
{% if success %}
|
||||
<div class="mb-4 bg-green-50 border border-green-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<p class="text-green-800">{{ success }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
{% if error %}
|
||||
<div class="mb-4 bg-red-50 border border-red-200 rounded-md p-4">
|
||||
<div class="flex">
|
||||
<svg class="w-5 h-5 text-red-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
|
||||
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/>
|
||||
</svg>
|
||||
<p class="text-red-800">{{ error }}</p>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<!-- Protocols Grid -->
|
||||
<div class="bg-white shadow overflow-hidden sm:rounded-md">
|
||||
<div class="px-4 py-5 sm:p-6">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h2 class="text-lg font-medium text-gray-900">{{ t('protocols.available_protocols') }}</h2>
|
||||
<div class="flex space-x-2">
|
||||
<input type="text" id="protocol-search" placeholder="{{ t('protocols.search_protocols') }}" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<select id="protocol-filter" class="px-3 py-2 border border-gray-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">{{ t('protocols.all_protocols') }}</option>
|
||||
<option value="active">{{ t('protocols.active_only') }}</option>
|
||||
<option value="ubuntu">{{ t('protocols.ubuntu_compatible') }}</option>
|
||||
<option value="with-ai">{{ t('protocols.with_ai_generations') }}</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="protocols-list" class="space-y-4">
|
||||
{% for protocol in protocols %}
|
||||
<div class="protocol-card border border-gray-200 rounded-lg p-4 hover:shadow-md transition-shadow" data-protocol-id="{{ protocol.id }}" data-protocol-name="{{ protocol.name }}" data-protocol-slug="{{ protocol.slug }}" data-active="{{ protocol.is_active }}" data-ubuntu="{{ protocol.ubuntu_compatible }}" data-ai-generations="{{ protocol.ai_generation_count }}">
|
||||
<div class="flex justify-between items-start">
|
||||
<div class="flex-1">
|
||||
<div class="flex items-center space-x-3">
|
||||
<h3 class="text-lg font-semibold text-gray-900">{{ protocol.name }}</h3>
|
||||
{% if protocol.is_active %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
|
||||
{{ t('common.active') }}
|
||||
</span>
|
||||
{% else %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
|
||||
{{ t('common.inactive') }}
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if protocol.ubuntu_compatible %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
|
||||
Ubuntu 22-24
|
||||
</span>
|
||||
{% endif %}
|
||||
{% if protocol.ai_generation_count > 0 %}
|
||||
<span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
|
||||
AI {{ protocol.ai_generation_count }}
|
||||
</span>
|
||||
{% endif %}
|
||||
</div>
|
||||
<p class="mt-1 text-sm text-gray-600">{{ protocol.description }}</p>
|
||||
<div class="mt-2 flex items-center space-x-4 text-xs text-gray-500">
|
||||
<span>{{ t('common.slug') }}: <code class="bg-gray-100 px-1 rounded">{{ protocol.slug }}</code></span>
|
||||
<span>{{ t('common.servers') }}: {{ protocol.server_count }}</span>
|
||||
<span>{{ t('common.templates') }}: {{ protocol.template_count }}</span>
|
||||
<span>{{ t('common.variables') }}: {{ protocol.variable_count }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2">
|
||||
<button class="ai-generate-btn text-purple-600 hover:text-purple-900" data-protocol-id="{{ protocol.id }}" title="{{ t('ai.generate_with_ai') }}">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/>
|
||||
</svg>
|
||||
</button>
|
||||
<a href="/settings/protocols/{{ protocol.id }}/edit" class="text-blue-600 hover:text-blue-900" title="{{ t('common.edit') }}">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
|
||||
</svg>
|
||||
</a>
|
||||
<a href="/settings/protocols/{{ protocol.id }}/template" class="text-green-600 hover:text-green-900" title="{{ t('protocols.edit_template') }}">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
|
||||
</svg>
|
||||
</a>
|
||||
{% if protocol.server_count == 0 %}
|
||||
<button class="delete-protocol-btn text-red-600 hover:text-red-900" data-protocol-id="{{ protocol.id }}" data-protocol-name="{{ protocol.name }}" title="{{ t('common.delete') }}">
|
||||
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
|
||||
</svg>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="text-center py-8">
|
||||
<svg class="mx-auto h-12 w-12 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10"/>
|
||||
</svg>
|
||||
<h3 class="mt-2 text-sm font-medium text-gray-900">{{ t('protocols.no_protocols') }}</h3>
|
||||
<p class="mt-1 text-sm text-gray-500">{{ t('protocols.no_protocols_description') }}</p>
|
||||
<div class="mt-6">
|
||||
<a href="/settings/protocols/new" class="inline-flex items-center px-4 py-2 border border-transparent shadow-sm text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/>
|
||||
</svg>
|
||||
{{ t('protocols.create_first_protocol') }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- AI Assistant Modal -->
|
||||
<div id="ai-assistant-modal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50">
|
||||
<div class="relative top-20 mx-auto p-5 border w-11/12 max-w-4xl shadow-lg rounded-md bg-white">
|
||||
<div class="flex justify-between items-center mb-4">
|
||||
<h3 class="text-lg font-semibold text-gray-900">{{ t('ai.assistant') }}</h3>
|
||||
<button id="close-ai-modal" class="text-gray-400 hover:text-gray-600">
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.select_model') }}</label>
|
||||
<select id="ai-model-select" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="openai/gpt-3.5-turbo">{{ t('ai.model_gpt35_turbo') }}</option>
|
||||
<option value="openai/gpt-4">{{ t('ai.model_gpt4') }}</option>
|
||||
<option value="anthropic/claude-3-haiku">{{ t('ai.model_claude3_haiku') }}</option>
|
||||
<option value="anthropic/claude-3-sonnet">{{ t('ai.model_claude3_sonnet') }}</option>
|
||||
</select>
|
||||
<div class="mt-2 flex items-center space-x-2">
|
||||
<input id="ai-model-custom" type="text" placeholder="{{ t('ai.custom_model_placeholder') }}" class="flex-1 px-3 py-2 border border-gray-300 rounded-md">
|
||||
<button id="ai-model-test-btn" type="button" class="px-3 py-2 text-sm border border-gray-300 rounded-md hover:bg-gray-50">{{ t('ai.check_availability') }}</button>
|
||||
</div>
|
||||
<p class="mt-2 text-xs text-gray-500">
|
||||
<i class="fas fa-external-link-alt"></i>
|
||||
<a href="https://openrouter.ai/models" target="_blank" class="text-purple-600">openrouter.ai/models</a>
|
||||
</p>
|
||||
{% if not openrouter_key %}
|
||||
<div class="mt-3 p-3 bg-yellow-50 border border-yellow-200 rounded">
|
||||
<div class="flex items-center justify-between">
|
||||
<span class="text-xs text-yellow-800">{{ t('settings.no_api_key') }}</span>
|
||||
<a href="/settings#api" class="px-2 py-1 text-xs bg-purple-600 text-white rounded">{{ t('settings.enter_api_key') }}</a>
|
||||
</div>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.protocol_type') }}</label>
|
||||
<select id="ai-protocol-type" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500">
|
||||
<option value="">{{ t('ai.general_vpn') }}</option>
|
||||
<option value="wireguard">WireGuard</option>
|
||||
<option value="openvpn">OpenVPN</option>
|
||||
<option value="shadowsocks">Shadowsocks</option>
|
||||
<option value="cloak">Cloak</option>
|
||||
<option value="ikev2">IKEv2</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.describe_requirements') }}</label>
|
||||
<textarea id="ai-prompt" rows="4" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500" placeholder="{{ t('ai.prompt_placeholder') }}"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<button id="generate-script-btn" class="w-full inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-purple-600 hover:bg-purple-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-purple-500">
|
||||
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"/>
|
||||
</svg>
|
||||
{{ t('ai.generate_script') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="ai-loading" class="hidden text-center py-4">
|
||||
<div class="inline-flex items-center">
|
||||
<svg class="animate-spin -ml-1 mr-3 h-5 w-5 text-purple-600" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
||||
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
||||
</svg>
|
||||
<span>{{ t('ai.generating_script') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ai-result" class="hidden">
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.generated_script') }}</label>
|
||||
<div class="bg-gray-900 text-green-400 p-4 rounded-md overflow-x-auto">
|
||||
<pre id="generated-script" class="text-sm whitespace-pre-wrap"></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="ai-suggestions" class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('ai.suggestions') }}</label>
|
||||
<ul id="suggestions-list" class="list-disc list-inside space-y-1 text-sm text-gray-600"></ul>
|
||||
</div>
|
||||
<div class="mb-4 grid grid-cols-1 md:grid-cols-2 gap-3">
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.name') }}</label>
|
||||
<input id="ai-protocol-name" type="text" placeholder="Protocol Name" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
||||
</div>
|
||||
<div>
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('protocols.slug') }}</label>
|
||||
<input id="ai-protocol-slug" type="text" placeholder="protocol-slug" class="w-full px-3 py-2 border border-gray-300 rounded-md">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="mb-4">
|
||||
<label class="block text-sm font-medium text-gray-700 mb-2">{{ t('common.compatibility') }}</label>
|
||||
<div id="ubuntu-compatibility" class="flex items-center"></div>
|
||||
</div>
|
||||
|
||||
<div class="flex space-x-3">
|
||||
<button id="apply-to-protocol-btn" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500">
|
||||
{{ t('ai.apply_to_protocol') }}
|
||||
</button>
|
||||
<button id="create-new-protocol-btn" class="flex-1 inline-flex justify-center items-center px-4 py-2 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500">
|
||||
{{ t('ai.create_new_protocol') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Protocol search and filter
|
||||
const searchInput = document.getElementById('protocol-search');
|
||||
const filterSelect = document.getElementById('protocol-filter');
|
||||
const protocolCards = document.querySelectorAll('.protocol-card');
|
||||
|
||||
function filterProtocols() {
|
||||
const searchTerm = searchInput.value.toLowerCase();
|
||||
const filterValue = filterSelect.value;
|
||||
|
||||
protocolCards.forEach(card => {
|
||||
const name = card.dataset.protocolName.toLowerCase();
|
||||
const slug = card.dataset.protocolSlug.toLowerCase();
|
||||
const isActive = card.dataset.active === '1';
|
||||
const isUbuntu = card.dataset.ubuntu === '1';
|
||||
const hasAI = parseInt(card.dataset.aiGenerations) > 0;
|
||||
|
||||
let show = true;
|
||||
|
||||
// Search filter
|
||||
if (searchTerm && !name.includes(searchTerm) && !slug.includes(searchTerm)) {
|
||||
show = false;
|
||||
}
|
||||
|
||||
// Filter by type
|
||||
if (filterValue === 'active' && !isActive) show = false;
|
||||
if (filterValue === 'ubuntu' && !isUbuntu) show = false;
|
||||
if (filterValue === 'with-ai' && !hasAI) show = false;
|
||||
|
||||
card.style.display = show ? 'block' : 'none';
|
||||
});
|
||||
}
|
||||
|
||||
searchInput.addEventListener('input', filterProtocols);
|
||||
filterSelect.addEventListener('change', filterProtocols);
|
||||
|
||||
// AI Assistant Modal
|
||||
const aiModal = document.getElementById('ai-assistant-modal');
|
||||
const aiAssistantBtn = document.getElementById('ai-assistant-btn');
|
||||
const closeAIModal = document.getElementById('close-ai-modal');
|
||||
const generateScriptBtn = document.getElementById('generate-script-btn');
|
||||
const aiLoading = document.getElementById('ai-loading');
|
||||
const aiResult = document.getElementById('ai-result');
|
||||
const applyToProtocolBtn = document.getElementById('apply-to-protocol-btn');
|
||||
const createNewProtocolBtn = document.getElementById('create-new-protocol-btn');
|
||||
|
||||
let currentGeneration = null;
|
||||
let currentProtocolId = null;
|
||||
|
||||
function showAIModal() {
|
||||
aiModal.classList.remove('hidden');
|
||||
aiResult.classList.add('hidden');
|
||||
aiLoading.classList.add('hidden');
|
||||
}
|
||||
|
||||
function hideAIModal() {
|
||||
aiModal.classList.add('hidden');
|
||||
currentGeneration = null;
|
||||
currentProtocolId = null;
|
||||
}
|
||||
|
||||
aiAssistantBtn.addEventListener('click', showAIModal);
|
||||
closeAIModal.addEventListener('click', hideAIModal);
|
||||
|
||||
// Close modal when clicking outside
|
||||
aiModal.addEventListener('click', function(e) {
|
||||
if (e.target === aiModal) {
|
||||
hideAIModal();
|
||||
}
|
||||
});
|
||||
|
||||
// Generate script with AI
|
||||
generateScriptBtn.addEventListener('click', async function() {
|
||||
const model = document.getElementById('ai-model-select').value;
|
||||
const customModel = document.getElementById('ai-model-custom').value.trim();
|
||||
const effectiveModel = customModel !== '' ? customModel : model;
|
||||
const protocolType = document.getElementById('ai-protocol-type').value;
|
||||
const prompt = document.getElementById('ai-prompt').value;
|
||||
|
||||
if (!prompt.trim()) {
|
||||
alert('{{ t('ai.please_enter_requirements') }}');
|
||||
return;
|
||||
}
|
||||
|
||||
aiLoading.classList.remove('hidden');
|
||||
generateScriptBtn.disabled = true;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/ai/assist', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
prompt: prompt,
|
||||
model: effectiveModel,
|
||||
protocol_type: protocolType,
|
||||
protocol_id: currentProtocolId
|
||||
})
|
||||
});
|
||||
|
||||
const result = await response.json();
|
||||
|
||||
if (result.success) {
|
||||
currentGeneration = result.data;
|
||||
displayAIResult(result.data);
|
||||
} else {
|
||||
alert('{{ t('ai.error_generating_script') }}: ' + result.error);
|
||||
}
|
||||
} catch (error) {
|
||||
alert('{{ t('ai.error_generating_script') }}: ' + error.message);
|
||||
} finally {
|
||||
aiLoading.classList.add('hidden');
|
||||
generateScriptBtn.disabled = false;
|
||||
}
|
||||
});
|
||||
|
||||
function displayAIResult(data) {
|
||||
document.getElementById('generated-script').textContent = data.script;
|
||||
|
||||
const suggestionsList = document.getElementById('suggestions-list');
|
||||
suggestionsList.innerHTML = '';
|
||||
data.suggestions.forEach(suggestion => {
|
||||
const li = document.createElement('li');
|
||||
li.textContent = suggestion;
|
||||
suggestionsList.appendChild(li);
|
||||
});
|
||||
|
||||
const compatibilityDiv = document.getElementById('ubuntu-compatibility');
|
||||
if (data.ubuntu_compatible) {
|
||||
compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-green-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd"/></svg><span class="text-green-700">Compatible with Ubuntu 22.04-24.04</span>';
|
||||
} else {
|
||||
compatibilityDiv.innerHTML = '<svg class="w-5 h-5 text-red-500 mr-2" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd"/></svg><span class="text-red-700">May not be compatible with Ubuntu 22.04-24.04</span>';
|
||||
}
|
||||
|
||||
aiResult.classList.remove('hidden');
|
||||
}
|
||||
|
||||
// Apply to existing protocol
|
||||
applyToProtocolBtn.addEventListener('click', function() {
|
||||
if (!currentGeneration) return;
|
||||
|
||||
const protocolId = prompt('{{ t('ai.enter_protocol_id_to_apply') }}:');
|
||||
if (!protocolId) return;
|
||||
|
||||
fetch(`/api/protocols/${protocolId}`, {
|
||||
method: 'PUT',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
install_script: currentGeneration.script,
|
||||
ubuntu_compatible: currentGeneration.ubuntu_compatible
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
alert('{{ t('ai.script_applied_successfully') }}');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('{{ t('ai.error_applying_script') }}: ' + result.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('{{ t('ai.error_applying_script') }}: ' + error.message);
|
||||
});
|
||||
});
|
||||
|
||||
// Create new protocol with generated script
|
||||
createNewProtocolBtn.addEventListener('click', function() {
|
||||
if (!currentGeneration) return;
|
||||
const nameInput = document.getElementById('ai-protocol-name');
|
||||
const slugInput = document.getElementById('ai-protocol-slug');
|
||||
const name = (nameInput.value || '').trim();
|
||||
let slug = (slugInput.value || '').trim();
|
||||
if (!name) { alert('{{ t('protocols.enter_protocol_name') }}'); return; }
|
||||
if (!slug) { slug = name.toLowerCase().replace(/\s+/g, '-'); }
|
||||
|
||||
fetch('/api/protocols', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({
|
||||
name: name,
|
||||
slug: slug,
|
||||
install_script: currentGeneration.script,
|
||||
ubuntu_compatible: currentGeneration.ubuntu_compatible,
|
||||
description: `Generated with AI using ${document.getElementById('ai-model-select').value}`
|
||||
})
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
alert('{{ t('protocols.protocol_created_successfully') }}');
|
||||
location.reload();
|
||||
} else {
|
||||
alert('{{ t('protocols.error_creating_protocol') }}: ' + result.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('{{ t('protocols.error_creating_protocol') }}: ' + error.message);
|
||||
});
|
||||
});
|
||||
|
||||
// AI generate for specific protocol
|
||||
document.querySelectorAll('.ai-generate-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
currentProtocolId = this.dataset.protocolId;
|
||||
showAIModal();
|
||||
document.getElementById('ai-prompt').value = `{{ t('ai.improve_protocol') }} ${this.closest('.protocol-card').dataset.protocolName}`;
|
||||
});
|
||||
});
|
||||
|
||||
// Test custom model availability
|
||||
document.getElementById('ai-model-test-btn').addEventListener('click', async function() {
|
||||
const customModel = document.getElementById('ai-model-custom').value.trim();
|
||||
if (!customModel) { alert('Введите идентификатор модели'); return; }
|
||||
try {
|
||||
const resp = await fetch('/api/ai/test-model', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ model: customModel })
|
||||
});
|
||||
const result = await resp.json();
|
||||
if (result.success) {
|
||||
alert('Модель доступна');
|
||||
} else {
|
||||
alert('Модель недоступна: ' + (result.error || result.message || ''));
|
||||
}
|
||||
} catch (e) {
|
||||
alert('Ошибка проверки модели: ' + e.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Delete protocol
|
||||
document.querySelectorAll('.delete-protocol-btn').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const protocolId = this.dataset.protocolId;
|
||||
const protocolName = this.dataset.protocolName;
|
||||
|
||||
if (confirm(`{{ t('protocols.confirm_delete_protocol') }} '${protocolName}'?`)) {
|
||||
fetch(`/api/protocols/${protocolId}`, {
|
||||
method: 'DELETE'
|
||||
})
|
||||
.then(response => response.json())
|
||||
.then(result => {
|
||||
if (result.success) {
|
||||
location.reload();
|
||||
} else {
|
||||
alert('{{ t('protocols.error_deleting_protocol') }}: ' + result.error);
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
alert('{{ t('protocols.error_deleting_protocol') }}: ' + error.message);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -0,0 +1,250 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-10 offset-md-1">
|
||||
<div class="card">
|
||||
<div class="card-header bg-primary text-white">
|
||||
<h5 class="mb-0">
|
||||
{% if scenario %}
|
||||
{{ 'Редактирование сценария:' | trans }} {{ scenario.name }}
|
||||
{% else %}
|
||||
{{ 'Новый сценарий' | trans }}
|
||||
{% endif %}
|
||||
</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<form id="scenarioForm">
|
||||
<input type="hidden" name="id" value="{{ scenario.id | default('') }}">
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="slug" class="form-label">{{ 'Уникальный идентификатор' | trans }} *</label>
|
||||
<input type="text" class="form-control" id="slug" name="slug"
|
||||
value="{{ scenario.slug | default('') }}" required
|
||||
pattern="^[a-z0-9\-]+$" title="{{ 'Только строчные буквы, цифры и дефисы' | trans }}">
|
||||
<small class="form-text text-muted">{{ 'например: xray-vless, openvpn-tls' | trans }}</small>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="name" class="form-label">{{ 'Название протокола' | trans }} *</label>
|
||||
<input type="text" class="form-control" id="name" name="name"
|
||||
value="{{ scenario.name | default('') }}" required>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="description" class="form-label">{{ 'Описание' | trans }}</label>
|
||||
<textarea class="form-control" id="description" name="description" rows="2">{{ scenario.description | default('') }}</textarea>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<label for="definition" class="form-label">{{ 'Определение сценария (JSON)' | trans }} *</label>
|
||||
<textarea class="form-control font-monospace" id="definition" name="definition"
|
||||
rows="20" required>{{ templateDefinition }}</textarea>
|
||||
<small class="form-text text-muted d-block mt-2">
|
||||
<strong>{{ 'Структура JSON:' | trans }}</strong><br>
|
||||
<code>{ "engine": "shell|builtin_awg", "metadata": {...}, "scripts": { "detect": "...", "install": "...", "restore": "..." } }</code>
|
||||
</small>
|
||||
<small class="form-text text-muted d-block mt-2">
|
||||
<strong>{{ 'Доступные переменные в скриптах:' | trans }}</strong><br>
|
||||
<code>{{ "{{server.host}}, {{server.username}}, {{server.container_name}}, {{metadata.*}}" | trans }}</code>
|
||||
</small>
|
||||
<div id="jsonError" class="alert alert-danger mt-2" style="display: none;"></div>
|
||||
</div>
|
||||
|
||||
<div class="form-check mb-3">
|
||||
<input type="checkbox" class="form-check-input" id="is_active" name="is_active" value="1"
|
||||
{% if scenario.is_active ?? true %}checked{% endif %}>
|
||||
<label class="form-check-label" for="is_active">
|
||||
{{ 'Активный сценарий' | trans }}
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="d-flex gap-2">
|
||||
<button type="submit" class="btn btn-success">
|
||||
<i class="fas fa-save"></i> {{ 'Сохранить' | trans }}
|
||||
</button>
|
||||
<a href="/admin/scenarios" class="btn btn-secondary">
|
||||
{{ 'Отмена' | trans }}
|
||||
</a>
|
||||
{% if scenario %}
|
||||
<button type="button" class="btn btn-info ms-auto" id="testBtn">
|
||||
<i class="fas fa-flask"></i> {{ 'Тест на сервере' | trans }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- JSON Validation Helper -->
|
||||
<div class="card mt-3">
|
||||
<div class="card-header bg-light">
|
||||
<h6 class="mb-0">{{ 'Справка по формату' | trans }}</h6>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<h6>{{ 'Поля сценария:' | trans }}</h6>
|
||||
<ul>
|
||||
<li><strong>engine:</strong> Тип движка ("shell" или "builtin_awg")</li>
|
||||
<li><strong>metadata:</strong> Объект с параметрами протокола (container_name, config_path и т.д.)</li>
|
||||
<li><strong>scripts:</strong> Объект со скриптами (detect, install, restore)</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="mt-3">{{ 'Поля скриптов:' | trans }}</h6>
|
||||
<ul>
|
||||
<li><strong>detect:</strong> Bash скрипт для определения установленной конфигурации. Должен вывести JSON с полями "status" (absent/partial/existing) и "details"</li>
|
||||
<li><strong>install:</strong> Bash скрипт для установки протокола. Должен вывести JSON с "success": true/false</li>
|
||||
<li><strong>restore:</strong> Bash скрипт для восстановления конфигурации из detection результата</li>
|
||||
</ul>
|
||||
|
||||
<h6 class="mt-3">{{ 'Переменные окружения в скриптах:' | trans }}</h6>
|
||||
<ul>
|
||||
<li><code>SERVER_HOST</code> - IP/домен сервера</li>
|
||||
<li><code>SERVER_USER</code> - SSH пользователь</li>
|
||||
<li><code>SERVER_CONTAINER</code> - имя контейнера</li>
|
||||
<li><code>PROTOCOL_*</code> - все поля из metadata (например, PROTOCOL_CONTAINER_NAME, PROTOCOL_CONFIG_PATH)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Modal -->
|
||||
<div class="modal fade" id="testModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ 'Тест сценария' | trans }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="testServer" class="form-label">{{ 'Выбрать сервер' | trans }}</label>
|
||||
<select class="form-control" id="testServer">
|
||||
<option value="">{{ 'Загружаю...' | trans }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="testResult" class="mt-3" style="display: none;">
|
||||
<strong>{{ 'Результат:' | trans }}</strong>
|
||||
<pre id="testResultContent" class="bg-light p-3 rounded" style="max-height: 300px; overflow-y: auto;"></pre>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Закрыть' | trans }}</button>
|
||||
<button type="button" class="btn btn-primary" id="runTestBtn">{{ 'Запустить тест' | trans }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const form = document.getElementById('scenarioForm');
|
||||
const definitionTextarea = document.getElementById('definition');
|
||||
const jsonError = document.getElementById('jsonError');
|
||||
const testBtn = document.getElementById('testBtn');
|
||||
|
||||
// Validate JSON on change
|
||||
definitionTextarea.addEventListener('change', validateJson);
|
||||
definitionTextarea.addEventListener('blur', validateJson);
|
||||
|
||||
function validateJson() {
|
||||
jsonError.style.display = 'none';
|
||||
try {
|
||||
JSON.parse(definitionTextarea.value);
|
||||
} catch (e) {
|
||||
jsonError.textContent = `{{ "Ошибка JSON:" | trans }} ${e.message}`;
|
||||
jsonError.style.display = 'block';
|
||||
}
|
||||
}
|
||||
|
||||
// Form submission
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
|
||||
if (!validateJson()) return;
|
||||
|
||||
const formData = new FormData(this);
|
||||
|
||||
try {
|
||||
const response = await fetch('/admin/scenario', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
alert('{{ "Сценарий успешно сохранен" | trans }}');
|
||||
window.location.href = data.redirect;
|
||||
} else {
|
||||
alert(`{{ "Ошибка:" | trans }} ${data.message}`);
|
||||
}
|
||||
} catch (err) {
|
||||
alert(`{{ "Ошибка отправки:" | trans }} ${err}`);
|
||||
}
|
||||
});
|
||||
|
||||
// Test button
|
||||
if (testBtn) {
|
||||
testBtn.addEventListener('click', function() {
|
||||
loadServers();
|
||||
new bootstrap.Modal(document.getElementById('testModal')).show();
|
||||
});
|
||||
}
|
||||
|
||||
// Load available servers
|
||||
async function loadServers() {
|
||||
try {
|
||||
const response = await fetch('/api/servers?limit=50');
|
||||
const data = await response.json();
|
||||
|
||||
const select = document.getElementById('testServer');
|
||||
select.innerHTML = '';
|
||||
|
||||
if (data.servers && data.servers.length > 0) {
|
||||
data.servers.forEach(server => {
|
||||
const option = document.createElement('option');
|
||||
option.value = server.id;
|
||||
option.textContent = `${server.name} (${server.host})`;
|
||||
select.appendChild(option);
|
||||
});
|
||||
} else {
|
||||
select.innerHTML = '<option value="">{{ "Сервера не найдены" | trans }}</option>';
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading servers:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Run test
|
||||
document.getElementById('runTestBtn').addEventListener('click', async function() {
|
||||
const serverId = document.getElementById('testServer').value;
|
||||
if (!serverId) {
|
||||
alert('{{ "Выберите сервер" | trans }}');
|
||||
return;
|
||||
}
|
||||
|
||||
const scenarioId = document.querySelector('input[name="id"]').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/scenario/${scenarioId}/test`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: `server_id=${serverId}`
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const resultDiv = document.getElementById('testResult');
|
||||
const resultContent = document.getElementById('testResultContent');
|
||||
|
||||
resultContent.textContent = JSON.stringify(data.result, null, 2);
|
||||
resultDiv.style.display = 'block';
|
||||
} catch (err) {
|
||||
alert(`{{ "Ошибка теста:" | trans }} ${err}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,246 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<div>
|
||||
<h1>{{ scenario.name }}</h1>
|
||||
<small class="text-muted">{{ scenario.slug }}</small>
|
||||
</div>
|
||||
<div class="btn-group">
|
||||
<a href="/admin/scenario/{{ scenario.id }}/edit" class="btn btn-primary">
|
||||
<i class="fas fa-edit"></i> {{ 'Редактировать' | trans }}
|
||||
</a>
|
||||
<a href="/admin/scenario/{{ scenario.id }}/export" class="btn btn-secondary">
|
||||
<i class="fas fa-download"></i> {{ 'Экспорт' | trans }}
|
||||
</a>
|
||||
<a href="/admin/scenarios" class="btn btn-light">
|
||||
<i class="fas fa-arrow-left"></i> {{ 'Назад' | trans }}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scenario Info -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ 'Информация о сценарии' | trans }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-md-6">
|
||||
<dl>
|
||||
<dt>{{ 'Статус' | trans }}</dt>
|
||||
<dd>
|
||||
{% if scenario.is_active %}
|
||||
<span class="badge bg-success">{{ 'Активный' | trans }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ 'Отключен' | trans }}</span>
|
||||
{% endif %}
|
||||
</dd>
|
||||
<dt>{{ 'Движок' | trans }}</dt>
|
||||
<dd><code>{{ definition.engine | default('unknown') }}</code></dd>
|
||||
<dt>{{ 'Описание' | trans }}</dt>
|
||||
<dd>{{ scenario.description | default('—') }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<dl>
|
||||
<dt>{{ 'Контейнер' | trans }}</dt>
|
||||
<dd><code>{{ definition.metadata.container_name | default('—') }}</code></dd>
|
||||
<dt>{{ 'Путь конфигурации' | trans }}</dt>
|
||||
<dd><code>{{ definition.metadata.config_path | default('—') }}</code></dd>
|
||||
<dt>{{ 'Порт по умолчанию' | trans }}</dt>
|
||||
<dd>{{ definition.metadata.default_port | default('—') }}</dd>
|
||||
</dl>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Scripts Info -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ 'Скрипты' | trans }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<ul class="nav nav-tabs" role="tablist">
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link active" id="detect-tab" data-bs-toggle="tab" data-bs-target="#detect-content" type="button" role="tab">
|
||||
{{ 'Обнаружение (detect)' | trans }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="install-tab" data-bs-toggle="tab" data-bs-target="#install-content" type="button" role="tab">
|
||||
{{ 'Установка (install)' | trans }}
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item" role="presentation">
|
||||
<button class="nav-link" id="restore-tab" data-bs-toggle="tab" data-bs-target="#restore-content" type="button" role="tab">
|
||||
{{ 'Восстановление (restore)' | trans }}
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<div class="tab-content mt-3">
|
||||
<div class="tab-pane fade show active" id="detect-content" role="tabpanel">
|
||||
<pre class="bg-light p-3 rounded"><code>{{ definition.scripts.detect | default('—') }}</code></pre>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="install-content" role="tabpanel">
|
||||
<pre class="bg-light p-3 rounded"><code>{{ definition.scripts.install | default('—') }}</code></pre>
|
||||
</div>
|
||||
<div class="tab-pane fade" id="restore-content" role="tabpanel">
|
||||
<pre class="bg-light p-3 rounded"><code>{{ definition.scripts.restore | default('—') }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Metadata -->
|
||||
<div class="card mb-3">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ 'Метаданные' | trans }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<pre class="bg-light p-3 rounded"><code>{{ definition.metadata | json_encode(constant('JSON_PRETTY_PRINT') | constant('JSON_UNESCAPED_SLASHES')) }}</code></pre>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Actions -->
|
||||
<div class="card">
|
||||
<div class="card-header">
|
||||
<h5 class="mb-0">{{ 'Действия' | trans }}</h5>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<button class="btn btn-info" id="testScenarioBtn">
|
||||
<i class="fas fa-flask"></i> {{ 'Тест на сервере' | trans }}
|
||||
</button>
|
||||
{% if scenario.slug != 'amnezia-wg' %}
|
||||
<button class="btn btn-danger" id="deleteScenarioBtn">
|
||||
<i class="fas fa-trash"></i> {{ 'Удалить сценарий' | trans }}
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Test Modal -->
|
||||
<div class="modal fade" id="testModal" tabindex="-1">
|
||||
<div class="modal-dialog modal-lg">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ 'Тест сценария' | trans }} - {{ scenario.name }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="testServer" class="form-label">{{ 'Выбрать сервер' | trans }}</label>
|
||||
<select class="form-control" id="testServer">
|
||||
<option value="">{{ 'Загружаю...' | trans }}</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="testResult" class="mt-3" style="display: none;">
|
||||
<strong>{{ 'Результат:' | trans }}</strong>
|
||||
<pre id="testResultContent" class="bg-light p-3 rounded" style="max-height: 400px; overflow-y: auto;"></pre>
|
||||
</div>
|
||||
<div id="testError" class="alert alert-danger mt-3" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Закрыть' | trans }}</button>
|
||||
<button type="button" class="btn btn-primary" id="runTestBtn">{{ 'Запустить тест' | trans }}</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const scenarioId = {{ scenario.id }};
|
||||
|
||||
// Test button
|
||||
document.getElementById('testScenarioBtn').addEventListener('click', function() {
|
||||
loadServers();
|
||||
new bootstrap.Modal(document.getElementById('testModal')).show();
|
||||
});
|
||||
|
||||
// Delete button
|
||||
const deleteBtn = document.getElementById('deleteScenarioBtn');
|
||||
if (deleteBtn) {
|
||||
deleteBtn.addEventListener('click', function() {
|
||||
if (confirm('{{ "Вы уверены? Это действие нельзя отменить." | trans }}')) {
|
||||
fetch(`/admin/scenario/${scenarioId}/delete`, {method: 'POST'})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.location.href = data.redirect;
|
||||
} else {
|
||||
alert(`{{ "Ошибка:" | trans }} ${data.message}`);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Load servers
|
||||
async function loadServers() {
|
||||
try {
|
||||
const response = await fetch('/api/servers?limit=50');
|
||||
const data = await response.json();
|
||||
|
||||
const select = document.getElementById('testServer');
|
||||
select.innerHTML = '';
|
||||
|
||||
if (data.servers && data.servers.length > 0) {
|
||||
data.servers.forEach(server => {
|
||||
const option = document.createElement('option');
|
||||
option.value = server.id;
|
||||
option.textContent = `${server.name} (${server.host})`;
|
||||
select.appendChild(option);
|
||||
});
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Error loading servers:', err);
|
||||
}
|
||||
}
|
||||
|
||||
// Run test
|
||||
document.getElementById('runTestBtn').addEventListener('click', async function() {
|
||||
const serverId = document.getElementById('testServer').value;
|
||||
if (!serverId) {
|
||||
alert('{{ "Выберите сервер" | trans }}');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(`/admin/scenario/${scenarioId}/test`, {
|
||||
method: 'POST',
|
||||
headers: {'Content-Type': 'application/x-www-form-urlencoded'},
|
||||
body: `server_id=${serverId}`
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
const resultDiv = document.getElementById('testResult');
|
||||
const resultContent = document.getElementById('testResultContent');
|
||||
const errorDiv = document.getElementById('testError');
|
||||
|
||||
errorDiv.style.display = 'none';
|
||||
|
||||
if (data.success) {
|
||||
resultContent.textContent = JSON.stringify(data.result, null, 2);
|
||||
resultDiv.style.display = 'block';
|
||||
} else {
|
||||
errorDiv.textContent = data.message;
|
||||
errorDiv.style.display = 'block';
|
||||
}
|
||||
} catch (err) {
|
||||
const errorDiv = document.getElementById('testError');
|
||||
errorDiv.textContent = `{{ "Ошибка:" | trans }} ${err}`;
|
||||
errorDiv.style.display = 'block';
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
@@ -0,0 +1,156 @@
|
||||
{% extends "layout.twig" %}
|
||||
|
||||
{% block content %}
|
||||
<div class="container mt-4">
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
<div class="d-flex justify-content-between align-items-center mb-4">
|
||||
<h1>{{ 'Сценарии установки протоколов' | trans }}</h1>
|
||||
<div class="btn-group">
|
||||
<a href="/admin/scenario/create" class="btn btn-primary">
|
||||
<i class="fas fa-plus"></i> {{ 'Новый сценарий' | trans }}
|
||||
</a>
|
||||
<button class="btn btn-success" id="btnImport">
|
||||
<i class="fas fa-upload"></i> {{ 'Импорт' | trans }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{% if scenarios | length > 0 %}
|
||||
<div class="table-responsive">
|
||||
<table class="table table-hover table-sm">
|
||||
<thead class="table-light">
|
||||
<tr>
|
||||
<th>{{ 'Протокол' | trans }}</th>
|
||||
<th>{{ 'Описание' | trans }}</th>
|
||||
<th>{{ 'Движок' | trans }}</th>
|
||||
<th>{{ 'Статус' | trans }}</th>
|
||||
<th>{{ 'Действия' | trans }}</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{% for scenario in scenarios %}
|
||||
<tr>
|
||||
<td>
|
||||
<strong>{{ scenario.name }}</strong>
|
||||
<br>
|
||||
<small class="text-muted">{{ scenario.slug }}</small>
|
||||
</td>
|
||||
<td>{{ scenario.description | default('-') }}</td>
|
||||
<td>
|
||||
<span class="badge bg-info">
|
||||
{{ scenario.definition.engine | default('unknown') }}
|
||||
</span>
|
||||
</td>
|
||||
<td>
|
||||
{% if scenario.is_active %}
|
||||
<span class="badge bg-success">{{ 'Активный' | trans }}</span>
|
||||
{% else %}
|
||||
<span class="badge bg-secondary">{{ 'Отключен' | trans }}</span>
|
||||
{% endif %}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group btn-group-sm" role="group">
|
||||
<a href="/admin/scenario/{{ scenario.id }}" class="btn btn-info" title="{{ 'Просмотр' | trans }}">
|
||||
<i class="fas fa-eye"></i>
|
||||
</a>
|
||||
<a href="/admin/scenario/{{ scenario.id }}/edit" class="btn btn-warning" title="{{ 'Редактировать' | trans }}">
|
||||
<i class="fas fa-edit"></i>
|
||||
</a>
|
||||
<a href="/admin/scenario/{{ scenario.id }}/export" class="btn btn-secondary" title="{{ 'Экспорт' | trans }}">
|
||||
<i class="fas fa-download"></i>
|
||||
</a>
|
||||
{% if scenario.slug != 'amnezia-wg' %}
|
||||
<button class="btn btn-danger delete-scenario" data-id="{{ scenario.id }}" data-name="{{ scenario.name }}" title="{{ 'Удалить' | trans }}">
|
||||
<i class="fas fa-trash"></i>
|
||||
</button>
|
||||
{% endif %}
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
{% endfor %}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
{% else %}
|
||||
<div class="alert alert-info" role="alert">
|
||||
{{ 'Нет доступных сценариев' | trans }}
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Import Modal -->
|
||||
<div class="modal fade" id="importModal" tabindex="-1">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title">{{ 'Импорт сценария' | trans }}</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal"></button>
|
||||
</div>
|
||||
<form id="importForm" enctype="multipart/form-data">
|
||||
<div class="modal-body">
|
||||
<div class="mb-3">
|
||||
<label for="importFile" class="form-label">{{ 'JSON файл сценария' | trans }}</label>
|
||||
<input type="file" class="form-control" id="importFile" name="file" accept=".json" required>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'Отмена' | trans }}</button>
|
||||
<button type="submit" class="btn btn-primary">{{ 'Импортировать' | trans }}</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
// Import button handler
|
||||
document.getElementById('btnImport').addEventListener('click', function() {
|
||||
new bootstrap.Modal(document.getElementById('importModal')).show();
|
||||
});
|
||||
|
||||
// Import form handler
|
||||
document.getElementById('importForm').addEventListener('submit', function(e) {
|
||||
e.preventDefault();
|
||||
const formData = new FormData(this);
|
||||
|
||||
fetch('/admin/scenario/import', {
|
||||
method: 'POST',
|
||||
body: formData
|
||||
})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.location.href = data.redirect;
|
||||
} else {
|
||||
alert('{{ "Ошибка импорта:" | trans }} ' + data.message);
|
||||
}
|
||||
})
|
||||
.catch(err => alert('{{ "Ошибка:" | trans }} ' + err));
|
||||
});
|
||||
|
||||
// Delete buttons
|
||||
document.querySelectorAll('.delete-scenario').forEach(btn => {
|
||||
btn.addEventListener('click', function() {
|
||||
const id = this.dataset.id;
|
||||
const name = this.dataset.name;
|
||||
|
||||
if (confirm(`{{ "Удалить сценарий" | trans }}: ${name}?`)) {
|
||||
fetch(`/admin/scenario/${id}/delete`, {method: 'POST'})
|
||||
.then(r => r.json())
|
||||
.then(data => {
|
||||
if (data.success) {
|
||||
window.location.href = data.redirect;
|
||||
} else {
|
||||
alert('{{ "Ошибка удаления:" | trans }} ' + data.message);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
</script>
|
||||
{% endblock %}
|
||||
Reference in New Issue
Block a user