denshooter
b44250fe0e
- Updated admin URLs from /admin to /manage - Integrated new admin dashboard and email management features - Added authentication system and project management - Resolved conflicts in DEV-SETUP.md, README.md, email routes, and components - Removed old admin page in favor of new manage page
561 lines
34 KiB
TypeScript
561 lines
34 KiB
TypeScript
import { type NextRequest, NextResponse } from "next/server";
|
|
import nodemailer from "nodemailer";
|
|
import SMTPTransport from "nodemailer/lib/smtp-transport";
|
|
import Mail from "nodemailer/lib/mailer";
|
|
|
|
// Email templates with beautiful designs
|
|
const emailTemplates = {
|
|
welcome: {
|
|
subject: "Vielen Dank für 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>Willkommen - 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, #10b981 0%, #059669 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: #d1fae5; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
|
Vielen Dank für deine Nachricht
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div style="padding: 40px 30px;">
|
|
|
|
<!-- Welcome Message -->
|
|
<div style="background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #bbf7d0;">
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #10b981 0%, #059669 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: #065f46; margin: 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
|
|
</div>
|
|
<p style="color: #047857; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
|
|
Vielen Dank für deine Nachricht! Ich habe sie erhalten und werde mich so schnell wie möglich bei dir melden.
|
|
</p>
|
|
</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 #10b981;">
|
|
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Next Steps -->
|
|
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
|
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
|
|
🚀 Was passiert als nächstes?
|
|
</h3>
|
|
<div style="display: grid; gap: 15px;">
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
|
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">📧</span>
|
|
<div>
|
|
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Schnelle Antwort</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich antworte normalerweise innerhalb von 24 Stunden</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
|
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">💼</span>
|
|
<div>
|
|
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Projekt-Diskussion</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Gerne besprechen wir dein Projekt im Detail</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
|
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🤝</span>
|
|
<div>
|
|
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">Zusammenarbeit</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Lass uns gemeinsam etwas Großartiges schaffen!</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Portfolio Links -->
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<h3 style="color: #374151; margin: 0 0 20px 0; font-size: 18px; font-weight: 600;">Entdecke mehr von mir</h3>
|
|
<div style="display: flex; justify-content: center; gap: 15px; flex-wrap: wrap;">
|
|
<a href="https://dk0.dev" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
|
🌐 Portfolio
|
|
</a>
|
|
<a href="https://github.com/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #374151 0%, #111827 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
|
💻 GitHub
|
|
</a>
|
|
<a href="https://linkedin.com/in/denniskonkol" style="display: inline-block; background: linear-gradient(135deg, #0077b5 0%, #005885 100%); color: #ffffff; text-decoration: none; padding: 12px 24px; border-radius: 8px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);">
|
|
💼 LinkedIn
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
|
<div style="margin-bottom: 15px;">
|
|
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #10b981 0%, #059669 100%); border-radius: 1px;"></span>
|
|
</div>
|
|
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
|
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
|
<a href="https://dk0.dev" style="color: #10b981; text-decoration: none; font-family: 'Monaco', 'Menlo', 'Consolas', monospace; font-weight: bold;">dk<span style="color: #ef4444;">0</span>.dev</a> •
|
|
<a href="mailto:contact@dk0.dev" style="color: #10b981; text-decoration: none;">contact@dk0.dev</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>
|
|
`
|
|
},
|
|
|
|
project: {
|
|
subject: "Projekt-Anfrage erhalten! 🚀",
|
|
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>Projekt-Anfrage - 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, #8b5cf6 0%, #7c3aed 100%); padding: 40px 30px; text-align: center;">
|
|
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
|
🚀 Projekt-Anfrage erhalten!
|
|
</h1>
|
|
<p style="color: #e9d5ff; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
|
Hallo ${name}, lass uns etwas Großartiges schaffen!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div style="padding: 40px 30px;">
|
|
|
|
<!-- Project Message -->
|
|
<div style="background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e9d5ff;">
|
|
<div style="text-align: center; margin-bottom: 20px;">
|
|
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 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: #6b21a8; margin: 0; font-size: 22px; font-weight: 600;">Bereit für dein Projekt!</h2>
|
|
</div>
|
|
<p style="color: #7c2d12; margin: 0; text-align: center; line-height: 1.6; font-size: 16px;">
|
|
Vielen Dank für deine Projekt-Anfrage! Ich bin gespannt darauf, mehr über deine Ideen zu erfahren und wie wir sie gemeinsam umsetzen können.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Original Message -->
|
|
<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: #8b5cf6; border-radius: 50%; margin-right: 10px;"></span>
|
|
Deine Projekt-Nachricht
|
|
</h3>
|
|
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
|
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Process Steps -->
|
|
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 30px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
|
<h3 style="color: #1e40af; margin: 0 0 20px 0; font-size: 18px; font-weight: 600; text-align: center;">
|
|
🎯 Mein Arbeitsprozess
|
|
</h3>
|
|
<div style="display: grid; gap: 15px;">
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
|
<span style="color: #3b82f6; font-size: 20px; margin-right: 15px;">💬</span>
|
|
<div>
|
|
<h4 style="color: #1e40af; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">1. Erstgespräch</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Wir besprechen deine Anforderungen im Detail</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #8b5cf6;">
|
|
<span style="color: #8b5cf6; font-size: 20px; margin-right: 15px;">📋</span>
|
|
<div>
|
|
<h4 style="color: #7c3aed; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">2. Konzept & Planung</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Ich erstelle ein detailliertes Konzept für dein Projekt</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #10b981;">
|
|
<span style="color: #10b981; font-size: 20px; margin-right: 15px;">⚡</span>
|
|
<div>
|
|
<h4 style="color: #059669; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">3. Entwicklung</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Agile Entwicklung mit regelmäßigen Updates</p>
|
|
</div>
|
|
</div>
|
|
<div style="display: flex; align-items: center; padding: 15px; background: #ffffff; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
|
<span style="color: #f59e0b; font-size: 20px; margin-right: 15px;">🎉</span>
|
|
<div>
|
|
<h4 style="color: #d97706; margin: 0 0 4px 0; font-size: 14px; font-weight: 600;">4. Launch & Support</h4>
|
|
<p style="color: #4b5563; margin: 0; font-size: 14px;">Deployment und kontinuierlicher Support</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- CTA -->
|
|
<div style="text-align: center; margin-top: 30px;">
|
|
<a href="mailto:contact@dk0.dev?subject=Projekt-Diskussion mit ${name}" style="display: inline-block; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); color: #ffffff; text-decoration: none; padding: 15px 30px; border-radius: 8px; font-weight: 600; font-size: 16px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);">
|
|
💬 Projekt besprechen
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
|
<div style="margin-bottom: 15px;">
|
|
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%); border-radius: 1px;"></span>
|
|
</div>
|
|
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
|
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
|
<a href="https://dki.one" style="color: #8b5cf6; text-decoration: none;">dki.one</a> •
|
|
<a href="mailto:contact@dk0.dev" style="color: #8b5cf6; text-decoration: none;">contact@dk0.dev</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
},
|
|
|
|
quick: {
|
|
subject: "Danke für 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>Quick Response - 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, #f59e0b 0%, #d97706 100%); padding: 40px 30px; text-align: center;">
|
|
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
|
⚡ Schnelle Antwort!
|
|
</h1>
|
|
<p style="color: #fef3c7; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
|
Hallo ${name}, danke für deine Nachricht!
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Content -->
|
|
<div style="padding: 40px 30px;">
|
|
|
|
<!-- Quick Response -->
|
|
<div style="background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #fde68a;">
|
|
<div style="text-align: center;">
|
|
<div style="width: 60px; height: 60px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 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: #92400e; margin: 0 0 15px 0; font-size: 22px; font-weight: 600;">Nachricht erhalten!</h2>
|
|
<p style="color: #a16207; margin: 0; line-height: 1.6; font-size: 16px;">
|
|
Vielen Dank für deine Nachricht! Ich werde mich so schnell wie möglich bei dir melden.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Original Message -->
|
|
<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: #f59e0b; border-radius: 50%; margin-right: 10px;"></span>
|
|
Deine Nachricht
|
|
</h3>
|
|
<div style="background: #f9fafb; padding: 20px; border-radius: 8px; border-left: 4px solid #f59e0b;">
|
|
<p style="color: #4b5563; margin: 0; line-height: 1.6; font-style: italic; white-space: pre-wrap;">${originalMessage}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Quick Info -->
|
|
<div style="background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); padding: 25px; border-radius: 12px; border: 1px solid #bfdbfe;">
|
|
<h3 style="color: #1e40af; margin: 0 0 15px 0; font-size: 16px; font-weight: 600; text-align: center;">
|
|
📞 Kontakt
|
|
</h3>
|
|
<p style="color: #1e40af; margin: 0; text-align: center; line-height: 1.6; font-size: 14px;">
|
|
<strong>E-Mail:</strong> <a href="mailto:contact@dk0.dev" style="color: #1e40af; text-decoration: none;">contact@dk0.dev</a><br>
|
|
<strong>Portfolio:</strong> <a href="https://dki.one" style="color: #1e40af; text-decoration: none;">dki.one</a>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Footer -->
|
|
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e5e7eb;">
|
|
<div style="margin-bottom: 15px;">
|
|
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); border-radius: 1px;"></span>
|
|
</div>
|
|
<p style="color: #6b7280; margin: 0; font-size: 14px; line-height: 1.5;">
|
|
<strong>Dennis Konkol</strong> • Software Engineer & Student<br>
|
|
<a href="https://dki.one" style="color: #f59e0b; text-decoration: none;">dki.one</a>
|
|
</p>
|
|
</div>
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|
|
`
|
|
<<<<<<< HEAD
|
|
=======
|
|
},
|
|
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>
|
|
`
|
|
>>>>>>> dev
|
|
}
|
|
};
|
|
|
|
export async function POST(request: NextRequest) {
|
|
try {
|
|
const body = (await request.json()) as {
|
|
to: string;
|
|
name: string;
|
|
<<<<<<< HEAD
|
|
template: 'welcome' | 'project' | 'quick';
|
|
=======
|
|
template: 'welcome' | 'project' | 'quick' | 'reply';
|
|
>>>>>>> dev
|
|
originalMessage: string;
|
|
};
|
|
|
|
const { to, name, template, originalMessage } = body;
|
|
|
|
console.log('📧 Email response request:', { to, name, template, messageLength: originalMessage.length });
|
|
|
|
// Validate input
|
|
if (!to || !name || !template || !originalMessage) {
|
|
console.error('❌ Validation failed: Missing required fields');
|
|
return NextResponse.json(
|
|
{ error: "Alle Felder sind erforderlich" },
|
|
{ status: 400 },
|
|
);
|
|
}
|
|
|
|
// Validate email format
|
|
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
|
|
if (!emailRegex.test(to)) {
|
|
console.error('❌ Validation failed: Invalid email format');
|
|
return NextResponse.json(
|
|
{ error: "Ungültige E-Mail-Adresse" },
|
|
{ status: 400 },
|
|
);
|
|
}
|
|
|
|
// Check if template exists
|
|
if (!emailTemplates[template]) {
|
|
console.error('❌ Validation failed: Invalid template');
|
|
return NextResponse.json(
|
|
{ error: "Ungültiges Template" },
|
|
{ status: 400 },
|
|
);
|
|
}
|
|
|
|
const user = process.env.MY_EMAIL ?? "";
|
|
const pass = process.env.MY_PASSWORD ?? "";
|
|
|
|
if (!user || !pass) {
|
|
console.error("❌ Missing email/password environment variables");
|
|
return NextResponse.json(
|
|
{ error: "E-Mail-Server nicht konfiguriert" },
|
|
{ status: 500 },
|
|
);
|
|
}
|
|
|
|
const transportOptions: SMTPTransport.Options = {
|
|
host: "mail.dk0.dev",
|
|
port: 587,
|
|
secure: false,
|
|
requireTLS: true,
|
|
auth: {
|
|
type: "login",
|
|
user,
|
|
pass,
|
|
},
|
|
connectionTimeout: 30000,
|
|
greetingTimeout: 30000,
|
|
socketTimeout: 60000,
|
|
tls: {
|
|
rejectUnauthorized: false,
|
|
ciphers: 'SSLv3'
|
|
}
|
|
};
|
|
|
|
const transport = nodemailer.createTransport(transportOptions);
|
|
|
|
// Verify transport configuration
|
|
try {
|
|
await transport.verify();
|
|
console.log('✅ SMTP connection verified successfully');
|
|
} catch (verifyError) {
|
|
console.error('❌ SMTP verification failed:', verifyError);
|
|
return NextResponse.json(
|
|
{ error: "E-Mail-Server-Verbindung fehlgeschlagen" },
|
|
{ status: 500 },
|
|
);
|
|
}
|
|
|
|
const selectedTemplate = emailTemplates[template];
|
|
const mailOptions: Mail.Options = {
|
|
from: `"Dennis Konkol" <${user}>`,
|
|
to: to,
|
|
replyTo: "contact@dk0.dev",
|
|
subject: selectedTemplate.subject,
|
|
html: selectedTemplate.template(name, originalMessage),
|
|
text: `
|
|
Hallo ${name}!
|
|
|
|
Vielen Dank für deine Nachricht:
|
|
${originalMessage}
|
|
|
|
Ich werde mich so schnell wie möglich bei dir melden.
|
|
|
|
Beste Grüße,
|
|
Dennis Konkol
|
|
Software Engineer & Student
|
|
https://dki.one
|
|
contact@dk0.dev
|
|
`,
|
|
};
|
|
|
|
console.log('📤 Sending templated email...');
|
|
|
|
const sendMailPromise = () =>
|
|
new Promise<string>((resolve, reject) => {
|
|
transport.sendMail(mailOptions, function (err, info) {
|
|
if (!err) {
|
|
console.log('✅ Templated email sent successfully:', info.response);
|
|
resolve(info.response);
|
|
} else {
|
|
console.error("❌ Error sending templated email:", err);
|
|
reject(err.message);
|
|
}
|
|
});
|
|
});
|
|
|
|
const result = await sendMailPromise();
|
|
console.log('🎉 Templated email process completed successfully');
|
|
|
|
return NextResponse.json({
|
|
message: "Template-E-Mail erfolgreich gesendet",
|
|
template: template,
|
|
messageId: result
|
|
});
|
|
|
|
} catch (err) {
|
|
console.error("❌ Unexpected error in templated email API:", err);
|
|
return NextResponse.json({
|
|
error: "Fehler beim Senden der Template-E-Mail",
|
|
details: err instanceof Error ? err.message : 'Unbekannter Fehler'
|
|
}, { status: 500 });
|
|
}
|
|
}
|