enub/pictureframe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

updating landing page and backend #5

Merged
enub merged 1 commits from index-update into main 2025-06-13 17:43:29 +02:00
Conversation 0 Commits 1 Files Changed 2 +52 -19
2 changed files with 52 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
backend/server.js
View File

@ -1,3 +1,4 @@
import fs from 'fs';
import express from 'express';
import session from 'express-session';
import passport from 'passport';
@ -24,7 +25,18 @@ function isLoggedIn(req, res, next) {
}
app.get('/', (req, res) => {
res.render('index', { user: req.user });
const uploadsPath = path.join(__dirname, 'uploads');
const imageFiles = fs.existsSync(uploadsPath)
? fs.readdirSync(uploadsPath)
: [];
const images = imageFiles.map(file => ({
title: 'Beispiel-Titel', // hier könnte später DB-Titel rein
description: 'Beschreibung folgt bald...',
path: `/uploads/${file}`
}));
res.render('index', { user: req.user, images });
});
app.get('/auth/google',

57
backend/views/index.ejs
View File

@ -1,21 +1,42 @@
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8" />
<title>Login mit Google</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<main class="container">
<h1>Willkommen bei Urlaubsbilder!</h1>
<% if (user) { %>
<p>Angemeldet als <strong><%= user.displayName %></strong></p>
<a href="/protected" role="button">Zur App</a>
<a href="/logout">Logout</a>
<% } else { %>
<a href="/auth/google" role="button">Login mit Google</a>
<% } %>
</main>
</body>
<head>
<meta charset="UTF-8" />
<title>Startseite – Urlaubsbilder</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<nav class="container-fluid">
<ul>
<li><strong>Urlaubsbilder</strong></li>
</ul>
<ul>
<% if (user) { %>
<li><a href="/upload">Bild hochladen</a></li>
<li><a href="/logout">Logout</a></li>
<% } else { %>
<li><a href="/auth/google">Login mit Google</a></li>
<% } %>
</ul>
</nav>
<main class="container">
<h2>Geteilte Urlaubsbilder</h2>
<div class="grid">
<% if (images.length === 0) { %>
<p>Noch keine Bilder hochgeladen.</p>
<% } else { %>
<% images.forEach(img => { %>
<article>
<h3><%= img.title %></h3>
<p><%= img.description %></p>
<img src="<%= img.path %>" alt="Bild" style="max-width: 100%; border-radius: 8px;" />
</article>
<% }) %>
<% } %>
</div>
</main>
</body>
</html>