Refactor content structure and add basic authentication utilities

- Moved event and gallery data to JSON files for cleaner content management.
- Added session management utilities with CSRF protection.
- Integrated OAuth-based login and logout APIs.
- Updated dependencies, including Astro and introduced dotenv-cli.
- Enhanced package.json with local environment support.
This commit is contained in:
2025-11-08 17:02:51 +01:00
parent 1f94bbca15
commit 761ab5d5b5
24 changed files with 1374 additions and 549 deletions

25
.env.example Normal file
View File

@ -0,0 +1,25 @@
# Local development configuration for OAuth + Gitea
# Copy this file to .env.local and fill in values, then run: npm run dev:local
PUBLIC_BASE_URL=http://localhost:4321
# Gitea OAuth app created with redirect URI: http://localhost:4321/api/auth/callback
OAUTH_PROVIDER=gitea
OAUTH_CLIENT_ID=
OAUTH_CLIENT_SECRET=
OAUTH_AUTHORIZE_URL=https://git.bookageek.ch/login/oauth/authorize
OAUTH_TOKEN_URL=https://git.bookageek.ch/login/oauth/access_token
OAUTH_USERINFO_URL=https://git.bookageek.ch/api/v1/user
# Optional allow-list (comma separated usernames)
# OAUTH_ALLOWED_USERS=
# Gitea API for commits (service account PAT must have write:repository)
GITEA_BASE=https://git.bookageek.ch
GITEA_OWNER=
GITEA_REPO=
GITEA_TOKEN=
GIT_BRANCH=main
# Secrets (use long random strings)
SESSION_SECRET=
CSRF_SECRET=

1
.gitignore vendored
View File

@ -16,6 +16,7 @@ pnpm-debug.log*
# environment variables # environment variables
.env .env
.env.production .env.production
.env.local
# macOS-specific files # macOS-specific files
.DS_Store .DS_Store

View File

@ -4,19 +4,17 @@ WORKDIR /app
COPY package*.json ./ COPY package*.json ./
RUN npm ci RUN npm ci
COPY . . COPY . .
# Ensure CSS variables are present
RUN mkdir -p public/styles
RUN cp -r styles/* public/styles/ || true
RUN npm run build RUN npm run build
FROM node:20-alpine AS production FROM node:20-alpine AS production
WORKDIR /app WORKDIR /app
RUN npm install -g serve ENV NODE_ENV=production
COPY --from=build /app/dist ./dist COPY --from=build /app/dist ./dist
# install minimal deps to run node if needed (alpine already has node)
EXPOSE 3000 EXPOSE 3000
CMD ["serve", "-s", "dist", "-l", "3000"] CMD ["node", "./dist/server/entry.mjs"]
HEALTHCHECK --interval=30s --timeout=3s --start-period=5s --retries=3 \ HEALTHCHECK --interval=30s --timeout=5s --start-period=10s --retries=3 \
CMD wget -qO- http://localhost:3000/ || exit 1 CMD wget -qO- http://localhost:3000/ || exit 1

View File

@ -1,47 +1,65 @@
# Astro Starter Kit: Minimal # Gallus Pub Website Admin mit Gitea OAuth und Git-Commits
```sh Dieses Projekt stellt eine AstroSeite bereit und enthält eine AdminOberfläche unter `/admin`, mit der Inhalte (Events, Galerie und Bilder) ohne Datenbank gepflegt werden können. Änderungen werden als Commits direkt in das GiteaRepository geschrieben. Woodpecker baut daraufhin und Fly.io deployt.
npm create astro@latest -- --template minimal
## Inhalte (Headless, Gitbasiert)
- Editierbare Dateien im Repo:
- `src/content/events.json`
- `src/content/gallery.json`
- Bilder: `public/images/*`
- Die Startseite importiert diese Dateien und rendert sie.
## Admin & Auth
- AdminSeite: `https://<domain>/admin` (kein Link im UI, nur direkter Pfad)
- Login via Gitea OAuth:
- `/api/auth/login` → Gitea → `/api/auth/callback`
- Session als HttpOnlyCookie, CSRFCookie für POSTs
- Speichern: `/api/save` validiert und committet die Dateien via GiteaAPI
## Lokale Entwicklung
1) `.env.example` nach `.env.local` kopieren und ausfüllen (Gitea OAuthApp mit Redirect `http://localhost:4321/api/auth/callback`).
2) Installieren und starten:
```bash
npm install
npm run dev:local
``` ```
3) Browser öffnen: `http://localhost:4321/admin` → Mit Gitea anmelden → Inhalte bearbeiten → Speichern.
[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/withastro/astro/tree/latest/examples/minimal) Hinweis: Für lokales HTTP sind Cookies ohne `Secure` gesetzt. In Produktion werden Cookies automatisch als `Secure` markiert.
[![Open with CodeSandbox](https://assets.codesandbox.io/github/button-edit-lime.svg)](https://codesandbox.io/p/sandbox/github/withastro/astro/tree/latest/examples/minimal)
[![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/withastro/astro?devcontainer_path=.devcontainer/minimal/devcontainer.json)
> 🧑‍🚀 **Seasoned astronaut?** Delete this file. Have fun! ## Produktion (Fly.io)
- Dockerfile baut Astro als SSR und startet `node dist/server/entry.mjs` auf Port 3000.
## 🚀 Project Structure - Secrets auf Fly.io setzen (Beispiele, Werte anpassen):
Inside of your Astro project, you'll see the following folders and files:
```text
/
├── public/
├── src/
│ └── pages/
│ └── index.astro
└── package.json
``` ```
flyctl secrets set \
OAUTH_PROVIDER=gitea \
OAUTH_CLIENT_ID=... \
OAUTH_CLIENT_SECRET=... \
OAUTH_AUTHORIZE_URL=https://git.bookageek.ch/login/oauth/authorize \
OAUTH_TOKEN_URL=https://git.bookageek.ch/login/oauth/access_token \
OAUTH_USERINFO_URL=https://git.bookageek.ch/api/v1/user \
GITEA_BASE=https://git.bookageek.ch \
GITEA_OWNER=OWNER \
GITEA_REPO=REPO \
GITEA_TOKEN=PAT \
GIT_BRANCH=main \
SESSION_SECRET=RANDOM \
CSRF_SECRET=RANDOM
```
- Optional: `PUBLIC_BASE_URL=https://gallus-pub.ch` setzen.
Astro looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name. ## Wichtige PfadKonvention
- Statische Assets immer unter `public/` ablegen (z.B. `public/images/...`).
- Die AdminUploads schreiben automatisch nach `public/images/*`.
There's nothing special about `src/components/`, but that's where we like to put any Astro/React/Vue/Svelte/Preact components. ## Befehle
- `npm install` Abhängigkeiten
- `npm run dev` Standard Dev
- `npm run dev:local` Dev mit `.env.local` (OAuth/Gitea)
- `npm run build` Produktion builden
- `npm run preview` Build lokal testen
Any static assets, like images, can be placed in the `public/` directory. ## Sicherheit
- Kein PAT im Browser nur serverseitig in Secrets
## 🧞 Commands - CSRFSchutz und PfadAllowlist
- Optional nutzerbasierte Zulassung: `OAUTH_ALLOWED_USERS` (KommaListe)
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :------------------------ | :----------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:4321` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro check` |
| `npm run astro -- --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check [our documentation](https://docs.astro.build) or jump into our [Discord server](https://astro.build/chat).

View File

@ -1,5 +1,9 @@
// @ts-check // @ts-check
import { defineConfig } from 'astro/config'; import { defineConfig } from 'astro/config';
import node from '@astrojs/node';
// https://astro.build/config // https://astro.build/config
export default defineConfig({}); export default defineConfig({
output: 'server',
adapter: node({ mode: 'standalone' }),
});

1017
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@ -1,14 +1,20 @@
{ {
"name": "", "name": "gallus-pub",
"type": "module", "type": "module",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"dev": "astro dev", "dev": "astro dev",
"dev:local": "dotenv -e .env.local -- astro dev",
"build": "astro build", "build": "astro build",
"preview": "astro preview", "preview": "astro preview",
"astro": "astro" "astro": "astro"
}, },
"dependencies": { "dependencies": {
"astro": "^5.12.0" "astro": "^5.15.4",
"@astrojs/node": "^9.0.0",
"zod": "^3.23.8"
},
"devDependencies": {
"dotenv-cli": "^7.4.2"
} }
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 49 KiB

View File

@ -19,13 +19,17 @@ import "../styles/components/EventsGrid.css";
<h2 class="section-title">Events</h2> <h2 class="section-title">Events</h2>
<section id={id} class="events-gird container"> <section id={id} class="events-gird container">
{ {
events.map((event: Event) => ( events.length === 0 ? (
<HoverCard <p style="text-align:center; width:100%; opacity:0.7;">Keine Events vorhanden. Bitte im Admin-Bereich hinzufügen.</p>
title={event.title} ) : (
date={event.date} events.map((event: Event) => (
description={event.description} <HoverCard
image={event.image} title={event.title}
/> date={event.date}
)) description={event.description}
image={event.image}
/>
))
)
} }
</section> </section>

View File

@ -12,35 +12,41 @@ const { images = [], id } = Astro.props as { images: Image[], id?: string };
<section id={id} class="image-carousel-container"> <section id={id} class="image-carousel-container">
<h2 class="section-title">Galerie</h2> <h2 class="section-title">Galerie</h2>
<div class="image-carousel"> {images.length === 0 ? (
<button class="nav-button prev-button" aria-label="Previous image"> <p style="text-align:center; width:100%; opacity:0.7;">Keine Bilder vorhanden. Bitte im Admin-Bereich hinzufügen.</p>
<span class="arrow">&#10094;</span> ) : (
</button> <>
<div class="image-carousel">
<button class="nav-button prev-button" aria-label="Previous image">
<span class="arrow">&#10094;</span>
</button>
<div class="carousel-images"> <div class="carousel-images">
<div class="carousel-track"> <div class="carousel-track">
{images.map((image, index) => ( {images.map((image, index) => (
<div class="carousel-slide" data-index={index}> <div class="carousel-slide" data-index={index}>
<img src={image.src} alt={image.alt} class="carousel-image" /> <img src={image.src} alt={image.alt} class="carousel-image" />
</div>
))}
</div> </div>
</div>
<button class="nav-button next-button" aria-label="Next image">
<span class="arrow">&#10095;</span>
</button>
</div>
<div class="carousel-indicators">
{images.map((_, index) => (
<button
class="indicator-dot"
data-index={index}
aria-label={`Go to slide ${index + 1}`}
></button>
))} ))}
</div> </div>
</div> </>
)}
<button class="nav-button next-button" aria-label="Next image">
<span class="arrow">&#10095;</span>
</button>
</div>
<div class="carousel-indicators">
{images.map((_, index) => (
<button
class="indicator-dot"
data-index={index}
aria-label={`Go to slide ${index + 1}`}
></button>
))}
</div>
</section> </section>
<script> <script>

View File

@ -1,58 +1,46 @@
--- ---
// src/components/Welcome.astro // src/components/Welcome.astro
import "../styles/components/Welcome.css" import "../styles/components/Welcome.css"
import content from "../content/texts.json";
const { id } = Astro.props; const { id } = Astro.props;
const welcome = (content as any).welcome || {};
--- ---
<section id={id} class="welcome container"> <section id={id} class="welcome container">
<div class="welcome-text"> <div class="welcome-text">
<h2>Herzlich willkommen im</h2> {(welcome.titleLines || ["Herzlich willkommen im","Gallus Pub!"]).map((line: string) => (
<h2>Gallus Pub!</h2> <h2>{line}</h2>
))}
<p> {(welcome.paragraphs || [
Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung "Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du selbst. Unsere Türen stehen offen für alle, die Spass haben wollen und gute Gesellschaft suchen!"
oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du ]).map((p: string) => (
selbst. Unsere Türen stehen offen für alle, die Spass haben wollen <p>{p}</p>
und gute Gesellschaft suchen! ))}
</p>
<p><b>Unsere Highlights:</b></p> <p><b>Unsere Highlights:</b></p>
<ul> <ul>
<li> {(welcome.highlights || [
<b>Karaoke:</b> Von Mittwoch bis Samstag kannst du deine { title: "Karaoke", text: "Von Mittwoch bis Samstag kannst du deine Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat mieten." },
Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht { title: "Pub Quiz", text: "Jeden Freitag ab 20:00 Uhr testet ihr euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues Thema und einen neuen Champion." },
nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst { title: "Getränke", text: "Geniesst frisches Guinness, Smithwicks, Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot." }
gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat ]).map((h: any) => (
mieten. <li>
</li> <b>{h.title}:</b> {h.text}
</li>
<li> ))}
<b>Pub Quiz:</b> Jeden Freitag ab 20:00 Uhr testet ihr
euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues
Thema und einen neuen Champion.
</li>
<li>
<b>Getränke:</b> Geniesst frisches Guinness, Smithwicks,
Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber
haben wir erlesene Sorten aus Schottland und Irland im Angebot.
</li>
</ul> </ul>
<p> <p>{welcome.closing || "Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael"}</p>
Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst
uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael
</p>
</div> </div>
<div class="welcome-image"> <div class="welcome-image">
<img src="/images/Welcome.png" alt="Welcome background image" /> <img src={welcome.image || "/images/Welcome.png"} alt="Welcome background image" />
</div> </div>
</section> </section>

32
src/content/events.json Normal file
View File

@ -0,0 +1,32 @@
[
{
"image": "/images/Event1.png",
"title": "Karaoke auf 2 Etagen",
"date": "Mittwoch Samstag",
"description": "Bei uns gibt's Karaoke auf gleich zwei Etagen! Ob Solo, Duett oder ganze Crew Hauptsache Spass. Den 2. OG kannst du auch privat mieten."
},
{
"image": "/images/Event2.png",
"title": "Pub Quiz",
"date": "Jeden Freitag, Start 20:00 Uhr",
"description": "Teste dein Wissen in mehreren Runden jede Woche ein neues Thema und ein neuer Champion. Schnapp dir deine Freunde und macht mit!"
},
{
"image": "/images/MonthlyHit.png",
"title": "Monthly Hit",
"date": "Einmal pro Monat",
"description": "Unser Special des Monats wechselnde Highlights, Aktionen und Überraschungen. Folge uns, um das nächste Datum nicht zu verpassen!"
},
{
"image": "/images/Event3.png",
"title": "Live Music & Open Stage",
"date": "Regelmässig Daten auf Socials",
"description": "Lokale Künstlerinnen und Künstler live im Gallus Pub. Offene Bühne für alle, die Musik lieben meldet euch bei uns!"
},
{
"image": "/images/Event4.png",
"title": "Special Nights",
"date": "Variiert",
"description": "Themenabende, Game Nights, Tastings und mehr. Schaut in der Galerie vorbei oder fragt unser Team nach den nächsten Specials."
}
]

11
src/content/gallery.json Normal file
View File

@ -0,0 +1,11 @@
[
{ "src": "/images/Gallery1.png", "alt": "Galerie Bild 1" },
{ "src": "/images/Gallery2.png", "alt": "Galerie Bild 2" },
{ "src": "/images/Gallery3.png", "alt": "Galerie Bild 3" },
{ "src": "/images/Gallery4.png", "alt": "Galerie Bild 4" },
{ "src": "/images/Gallery5.png", "alt": "Galerie Bild 5" },
{ "src": "/images/Gallery6.png", "alt": "Galerie Bild 6" },
{ "src": "/images/Gallery7.png", "alt": "Galerie Bild 7" },
{ "src": "/images/Gallery8.png", "alt": "Galerie Bild 8" },
{ "src": "/images/Gallery9.png", "alt": "Galerie Bild 9" }
]

27
src/content/texts.json Normal file
View File

@ -0,0 +1,27 @@
{
"welcome": {
"titleLines": [
"Herzlich willkommen im",
"Gallus Pub!"
],
"paragraphs": [
"Wie die meisten bereits wissen, ist hier jeder willkommen - ob jung oder alt, Rocker, Elf, Nerd, Meerjungfrau oder einfach nur du selbst. Unsere Türen stehen offen für alle, die Spass haben wollen und gute Gesellschaft suchen!"
],
"highlights": [
{
"title": "Karaoke",
"text": "Von Mittwoch bis Samstag kannst du deine Stimme auf zwei Stockwerken zum Besten geben. Keine Sorge, es geht nicht darum, perfekt zu sein, sondern einfach Spass zu haben! Du singst gerne, aber lieber für dich? Dann kannst du den 2. OG auch privat mieten."
},
{
"title": "Pub Quiz",
"text": "Jeden Freitag ab 20:00 Uhr testet ihr euer Wissen in verschiedenen Runden. Jede Woche gibt es ein neues Thema und einen neuen Champion."
},
{
"title": "Getränke",
"text": "Geniesst frisches Guinness, Smithwicks, Gallus Old Style Ale und unsere leckeren Cocktails. Für Whisky-Liebhaber haben wir erlesene Sorten aus Schottland und Irland im Angebot."
}
],
"closing": "Wir freuen uns darauf, euch bald bei uns begrüssen zu können! Lasst uns gemeinsam unvergessliche Abende feiern. - Sabrina & Raphael",
"image": "/images/Welcome.png"
}
}

25
src/lib/csrf.ts Normal file
View File

@ -0,0 +1,25 @@
import crypto from 'node:crypto';
import { env } from './env';
export function createCsrfToken(): string {
const raw = crypto.randomBytes(16).toString('base64url');
const sig = sign(raw);
return `${raw}.${sig}`;
}
export function verifyCsrfToken(token: string | null | undefined): boolean {
if (!token) return false;
const [raw, sig] = token.split('.');
if (!raw || !sig) return false;
const expected = sign(raw);
try {
return crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected));
} catch {
return false;
}
}
function sign(input: string): string {
if (!env.CSRF_SECRET) throw new Error('CSRF_SECRET missing');
return crypto.createHmac('sha256', env.CSRF_SECRET).update(input).digest('hex');
}

29
src/lib/env.ts Normal file
View File

@ -0,0 +1,29 @@
export const env = {
OAUTH_PROVIDER: process.env.OAUTH_PROVIDER,
OAUTH_CLIENT_ID: process.env.OAUTH_CLIENT_ID,
OAUTH_CLIENT_SECRET: process.env.OAUTH_CLIENT_SECRET,
OAUTH_AUTHORIZE_URL: process.env.OAUTH_AUTHORIZE_URL,
OAUTH_TOKEN_URL: process.env.OAUTH_TOKEN_URL,
OAUTH_USERINFO_URL: process.env.OAUTH_USERINFO_URL,
OAUTH_ALLOWED_USERS: process.env.OAUTH_ALLOWED_USERS,
OAUTH_ALLOWED_ORG: process.env.OAUTH_ALLOWED_ORG,
PUBLIC_BASE_URL: process.env.PUBLIC_BASE_URL,
GITEA_BASE: process.env.GITEA_BASE,
GITEA_OWNER: process.env.GITEA_OWNER,
GITEA_REPO: process.env.GITEA_REPO,
GITEA_TOKEN: process.env.GITEA_TOKEN,
GIT_BRANCH: process.env.GIT_BRANCH || 'main',
SESSION_SECRET: process.env.SESSION_SECRET,
CSRF_SECRET: process.env.CSRF_SECRET,
};
export function getBaseUrlFromRequest(req: Request): string {
try {
if (env.PUBLIC_BASE_URL) return new URL(env.PUBLIC_BASE_URL).toString().replace(/\/$/, '');
} catch {}
const url = new URL(req.url);
url.pathname = '';
url.search = '';
url.hash = '';
return url.toString().replace(/\/$/, '');
}

87
src/lib/session.ts Normal file
View File

@ -0,0 +1,87 @@
import crypto from 'node:crypto';
import { env } from './env';
const SESSION_COOKIE = 'gp_session';
const STATE_COOKIE = 'oauth_state';
const CSRF_COOKIE = 'gp_csrf';
export type SessionData = {
user?: {
id: number;
username: string;
email?: string;
displayName?: string;
};
};
function hmac(value: string) {
if (!env.SESSION_SECRET) throw new Error('SESSION_SECRET missing');
return crypto.createHmac('sha256', env.SESSION_SECRET).update(value).digest('hex');
}
export function encodeSession(data: SessionData): string {
const json = JSON.stringify(data);
const b64 = Buffer.from(json, 'utf-8').toString('base64url');
const sig = hmac(b64);
return `${b64}.${sig}`;
}
export function decodeSession(token?: string | null): SessionData | null {
if (!token) return null;
const parts = token.split('.');
if (parts.length !== 2) return null;
const [b64, sig] = parts;
const expected = hmac(b64);
// timing-safe compare
if (!crypto.timingSafeEqual(Buffer.from(sig), Buffer.from(expected))) return null;
try {
return JSON.parse(Buffer.from(b64, 'base64url').toString('utf-8')) as SessionData;
} catch {
return null;
}
}
export function cookieAttrs({ httpOnly = true, maxAge, path = '/', sameSite = 'Lax', secure }: { httpOnly?: boolean; maxAge?: number; path?: string; sameSite?: 'Lax'|'Strict'|'None'; secure?: boolean } = {}) {
const attrs = [`Path=${path}`, `SameSite=${sameSite}`];
if (httpOnly) attrs.push('HttpOnly');
const isProd = process.env.NODE_ENV === 'production';
const useSecure = secure ?? isProd;
if (useSecure) attrs.push('Secure');
if (typeof maxAge === 'number') attrs.push(`Max-Age=${maxAge}`);
return attrs.join('; ');
}
export function setSessionCookie(data: SessionData, maxAgeDays = 7): string {
const token = encodeSession(data);
const maxAge = maxAgeDays * 24 * 60 * 60;
return `${SESSION_COOKIE}=${token}; ${cookieAttrs({ maxAge })}`;
}
export function clearSessionCookie(): string {
return `${SESSION_COOKIE}=; ${cookieAttrs({})}; Max-Age=0`;
}
export function getSessionFromRequest(req: Request): SessionData | null {
const cookie = parseCookies(req.headers.get('cookie'))[SESSION_COOKIE];
return decodeSession(cookie);
}
export function setTempCookie(name: string, value: string, maxAgeSeconds = 600): string {
return `${name}=${value}; ${cookieAttrs({ maxAge: maxAgeSeconds })}`;
}
export function clearCookie(name: string): string {
return `${name}=; ${cookieAttrs({})}; Max-Age=0`;
}
export function parseCookies(header: string | null | undefined): Record<string, string> {
const out: Record<string, string> = {};
if (!header) return out;
for (const part of header.split(';')) {
const [k, ...rest] = part.trim().split('=');
out[k] = decodeURIComponent(rest.join('='));
}
return out;
}
export { SESSION_COOKIE, STATE_COOKIE, CSRF_COOKIE };

8
src/middleware.ts Normal file
View File

@ -0,0 +1,8 @@
import type { MiddlewareHandler } from 'astro';
import { getSessionFromRequest } from './lib/session';
export const onRequest: MiddlewareHandler = async (context, next) => {
const session = getSessionFromRequest(context.request);
(context.locals as any).user = session?.user || null;
return next();
};

111
src/pages/admin/index.astro Normal file
View File

@ -0,0 +1,111 @@
---
import Layout from "../../components/Layout.astro";
const user = Astro.locals.user as any;
import events from "../../content/events.json";
import images from "../../content/gallery.json";
import texts from "../../content/texts.json";
---
<!-- Guard: if not logged in, show login link only -->
{!user && (
<Layout>
<section style="padding:2rem; text-align:center">
<h1>Admin Login</h1>
<p>Bitte mit Gitea anmelden, um Inhalte zu bearbeiten.</p>
<p><a class="button" href="/api/auth/login">Mit Gitea anmelden</a></p>
</section>
</Layout>
)}
{user && (
<Layout>
<section class="admin" style="padding:2rem;">
<h1>Admin Bereich</h1>
<p>Eingeloggt als <b>{user.username}</b></p>
<form id="editor">
<h2>Welcome/Textbausteine (JSON)</h2>
<textarea id="texts" style="width:100%;height:240px">{JSON.stringify(texts, null, 2)}</textarea>
<h2>Events (JSON)</h2>
<textarea id="events" style="width:100%;height:220px">{JSON.stringify(events, null, 2)}</textarea>
<h2>Gallerie (JSON)</h2>
<textarea id="gallery" style="width:100%;height:160px">{JSON.stringify(images, null, 2)}</textarea>
<h2>Bild hochladen</h2>
<input id="imageInput" type="file" accept="image/*" multiple />
<div style="margin-top:1rem; display:flex; gap:1rem;">
<button type="button" id="saveBtn">Speichern</button>
<button type="button" id="logoutBtn">Logout</button>
</div>
</form>
</section>
<script>
async function getCsrf() {
const m = document.cookie.match(/(?:^|; )gp_csrf=([^;]+)/);
return m ? decodeURIComponent(m[1]) : '';
}
async function save() {
const files = [];
try {
const textsText = (document.getElementById('texts')).value;
const textsJson = JSON.stringify(JSON.parse(textsText), null, 2);
files.push({ path: 'src/content/texts.json', content: textsJson, encoding: 'utf8' });
} catch (e) {
alert('Texts JSON ist ungültig: ' + e.message);
return;
}
try {
const eventsText = (document.getElementById('events')).value;
const eventsJson = JSON.stringify(JSON.parse(eventsText), null, 2);
files.push({ path: 'src/content/events.json', content: eventsJson, encoding: 'utf8' });
} catch (e) {
alert('Events JSON ist ungültig: ' + e.message);
return;
}
try {
const galleryText = (document.getElementById('gallery')).value;
const galleryJson = JSON.stringify(JSON.parse(galleryText), null, 2);
files.push({ path: 'src/content/gallery.json', content: galleryJson, encoding: 'utf8' });
} catch (e) {
alert('Galerie JSON ist ungültig: ' + e.message);
return;
}
// handle image uploads
const input = document.getElementById('imageInput');
const toUpload = Array.from(input.files || []);
for (const f of toUpload) {
const buf = await f.arrayBuffer();
const base64 = btoa(String.fromCharCode(...new Uint8Array(buf)));
files.push({ path: `public/images/${f.name}`, content: base64, encoding: 'base64' });
}
const res = await fetch('/api/save', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRF': await getCsrf(),
},
body: JSON.stringify({ message: 'Admin content update', files })
});
if (!res.ok) {
const t = await res.text();
alert('Fehler beim Speichern: ' + t);
} else {
alert('Änderungen gespeichert. Build/Deploy wird ausgelöst.');
location.reload();
}
}
document.getElementById('saveBtn').addEventListener('click', save);
document.getElementById('logoutBtn').addEventListener('click', async () => {
await fetch('/api/auth/logout', { method: 'POST' });
location.href = '/';
});
</script>
</Layout>
)}

View File

@ -0,0 +1,83 @@
import type { APIRoute } from 'astro';
import { env, getBaseUrlFromRequest } from '../../../lib/env';
import { STATE_COOKIE, parseCookies, clearCookie, setSessionCookie, CSRF_COOKIE } from '../../../lib/session';
import { createCsrfToken } from '../../../lib/csrf';
export const GET: APIRoute = async ({ request }) => {
const url = new URL(request.url);
const code = url.searchParams.get('code');
const state = url.searchParams.get('state');
const cookies = parseCookies(request.headers.get('cookie'));
if (!code || !state || cookies[STATE_COOKIE] !== state) {
return new Response('Invalid OAuth state', { status: 400 });
}
if (!env.OAUTH_CLIENT_ID || !env.OAUTH_CLIENT_SECRET || !env.OAUTH_TOKEN_URL || !env.OAUTH_USERINFO_URL) {
return new Response('OAuth not fully configured', { status: 500 });
}
const redirectUri = `${getBaseUrlFromRequest(request)}/api/auth/callback`;
// Exchange code for token
let token: string;
try {
const res = await fetch(env.OAUTH_TOKEN_URL!, {
method: 'POST',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
body: new URLSearchParams({
client_id: env.OAUTH_CLIENT_ID!,
client_secret: env.OAUTH_CLIENT_SECRET!,
code,
grant_type: 'authorization_code',
redirect_uri: redirectUri,
}),
});
if (!res.ok) {
const txt = await res.text();
return new Response(`Token exchange failed: ${res.status} ${txt}`, { status: 500 });
}
const data = await res.json().catch(async () => {
// Some providers may return querystring
const text = await res.text();
const params = new URLSearchParams(text);
return { access_token: params.get('access_token') };
});
token = data.access_token;
if (!token) throw new Error('No access_token');
} catch (e: any) {
return new Response(`Token error: ${e?.message || e}`, { status: 500 });
}
// Fetch user info
const userRes = await fetch(env.OAUTH_USERINFO_URL!, {
headers: { Authorization: `token ${token}` },
});
if (!userRes.ok) {
const txt = await userRes.text();
return new Response(`Userinfo error: ${userRes.status} ${txt}`, { status: 500 });
}
const user = await userRes.json();
// Optional allow list
if (env.OAUTH_ALLOWED_USERS) {
const allowed = env.OAUTH_ALLOWED_USERS.split(',').map((s) => s.trim()).filter(Boolean);
if (!allowed.includes(user?.login || user?.username)) {
return new Response('forbidden', { status: 403 });
}
}
// Create session and CSRF
const sessionHeader = setSessionCookie({ user: { id: user.id, username: user.login || user.username, email: user.email, displayName: user.full_name || user.name } });
const csrf = createCsrfToken();
// CSRF cookie should NOT be HttpOnly so frontend can read it and send in header
const csrfHeader = `${CSRF_COOKIE}=${csrf}; Path=/; SameSite=Lax${process.env.NODE_ENV === 'production' ? '; Secure' : ''}`;
const headers = new Headers({ Location: '/admin' });
headers.append('Set-Cookie', clearCookie(STATE_COOKIE));
headers.append('Set-Cookie', sessionHeader);
headers.append('Set-Cookie', csrfHeader);
headers.append('Cache-Control', 'no-store');
return new Response(null, { status: 302, headers });
};

View File

@ -0,0 +1,45 @@
import type { APIRoute } from 'astro';
import { env, getBaseUrlFromRequest } from '../../../lib/env';
import { STATE_COOKIE, setTempCookie, cookieAttrs } from '../../../lib/session';
export const GET: APIRoute = async ({ request }) => {
if (!env.OAUTH_CLIENT_ID || !env.OAUTH_AUTHORIZE_URL) {
return new Response('OAuth not configured. Set OAUTH_CLIENT_ID and OAUTH_AUTHORIZE_URL.', { status: 500 });
}
const state = cryptoRandomString();
const base = getBaseUrlFromRequest(request);
const redirectUri = `${base}/api/auth/callback`;
let authUrl: URL;
try {
authUrl = new URL(env.OAUTH_AUTHORIZE_URL!);
} catch {
return new Response('Invalid OAUTH_AUTHORIZE_URL', { status: 500 });
}
authUrl.searchParams.set('client_id', env.OAUTH_CLIENT_ID!);
authUrl.searchParams.set('redirect_uri', redirectUri);
authUrl.searchParams.set('response_type', 'code');
authUrl.searchParams.set('state', state);
const headers = new Headers({ Location: authUrl.toString() });
headers.append('Set-Cookie', setTempCookie(STATE_COOKIE, state, 600));
// also ensure any previous session cookies aren't cached
headers.append('Cache-Control', 'no-store');
return new Response(null, { status: 302, headers });
};
function cryptoRandomString(len = 24) {
const bytes = crypto.getRandomValues(new Uint8Array(len));
return Buffer.from(bytes).toString('base64url');
}
// ensure Web Crypto for Node
import crypto from 'node:crypto';
if (!(globalThis as any).crypto?.getRandomValues) {
(globalThis as any).crypto = {
getRandomValues: (arr: Uint8Array) => (crypto.webcrypto.getRandomValues(arr))
} as any;
}

View File

@ -0,0 +1,9 @@
import type { APIRoute } from 'astro';
import { clearSessionCookie, CSRF_COOKIE, clearCookie } from '../../../lib/session';
export const POST: APIRoute = async () => {
const headers = new Headers();
headers.append('Set-Cookie', clearSessionCookie());
headers.append('Set-Cookie', clearCookie(CSRF_COOKIE));
return new Response(JSON.stringify({ ok: true }), { status: 200, headers });
};

87
src/pages/api/save.ts Normal file
View File

@ -0,0 +1,87 @@
import type { APIRoute } from 'astro';
import { env } from '../../lib/env';
import { verifyCsrfToken } from '../../lib/csrf';
import { parseCookies } from '../../lib/session';
import { z } from 'zod';
const FileSchema = z.object({
path: z.string(),
content: z.string(),
encoding: z.enum(['utf8', 'base64']).default('utf8'),
});
const PayloadSchema = z.object({
message: z.string().min(1).default('Update content'),
files: z.array(FileSchema).min(1),
});
function isAllowedPath(p: string): boolean {
return (
p === 'src/content/events.json' ||
p === 'src/content/gallery.json' ||
p === 'src/content/texts.json' ||
p.startsWith('public/images/')
);
}
export const POST: APIRoute = async ({ request, locals }) => {
const user = (locals as any).user;
if (!user) return new Response('unauthorized', { status: 401 });
const csrf = request.headers.get('x-csrf');
const cookies = parseCookies(request.headers.get('cookie'));
if (!verifyCsrfToken(csrf || cookies['gp_csrf'])) {
return new Response('bad csrf', { status: 403 });
}
let payload: z.infer<typeof PayloadSchema>;
try {
const json = await request.json();
payload = PayloadSchema.parse(json);
} catch (e: any) {
return new Response('invalid payload: ' + (e?.message || e), { status: 400 });
}
if (!env.GITEA_BASE || !env.GITEA_OWNER || !env.GITEA_REPO || !env.GITEA_TOKEN) {
return new Response('server not configured for Gitea', { status: 500 });
}
for (const f of payload.files) {
if (!isAllowedPath(f.path)) {
return new Response('path not allowed: ' + f.path, { status: 400 });
}
}
const results: any[] = [];
for (const f of payload.files) {
const url = `${env.GITEA_BASE}/api/v1/repos/${encodeURIComponent(env.GITEA_OWNER!)}/${encodeURIComponent(env.GITEA_REPO!)}/contents/${encodeURIComponent(f.path)}`;
const body: any = {
content: f.encoding === 'base64' ? f.content : Buffer.from(f.content, 'utf-8').toString('base64'),
message: payload.message,
branch: env.GIT_BRANCH || 'main',
author: {
name: user.displayName || user.username,
email: user.email || `${user.username}@users.noreply.local`,
},
committer: {
name: user.displayName || user.username,
email: user.email || `${user.username}@users.noreply.local`,
}
};
const res = await fetch(url, {
method: 'PUT',
headers: {
Authorization: `token ${env.GITEA_TOKEN}`,
'Content-Type': 'application/json',
},
body: JSON.stringify(body),
});
if (!res.ok) {
const text = await res.text();
return new Response(`Gitea error for ${f.path}: ${res.status} ${text}`, { status: 500 });
}
results.push(await res.json());
}
return new Response(JSON.stringify({ ok: true, results }), { status: 200, headers: { 'Content-Type': 'application/json' } });
};

View File

@ -7,76 +7,8 @@ import Drinks from "../components/Drinks.astro";
import ImageCarousel from "../components/ImageCarousel.astro"; import ImageCarousel from "../components/ImageCarousel.astro";
import Contact from "../components/Contact.astro"; import Contact from "../components/Contact.astro";
import About from "../components/About.astro"; import About from "../components/About.astro";
import events from "../content/events.json";
const events = [ import images from "../content/gallery.json";
{
image: "/images/karaoke.jpg",
title: "Karaoke",
date: "Mittwoch - Samstag",
description: `
Bei uns gibt es Karaoke Mi-Sa!! <br>
Seid ihr eine Gruppe und lieber unter euch? ..unseren 2.Stock kannst du auch mieten ;) <br>
Reserviere am besten gleich per Whatsapp <a href="tel:+41772322770">077 232 27 70</a>
`,
},
{
image: "/images/pub_quiz.jpg",
title: "Pub Quiz",
date: "Jeden Freitag",
description: `
Jeden Freitag findet unser <b>Pub Quiz</b> statt. Gespielt wird tischweise in 3-4 Runden. <br>
Jede Woche gibt es ein anderes Thema. Es geht um Ruhm und Ehre und zusätzlich werden die Sieger der Herzen durch das Publikum gekürt! <3 <br>
Auch Einzelpersonen sind herzlich willkommen! <br>
*zum mitmachen minimum 1 Getränk konsumieren oder 5CHF
`,
},
{
image: "/images/Event3.png",
title: "Karaoke tes",
date: "Mittwoch - Samstag",
description: `
`,
},
{
image: "/images/Event2.png",
title: "Karaoke test",
date: "Mittwoch - Samstag",
description: `
`,
},
{
image: "/images/Event1.png",
title: "Crepes Sucette <br /> Live Music im Gallus Pub!",
date: "Do, 04. September 2025",
description: `
<b>ab 19 Uhr gehts los, bis max. 21.30 Uhr</b> <br>
Kosten? CHF 10 pro Spielgast
Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
`,
},
{
image: "/images/Event4.png",
title: "Kevin McFlannigan <br> Live Music im Gallus Pub!",
date: "Sa, 27. September 2025",
description: `
<b>ab 20:00 Uhr</b> <br>
Eintritt ist Frei / Hutkollekte <br>
Reservieren unter <a href="tel:+41772322770">077 232 27 70</a>
`,
},
];
const images = [
{ src: "/images/Gallery7.png", alt: "Siebtes Bild" },
{ src: "/images/Gallery8.png", alt: "Achtes Bild" },
{ src: "/images/Gallery9.png", alt: "Neuntes Bild" },
{ src: "/images/Gallery6.png", alt: "Sechstes Bild" },
{ src: "/images/Gallery1.png", alt: "Erstes Bild" },
{ src: "/images/Gallery2.png", alt: "Zweites Bild" },
{ src: "/images/Gallery3.png", alt: "Drittes Bild" },
{ src: "/images/Gallery4.png", alt: "Viertes Bild" },
{ src: "/images/Gallery5.png", alt: "Fünftes Bild" },
];
--- ---
<Layout> <Layout>