3 Commits

Author SHA1 Message Date
49d4d13afc improved design of email 2025-10-05 15:55:05 +02:00
45fa095eaf fixed mail view issues 2025-10-05 15:49:38 +02:00
23be7e12c7 removed some logging stuff 2025-10-04 19:34:27 +02:00
2 changed files with 71 additions and 44 deletions

View File

@@ -38,70 +38,99 @@ function buildLoanEmail({ user, items, startDate, endDate, createdDate }) {
const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9"; const brand = process.env.MAIL_BRAND_COLOR || "#0ea5e9";
const itemsList = const itemsList =
Array.isArray(items) && items.length Array.isArray(items) && items.length
? `<ul style="margin:8px 0 0 16px; padding:0;">${items ? `<ul style="margin:4px 0 0 18px; padding:0;">${items
.map((i) => `<li style="margin:4px 0;">${i}</li>`) .map(
(i) =>
`<li style="margin:2px 0; color:#111827; line-height:1.3;">${i}</li>`
)
.join("")}</ul>` .join("")}</ul>`
: "<span>N/A</span>"; : "<span style='color:#111827;'>N/A</span>";
return `<!doctype html> return `<!doctype html>
<html lang="de"> <html lang="de">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="color-scheme" content="light dark"> <meta name="color-scheme" content="light">
<meta name="supported-color-schemes" content="light dark"> <meta name="supported-color-schemes" content="light">
</head> <meta name="x-apple-disable-message-reformatting">
<body style="margin:0; padding:0; background:#f6f9fc; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827;"> <meta name="viewport" content="width=device-width,initial-scale=1">
<div style="padding:24px;"> <style>
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:12px; overflow:hidden;"> :root { color-scheme: light; supported-color-schemes: light; }
<tr> body { margin:0; padding:0; }
<td style="padding:20px 24px; background:${brand}; color:#ffffff;"> /* Mobile stacking */
<h1 style="margin:0; font-size:18px;">Neue Ausleihe erstellt</h1> @media (max-width:480px) {
</td> .outer { width:100% !important; }
</tr> .pad-sm { padding:16px !important; }
<tr> .w-label { width:120px !important; }
<td style="padding:20px 24px;"> }
<p style="margin:0 0 12px 0;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p> /* Dark-mode override safety */
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse;"> @media (prefers-color-scheme: dark) {
body, table, td, p, a, h1, h2, h3 { background:#ffffff !important; color:#111827 !important; }
.brand-header { background:${brand} !important; color:#ffffff !important; }
a { color:${brand} !important; }
}
</style>
</head>
<body bgcolor="#ffffff" style="background:#ffffff; font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif; color:#111827; -webkit-text-size-adjust:100%;">
<!-- Preheader (hidden) -->
<div style="display:none; max-height:0; overflow:hidden; opacity:0; mso-hide:all;">
Neue Ausleihe erstellt Übersicht der Buchung.
</div>
<div role="article" aria-roledescription="email" lang="de" style="padding:24px; background:#f2f4f7;">
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" class="outer" style="max-width:600px; margin:0 auto; background:#ffffff; border:1px solid #e5e7eb; border-radius:14px; overflow:hidden;">
<tr>
<td class="brand-header" style="padding:22px 26px; background:${brand}; color:#ffffff;">
<h1 style="margin:0; font-size:18px; line-height:1.35; font-weight:600;">Neue Ausleihe erstellt</h1>
</td>
</tr>
<tr>
<td class="pad-sm" style="padding:24px 26px; color:#111827;">
<p style="margin:0 0 14px 0; line-height:1.4;">Es wurde eine neue Ausleihe angelegt. Hier sind die Details:</p>
<table role="presentation" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; font-size:14px; line-height:1.3; background:#fcfcfd; border:1px solid #e5e7eb; border-radius:10px; overflow:hidden;">
<tbody>
<tr> <tr>
<td style="padding:8px 0; color:#6b7280; width:180px;">Benutzer</td> <td class="w-label" style="padding:10px 14px; color:#6b7280; width:170px; border-bottom:1px solid #ececec;">Benutzer</td>
<td style="padding:8px 0; font-weight:600;">${ <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${
user || "N/A" user || "N/A"
}</td> }</td>
</tr> </tr>
<tr> <tr>
<td style="padding:8px 0; color:#6b7280; vertical-align:top;">Ausgeliehene Gegenstände</td> <td style="padding:10px 14px; color:#6b7280; vertical-align:top; border-bottom:1px solid #ececec;">Ausgeliehene Gegenstände</td>
<td style="padding:8px 0; font-weight:600;">${itemsList}</td> <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${itemsList}</td>
</tr> </tr>
<tr> <tr>
<td style="padding:8px 0; color:#6b7280;">Startdatum</td> <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Startdatum</td>
<td style="padding:8px 0; font-weight:600;">${formatDateTime( <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
startDate startDate
)}</td> )}</td>
</tr> </tr>
<tr> <tr>
<td style="padding:8px 0; color:#6b7280;">Enddatum</td> <td style="padding:10px 14px; color:#6b7280; border-bottom:1px solid #ececec;">Enddatum</td>
<td style="padding:8px 0; font-weight:600;">${formatDateTime( <td style="padding:10px 14px; font-weight:600; border-bottom:1px solid #ececec; color:#111827;">${formatDateTime(
endDate endDate
)}</td> )}</td>
</tr> </tr>
<tr> <tr>
<td style="padding:8px 0; color:#6b7280;">Erstellt am</td> <td style="padding:10px 14px; color:#6b7280;">Erstellt am</td>
<td style="padding:8px 0; font-weight:600;">${formatDateTime( <td style="padding:10px 14px; font-weight:600; color:#111827;">${formatDateTime(
createdDate createdDate
)}</td> )}</td>
</tr> </tr>
</table> </tbody>
<p style="margin:20px 0 0 0; font-size:14px;"> </table>
<a href="https://admin.insta.the1s.de/api" style="color:${brand}; text-decoration:underline;" target="_blank" rel="noopener noreferrer"> <p style="margin:22px 0 0 0; font-size:14px;">
Zur Übersicht aller Ausleihen <a href="https://admin.insta.the1s.de/api" style="display:inline-block; background:${brand}; color:#ffffff; text-decoration:none; padding:10px 16px; border-radius:6px; font-weight:600; font-size:14px;" target="_blank" rel="noopener noreferrer">
</a> Übersicht öffnen
</p> </a>
<p style="margin:16px 0 0 0; font-size:12px; color:#6b7280;">Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.</p> </p>
</td> <p style="margin:18px 0 0 0; font-size:12px; color:#6b7280; line-height:1.4;">
</tr> Diese E-Mail wurde automatisch vom Ausleihsystem gesendet. Bitte nicht antworten.
</table> </p>
</div> </td>
</body> </tr>
</table>
</div>
</body>
</html>`; </html>`;
} }
@@ -196,7 +225,6 @@ router.post("/login", async (req, res) => {
}); });
router.get("/items", authenticate, async (req, res) => { router.get("/items", authenticate, async (req, res) => {
console.log(req);
const result = await getItemsFromDatabase(req.user.role); const result = await getItemsFromDatabase(req.user.role);
if (result.success) { if (result.success) {
res.status(200).json(result.data); res.status(200).json(result.data);

View File

@@ -9,7 +9,6 @@ export async function generateToken(payload) {
.setIssuedAt() .setIssuedAt()
.setExpirationTime("2h") // Token valid for 2 hours .setExpirationTime("2h") // Token valid for 2 hours
.sign(secret); .sign(secret);
console.log("Generated token: ", newToken);
return newToken; return newToken;
} }