airano-ir
43fd2201a0
Settings fixes: - MAX_SITES_PER_USER, USER_RATE_LIMIT_PER_MIN/HR now read from DB settings table (DB > ENV > default), so dashboard/settings changes apply without restart. Sync cache refreshed on every save or delete. - /api/me reports the live DB value for max_sites_per_user. Admin improvements: - Admin users bypass per-user rate limiting entirely (role=admin or ADMIN_EMAILS). - Admin Overview now shows platform stats: registered users, new users (7d), total user sites, available tools. Plugin cleanup: - Appwrite and Directus plugins removed from the active registry (8 plugins now: WordPress, WooCommerce, WordPress Specialist, Gitea, n8n, Supabase, OpenPanel, Coolify). Plugin code is retained for future re-enabling. - Settings page plugin visibility list updated to match. Mobile onboarding: - Stepper steps on narrow viewports stack vertically with correct full border and rounded corners on each step. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
387 lines
18 KiB
HTML
387 lines
18 KiB
HTML
{% extends "base.html" %}
|
|
|
|
{% block title %}{{ t.page_title }}{% endblock %}
|
|
|
|
{% block extra_head %}
|
|
<style>
|
|
.oauth-consent-shell {
|
|
min-height: calc(100vh - 96px);
|
|
display: grid;
|
|
place-items: center;
|
|
padding: 24px;
|
|
background:
|
|
radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.10), transparent 30%),
|
|
linear-gradient(180deg, rgba(15, 23, 42, 0.04), transparent 48%);
|
|
}
|
|
html[data-theme="dark"] .oauth-consent-shell {
|
|
background:
|
|
radial-gradient(circle at 20% 0%, rgba(34, 197, 94, 0.12), transparent 30%),
|
|
linear-gradient(180deg, rgba(148, 163, 184, 0.08), transparent 48%);
|
|
}
|
|
.oauth-consent-card {
|
|
width: min(760px, 100%);
|
|
border: 1px solid rgba(148, 163, 184, 0.28);
|
|
border-radius: 16px;
|
|
background: rgba(255, 255, 255, 0.96);
|
|
box-shadow: 0 24px 80px rgba(15, 23, 42, 0.14);
|
|
overflow: hidden;
|
|
}
|
|
.dark .oauth-consent-card {
|
|
background: rgba(15, 23, 42, 0.96);
|
|
border-color: rgba(71, 85, 105, 0.55);
|
|
}
|
|
.oauth-consent-header {
|
|
display: flex;
|
|
gap: 16px;
|
|
align-items: flex-start;
|
|
padding: 28px;
|
|
border-bottom: 1px solid rgba(148, 163, 184, 0.22);
|
|
}
|
|
html[dir="rtl"] .oauth-consent-header { flex-direction: row-reverse; text-align: right; }
|
|
.oauth-consent-icon {
|
|
width: 48px;
|
|
height: 48px;
|
|
border-radius: 12px;
|
|
display: grid;
|
|
place-items: center;
|
|
background: rgba(59, 130, 246, 0.10);
|
|
color: rgb(37, 99, 235);
|
|
border: 1px solid rgba(59, 130, 246, 0.22);
|
|
flex-shrink: 0;
|
|
}
|
|
.oauth-consent-body {
|
|
padding: 24px 28px 28px;
|
|
display: grid;
|
|
gap: 18px;
|
|
}
|
|
.oauth-info-grid {
|
|
display: grid;
|
|
grid-template-columns: minmax(0, 1fr);
|
|
gap: 10px;
|
|
padding: 14px;
|
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
|
border-radius: 12px;
|
|
background: rgba(248, 250, 252, 0.82);
|
|
}
|
|
.dark .oauth-info-grid { background: rgba(30, 41, 59, 0.64); }
|
|
.oauth-row {
|
|
display: grid;
|
|
grid-template-columns: 140px minmax(0, 1fr);
|
|
gap: 12px;
|
|
align-items: center;
|
|
font-size: 13px;
|
|
}
|
|
.oauth-label { color: rgb(100, 116, 139); font-weight: 600; }
|
|
.dark .oauth-label { color: rgb(148, 163, 184); }
|
|
.oauth-value {
|
|
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
|
font-size: 12px;
|
|
word-break: break-all;
|
|
color: rgb(15, 23, 42);
|
|
}
|
|
.dark .oauth-value { color: rgb(226, 232, 240); }
|
|
html[dir="rtl"] .oauth-value { direction: ltr; text-align: left; }
|
|
.oauth-scope-list { display: flex; flex-wrap: wrap; gap: 8px; }
|
|
.oauth-scope {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
border-radius: 999px;
|
|
border: 1px solid rgba(59, 130, 246, 0.22);
|
|
background: rgba(59, 130, 246, 0.09);
|
|
padding: 7px 10px;
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: rgb(30, 64, 175);
|
|
}
|
|
.dark .oauth-scope { color: rgb(147, 197, 253); }
|
|
.oauth-panel {
|
|
border: 1px solid rgba(148, 163, 184, 0.24);
|
|
border-radius: 12px;
|
|
padding: 14px;
|
|
background: rgba(248, 250, 252, 0.72);
|
|
}
|
|
.dark .oauth-panel { background: rgba(30, 41, 59, 0.48); }
|
|
.oauth-actions { display: flex; gap: 10px; padding-top: 4px; }
|
|
html[dir="rtl"] .oauth-actions { flex-direction: row-reverse; }
|
|
.oauth-actions button { min-height: 44px; border-radius: 10px; }
|
|
@media (max-width: 640px) {
|
|
.oauth-consent-shell { padding: 12px; align-items: start; }
|
|
.oauth-consent-header { padding: 20px; }
|
|
.oauth-consent-body { padding: 18px 20px 22px; }
|
|
.oauth-row { grid-template-columns: 1fr; gap: 2px; }
|
|
.oauth-actions { flex-direction: column; }
|
|
html[dir="rtl"] .oauth-actions { flex-direction: column; }
|
|
}
|
|
</style>
|
|
{% endblock %}
|
|
|
|
{% block content %}
|
|
<div class="oauth-consent-shell" {% if lang == 'fa' %}dir="rtl"{% endif %}>
|
|
<div class="oauth-consent-card">
|
|
<!-- Header with Icon -->
|
|
<div class="oauth-consent-header">
|
|
<div class="oauth-consent-icon">
|
|
<svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z"/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<div class="text-xs uppercase tracking-wide text-gray-500 dark:text-gray-400 mb-1">MCP Hub OAuth</div>
|
|
<h1 class="text-2xl font-bold text-gray-900 dark:text-white">{{ t.auth_required }}</h1>
|
|
<p class="text-gray-600 dark:text-gray-400 mt-2">
|
|
<span class="font-semibold text-blue-700 dark:text-blue-300">{{ client_name }}</span>
|
|
{{ t.wants_access.replace('{client_name}', '') }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="oauth-consent-body">
|
|
<!-- Client Information -->
|
|
<div class="oauth-info-grid">
|
|
<div class="space-y-2 text-sm">
|
|
<div class="oauth-row">
|
|
<span class="oauth-label">{{ t.client_id_label }}</span>
|
|
<span class="oauth-value">{{ client_id }}</span>
|
|
</div>
|
|
{% if redirect_uri %}
|
|
<div class="oauth-row">
|
|
<span class="oauth-label">{{ t.redirect_uri_label }}</span>
|
|
<span class="oauth-value" title="{{ redirect_uri }}">{{ redirect_uri }}</span>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Requested Permissions -->
|
|
{% if scopes %}
|
|
<div>
|
|
<h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300 mb-3">{{ t.requested_permissions }}</h3>
|
|
<div class="oauth-scope-list">
|
|
{% for scope in scopes %}
|
|
<div class="oauth-scope">
|
|
<svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<span>{{ scope }}</span>
|
|
</div>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Authorization Form -->
|
|
<form method="POST" action="/oauth/authorize/confirm" id="authForm" class="space-y-4">
|
|
<!-- Hidden fields -->
|
|
<input type="hidden" name="client_id" value="{{ client_id }}">
|
|
<input type="hidden" name="redirect_uri" value="{{ redirect_uri }}">
|
|
<input type="hidden" name="response_type" value="{{ response_type }}">
|
|
<input type="hidden" name="code_challenge" value="{{ code_challenge }}">
|
|
<input type="hidden" name="code_challenge_method" value="{{ code_challenge_method }}">
|
|
{% if scope %}
|
|
<input type="hidden" name="scope" value="{{ scope }}">
|
|
{% endif %}
|
|
{% if state %}
|
|
<input type="hidden" name="state" value="{{ state }}">
|
|
{% endif %}
|
|
{% if resource %}
|
|
<input type="hidden" name="resource" value="{{ resource }}">
|
|
{% endif %}
|
|
<input type="hidden" name="lang" value="{{ lang }}" id="oauth_lang">
|
|
<input type="hidden" name="csrf_token" value="{{ csrf_token }}">
|
|
|
|
<!-- Authentication -->
|
|
{% if session_user %}
|
|
<!-- Session-based consent (user already logged in) -->
|
|
<div>
|
|
<div class="oauth-panel mb-4">
|
|
<div class="flex items-center gap-3 {% if lang == 'fa' %}flex-row-reverse text-right{% endif %}">
|
|
<svg class="w-5 h-5 text-green-600 dark:text-green-400 flex-shrink-0" fill="none" viewBox="0 0 24 24" stroke="currentColor">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 13l4 4L19 7"/>
|
|
</svg>
|
|
<div>
|
|
<p class="font-medium text-green-800 dark:text-green-300">
|
|
{% if lang == 'fa' %}وارد شده به عنوان{% else %}Logged in as{% endif %}
|
|
</p>
|
|
<p class="text-sm text-green-700 dark:text-green-400">
|
|
{{ session_user.name or session_user.email or 'User' }}
|
|
{% if session_user.email %}
|
|
<span class="text-green-600 dark:text-green-500">({{ session_user.email }})</span>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<input type="hidden" name="api_key" value="__session__" id="session_marker">
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">
|
|
{% if lang == 'fa' %}
|
|
یا <a href="#" onclick="showApiKeyInput()" class="text-blue-600 dark:text-blue-400 hover:underline">با کلید API وارد شوید</a>
|
|
{% else %}
|
|
Or <a href="#" onclick="showApiKeyInput()" class="text-blue-600 dark:text-blue-400 hover:underline">enter an API key instead</a>
|
|
{% endif %}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Hidden API key input (shown when user clicks "enter an API key instead") -->
|
|
<div id="api-key-section" class="hidden oauth-panel">
|
|
<label for="api_key_input" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{{ t.enter_api_key }}
|
|
</label>
|
|
<input type="password" id="api_key_input" name="api_key_manual"
|
|
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
|
|
placeholder="{{ t.api_key_placeholder }}" autocomplete="off"
|
|
dir="ltr" {% if lang == 'fa' %}style="text-align: right;"{% endif %}>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">{{ t.api_key_note }}</p>
|
|
</div>
|
|
|
|
{% else %}
|
|
<!-- API key mode (no active session) -->
|
|
<div class="oauth-panel">
|
|
<label for="api_key" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
|
|
{{ t.enter_api_key }}
|
|
</label>
|
|
<input
|
|
type="password"
|
|
id="api_key"
|
|
name="api_key"
|
|
required
|
|
placeholder="{{ t.api_key_placeholder }}"
|
|
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent dark:bg-gray-700 dark:text-white transition"
|
|
autocomplete="off"
|
|
dir="ltr" {% if lang == 'fa' %}style="text-align: right;"{% endif %}
|
|
/>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400 mt-2">
|
|
{{ t.api_key_note }}
|
|
</p>
|
|
|
|
{% if return_url %}
|
|
<!-- Social login link -->
|
|
<div class="mt-3 pt-3 border-t border-gray-200 dark:border-gray-700">
|
|
<p class="text-sm text-gray-600 dark:text-gray-400">
|
|
{% if lang == 'fa' %}
|
|
یا با حساب کاربری وارد شوید:
|
|
{% else %}
|
|
Or log in with your account:
|
|
{% endif %}
|
|
</p>
|
|
<div class="flex gap-2 mt-2 {% if lang == 'fa' %}flex-row-reverse{% endif %}">
|
|
<a href="/auth/github?next={{ return_url | urlencode }}"
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-white text-sm rounded-lg transition-colors">
|
|
<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 24 24"><path d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"/></svg>
|
|
GitHub
|
|
</a>
|
|
<a href="/auth/google?next={{ return_url | urlencode }}"
|
|
class="inline-flex items-center gap-2 px-3 py-1.5 bg-white hover:bg-gray-50 text-gray-700 text-sm rounded-lg border border-gray-300 transition-colors">
|
|
<svg class="w-4 h-4" viewBox="0 0 24 24"><path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92a5.06 5.06 0 01-2.2 3.32v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.1z"/><path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/><path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l2.85-2.22.81-.62z"/><path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z"/></svg>
|
|
Google
|
|
</a>
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
{% endif %}
|
|
|
|
<!-- Action Buttons -->
|
|
<div class="oauth-actions">
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="approve"
|
|
class="btn-primary flex-1 px-6 py-3 text-white font-semibold rounded-lg"
|
|
>
|
|
{{ t.approve }}
|
|
</button>
|
|
<button
|
|
type="submit"
|
|
name="action"
|
|
value="deny"
|
|
class="btn-secondary flex-1 px-6 py-3 bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200 font-semibold rounded-lg"
|
|
>
|
|
{{ t.deny }}
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Security Notice -->
|
|
<div class="oauth-panel">
|
|
<div class="flex gap-2 {% if lang == 'fa' %}flex-row-reverse text-right{% endif %}">
|
|
<svg class="h-5 w-5 text-blue-600 dark:text-blue-400 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
|
|
</svg>
|
|
<p class="text-xs text-blue-800 dark:text-blue-300">
|
|
<strong>{{ t.security_note }}</strong> {{ t.security_message }}
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endblock %}
|
|
|
|
{% block scripts %}
|
|
<script>
|
|
function showApiKeyInput() {
|
|
// Switch from session mode to API key input mode
|
|
document.getElementById('api-key-section').classList.remove('hidden');
|
|
// Remove the __session__ hidden input
|
|
var hiddenInput = document.getElementById('session_marker');
|
|
if (hiddenInput) hiddenInput.remove();
|
|
// Make the manual input the actual api_key field
|
|
var manualInput = document.getElementById('api_key_input');
|
|
if (manualInput) {
|
|
manualInput.name = 'api_key';
|
|
manualInput.required = true;
|
|
manualInput.focus();
|
|
}
|
|
}
|
|
|
|
// Client-side validation
|
|
document.getElementById('authForm').addEventListener('submit', function(e) {
|
|
var action = e.submitter.value;
|
|
|
|
if (action === 'approve') {
|
|
// Session-based consent — no API key validation needed
|
|
var sessionInput = document.getElementById('session_marker');
|
|
if (sessionInput) {
|
|
return true;
|
|
}
|
|
|
|
var apiKeyEl = document.getElementById('api_key') || document.getElementById('api_key_input');
|
|
var apiKey = apiKeyEl ? apiKeyEl.value : '';
|
|
|
|
if (!apiKey || apiKey.length < 10) {
|
|
e.preventDefault();
|
|
var lang = '{{ lang }}';
|
|
var message = lang === 'fa'
|
|
? 'لطفاً یک API Key معتبر وارد کنید'
|
|
: 'Please enter a valid API key';
|
|
alert(message);
|
|
return false;
|
|
}
|
|
|
|
if (!apiKey.startsWith('cmp_') && !apiKey.startsWith('ckm_') && !apiKey.startsWith('mhu_')) {
|
|
var lang2 = '{{ lang }}';
|
|
var msg = lang2 === 'fa'
|
|
? 'فرمت API Key غیرمعمول به نظر میرسد. ادامه میدهید؟'
|
|
: 'The API key format looks unusual. Continue anyway?';
|
|
if (!window.confirm(msg)) {
|
|
e.preventDefault();
|
|
return false;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
// Focus effect for API key input (if present)
|
|
var apiKeyInput = document.getElementById('api_key');
|
|
if (apiKeyInput) {
|
|
apiKeyInput.addEventListener('focus', function() {
|
|
this.parentElement.classList.add('ring-2', 'ring-purple-200');
|
|
});
|
|
apiKeyInput.addEventListener('blur', function() {
|
|
this.parentElement.classList.remove('ring-2', 'ring-purple-200');
|
|
});
|
|
}
|
|
</script>
|
|
{% endblock %}
|