lehnert.cloud/files
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updated expressjs project

Browse Source
This commit is contained in:
Ludwig Lehnert
2026-01-12 16:52:18 +01:00
parent 175c586465
commit f4c09a259c
3 changed files with 90 additions and 147 deletions
Download Patch File Download Diff File Expand all files Collapse all files

203
expressjs/src/server.js
View File

@@ -198,121 +198,30 @@ function formatCountdown(ts) {
function renderPage(title, body) {
return `<!doctype html>
<html lang="en">
<html lang="de">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>${title}</title>
<style>
:root {
--ink: #1f1a14;
--muted: #6c5e52;
--paper: #f5efe6;
--card: #fffaf3;
--accent: #b44b2a;
--accent-dark: #8d3a21;
}
* { box-sizing: border-box; }
body {
margin: 0;
font-family: "Palatino Linotype", Palatino, "Book Antiqua", serif;
color: var(--ink);
background: radial-gradient(circle at top, #fff8ee 0%, #f5efe6 45%, #efe6da 100%);
min-height: 100vh;
}
main {
max-width: 980px;
margin: 0 auto;
padding: 28px 18px 60px;
}
header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
h1 {
margin: 0;
font-size: 1.8rem;
letter-spacing: 0.02em;
}
.muted {
color: var(--muted);
font-size: 0.95rem;
}
.card {
margin-top: 18px;
padding: 18px 18px 20px;
background: var(--card);
border-radius: 14px;
box-shadow: 0 10px 30px rgba(31, 26, 20, 0.12);
animation: fadeUp 0.5s ease;
}
form {
display: grid;
gap: 12px;
}
label {
display: grid;
gap: 6px;
font-weight: 600;
}
input, button {
font: inherit;
padding: 8px 10px;
border-radius: 8px;
}
input {
border: 1px solid #cdbdab;
background: #fff;
}
button {
border: none;
background: var(--accent);
color: #fff;
cursor: pointer;
transition: transform 0.15s ease, background 0.2s ease;
}
button:hover { background: var(--accent-dark); }
button:active { transform: translateY(1px); }
button.secondary {
background: #5d5146;
}
.row {
display: grid;
gap: 8px;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
table {
width: 100%;
border-collapse: collapse;
font-size: 0.95rem;
}
th, td {
text-align: left;
padding: 8px 6px;
border-bottom: 1px dashed #d9caba;
vertical-align: top;
}
progress {
width: 100%;
height: 14px;
accent-color: var(--accent);
}
.actions {
display: grid;
gap: 6px;
}
.pill {
display: inline-block;
padding: 2px 10px;
border-radius: 999px;
background: #f0e4d6;
}
@keyframes fadeUp {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
body { font-family: Arial, sans-serif; margin: 0; background: #f4f6f8; color: #1f2933; }
main { max-width: 920px; margin: 0 auto; padding: 24px 16px 48px; }
header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
h1 { margin: 0; font-size: 1.6rem; }
h2 { margin: 0 0 12px; font-size: 1.15rem; }
.muted { color: #6b7280; font-size: 0.95rem; }
.card { margin-top: 16px; padding: 16px; background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; }
form { display: grid; gap: 10px; }
label { display: grid; gap: 6px; font-weight: 600; }
input, button { font: inherit; padding: 8px 10px; border-radius: 6px; }
input { border: 1px solid #d1d5db; }
button { border: none; background: #1f2933; color: #fff; cursor: pointer; }
button.secondary { background: #6b7280; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 8px 6px; border-bottom: 1px solid #e5e7eb; vertical-align: top; }
progress { width: 100%; height: 12px; }
.actions { display: grid; gap: 6px; }
.pill { display: inline-block; padding: 2px 8px; border-radius: 999px; background: #eef2f7; }
</style>
</head>
<body>
@@ -401,25 +310,25 @@ app.get(`${basePath}/login`, (req, res) => {
const body = `
<header>
<div>
<h1>File Vault</h1>
<div class="muted">Sign in to manage shared uploads.</div>
<h1>Dateiverwaltung</h1>
<div class="muted">Bitte anmelden, um Uploads zu verwalten.</div>
</div>
</header>
<section class="card">
<form method="post" action="${baseUrl('/login')}">
<label>
Username
Benutzername
<input name="username" autocomplete="username" required />
</label>
<label>
Password
Passwort
<input type="password" name="password" autocomplete="current-password" required />
</label>
<button type="submit">Log in</button>
<button type="submit">Anmelden</button>
</form>
</section>
`;
res.send(renderPage('Login', body));
res.send(renderPage('Anmeldung', body));
});
app.post(`${basePath}/login`, async (req, res) => {
@@ -432,26 +341,26 @@ app.post(`${basePath}/login`, async (req, res) => {
const body = `
<header>
<div>
<h1>File Vault</h1>
<div class="muted">Sign in to manage shared uploads.</div>
<h1>Dateiverwaltung</h1>
<div class="muted">Bitte anmelden, um Uploads zu verwalten.</div>
</div>
</header>
<section class="card">
<div class="pill">Login failed</div>
<div class="pill">Anmeldung fehlgeschlagen</div>
<form method="post" action="${baseUrl('/login')}">
<label>
Username
Benutzername
<input name="username" autocomplete="username" required />
</label>
<label>
Password
Passwort
<input type="password" name="password" autocomplete="current-password" required />
</label>
<button type="submit">Log in</button>
<button type="submit">Anmelden</button>
</form>
</section>
`;
res.status(401).send(renderPage('Login', body));
res.status(401).send(renderPage('Anmeldung', body));
return;
}
@@ -487,15 +396,15 @@ app.get(`${basePath}/dashboard`, requireAuthPage, async (req, res) => {
<td>${formatBytes(item.size_bytes)}</td>
<td>
<div>${formatTimestamp(item.expires_at)}</div>
<div class="muted">${formatCountdown(item.expires_at)} left</div>
<div class="muted">Noch ${formatCountdown(item.expires_at)}</div>
</td>
<td class="actions">
<form method="post" action="${baseUrl(`/files/${item.id}/delete`)}">
<button type="submit" class="secondary">Delete</button>
<button type="submit" class="secondary">Löschen</button>
</form>
<form method="post" action="${baseUrl(`/files/${item.id}/extend`)}">
<input name="extendSeconds" placeholder="Add seconds" />
<button type="submit">Extend</button>
<input name="extendSeconds" placeholder="Sekunden hinzufügen" />
<button type="submit">Verlängern</button>
</form>
</td>
</tr>
@@ -505,48 +414,48 @@ app.get(`${basePath}/dashboard`, requireAuthPage, async (req, res) => {
const body = `
<header>
<div>
<h1>File Vault</h1>
<div class="muted">Signed in as ${req.user.username}</div>
<h1>Dateiverwaltung</h1>
<div class="muted">Angemeldet als ${req.user.username}</div>
</div>
<form method="post" action="${baseUrl('/logout')}">
<button type="submit" class="secondary">Log out</button>
<button type="submit" class="secondary">Abmelden</button>
</form>
</header>
<section class="card">
<h2>Upload new file</h2>
<h2>Datei hochladen</h2>
<form id="upload-form">
<label>
File
Datei
<input type="file" name="file" required />
</label>
<label>
Retention override (seconds)
Aufbewahrung (Sekunden)
<input name="retentionSeconds" placeholder="${uploadTtlSeconds}" />
</label>
<button type="submit">Upload</button>
<button type="submit">Hochladen</button>
<progress id="upload-progress" value="0" max="100"></progress>
<div id="upload-status" class="muted"></div>
</form>
</section>
<section class="card">
<h2>Current uploads</h2>
<h2>Aktuelle Uploads</h2>
${uploads.length ? `
<table>
<thead>
<tr>
<th>File</th>
<th>Size</th>
<th>Expires</th>
<th>Actions</th>
<th>Datei</th>
<th>Größe</th>
<th>Läuft ab</th>
<th>Aktionen</th>
</tr>
</thead>
<tbody>
${rows}
</tbody>
</table>
` : '<div class="muted">No uploads yet.</div>'}
` : '<div class="muted">Noch keine Uploads.</div>'}
</section>
<script>
@@ -566,21 +475,21 @@ app.get(`${basePath}/dashboard`, requireAuthPage, async (req, res) => {
});
xhr.addEventListener('load', () => {
if (xhr.status >= 200 && xhr.status < 300) {
status.textContent = 'Uploaded. Refreshing list...';
status.textContent = 'Upload abgeschlossen. Liste wird aktualisiert...';
window.location.reload();
} else {
status.textContent = 'Upload failed.';
status.textContent = 'Upload fehlgeschlagen.';
}
});
xhr.addEventListener('error', () => {
status.textContent = 'Upload failed.';
status.textContent = 'Upload fehlgeschlagen.';
});
xhr.send(new FormData(uploadForm));
});
</script>
`;
res.send(renderPage('Dashboard', body));
res.send(renderPage('Übersicht', body));
});
app.post(`${basePath}/api/upload`, requireAuthApi, upload.single('file'), async (req, res) => {
@@ -634,7 +543,7 @@ app.post(`${basePath}/files/:id/delete`, requireAuthPage, async (req, res) => {
req.user.username,
]);
if (!uploadEntry) {
res.status(404).send(renderPage('Not found', '<p class="card">Upload not found.</p>'));
res.status(404).send(renderPage('Nicht gefunden', '<p class="card">Upload nicht gefunden.</p>'));
return;
}
try {
@@ -652,7 +561,7 @@ app.post(`${basePath}/files/:id/extend`, requireAuthPage, async (req, res) => {
req.user.username,
]);
if (!uploadEntry) {
res.status(404).send(renderPage('Not found', '<p class="card">Upload not found.</p>'));
res.status(404).send(renderPage('Nicht gefunden', '<p class="card">Upload nicht gefunden.</p>'));
return;
}
@@ -668,7 +577,7 @@ app.post(`${basePath}/files/:id/extend`, requireAuthPage, async (req, res) => {
});
app.use((req, res) => {
res.status(404).send(renderPage('Not found', '<p class="card">Not found.</p>'));
res.status(404).send(renderPage('Nicht gefunden', '<p class="card">Seite nicht gefunden.</p>'));
});
app.listen(port, () => {