mcphub/core/templates/dashboard/settings/index.html

{% extends "dashboard/base.html" %}

{% block title %}{{ t.settings }}{% endblock %}
{% block page_title %}{{ t.settings }}{% endblock %}

{% block content %}
<div class="space-y-6">
    <!-- Language Settings -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}تنظیمات زبان{% else %}Language Settings{% endif %}
        </h3>
        <div class="space-y-4">
            <div class="flex items-center gap-4">
                <a href="/dashboard/settings?lang=en"
                   class="px-4 py-2 rounded-lg transition-colors {% if lang != 'fa' %}bg-primary-600 text-white{% else %}bg-gray-700 text-white dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600{% endif %}">
                    English
                </a>
                <a href="/dashboard/settings?lang=fa"
                   class="px-4 py-2 rounded-lg transition-colors {% if lang == 'fa' %}bg-primary-600 text-white{% else %}bg-gray-700 text-white dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-gray-600{% endif %}">
                    فارسی
                </a>
            </div>
            <p class="text-sm text-gray-500 dark:text-gray-400">
                {% if lang == 'fa' %}
                زبان فعلی: فارسی
                {% else %}
                Current language: English
                {% endif %}
            </p>
        </div>
    </div>

    <!-- System Configuration -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}پیکربندی سیستم{% else %}System Configuration{% endif %}
        </h3>
        <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}حالت سرور{% else %}Server Mode{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.server_mode }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}پورت{% else %}Port{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.port }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}سطح لاگ{% else %}Log Level{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.log_level }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}حالت احراز هویت OAuth{% else %}OAuth Auth Mode{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.oauth_auth_mode }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}حد نرخ روزانه{% else %}Daily Rate Limit{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.rate_limit_per_day }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}حد نرخ هر دقیقه{% else %}Per Minute Rate Limit{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.rate_limit_per_minute }}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Security Settings -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}تنظیمات امنیتی{% else %}Security Settings{% endif %}
        </h3>
        <div class="space-y-4">
            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}احراز هویت API فعال{% else %}API Auth Enabled{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ 'Yes' if config.api_auth_enabled else 'No' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}کوکی امن داشبورد{% else %}Dashboard Secure Cookie{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ 'Yes' if config.dashboard_secure_cookie else 'No' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}دامنه‌های مجاز OAuth{% else %}OAuth Trusted Domains{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono text-sm">{{ config.oauth_trusted_domains or 'localhost' }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}مدت انقضا سشن داشبورد{% else %}Dashboard Session Expiry{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ config.dashboard_session_expiry }} {% if lang == 'fa' %}ساعت{% else %}hours{% endif %}</p>
                </div>
            </div>
        </div>
    </div>

    <!-- Managed Settings (4C.3) -->
    {% if managed_settings %}
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}تنظیمات قابل مدیریت{% else %}Managed Settings{% endif %}
        </h3>
        <p class="text-sm text-gray-500 dark:text-gray-400 mb-6">
            {% if lang == 'fa' %}این تنظیمات از پنل قابل تغییر هستند. اولویت: دیتابیس > متغیر محیطی > پیش‌فرض{% else %}These settings can be changed from the panel. Priority: Database > Environment > Default{% endif %}
        </p>
        <div class="space-y-4">
            {% for s in managed_settings %}
            <div class="border border-gray-200 dark:border-gray-700 rounded-lg p-4" id="setting-{{ s.key }}">
                <div class="flex items-center justify-between mb-2">
                    <div>
                        <label class="text-sm font-medium text-gray-700 dark:text-gray-300">
                            {% if lang == 'fa' %}{{ s.label_fa }}{% else %}{{ s.label }}{% endif %}
                        </label>
                        <p class="text-xs text-gray-500 dark:text-gray-400 mt-0.5">
                            {% if lang == 'fa' %}{{ s.hint_fa }}{% else %}{{ s.hint }}{% endif %}
                        </p>
                    </div>
                    <span class="px-2 py-0.5 rounded text-xs font-medium
                        {% if s.source == 'database' %}bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300
                        {% elif s.source == 'environment' %}bg-amber-100 dark:bg-amber-500/20 text-amber-700 dark:text-amber-300
                        {% else %}bg-gray-100 dark:bg-gray-500/20 text-gray-600 dark:text-gray-400{% endif %}"
                        id="source-{{ s.key }}">
                        {{ s.source }}
                    </span>
                </div>
                <div class="flex items-center gap-2">
                    <input type="text" value="{{ s.value }}" id="input-{{ s.key }}"
                        class="flex-1 bg-gray-50 dark:bg-gray-700 border border-gray-300 dark:border-gray-600 rounded-lg px-3 py-2 text-sm text-gray-900 dark:text-white focus:ring-2 focus:ring-blue-500 focus:border-transparent">
                    <button onclick="saveSetting('{{ s.key }}')"
                        class="px-3 py-2 bg-blue-600 hover:bg-blue-700 text-white text-sm rounded-lg transition-colors"
                        id="save-{{ s.key }}">
                        {% if lang == 'fa' %}ذخیره{% else %}Save{% endif %}
                    </button>
                    {% if s.source == 'database' %}
                    <button onclick="resetSetting('{{ s.key }}')"
                        class="px-3 py-2 bg-gray-200 dark:bg-gray-600 hover:bg-gray-300 dark:hover:bg-gray-500 text-gray-700 dark:text-gray-300 text-sm rounded-lg transition-colors"
                        id="reset-{{ s.key }}"
                        title="{% if lang == 'fa' %}بازگشت به پیش‌فرض{% else %}Reset to default{% endif %}">
                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                        </svg>
                    </button>
                    {% endif %}
                </div>
                <p class="text-xs text-gray-400 mt-1" id="default-{{ s.key }}">
                    {% if lang == 'fa' %}پیش‌فرض: {{ s.default }}{% else %}Default: {{ s.default }}{% endif %}
                </p>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endif %}

    <!-- Registered Plugins -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white">
                {% if lang == 'fa' %}پلاگین‌های ثبت شده{% else %}Registered Plugins{% endif %}
            </h3>
            <span class="px-2 py-1 bg-blue-500/20 text-blue-400 text-xs rounded-lg">
                {% if lang == 'fa' %}قابلیت آینده{% else %}Coming Soon{% endif %}
            </span>
        </div>
        <div class="space-y-2">
            {% if plugins %}
                {% for plugin in plugins %}
                <div class="flex items-center justify-between py-2 border-b border-gray-200 dark:border-gray-700 last:border-0">
                    <div>
                        <p class="text-gray-900 dark:text-white font-medium">{{ plugin.name }}</p>
                        <p class="text-sm text-gray-500 dark:text-gray-400">{{ plugin.description }}</p>
                    </div>
                    <span class="px-2 py-1 bg-green-500/20 text-green-400 text-xs rounded-lg">
                        {{ t.active }}
                    </span>
                </div>
                {% endfor %}
            {% else %}
            <div class="bg-gray-100 dark:bg-gray-700/30 rounded-lg p-4">
                <p class="text-gray-500 dark:text-gray-400 mb-2">
                    {% if lang == 'fa' %}هیچ پلاگینی ثبت نشده{% else %}No plugins registered{% endif %}
                </p>
                <p class="text-sm text-gray-500">
                    {% if lang == 'fa' %}
                    سیستم پلاگین در فاز‌های آینده اضافه خواهد شد. این امکان به شما اجازه می‌دهد قابلیت‌های سفارشی به MCP Hub اضافه کنید.
                    {% else %}
                    The plugin system will be added in future phases. This will allow you to extend MCP Hub with custom functionality.
                    {% endif %}
                </p>
            </div>
            {% endif %}
        </div>
    </div>

    <!-- About Section -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}درباره{% else %}About{% endif %}
        </h3>
        <div class="space-y-4">
            <div class="flex items-center gap-4">
                <div class="w-16 h-16 bg-primary-500/20 rounded-xl flex items-center justify-center">
                    <svg class="w-8 h-8 text-primary-400" 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>
                </div>
                <div>
                    <h4 class="text-xl font-bold text-gray-900 dark:text-white">MCP Hub</h4>
                    <p class="text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}هاب پروتکل کانتکست مدل{% else %}Model Context Protocol Hub{% endif %}</p>
                </div>
            </div>
            <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mt-4">
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}نسخه{% else %}Version{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ about.version }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}نسخه MCP{% else %}MCP Version{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ about.mcp_version }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}نسخه Python{% else %}Python Version{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ about.python_version }}</p>
                </div>
                <div>
                    <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}تعداد ابزار{% else %}Tools Count{% endif %}</p>
                    <p class="text-gray-900 dark:text-white font-mono">{{ about.tools_count }}</p>
                </div>
            </div>
            <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
                <p class="text-sm text-gray-500 dark:text-gray-400">
                    {% if lang == 'fa' %}
                    MCP Hub یک سرور MCP چند منظوره است که امکان اتصال به سرویس‌های مختلف از جمله WordPress، Gitea، n8n و دیگر سرویس‌ها را فراهم می‌کند.
                    {% else %}
                    MCP Hub is a multi-purpose MCP server that enables connection to various services including WordPress, Gitea, n8n, and other services.
                    {% endif %}
                </p>
            </div>
        </div>
    </div>

    <!-- Session Information -->
    <div class="bg-white dark:bg-gray-800 rounded-xl border border-gray-200 dark:border-gray-700 p-6">
        <h3 class="text-lg font-semibold text-gray-900 dark:text-white mb-4">
            {% if lang == 'fa' %}اطلاعات سشن{% else %}Session Information{% endif %}
        </h3>
        <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}نوع کاربر{% else %}User Type{% endif %}</p>
                <p class="text-gray-900 dark:text-white font-mono">{{ session_display.user_type }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}ایجاد شده در{% else %}Created At{% endif %}</p>
                <p class="text-gray-900 dark:text-white font-mono text-sm">{{ session_display.created_at[:19] if session_display.created_at else '-' }}</p>
            </div>
            <div>
                <p class="text-sm text-gray-500 dark:text-gray-400">{% if lang == 'fa' %}انقضا در{% else %}Expires At{% endif %}</p>
                <p class="text-gray-900 dark:text-white font-mono text-sm">{{ session_display.expires_at[:19] if session_display.expires_at else '-' }}</p>
            </div>
        </div>
        <div class="mt-4 pt-4 border-t border-gray-200 dark:border-gray-700">
            <a href="/dashboard/logout"
               class="px-4 py-2 bg-red-600 hover:bg-red-700 rounded-lg text-white text-sm transition-colors inline-block">
                {{ t.logout }}
            </a>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
async function saveSetting(key) {
    const input = document.getElementById('input-' + key);
    const btn = document.getElementById('save-' + key);
    const value = input.value.trim();
    if (!value) return;

    btn.textContent = '...';
    btn.disabled = true;
    try {
        const resp = await fetch('/api/dashboard/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ key, value, action: 'save' }),
        });
        const data = await resp.json();
        if (resp.ok) {
            btn.textContent = '✓';
            btn.className = btn.className.replace('bg-blue-600', 'bg-green-600').replace('hover:bg-blue-700', 'hover:bg-green-700');
            const source = document.getElementById('source-' + key);
            if (source) { source.textContent = 'database'; source.className = 'px-2 py-0.5 rounded text-xs font-medium bg-blue-100 dark:bg-blue-500/20 text-blue-700 dark:text-blue-300'; }
            setTimeout(() => location.reload(), 1000);
        } else {
            alert(data.error || 'Failed to save');
            btn.textContent = '{% if lang == "fa" %}ذخیره{% else %}Save{% endif %}';
        }
    } catch (e) {
        alert('Error: ' + e.message);
        btn.textContent = '{% if lang == "fa" %}ذخیره{% else %}Save{% endif %}';
    } finally {
        btn.disabled = false;
    }
}

async function resetSetting(key) {
    if (!confirm('Reset this setting to default?')) return;
    try {
        const resp = await fetch('/api/dashboard/settings', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ key, action: 'reset' }),
        });
        if (resp.ok) {
            location.reload();
        } else {
            const data = await resp.json();
            alert(data.error || 'Failed to reset');
        }
    } catch (e) {
        alert('Error: ' + e.message);
    }
}
</script>
{% endblock %}