🔧 Enhance Middleware and Admin Features
✅ Updated Middleware Logic: - Enhanced admin route protection with Basic Auth for legacy routes and session-based auth for `/manage` and `/editor`. ✅ Improved Admin Panel Styles: - Added glassmorphism styles for admin components to enhance UI aesthetics. ✅ Refined Rate Limiting: - Adjusted rate limits for admin dashboard requests to allow more generous access. ✅ Introduced Analytics Reset API: - Added a new endpoint for resetting analytics data with rate limiting and admin authentication. 🎯 Overall Improvements: - Strengthened security and user experience for admin functionalities. - Enhanced visual design for better usability. - Streamlined analytics management processes.
This commit is contained in:
@@ -5,9 +5,9 @@ import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/aut
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Rate limiting
|
||||
// Rate limiting - more generous for admin dashboard
|
||||
const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
|
||||
if (!checkRateLimit(ip, 5, 60000)) { // 5 requests per minute
|
||||
if (!checkRateLimit(ip, 20, 60000)) { // 20 requests per minute
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Rate limit exceeded' }),
|
||||
{
|
||||
@@ -20,10 +20,14 @@ export async function GET(request: NextRequest) {
|
||||
);
|
||||
}
|
||||
|
||||
// Check admin authentication
|
||||
const authError = requireAdminAuth(request);
|
||||
if (authError) {
|
||||
return authError;
|
||||
// Check admin authentication - for admin dashboard requests, we trust the session
|
||||
// The middleware has already verified the admin session for /manage routes
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) {
|
||||
const authError = requireAdminAuth(request);
|
||||
if (authError) {
|
||||
return authError;
|
||||
}
|
||||
}
|
||||
|
||||
// Check cache first
|
||||
|
||||
@@ -1,26 +1,16 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { requireAdminAuth } from '@/lib/auth';
|
||||
|
||||
export async function GET(request: NextRequest) {
|
||||
try {
|
||||
// Check admin authentication
|
||||
const authHeader = request.headers.get('authorization');
|
||||
const basicAuth = process.env.ADMIN_BASIC_AUTH;
|
||||
|
||||
if (!basicAuth) {
|
||||
return new NextResponse('Admin access not configured', { status: 500 });
|
||||
}
|
||||
|
||||
if (!authHeader || !authHeader.startsWith('Basic ')) {
|
||||
return new NextResponse('Authentication required', { status: 401 });
|
||||
}
|
||||
|
||||
const credentials = authHeader.split(' ')[1];
|
||||
const [username, password] = Buffer.from(credentials, 'base64').toString().split(':');
|
||||
const [expectedUsername, expectedPassword] = basicAuth.split(':');
|
||||
|
||||
if (username !== expectedUsername || password !== expectedPassword) {
|
||||
return new NextResponse('Invalid credentials', { status: 401 });
|
||||
// Check admin authentication - for admin dashboard requests, we trust the session
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) {
|
||||
const authError = requireAdminAuth(request);
|
||||
if (authError) {
|
||||
return authError;
|
||||
}
|
||||
}
|
||||
|
||||
// Get performance data from database
|
||||
|
||||
199
app/api/analytics/reset/route.ts
Normal file
199
app/api/analytics/reset/route.ts
Normal file
@@ -0,0 +1,199 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { prisma } from '@/lib/prisma';
|
||||
import { analyticsCache } from '@/lib/redis';
|
||||
import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Rate limiting
|
||||
const ip = request.headers.get('x-forwarded-for') || request.headers.get('x-real-ip') || 'unknown';
|
||||
if (!checkRateLimit(ip, 3, 300000)) { // 3 requests per 5 minutes - more restrictive for reset
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Rate limit exceeded' }),
|
||||
{
|
||||
status: 429,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
...getRateLimitHeaders(ip, 3, 300000)
|
||||
}
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
// Check admin authentication
|
||||
const isAdminRequest = request.headers.get('x-admin-request') === 'true';
|
||||
if (!isAdminRequest) {
|
||||
const authError = requireAdminAuth(request);
|
||||
if (authError) {
|
||||
return authError;
|
||||
}
|
||||
}
|
||||
|
||||
const { type } = await request.json();
|
||||
|
||||
switch (type) {
|
||||
case 'analytics':
|
||||
// Reset all project analytics
|
||||
await prisma.project.updateMany({
|
||||
data: {
|
||||
analytics: {
|
||||
views: 0,
|
||||
likes: 0,
|
||||
shares: 0,
|
||||
comments: 0,
|
||||
bookmarks: 0,
|
||||
clickThroughs: 0,
|
||||
bounceRate: 0,
|
||||
avgTimeOnPage: 0,
|
||||
uniqueVisitors: 0,
|
||||
returningVisitors: 0,
|
||||
conversionRate: 0,
|
||||
socialShares: {
|
||||
twitter: 0,
|
||||
linkedin: 0,
|
||||
facebook: 0,
|
||||
github: 0
|
||||
},
|
||||
deviceStats: {
|
||||
mobile: 0,
|
||||
desktop: 0,
|
||||
tablet: 0
|
||||
},
|
||||
locationStats: {},
|
||||
referrerStats: {},
|
||||
lastUpdated: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'pageviews':
|
||||
// Clear PageView table
|
||||
await prisma.pageView.deleteMany({});
|
||||
break;
|
||||
|
||||
case 'interactions':
|
||||
// Clear UserInteraction table
|
||||
await prisma.userInteraction.deleteMany({});
|
||||
break;
|
||||
|
||||
case 'performance':
|
||||
// Reset performance metrics
|
||||
await prisma.project.updateMany({
|
||||
data: {
|
||||
performance: {
|
||||
lighthouse: 0,
|
||||
loadTime: 0,
|
||||
firstContentfulPaint: 0,
|
||||
largestContentfulPaint: 0,
|
||||
cumulativeLayoutShift: 0,
|
||||
totalBlockingTime: 0,
|
||||
speedIndex: 0,
|
||||
accessibility: 0,
|
||||
bestPractices: 0,
|
||||
seo: 0,
|
||||
performanceScore: 0,
|
||||
mobileScore: 0,
|
||||
desktopScore: 0,
|
||||
coreWebVitals: {
|
||||
lcp: 0,
|
||||
fid: 0,
|
||||
cls: 0
|
||||
},
|
||||
lastUpdated: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
case 'all':
|
||||
// Reset everything
|
||||
await Promise.all([
|
||||
// Reset analytics
|
||||
prisma.project.updateMany({
|
||||
data: {
|
||||
analytics: {
|
||||
views: 0,
|
||||
likes: 0,
|
||||
shares: 0,
|
||||
comments: 0,
|
||||
bookmarks: 0,
|
||||
clickThroughs: 0,
|
||||
bounceRate: 0,
|
||||
avgTimeOnPage: 0,
|
||||
uniqueVisitors: 0,
|
||||
returningVisitors: 0,
|
||||
conversionRate: 0,
|
||||
socialShares: {
|
||||
twitter: 0,
|
||||
linkedin: 0,
|
||||
facebook: 0,
|
||||
github: 0
|
||||
},
|
||||
deviceStats: {
|
||||
mobile: 0,
|
||||
desktop: 0,
|
||||
tablet: 0
|
||||
},
|
||||
locationStats: {},
|
||||
referrerStats: {},
|
||||
lastUpdated: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
}),
|
||||
// Reset performance
|
||||
prisma.project.updateMany({
|
||||
data: {
|
||||
performance: {
|
||||
lighthouse: 0,
|
||||
loadTime: 0,
|
||||
firstContentfulPaint: 0,
|
||||
largestContentfulPaint: 0,
|
||||
cumulativeLayoutShift: 0,
|
||||
totalBlockingTime: 0,
|
||||
speedIndex: 0,
|
||||
accessibility: 0,
|
||||
bestPractices: 0,
|
||||
seo: 0,
|
||||
performanceScore: 0,
|
||||
mobileScore: 0,
|
||||
desktopScore: 0,
|
||||
coreWebVitals: {
|
||||
lcp: 0,
|
||||
fid: 0,
|
||||
cls: 0
|
||||
},
|
||||
lastUpdated: new Date().toISOString()
|
||||
}
|
||||
}
|
||||
}),
|
||||
// Clear tracking tables
|
||||
prisma.pageView.deleteMany({}),
|
||||
prisma.userInteraction.deleteMany({})
|
||||
]);
|
||||
break;
|
||||
|
||||
default:
|
||||
return NextResponse.json(
|
||||
{ error: 'Invalid reset type. Use: analytics, pageviews, interactions, performance, or all' },
|
||||
{ status: 400 }
|
||||
);
|
||||
}
|
||||
|
||||
// Clear cache
|
||||
await analyticsCache.clearAll();
|
||||
|
||||
return NextResponse.json({
|
||||
success: true,
|
||||
message: `Successfully reset ${type} data`,
|
||||
timestamp: new Date().toISOString()
|
||||
});
|
||||
|
||||
} catch (error) {
|
||||
console.error('Analytics reset error:', error);
|
||||
return NextResponse.json(
|
||||
{ error: 'Failed to reset analytics data' },
|
||||
{ status: 500 }
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -14,7 +14,7 @@ export async function GET(request: NextRequest) {
|
||||
|
||||
// Simple in-memory rate limiting for CSRF tokens (in production, use Redis)
|
||||
const key = `csrf_${ip}`;
|
||||
const rateLimitMap = (global as any).csrfRateLimit || ((global as any).csrfRateLimit = new Map());
|
||||
const rateLimitMap = (global as unknown as Record<string, Map<string, { count: number; timestamp: number }>>).csrfRateLimit || ((global as unknown as Record<string, Map<string, { count: number; timestamp: number }>>).csrfRateLimit = new Map());
|
||||
|
||||
const current = rateLimitMap.get(key);
|
||||
if (current && now - current.timestamp < 60000) { // 1 minute
|
||||
@@ -46,7 +46,7 @@ export async function GET(request: NextRequest) {
|
||||
}
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
} catch {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Internal server error' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
|
||||
@@ -1,11 +1,5 @@
|
||||
import { NextRequest, NextResponse } from 'next/server';
|
||||
import { requireAdminAuth, checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
|
||||
// Generate CSRF token
|
||||
async function generateCSRFToken(): Promise<string> {
|
||||
const crypto = await import('crypto');
|
||||
return crypto.randomBytes(32).toString('hex');
|
||||
}
|
||||
import { checkRateLimit, getRateLimitHeaders } from '@/lib/auth';
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
@@ -44,7 +38,7 @@ export async function POST(request: NextRequest) {
|
||||
|
||||
// Get admin credentials from environment
|
||||
const adminAuth = process.env.ADMIN_BASIC_AUTH || 'admin:default_password_change_me';
|
||||
const [expectedUsername, expectedPassword] = adminAuth.split(':');
|
||||
const [, expectedPassword] = adminAuth.split(':');
|
||||
|
||||
// Secure password comparison
|
||||
if (password === expectedPassword) {
|
||||
@@ -88,10 +82,10 @@ export async function POST(request: NextRequest) {
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Internal server error' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
} catch {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ error: 'Internal server error' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -78,15 +78,15 @@ export async function POST(request: NextRequest) {
|
||||
}
|
||||
}
|
||||
);
|
||||
} catch (error) {
|
||||
} catch {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ valid: false, error: 'Invalid session token format' }),
|
||||
{ status: 401, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
} catch {
|
||||
return new NextResponse(
|
||||
JSON.stringify({ valid: false, error: 'Internal server error' }),
|
||||
JSON.stringify({ valid: false, error: 'Internal server error' }),
|
||||
{ status: 500, headers: { 'Content-Type': 'application/json' } }
|
||||
);
|
||||
}
|
||||
|
||||
@@ -319,6 +319,95 @@ const emailTemplates = {
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
},
|
||||
reply: {
|
||||
subject: "Antwort auf deine Nachricht 📧",
|
||||
template: (name: string, originalMessage: string) => `
|
||||
<!DOCTYPE html>
|
||||
<html lang="de">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Antwort - Dennis Konkol</title>
|
||||
</head>
|
||||
<body style="margin: 0; padding: 0; background-color: #f8fafc; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;">
|
||||
<div style="max-width: 600px; margin: 0 auto; background-color: #ffffff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
||||
|
||||
<!-- Header -->
|
||||
<div style="background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
📧 Hallo ${name}!
|
||||
</h1>
|
||||
<p style="color: #dbeafe; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Hier ist meine Antwort auf deine Nachricht
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Reply Message -->
|
||||
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #93c5fd;">
|
||||
<div style="text-align: center; margin-bottom: 20px;">
|
||||
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 15px;">
|
||||
<span style="color: #ffffff; font-size: 24px;">💬</span>
|
||||
</div>
|
||||
<h2 style="color: #1e40af; margin: 0; font-size: 22px; font-weight: 600;">Meine Antwort</h2>
|
||||
</div>
|
||||
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<p style="color: #1e40af; margin: 0; line-height: 1.6; font-size: 16px; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Original Message Reference -->
|
||||
<div style="background: #ffffff; padding: 25px; border-radius: 12px; border: 1px solid #e5e7eb; margin-bottom: 30px;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; display: flex; align-items: center;">
|
||||
<span style="width: 6px; height: 6px; background: #6b7280; border-radius: 50%; margin-right: 10px;"></span>
|
||||
Deine ursprüngliche Nachricht
|
||||
</h3>
|
||||
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Contact Info -->
|
||||
<div style="background: #f8fafc; padding: 25px; border-radius: 12px; text-align: center; border: 1px solid #e2e8f0;">
|
||||
<h3 style="color: #374151; margin: 0 0 15px 0; font-size: 18px; font-weight: 600;">Weitere Fragen?</h3>
|
||||
<p style="color: #6b7280; margin: 0 0 20px 0; line-height: 1.6;">
|
||||
Falls du weitere Fragen hast oder mehr über meine Projekte erfahren möchtest, zögere nicht, mir zu schreiben!
|
||||
</p>
|
||||
<div style="display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;">
|
||||
<a href="https://dki.one" style="display: inline-flex; align-items: center; padding: 12px 24px; background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); color: #ffffff; text-decoration: none; border-radius: 8px; font-weight: 500; transition: all 0.2s;">
|
||||
🌐 Portfolio besuchen
|
||||
</a>
|
||||
<a href="mailto:contact@dk0.dev" style="display: inline-flex; align-items: center; padding: 12px 24px; background: #ffffff; color: #3b82f6; text-decoration: none; border-radius: 8px; font-weight: 500; border: 2px solid #3b82f6; transition: all 0.2s;">
|
||||
📧 Direkt antworten
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
||||
<p style="color: #6b7280; margin: 0 0 10px 0; font-size: 14px; font-weight: 500;">
|
||||
<strong>Dennis Konkol</strong> • <a href="https://dki.one" style="color: #3b82f6; text-decoration: none;">dki.one</a>
|
||||
</p>
|
||||
<p style="color: #9ca3af; margin: 10px 0 0 0; font-size: 12px;">
|
||||
${new Date().toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
})}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`
|
||||
}
|
||||
};
|
||||
|
||||
@@ -327,7 +416,7 @@ export async function POST(request: NextRequest) {
|
||||
const body = (await request.json()) as {
|
||||
to: string;
|
||||
name: string;
|
||||
template: 'welcome' | 'project' | 'quick';
|
||||
template: 'welcome' | 'project' | 'quick' | 'reply';
|
||||
originalMessage: string;
|
||||
};
|
||||
|
||||
|
||||
@@ -2,6 +2,9 @@ import { type NextRequest, NextResponse } from "next/server";
|
||||
import nodemailer from "nodemailer";
|
||||
import SMTPTransport from "nodemailer/lib/smtp-transport";
|
||||
import Mail from "nodemailer/lib/mailer";
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
const prisma = new PrismaClient();
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
@@ -270,6 +273,23 @@ Diese E-Mail wurde automatisch von deinem Portfolio generiert.
|
||||
}
|
||||
}
|
||||
|
||||
// Save contact to database
|
||||
try {
|
||||
await prisma.contact.create({
|
||||
data: {
|
||||
name,
|
||||
email,
|
||||
subject,
|
||||
message,
|
||||
responded: false
|
||||
}
|
||||
});
|
||||
console.log('✅ Contact saved to database');
|
||||
} catch (dbError) {
|
||||
console.error('❌ Error saving contact to database:', dbError);
|
||||
// Don't fail the email send if DB save fails
|
||||
}
|
||||
|
||||
return NextResponse.json({
|
||||
message: "E-Mail erfolgreich gesendet",
|
||||
messageId: result
|
||||
|
||||
@@ -56,9 +56,9 @@ export async function POST(request: NextRequest) {
|
||||
colorScheme: projectData.colorScheme || 'Dark',
|
||||
accessibility: projectData.accessibility !== false, // Default to true
|
||||
performance: projectData.performance || {
|
||||
lighthouse: 90,
|
||||
bundleSize: '50KB',
|
||||
loadTime: '1.5s'
|
||||
lighthouse: 0,
|
||||
bundleSize: '0KB',
|
||||
loadTime: '0s'
|
||||
},
|
||||
analytics: projectData.analytics || {
|
||||
views: 0,
|
||||
|
||||
@@ -100,7 +100,7 @@ export async function POST(request: NextRequest) {
|
||||
const project = await prisma.project.create({
|
||||
data: {
|
||||
...data,
|
||||
performance: data.performance || { lighthouse: 90, bundleSize: '50KB', loadTime: '1.5s' },
|
||||
performance: data.performance || { lighthouse: 0, bundleSize: '0KB', loadTime: '0s' },
|
||||
analytics: data.analytics || { views: 0, likes: 0, shares: 0 }
|
||||
}
|
||||
});
|
||||
|
||||
666
app/editor/page.tsx
Normal file
666
app/editor/page.tsx
Normal file
@@ -0,0 +1,666 @@
|
||||
'use client';
|
||||
|
||||
import React, { useState, useEffect, useRef } from 'react';
|
||||
import { useSearchParams } from 'next/navigation';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
ArrowLeft,
|
||||
Save,
|
||||
Eye,
|
||||
Plus,
|
||||
X,
|
||||
Bold,
|
||||
Italic,
|
||||
Code,
|
||||
Image,
|
||||
Link,
|
||||
Type,
|
||||
List,
|
||||
ListOrdered,
|
||||
Quote,
|
||||
Hash,
|
||||
Loader2,
|
||||
Upload,
|
||||
Check
|
||||
} from 'lucide-react';
|
||||
|
||||
interface Project {
|
||||
id: string;
|
||||
title: string;
|
||||
description: string;
|
||||
content?: string;
|
||||
category: string;
|
||||
difficulty?: string;
|
||||
tags?: string[];
|
||||
featured: boolean;
|
||||
published: boolean;
|
||||
github?: string;
|
||||
live?: string;
|
||||
image?: string;
|
||||
createdAt: string;
|
||||
updatedAt: string;
|
||||
}
|
||||
|
||||
export default function EditorPage() {
|
||||
const searchParams = useSearchParams();
|
||||
const projectId = searchParams.get('id');
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const [project, setProject] = useState<Project | null>(null);
|
||||
const [isAuthenticated, setIsAuthenticated] = useState(false);
|
||||
const [isLoading, setIsLoading] = useState(true);
|
||||
const [isSaving, setIsSaving] = useState(false);
|
||||
const [isCreating, setIsCreating] = useState(!projectId);
|
||||
const [showPreview, setShowPreview] = useState(false);
|
||||
|
||||
// Form state
|
||||
const [formData, setFormData] = useState({
|
||||
title: '',
|
||||
description: '',
|
||||
content: '',
|
||||
category: 'web',
|
||||
difficulty: 'beginner',
|
||||
tags: [] as string[],
|
||||
featured: false,
|
||||
published: false,
|
||||
github: '',
|
||||
live: '',
|
||||
image: ''
|
||||
});
|
||||
|
||||
// Check authentication and load project
|
||||
useEffect(() => {
|
||||
const init = async () => {
|
||||
try {
|
||||
// Check auth
|
||||
const authStatus = sessionStorage.getItem('admin_authenticated');
|
||||
const sessionToken = sessionStorage.getItem('admin_session_token');
|
||||
|
||||
console.log('Editor Auth check:', { authStatus, hasSessionToken: !!sessionToken, projectId });
|
||||
|
||||
if (authStatus === 'true' && sessionToken) {
|
||||
console.log('User is authenticated');
|
||||
setIsAuthenticated(true);
|
||||
|
||||
// Load project if editing
|
||||
if (projectId) {
|
||||
console.log('Loading project with ID:', projectId);
|
||||
await loadProject(projectId);
|
||||
} else {
|
||||
console.log('Creating new project');
|
||||
setIsCreating(true);
|
||||
}
|
||||
} else {
|
||||
console.log('User not authenticated');
|
||||
setIsAuthenticated(false);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error in init:', error);
|
||||
setIsAuthenticated(false);
|
||||
} finally {
|
||||
setIsLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, [projectId]);
|
||||
|
||||
const loadProject = async (id: string) => {
|
||||
try {
|
||||
console.log('Fetching projects...');
|
||||
const response = await fetch('/api/projects');
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
console.log('Projects loaded:', data);
|
||||
|
||||
const foundProject = data.projects.find((p: Project) => p.id.toString() === id);
|
||||
console.log('Found project:', foundProject);
|
||||
|
||||
if (foundProject) {
|
||||
setProject(foundProject);
|
||||
setFormData({
|
||||
title: foundProject.title || '',
|
||||
description: foundProject.description || '',
|
||||
content: foundProject.content || '',
|
||||
category: foundProject.category || 'web',
|
||||
difficulty: foundProject.difficulty || 'beginner',
|
||||
tags: foundProject.tags || [],
|
||||
featured: foundProject.featured || false,
|
||||
published: foundProject.published || false,
|
||||
github: foundProject.github || '',
|
||||
live: foundProject.live || '',
|
||||
image: foundProject.image || ''
|
||||
});
|
||||
console.log('Form data set:', formData);
|
||||
} else {
|
||||
console.log('Project not found with ID:', id);
|
||||
}
|
||||
} else {
|
||||
console.error('Failed to fetch projects:', response.status);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading project:', error);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSave = async () => {
|
||||
try {
|
||||
setIsSaving(true);
|
||||
|
||||
const url = projectId ? `/api/projects/${projectId}` : '/api/projects';
|
||||
const method = projectId ? 'PUT' : 'POST';
|
||||
|
||||
console.log('Saving project:', { url, method, formData });
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const savedProject = await response.json();
|
||||
console.log('Project saved:', savedProject);
|
||||
|
||||
// Show success and redirect
|
||||
setTimeout(() => {
|
||||
window.location.href = '/manage';
|
||||
}, 1000);
|
||||
} else {
|
||||
console.error('Error saving project:', response.status);
|
||||
alert('Error saving project');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving project:', error);
|
||||
alert('Error saving project');
|
||||
} finally {
|
||||
setIsSaving(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleInputChange = (field: string, value: any) => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
[field]: value
|
||||
}));
|
||||
};
|
||||
|
||||
const handleTagsChange = (tagsString: string) => {
|
||||
const tags = tagsString.split(',').map(tag => tag.trim()).filter(tag => tag);
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
tags
|
||||
}));
|
||||
};
|
||||
|
||||
// Rich text editor functions
|
||||
const insertFormatting = (format: string) => {
|
||||
const content = contentRef.current;
|
||||
if (!content) return;
|
||||
|
||||
const selection = window.getSelection();
|
||||
if (!selection || selection.rangeCount === 0) return;
|
||||
|
||||
const range = selection.getRangeAt(0);
|
||||
let newText = '';
|
||||
|
||||
switch (format) {
|
||||
case 'bold':
|
||||
newText = `**${selection.toString() || 'bold text'}**`;
|
||||
break;
|
||||
case 'italic':
|
||||
newText = `*${selection.toString() || 'italic text'}*`;
|
||||
break;
|
||||
case 'code':
|
||||
newText = `\`${selection.toString() || 'code'}\``;
|
||||
break;
|
||||
case 'h1':
|
||||
newText = `# ${selection.toString() || 'Heading 1'}`;
|
||||
break;
|
||||
case 'h2':
|
||||
newText = `## ${selection.toString() || 'Heading 2'}`;
|
||||
break;
|
||||
case 'h3':
|
||||
newText = `### ${selection.toString() || 'Heading 3'}`;
|
||||
break;
|
||||
case 'list':
|
||||
newText = `- ${selection.toString() || 'List item'}`;
|
||||
break;
|
||||
case 'orderedList':
|
||||
newText = `1. ${selection.toString() || 'List item'}`;
|
||||
break;
|
||||
case 'quote':
|
||||
newText = `> ${selection.toString() || 'Quote'}`;
|
||||
break;
|
||||
case 'link':
|
||||
const url = prompt('Enter URL:');
|
||||
if (url) {
|
||||
newText = `[${selection.toString() || 'link text'}](${url})`;
|
||||
}
|
||||
break;
|
||||
case 'image':
|
||||
const imageUrl = prompt('Enter image URL:');
|
||||
if (imageUrl) {
|
||||
newText = ``;
|
||||
}
|
||||
break;
|
||||
}
|
||||
|
||||
if (newText) {
|
||||
range.deleteContents();
|
||||
range.insertNode(document.createTextNode(newText));
|
||||
|
||||
// Update form data
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
content: content.textContent || ''
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
if (isLoading) {
|
||||
return (
|
||||
<div className="min-h-screen admin-gradient flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<motion.div
|
||||
animate={{ rotate: 360 }}
|
||||
transition={{ duration: 1, repeat: Infinity, ease: "linear" }}
|
||||
className="w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-4"
|
||||
/>
|
||||
<p className="text-white">Loading editor...</p>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (!isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen admin-gradient flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center text-white max-w-md mx-auto p-8 admin-glass-card rounded-2xl"
|
||||
>
|
||||
<div className="mb-6">
|
||||
<div className="w-16 h-16 bg-red-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<X className="w-8 h-8 text-red-400" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold mb-2">Access Denied</h1>
|
||||
<p className="text-white/70 mb-6">You need to be logged in to access the editor.</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => window.location.href = '/manage'}
|
||||
className="w-full px-6 py-3 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium"
|
||||
>
|
||||
Go to Admin Login
|
||||
</button>
|
||||
</motion.div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen admin-gradient">
|
||||
{/* Header */}
|
||||
<div className="admin-glass-header border-b border-white/10">
|
||||
<div className="max-w-7xl mx-auto px-6">
|
||||
<div className="flex items-center justify-between h-16">
|
||||
<div className="flex items-center space-x-4">
|
||||
<button
|
||||
onClick={() => window.location.href = '/manage'}
|
||||
className="flex items-center space-x-2 text-white/70 hover:text-white transition-colors"
|
||||
>
|
||||
<ArrowLeft className="w-5 h-5" />
|
||||
<span>Back to Dashboard</span>
|
||||
</button>
|
||||
<div className="h-6 w-px bg-white/20" />
|
||||
<h1 className="text-xl font-semibold text-white">
|
||||
{isCreating ? 'Create New Project' : `Edit: ${formData.title || 'Untitled'}`}
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-3">
|
||||
<button
|
||||
onClick={() => setShowPreview(!showPreview)}
|
||||
className={`flex items-center space-x-2 px-4 py-2 rounded-xl transition-all ${
|
||||
showPreview
|
||||
? 'bg-purple-500 text-white'
|
||||
: 'bg-white/10 text-white/70 hover:bg-white/20'
|
||||
}`}
|
||||
>
|
||||
<Eye className="w-4 h-4" />
|
||||
<span>Preview</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSave}
|
||||
disabled={isSaving}
|
||||
className="flex items-center space-x-2 px-6 py-2 bg-gradient-to-r from-blue-500 to-purple-500 text-white rounded-xl hover:scale-105 transition-all font-medium disabled:opacity-50"
|
||||
>
|
||||
{isSaving ? (
|
||||
<Loader2 className="w-4 h-4 animate-spin" />
|
||||
) : (
|
||||
<Save className="w-4 h-4" />
|
||||
)}
|
||||
<span>{isSaving ? 'Saving...' : 'Save Project'}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Editor Content */}
|
||||
<div className="max-w-7xl mx-auto px-6 py-8">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-4 gap-8">
|
||||
{/* Main Editor */}
|
||||
<div className="xl:col-span-3 space-y-6">
|
||||
{/* Project Title */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.title}
|
||||
onChange={(e) => handleInputChange('title', e.target.value)}
|
||||
className="w-full text-3xl font-bold bg-white/10 text-white placeholder-white/50 focus:outline-none p-4 rounded-lg border border-white/20 focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="Enter project title..."
|
||||
/>
|
||||
</motion.div>
|
||||
|
||||
{/* Rich Text Toolbar */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.1 }}
|
||||
className="admin-glass-card p-4 rounded-xl"
|
||||
>
|
||||
<div className="flex flex-wrap items-center gap-2">
|
||||
<div className="flex items-center space-x-1 border-r border-white/20 pr-3">
|
||||
<button
|
||||
onClick={() => insertFormatting('bold')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Bold"
|
||||
>
|
||||
<Bold className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('italic')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Italic"
|
||||
>
|
||||
<Italic className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('code')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Code"
|
||||
>
|
||||
<Code className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1 border-r border-white/20 pr-3">
|
||||
<button
|
||||
onClick={() => insertFormatting('h1')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Heading 1"
|
||||
>
|
||||
<Hash className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('h2')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-sm"
|
||||
title="Heading 2"
|
||||
>
|
||||
H2
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('h3')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors text-sm"
|
||||
title="Heading 3"
|
||||
>
|
||||
H3
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1 border-r border-white/20 pr-3">
|
||||
<button
|
||||
onClick={() => insertFormatting('list')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Bullet List"
|
||||
>
|
||||
<List className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('orderedList')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Numbered List"
|
||||
>
|
||||
<ListOrdered className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('quote')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Quote"
|
||||
>
|
||||
<Quote className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center space-x-1">
|
||||
<button
|
||||
onClick={() => insertFormatting('link')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Link"
|
||||
>
|
||||
<Link className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
<button
|
||||
onClick={() => insertFormatting('image')}
|
||||
className="p-2 hover:bg-white/10 rounded-lg transition-colors"
|
||||
title="Image"
|
||||
>
|
||||
<Image className="w-4 h-4 text-white/70" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Content Editor */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.2 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Content</h3>
|
||||
<div
|
||||
ref={contentRef}
|
||||
contentEditable
|
||||
className="w-full min-h-[400px] p-6 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 leading-relaxed"
|
||||
style={{ whiteSpace: 'pre-wrap' }}
|
||||
onInput={(e) => {
|
||||
const target = e.target as HTMLDivElement;
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
content: target.textContent || ''
|
||||
}));
|
||||
}}
|
||||
suppressContentEditableWarning={true}
|
||||
>
|
||||
{formData.content || 'Start writing your project content...'}
|
||||
</div>
|
||||
<p className="text-xs text-white/50 mt-2">
|
||||
Supports Markdown formatting. Use the toolbar above or type directly.
|
||||
</p>
|
||||
</motion.div>
|
||||
|
||||
{/* Description */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
transition={{ delay: 0.3 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Description</h3>
|
||||
<textarea
|
||||
value={formData.description}
|
||||
onChange={(e) => handleInputChange('description', e.target.value)}
|
||||
rows={4}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 resize-none"
|
||||
placeholder="Brief description of your project..."
|
||||
/>
|
||||
</motion.div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar */}
|
||||
<div className="space-y-6">
|
||||
{/* Project Settings */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.4 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Settings</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Category
|
||||
</label>
|
||||
<select
|
||||
value={formData.category}
|
||||
onChange={(e) => handleInputChange('category', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="web">Web Development</option>
|
||||
<option value="mobile">Mobile Development</option>
|
||||
<option value="desktop">Desktop Application</option>
|
||||
<option value="game">Game Development</option>
|
||||
<option value="ai">AI/ML</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Difficulty
|
||||
</label>
|
||||
<select
|
||||
value={formData.difficulty}
|
||||
onChange={(e) => handleInputChange('difficulty', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
>
|
||||
<option value="beginner">Beginner</option>
|
||||
<option value="intermediate">Intermediate</option>
|
||||
<option value="advanced">Advanced</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Tags
|
||||
</label>
|
||||
<input
|
||||
type="text"
|
||||
value={formData.tags.join(', ')}
|
||||
onChange={(e) => handleTagsChange(e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="React, TypeScript, Next.js"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Links */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.5 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Links</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
GitHub URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.github}
|
||||
onChange={(e) => handleInputChange('github', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="https://github.com/username/repo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label className="block text-sm font-medium text-white/70 mb-2">
|
||||
Live URL
|
||||
</label>
|
||||
<input
|
||||
type="url"
|
||||
value={formData.live}
|
||||
onChange={(e) => handleInputChange('live', e.target.value)}
|
||||
className="w-full px-3 py-2 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500"
|
||||
placeholder="https://example.com"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
{/* Publish */}
|
||||
<motion.div
|
||||
initial={{ opacity: 0, x: 20 }}
|
||||
animate={{ opacity: 1, x: 0 }}
|
||||
transition={{ delay: 0.6 }}
|
||||
className="admin-glass-card p-6 rounded-xl"
|
||||
>
|
||||
<h3 className="text-lg font-semibold text-white mb-4">Publish</h3>
|
||||
|
||||
<div className="space-y-4">
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.featured}
|
||||
onChange={(e) => handleInputChange('featured', e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white/10 border-white/20 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-white">Featured Project</span>
|
||||
</label>
|
||||
|
||||
<label className="flex items-center space-x-3">
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={formData.published}
|
||||
onChange={(e) => handleInputChange('published', e.target.checked)}
|
||||
className="w-4 h-4 text-blue-500 bg-white/10 border-white/20 rounded focus:ring-blue-500"
|
||||
/>
|
||||
<span className="text-white">Published</span>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 pt-4 border-t border-white/20">
|
||||
<h4 className="text-sm font-medium text-white/70 mb-2">Preview</h4>
|
||||
<div className="text-xs text-white/50 space-y-1">
|
||||
<p>Status: {formData.published ? 'Published' : 'Draft'}</p>
|
||||
{formData.featured && <p className="text-blue-400">⭐ Featured</p>}
|
||||
<p>Category: {formData.category}</p>
|
||||
<p>Tags: {formData.tags.length} tags</p>
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -84,6 +84,36 @@ body {
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
|
||||
/* Admin Panel Specific Glassmorphism */
|
||||
.admin-glass {
|
||||
background: rgba(255, 255, 255, 0.05) !important;
|
||||
backdrop-filter: blur(20px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.15) !important;
|
||||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
|
||||
}
|
||||
|
||||
.admin-glass-card {
|
||||
background: rgba(255, 255, 255, 0.08) !important;
|
||||
backdrop-filter: blur(16px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.2) !important;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
|
||||
}
|
||||
|
||||
.admin-glass-light {
|
||||
background: rgba(255, 255, 255, 0.12) !important;
|
||||
backdrop-filter: blur(12px) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.25) !important;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
|
||||
}
|
||||
|
||||
/* Admin Hover States */
|
||||
.admin-hover:hover {
|
||||
background: rgba(255, 255, 255, 0.15) !important;
|
||||
border: 1px solid rgba(255, 255, 255, 0.3) !important;
|
||||
transform: scale(1.02) !important;
|
||||
transition: all 0.2s ease !important;
|
||||
}
|
||||
|
||||
/* Gradient Text */
|
||||
.gradient-text {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
|
||||
@@ -2,13 +2,12 @@
|
||||
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { motion, AnimatePresence } from 'framer-motion';
|
||||
import {
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Shield,
|
||||
AlertTriangle,
|
||||
CheckCircle,
|
||||
import {
|
||||
Lock,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Shield,
|
||||
AlertTriangle,
|
||||
XCircle,
|
||||
Loader2
|
||||
} from 'lucide-react';
|
||||
@@ -17,11 +16,8 @@ import ModernAdminDashboard from '@/components/ModernAdminDashboard';
|
||||
// Security constants
|
||||
const MAX_ATTEMPTS = 3;
|
||||
const LOCKOUT_DURATION = 15 * 60 * 1000; // 15 minutes
|
||||
const SESSION_DURATION = 2 * 60 * 60 * 1000; // 2 hours (reduced from 24h)
|
||||
const RATE_LIMIT_DELAY = 1000; // 1 second base delay
|
||||
|
||||
// Password hashing removed - now handled server-side securely
|
||||
|
||||
// Rate limiting with exponential backoff
|
||||
const getRateLimitDelay = (attempts: number): number => {
|
||||
return RATE_LIMIT_DELAY * Math.pow(2, attempts);
|
||||
@@ -63,8 +59,8 @@ const AdminPage = () => {
|
||||
setAuthState(prev => ({ ...prev, csrfToken: data.csrfToken }));
|
||||
return data.csrfToken;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to fetch CSRF token:', error);
|
||||
} catch {
|
||||
console.error('Failed to fetch CSRF token');
|
||||
}
|
||||
return '';
|
||||
}, []);
|
||||
@@ -88,7 +84,7 @@ const AdminPage = () => {
|
||||
} else {
|
||||
localStorage.removeItem('admin_lockout');
|
||||
}
|
||||
} catch (error) {
|
||||
} catch {
|
||||
localStorage.removeItem('admin_lockout');
|
||||
}
|
||||
}
|
||||
@@ -99,81 +95,79 @@ const AdminPage = () => {
|
||||
const checkSession = useCallback(async () => {
|
||||
const authStatus = sessionStorage.getItem('admin_authenticated');
|
||||
const sessionToken = sessionStorage.getItem('admin_session_token');
|
||||
|
||||
if (!authStatus || !sessionToken) {
|
||||
setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
|
||||
return false;
|
||||
}
|
||||
const csrfToken = authState.csrfToken;
|
||||
|
||||
try {
|
||||
// Validate session with server
|
||||
const response = await fetch('/api/auth/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': authState.csrfToken
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sessionToken,
|
||||
csrfToken: authState.csrfToken
|
||||
})
|
||||
});
|
||||
if (authStatus === 'true' && sessionToken && csrfToken) {
|
||||
try {
|
||||
const response = await fetch('/api/auth/validate', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-CSRF-Token': csrfToken
|
||||
},
|
||||
body: JSON.stringify({
|
||||
sessionToken,
|
||||
csrfToken
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.valid) {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
showLogin: false
|
||||
}));
|
||||
return true;
|
||||
} else {
|
||||
// Session invalid, clear storage
|
||||
if (response.ok) {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: true,
|
||||
isLoading: false,
|
||||
showLogin: false
|
||||
}));
|
||||
return;
|
||||
} else {
|
||||
sessionStorage.clear();
|
||||
}
|
||||
} catch {
|
||||
sessionStorage.clear();
|
||||
setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
|
||||
return false;
|
||||
}
|
||||
} catch (error) {
|
||||
// Network error, clear session
|
||||
sessionStorage.clear();
|
||||
setAuthState(prev => ({ ...prev, showLogin: true, isLoading: false }));
|
||||
return false;
|
||||
}
|
||||
}, []);
|
||||
|
||||
// Initialize authentication check
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
isLoading: false,
|
||||
showLogin: true
|
||||
}));
|
||||
}, [authState.csrfToken]);
|
||||
|
||||
// Initialize
|
||||
useEffect(() => {
|
||||
const initAuth = async () => {
|
||||
// Add random delay to prevent timing attacks
|
||||
await new Promise(resolve => setTimeout(resolve, Math.random() * 500 + 200));
|
||||
|
||||
// Fetch CSRF token first
|
||||
await fetchCSRFToken();
|
||||
|
||||
if (!checkLockout()) {
|
||||
await checkSession();
|
||||
const init = async () => {
|
||||
if (checkLockout()) return;
|
||||
|
||||
const token = await fetchCSRFToken();
|
||||
if (token) {
|
||||
setAuthState(prev => ({ ...prev, csrfToken: token }));
|
||||
}
|
||||
};
|
||||
|
||||
init();
|
||||
}, [checkLockout, fetchCSRFToken]);
|
||||
|
||||
initAuth();
|
||||
}, [checkLockout, checkSession, fetchCSRFToken]);
|
||||
useEffect(() => {
|
||||
if (authState.csrfToken && !authState.isLocked) {
|
||||
checkSession();
|
||||
}
|
||||
}, [authState.csrfToken, authState.isLocked, checkSession]);
|
||||
|
||||
// Handle login submission
|
||||
// Handle login form submission
|
||||
const handleLogin = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
|
||||
if (authState.isLocked || authState.isLoading) return;
|
||||
if (!authState.password.trim() || authState.isLoading) return;
|
||||
|
||||
setAuthState(prev => ({ ...prev, isLoading: true, error: '' }));
|
||||
|
||||
try {
|
||||
// Rate limiting delay
|
||||
const delay = getRateLimitDelay(authState.attempts);
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
// Rate limiting delay
|
||||
const delay = getRateLimitDelay(authState.attempts);
|
||||
await new Promise(resolve => setTimeout(resolve, delay));
|
||||
|
||||
// Send login request to secure API
|
||||
try {
|
||||
const response = await fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
@@ -189,15 +183,14 @@ const AdminPage = () => {
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
// Successful login
|
||||
const now = Date.now();
|
||||
const sessionToken = data.sessionToken;
|
||||
|
||||
localStorage.removeItem('admin_lockout');
|
||||
// Store session
|
||||
sessionStorage.setItem('admin_authenticated', 'true');
|
||||
sessionStorage.setItem('admin_login_time', now.toString());
|
||||
sessionStorage.setItem('admin_session_token', sessionToken);
|
||||
sessionStorage.setItem('admin_session_token', data.sessionToken);
|
||||
|
||||
// Clear lockout data
|
||||
localStorage.removeItem('admin_lockout');
|
||||
|
||||
// Update state
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: true,
|
||||
@@ -225,7 +218,7 @@ const AdminPage = () => {
|
||||
attempts: newAttempts,
|
||||
lastAttempt: newLastAttempt,
|
||||
isLoading: false,
|
||||
error: `Zu viele fehlgeschlagene Versuche. Zugang für ${Math.ceil(LOCKOUT_DURATION / 60000)} Minuten gesperrt.`
|
||||
error: `Too many failed attempts. Access locked for ${Math.ceil(LOCKOUT_DURATION / 60000)} minutes.`
|
||||
}));
|
||||
} else {
|
||||
setAuthState(prev => ({
|
||||
@@ -233,32 +226,20 @@ const AdminPage = () => {
|
||||
attempts: newAttempts,
|
||||
lastAttempt: newLastAttempt,
|
||||
isLoading: false,
|
||||
error: data.error || `Falsches Passwort. ${MAX_ATTEMPTS - newAttempts} Versuche übrig.`,
|
||||
error: data.error || `Wrong password. ${MAX_ATTEMPTS - newAttempts} attempts remaining.`,
|
||||
password: ''
|
||||
}));
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
} catch {
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isLoading: false,
|
||||
error: 'Ein Fehler ist aufgetreten. Bitte versuchen Sie es erneut.'
|
||||
error: 'An error occurred. Please try again.'
|
||||
}));
|
||||
}
|
||||
};
|
||||
|
||||
// Handle logout
|
||||
const handleLogout = () => {
|
||||
sessionStorage.clear();
|
||||
setAuthState(prev => ({
|
||||
...prev,
|
||||
isAuthenticated: false,
|
||||
showLogin: true,
|
||||
password: '',
|
||||
error: ''
|
||||
}));
|
||||
};
|
||||
|
||||
// Get remaining lockout time
|
||||
const getRemainingTime = () => {
|
||||
const lockoutData = localStorage.getItem('admin_lockout');
|
||||
@@ -277,17 +258,21 @@ const AdminPage = () => {
|
||||
// Loading state
|
||||
if (authState.isLoading && !authState.showLogin) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center"
|
||||
>
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Loader2 className="w-8 h-8 text-white animate-spin" />
|
||||
</div>
|
||||
<p className="text-white text-lg">Überprüfe Berechtigung...</p>
|
||||
</motion.div>
|
||||
<div className="min-h-screen">
|
||||
<div className="fixed inset-0 animated-bg"></div>
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="text-center admin-glass-card p-8 rounded-2xl"
|
||||
>
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<Loader2 className="w-8 h-8 text-white animate-spin" />
|
||||
</div>
|
||||
<p className="text-white text-xl font-semibold">Verifying Access...</p>
|
||||
<p className="text-white/60 text-sm mt-2">Please wait while we authenticate your session</p>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -295,34 +280,45 @@ const AdminPage = () => {
|
||||
// Lockout state
|
||||
if (authState.isLocked) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-red-900 via-gray-900 to-red-900 flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="bg-white/10 backdrop-blur-md rounded-2xl border border-red-500/30 p-8 max-w-md w-full text-center"
|
||||
>
|
||||
<div className="mb-6">
|
||||
<Shield className="w-16 h-16 text-red-400 mx-auto mb-4" />
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Zugang gesperrt</h1>
|
||||
<p className="text-gray-300">
|
||||
Zu viele fehlgeschlagene Anmeldeversuche
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-red-500/20 border border-red-500/30 rounded-lg p-4 mb-6">
|
||||
<AlertTriangle className="w-8 h-8 text-red-400 mx-auto mb-2" />
|
||||
<p className="text-red-200 text-sm">
|
||||
Versuche: {authState.attempts}/{MAX_ATTEMPTS}
|
||||
</p>
|
||||
<p className="text-red-200 text-sm">
|
||||
Verbleibende Zeit: {getRemainingTime()} Minuten
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p className="text-gray-400 text-sm">
|
||||
Der Zugang wird automatisch nach {Math.ceil(LOCKOUT_DURATION / 60000)} Minuten freigeschaltet.
|
||||
</p>
|
||||
</motion.div>
|
||||
<div className="min-h-screen">
|
||||
<div className="fixed inset-0 animated-bg"></div>
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, scale: 0.9 }}
|
||||
animate={{ opacity: 1, scale: 1 }}
|
||||
className="admin-glass-card border-red-500/40 p-8 lg:p-12 rounded-2xl max-w-md w-full text-center shadow-2xl"
|
||||
>
|
||||
<div className="mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-red-500 to-orange-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<Shield className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white mb-3">Access Locked</h1>
|
||||
<p className="text-white/80 text-lg">
|
||||
Too many failed authentication attempts
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="admin-glass-light border border-red-500/40 rounded-xl p-6 mb-8">
|
||||
<AlertTriangle className="w-8 h-8 text-red-400 mx-auto mb-4" />
|
||||
<div className="grid grid-cols-2 gap-4 text-sm">
|
||||
<div>
|
||||
<p className="text-white/60 mb-1">Attempts</p>
|
||||
<p className="text-red-300 font-bold text-lg">{authState.attempts}/{MAX_ATTEMPTS}</p>
|
||||
</div>
|
||||
<div>
|
||||
<p className="text-white/60 mb-1">Time Left</p>
|
||||
<p className="text-orange-300 font-bold text-lg">{getRemainingTime()}m</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="admin-glass-light border border-blue-500/30 rounded-xl p-4">
|
||||
<p className="text-white/70 text-sm">
|
||||
Access will be automatically restored in {Math.ceil(LOCKOUT_DURATION / 60000)} minutes
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -330,83 +326,122 @@ const AdminPage = () => {
|
||||
// Login form
|
||||
if (authState.showLogin || !authState.isAuthenticated) {
|
||||
return (
|
||||
<div className="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900 flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="bg-white/10 backdrop-blur-md rounded-2xl border border-white/20 p-8 max-w-md w-full"
|
||||
>
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Lock className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-2xl font-bold text-white mb-2">Admin-Zugang</h1>
|
||||
<p className="text-gray-300">Bitte geben Sie das Admin-Passwort ein</p>
|
||||
</div>
|
||||
<div className="min-h-screen">
|
||||
{/* Animated Background - same as admin dashboard */}
|
||||
<div className="fixed inset-0 animated-bg"></div>
|
||||
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-gray-300 mb-2">
|
||||
Passwort
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={authState.showPassword ? 'text' : 'password'}
|
||||
id="password"
|
||||
value={authState.password}
|
||||
onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
|
||||
className="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-all pr-12"
|
||||
placeholder="Admin-Passwort eingeben"
|
||||
required
|
||||
disabled={authState.isLoading}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
|
||||
className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-white transition-colors"
|
||||
disabled={authState.isLoading}
|
||||
>
|
||||
{authState.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
<div className="relative z-10 min-h-screen flex items-center justify-center p-4">
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: 20 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
className="admin-glass-card p-8 lg:p-12 rounded-2xl max-w-md w-full shadow-2xl"
|
||||
>
|
||||
<div className="text-center mb-8">
|
||||
<div className="w-16 h-16 bg-gradient-to-r from-blue-500 to-purple-500 rounded-2xl flex items-center justify-center mx-auto mb-6 shadow-lg">
|
||||
<Shield className="w-8 h-8 text-white" />
|
||||
</div>
|
||||
<h1 className="text-3xl font-bold text-white mb-3">Admin Panel</h1>
|
||||
<p className="text-white/80 text-lg">Secure access to dashboard</p>
|
||||
<div className="flex items-center justify-center space-x-2 mt-4">
|
||||
<div className="w-2 h-2 bg-green-400 rounded-full animate-pulse"></div>
|
||||
<span className="text-white/60 text-sm font-medium">System Online</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<AnimatePresence>
|
||||
{authState.error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, y: -10 }}
|
||||
animate={{ opacity: 1, y: 0 }}
|
||||
exit={{ opacity: 0, y: -10 }}
|
||||
className="bg-red-500/20 border border-red-500/30 rounded-lg p-3"
|
||||
>
|
||||
<p className="text-red-200 text-sm">{authState.error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={authState.isLoading || !authState.password}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600 disabled:from-gray-600 disabled:to-gray-700 text-white font-semibold py-3 px-4 rounded-lg transition-all duration-200 disabled:cursor-not-allowed"
|
||||
>
|
||||
{authState.isLoading ? (
|
||||
<div className="flex items-center justify-center">
|
||||
<Loader2 className="w-5 h-5 border-2 border-white/30 border-t-white rounded-full animate-spin mr-2"></Loader2>
|
||||
Anmeldung...
|
||||
<form onSubmit={handleLogin} className="space-y-6">
|
||||
<div>
|
||||
<label htmlFor="password" className="block text-sm font-medium text-white/80 mb-3">
|
||||
Admin Password
|
||||
</label>
|
||||
<div className="relative">
|
||||
<input
|
||||
type={authState.showPassword ? 'text' : 'password'}
|
||||
id="password"
|
||||
value={authState.password}
|
||||
onChange={(e) => setAuthState(prev => ({ ...prev, password: e.target.value }))}
|
||||
className="w-full px-4 py-4 admin-glass-light border border-white/30 rounded-xl text-white placeholder-white/50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500/50 transition-all text-lg pr-12"
|
||||
placeholder="Enter admin password"
|
||||
required
|
||||
disabled={authState.isLoading}
|
||||
autoComplete="current-password"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setAuthState(prev => ({ ...prev, showPassword: !prev.showPassword }))}
|
||||
className="absolute right-4 top-1/2 transform -translate-y-1/2 text-white/60 hover:text-white transition-colors p-1"
|
||||
disabled={authState.isLoading}
|
||||
>
|
||||
{authState.showPassword ? <EyeOff className="w-5 h-5" /> : <Eye className="w-5 h-5" />}
|
||||
</button>
|
||||
</div>
|
||||
) : (
|
||||
'Anmelden'
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
<div className="mt-6 text-center">
|
||||
<p className="text-gray-400 text-xs">
|
||||
Versuche: {authState.attempts}/{MAX_ATTEMPTS}
|
||||
</p>
|
||||
</div>
|
||||
</motion.div>
|
||||
<AnimatePresence>
|
||||
{authState.error && (
|
||||
<motion.div
|
||||
initial={{ opacity: 0, height: 0 }}
|
||||
animate={{ opacity: 1, height: 'auto' }}
|
||||
exit={{ opacity: 0, height: 0 }}
|
||||
className="admin-glass-light border border-red-500/40 rounded-xl p-4 flex items-center space-x-3"
|
||||
>
|
||||
<XCircle className="w-5 h-5 text-red-400 flex-shrink-0" />
|
||||
<p className="text-red-300 text-sm font-medium">{authState.error}</p>
|
||||
</motion.div>
|
||||
)}
|
||||
</AnimatePresence>
|
||||
|
||||
{/* Security info */}
|
||||
<div className="admin-glass-light border border-blue-500/30 rounded-xl p-6">
|
||||
<div className="flex items-center space-x-3 mb-4">
|
||||
<Shield className="w-5 h-5 text-blue-400" />
|
||||
<h3 className="text-blue-300 font-semibold">Security Information</h3>
|
||||
</div>
|
||||
<div className="grid grid-cols-2 gap-4 text-xs">
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Max Attempts:</span>
|
||||
<span className="text-white font-medium">{MAX_ATTEMPTS}</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Lockout:</span>
|
||||
<span className="text-white font-medium">{Math.ceil(LOCKOUT_DURATION / 60000)}m</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Session:</span>
|
||||
<span className="text-white font-medium">2h</span>
|
||||
</div>
|
||||
<div className="flex justify-between">
|
||||
<span className="text-white/60">Attempts:</span>
|
||||
<span className={`font-medium ${authState.attempts > 0 ? 'text-orange-400' : 'text-green-400'}`}>
|
||||
{authState.attempts}/{MAX_ATTEMPTS}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={authState.isLoading || !authState.password}
|
||||
className="w-full bg-gradient-to-r from-blue-500 to-purple-500 text-white py-4 px-6 rounded-xl font-semibold text-lg hover:from-blue-600 hover:to-purple-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 focus:ring-offset-transparent disabled:opacity-50 disabled:cursor-not-allowed transition-all transform hover:scale-[1.02] active:scale-[0.98] shadow-lg"
|
||||
>
|
||||
{authState.isLoading ? (
|
||||
<div className="flex items-center justify-center space-x-3">
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Authenticating...</span>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex items-center justify-center space-x-2">
|
||||
<Lock size={18} />
|
||||
<span>Secure Login</span>
|
||||
</div>
|
||||
)}
|
||||
</button>
|
||||
</form>
|
||||
</motion.div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -414,17 +449,6 @@ const AdminPage = () => {
|
||||
// Authenticated state - show admin dashboard
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Logout button */}
|
||||
<div className="fixed top-4 right-4 z-50">
|
||||
<button
|
||||
onClick={handleLogout}
|
||||
className="bg-red-500/20 hover:bg-red-500/30 border border-red-500/30 text-red-200 px-4 py-2 rounded-lg transition-all duration-200 flex items-center space-x-2"
|
||||
>
|
||||
<XCircle className="w-4 h-4" />
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<ModernAdminDashboard isAuthenticated={authState.isAuthenticated} />
|
||||
</div>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user