fix ai auth, deploy script visual orgasm

This commit is contained in:
overcuriousity
2025-08-07 15:41:42 +02:00
parent 8516a39fcb
commit b28f9b9213
3 changed files with 1016 additions and 390 deletions

View File

@@ -6,10 +6,19 @@ import ToolMatrix from '../components/ToolMatrix.astro';
import AIQueryInterface from '../components/AIQueryInterface.astro';
import TargetedScenarios from '../components/TargetedScenarios.astro';
import { getToolsData } from '../utils/dataService.js';
import { withAPIAuth, getAuthRequirementForContext } from '../utils/auth.js';
const data = await getToolsData();
const tools = data.tools;
const phases = data.phases;
// Check AI authentication requirements
const aiAuthRequired = getAuthRequirementForContext('ai');
let aiAuthContext: { authenticated: boolean; userId: string; session?: any; authRequired: boolean; } | null = null;
if (aiAuthRequired) {
aiAuthContext = await withAPIAuth(Astro.request, 'ai');
}
---
<BaseLayout title="~/">
@@ -36,17 +45,33 @@ const phases = data.phases;
</div>
</div>
<button id="ai-query-btn" class="btn btn-accent btn-lg ai-primary-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-Beratung starten
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-2">
<line x1="7" y1="17" x2="17" y2="7"/>
<polyline points="7,7 17,7 17,17"/>
</svg>
</button>
{aiAuthRequired && !aiAuthContext?.authenticated ? (
<div class="ai-auth-required">
<button id="ai-login-btn" class="btn btn-accent btn-lg">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
<polyline points="10 17 15 12 10 7"/>
<line x1="15" y1="12" x2="3" y2="12"/>
</svg>
Anmelden für KI-Beratung
</button>
<p style="margin-top: 0.75rem; font-size: 0.875rem; color: var(--color-text-secondary); text-align: center;">
Authentifizierung erforderlich für KI-Features
</p>
</div>
) : (
<button id="ai-query-btn" class="btn btn-accent btn-lg ai-primary-btn">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
</svg>
KI-Beratung starten
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="ml-2">
<line x1="7" y1="17" x2="17" y2="7"/>
<polyline points="7,7 17,7 17,17"/>
</svg>
</button>
)}
<div class="ai-features-mini">
<span class="badge badge-secondary">Workflow-Empfehlungen</span>
@@ -178,7 +203,39 @@ const phases = data.phases;
<ToolFilters data={data} />
</section>
<AIQueryInterface />
{aiAuthRequired && !aiAuthContext?.authenticated ? (
<section id="ai-interface" class="ai-interface hidden">
<div class="ai-query-section">
<div class="content-center-lg">
<div class="card" style="text-align: center; padding: 3rem; border-left: 4px solid var(--color-accent);">
<div style="margin-bottom: 2rem;">
<svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="var(--color-accent)" stroke-width="1.5" style="margin: 0 auto;">
<path d="M9 11H5a2 2 0 0 0-2 2v7a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7a2 2 0 0 0-2-2h-4"/>
<path d="M9 11V7a3 3 0 0 1 6 0v4"/>
<circle cx="12" cy="12" r="2"/>
</svg>
</div>
<h2 style="margin-bottom: 1rem; color: var(--color-primary);">Anmeldung erforderlich</h2>
<p style="margin-bottom: 2rem; color: var(--color-text-secondary); line-height: 1.6;">
Für die Nutzung der KI-Beratung ist eine Authentifizierung erforderlich.
Melden Sie sich an, um personalisierten Workflow-Empfehlungen und Tool-Analysen zu erhalten.
</p>
<a href={`/api/auth/login?returnTo=${encodeURIComponent(Astro.url.toString())}`}
class="btn btn-accent btn-lg">
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="margin-right: 0.5rem;">
<path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/>
<polyline points="10 17 15 12 10 7"/>
<line x1="15" y1="12" x2="3" y2="12"/>
</svg>
Anmelden
</a>
</div>
</div>
</div>
</section>
) : (
<AIQueryInterface />
)}
<section id="tools-grid" style="padding-bottom: 2rem;">
<div class="grid-auto-fit" id="tools-container">
@@ -195,7 +252,7 @@ const phases = data.phases;
<ToolMatrix data={data} />
</BaseLayout>
<script define:vars={{ toolsData: data.tools, phases: data.phases }}>
<script define:vars={{ toolsData: data.tools, phases: data.phases, aiAuthRequired: aiAuthRequired, aiAuthenticated: aiAuthContext?.authenticated }}>
window.toolsData = toolsData;
window.selectApproach = function(approach) {
@@ -268,12 +325,21 @@ const phases = data.phases;
const filtersSection = document.getElementById('filters-section');
const noResults = document.getElementById('no-results');
const aiQueryBtn = document.getElementById('ai-query-btn');
const aiLoginBtn = document.getElementById('ai-login-btn');
if (!toolsContainer || !toolsGrid || !matrixContainer || !noResults || !aiInterface || !filtersSection) {
console.error('Required DOM elements not found');
return;
}
// Handle AI authentication button click
if (aiLoginBtn) {
aiLoginBtn.addEventListener('click', () => {
const currentUrl = encodeURIComponent(window.location.href);
window.location.href = `/api/auth/login?returnTo=${currentUrl}`;
});
}
if (aiQueryBtn) {
aiQueryBtn.addEventListener('click', () => {
aiQueryBtn.classList.add('activated');
@@ -319,6 +385,14 @@ const phases = data.phases;
if (filtersSection) filtersSection.style.display = 'block';
break;
case 'ai':
// Only show AI interface if authentication allows it
if (aiAuthRequired && !aiAuthenticated) {
console.log('[AUTH] AI access denied, redirecting to login');
const currentUrl = encodeURIComponent(window.location.href);
window.location.href = `/api/auth/login?returnTo=${currentUrl}`;
return;
}
if (aiInterface) aiInterface.style.display = 'block';
if (filtersSection) {
@@ -344,6 +418,7 @@ const phases = data.phases;
}
}
// Rest of the existing code remains the same...
window.navigateToGrid = function(toolName) {
console.log('Navigating to grid for tool:', toolName);