full upgrade
This commit is contained in:
@@ -15,6 +15,15 @@ function sanitizeInput(input: string, maxLength: number = 10000): string {
|
||||
.trim();
|
||||
}
|
||||
|
||||
function escapeHtml(input: string): string {
|
||||
return input
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
export async function POST(request: NextRequest) {
|
||||
try {
|
||||
// Rate limiting (defensive: headers may be undefined in tests)
|
||||
@@ -155,6 +164,22 @@ export async function POST(request: NextRequest) {
|
||||
}
|
||||
}
|
||||
|
||||
const brandUrl = "https://dk0.dev";
|
||||
const sentAt = new Date().toLocaleString('de-DE', {
|
||||
year: 'numeric',
|
||||
month: 'long',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
const safeName = escapeHtml(name);
|
||||
const safeEmail = escapeHtml(email);
|
||||
const safeSubject = escapeHtml(subject);
|
||||
const safeMessageHtml = escapeHtml(message).replace(/\n/g, "<br>");
|
||||
const initial = (name.trim()[0] || "?").toUpperCase();
|
||||
const replyHref = `mailto:${email}?subject=${encodeURIComponent(`Re: ${subject}`)}`;
|
||||
|
||||
const mailOptions: Mail.Options = {
|
||||
from: `"Portfolio Contact" <${user}>`,
|
||||
to: "contact@dk0.dev", // Send to your contact email
|
||||
@@ -168,86 +193,80 @@ export async function POST(request: NextRequest) {
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Neue Kontaktanfrage - Portfolio</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, #667eea 0%, #764ba2 100%); padding: 40px 30px; text-align: center;">
|
||||
<h1 style="color: #ffffff; margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.5px;">
|
||||
📧 Neue Kontaktanfrage
|
||||
</h1>
|
||||
<p style="color: #e2e8f0; margin: 8px 0 0 0; font-size: 16px; opacity: 0.9;">
|
||||
Von deinem Portfolio
|
||||
</p>
|
||||
<body style="margin:0;padding:0;background-color:#fdfcf8;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;color:#292524;">
|
||||
<div style="max-width:640px;margin:0 auto;padding:28px 14px;">
|
||||
<div style="background:#ffffff;border:1px solid #e7e5e4;border-radius:20px;overflow:hidden;box-shadow:0 18px 50px rgba(0,0,0,0.08);">
|
||||
<!-- Top bar -->
|
||||
<div style="background:#292524;padding:22px 26px;">
|
||||
<div style="display:flex;align-items:center;justify-content:space-between;gap:16px;">
|
||||
<div style="font-weight:700;font-size:16px;letter-spacing:-0.01em;color:#fdfcf8;">
|
||||
Dennis Konkol
|
||||
</div>
|
||||
<div style="font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,'Liberation Mono','Courier New',monospace;font-weight:700;font-size:14px;color:#fdfcf8;">
|
||||
dk<span style="color:#ef4444;">0</span>.dev
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding: 40px 30px;">
|
||||
|
||||
<!-- Contact Info Card -->
|
||||
<div style="background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%); padding: 30px; border-radius: 12px; margin-bottom: 30px; border: 1px solid #e2e8f0;">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||||
<div style="width: 50px; height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-right: 15px;">
|
||||
<span style="color: #ffffff; font-size: 20px; font-weight: bold;">${name.charAt(0).toUpperCase()}</span>
|
||||
</div>
|
||||
<div>
|
||||
<h2 style="color: #1e293b; margin: 0; font-size: 24px; font-weight: 600;">${name}</h2>
|
||||
<p style="color: #64748b; margin: 4px 0 0 0; font-size: 14px;">Kontaktanfrage</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 20px;">
|
||||
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #10b981;">
|
||||
<h4 style="color: #059669; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">E-Mail</h4>
|
||||
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${email}</p>
|
||||
</div>
|
||||
<div style="background: #ffffff; padding: 20px; border-radius: 8px; border-left: 4px solid #3b82f6;">
|
||||
<h4 style="color: #2563eb; margin: 0 0 8px 0; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Betreff</h4>
|
||||
<p style="color: #374151; margin: 0; font-size: 16px; font-weight: 500;">${subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Message Card -->
|
||||
<div style="background: #ffffff; padding: 30px; border-radius: 12px; border: 1px solid #e2e8f0; box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);">
|
||||
<div style="display: flex; align-items: center; margin-bottom: 20px;">
|
||||
<div style="width: 8px; height: 8px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 50%; margin-right: 12px;"></div>
|
||||
<h3 style="color: #1e293b; margin: 0; font-size: 18px; font-weight: 600;">Nachricht</h3>
|
||||
</div>
|
||||
<div style="background: #f8fafc; padding: 25px; border-radius: 8px; border-left: 4px solid #667eea;">
|
||||
<p style="color: #374151; margin: 0; line-height: 1.7; font-size: 16px; white-space: pre-wrap;">${message}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Action Button -->
|
||||
<div style="text-align: center; margin-top: 30px;">
|
||||
<a href="mailto:${email}?subject=Re: ${subject}" style="display: inline-block; background: linear-gradient(135deg, #667eea 0%, #764ba2 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); transition: all 0.2s;">
|
||||
📬 Antworten
|
||||
</a>
|
||||
</div>
|
||||
<div style="margin-top:10px;">
|
||||
<div style="font-size:22px;font-weight:800;letter-spacing:-0.02em;color:#fdfcf8;">
|
||||
Neue Kontaktanfrage
|
||||
</div>
|
||||
<div style="margin-top:4px;font-size:13px;color:#d6d3d1;">
|
||||
Eingegangen am ${sentAt}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="background: #f8fafc; padding: 30px; text-align: center; border-top: 1px solid #e2e8f0;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<span style="display: inline-block; width: 40px; height: 2px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); border-radius: 1px;"></span>
|
||||
<div style="height:3px;background:#a7f3d0;margin-top:18px;border-radius:999px;"></div>
|
||||
</div>
|
||||
|
||||
<!-- Content -->
|
||||
<div style="padding:26px;">
|
||||
<!-- Sender -->
|
||||
<div style="display:flex;align-items:flex-start;gap:14px;">
|
||||
<div style="width:44px;height:44px;border-radius:14px;background:#f3f1e7;border:1px solid #e7e5e4;display:flex;align-items:center;justify-content:center;font-weight:800;color:#292524;">
|
||||
${escapeHtml(initial)}
|
||||
</div>
|
||||
<div style="flex:1;min-width:0;">
|
||||
<div style="font-size:18px;font-weight:800;letter-spacing:-0.01em;color:#292524;line-height:1.2;">
|
||||
${safeName}
|
||||
</div>
|
||||
<p style="color: #64748b; margin: 0; font-size: 14px; line-height: 1.5;">
|
||||
Diese E-Mail wurde automatisch von deinem Portfolio generiert.<br>
|
||||
<strong>Dennis Konkol Portfolio</strong> • <a href="https://dki.one" style="color: #667eea; text-decoration: none;">dki.one</a>
|
||||
</p>
|
||||
<p style="color: #94a3b8; 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 style="margin-top:6px;font-size:13px;color:#78716c;line-height:1.4;">
|
||||
<span style="font-weight:700;color:#44403c;">E-Mail:</span> ${safeEmail}<br>
|
||||
<span style="font-weight:700;color:#44403c;">Betreff:</span> ${safeSubject}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Message -->
|
||||
<div style="margin-top:18px;background:#fdfcf8;border:1px solid #e7e5e4;border-radius:16px;overflow:hidden;">
|
||||
<div style="padding:14px 16px;background:#f3f1e7;border-bottom:1px solid #e7e5e4;">
|
||||
<div style="font-size:12px;letter-spacing:0.08em;text-transform:uppercase;font-weight:800;color:#57534e;">
|
||||
Nachricht
|
||||
</div>
|
||||
</div>
|
||||
<div style="padding:16px;line-height:1.65;color:#292524;font-size:15px;border-left:4px solid #a7f3d0;">
|
||||
${safeMessageHtml}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- CTA -->
|
||||
<div style="margin-top:22px;text-align:center;">
|
||||
<a href="${escapeHtml(replyHref)}"
|
||||
style="display:inline-block;background:#292524;color:#fdfcf8;text-decoration:none;padding:12px 18px;border-radius:999px;font-weight:800;font-size:14px;">
|
||||
Antworten
|
||||
</a>
|
||||
<div style="margin-top:10px;font-size:12px;color:#78716c;">
|
||||
Oder antworte direkt auf diese E-Mail.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Footer -->
|
||||
<div style="padding:18px 26px;background:#fdfcf8;border-top:1px solid #e7e5e4;">
|
||||
<div style="font-size:12px;color:#78716c;line-height:1.5;">
|
||||
Automatisch generiert von <a href="${brandUrl}" style="color:#292524;text-decoration:underline;">dk0.dev</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
`,
|
||||
@@ -261,7 +280,7 @@ Nachricht:
|
||||
${message}
|
||||
|
||||
---
|
||||
Diese E-Mail wurde automatisch von deinem Portfolio generiert.
|
||||
Diese E-Mail wurde automatisch von dk0.dev generiert.
|
||||
`,
|
||||
};
|
||||
|
||||
|
||||
Reference in New Issue
Block a user