Initial implementation: Logbuch Sternwarte Welzheim

Vollständige Next.js 16 Webanwendung als Logbuch für die Sternwarte Welzheim. 4 Kuppeln (West/Ost/Süd/Pluto), BEO-basierte Authentifizierung mit erzwungenem Passwort-Wechsel beim Erstlogin, MySQL-Backend, Docker-Deployment. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-04-27 17:11:27 +02:00
parent f0a86627e5
commit 4e53a7a5cd
29 changed files with 1827 additions and 97 deletions
--- a/app/MainClient.tsx
+++ b/app/MainClient.tsx
@@ -0,0 +1,135 @@
+'use client';
+
+import { useState } from 'react';
+import { KUPPELN } from '@/types/logbuch';
+import type { Kuppel, LogbuchEintrag } from '@/types/logbuch';
+import LogbuchForm from '@/components/LogbuchForm';
+import LogbuchList from '@/components/LogbuchList';
+import packageJson from '@/package.json';
+
+interface Props {
+  kuerzel: string;
+  beoId: number;
+  beoName: string;
+}
+
+export default function MainClient({ kuerzel, beoId, beoName }: Props) {
+  const [activeKuppel, setActiveKuppel] = useState<Kuppel>('West');
+  const [activeTab, setActiveTab] = useState<'eingabe' | 'liste'>('eingabe');
+  const [refreshKey, setRefreshKey] = useState(0);
+  const [editEntry, setEditEntry] = useState<LogbuchEintrag | null>(null);
+
+  const version = packageJson.version;
+  const buildDate =
+    process.env.NEXT_PUBLIC_BUILD_DATE ||
+    new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+
+  const currentUserBeo = { ID: beoId, Kuerzel: kuerzel, Name: beoName };
+
+  function handleSaved() {
+    setRefreshKey((k) => k + 1);
+    setEditEntry(null);
+    if (editEntry) setActiveTab('liste');
+  }
+
+  function handleEdit(entry: LogbuchEintrag) {
+    setEditEntry(entry);
+    setActiveTab('eingabe');
+  }
+
+  async function handleLogout() {
+    await fetch('/api/logout', { method: 'POST' });
+    window.location.href = '/login';
+  }
+
+  return (
+    <div className="min-h-screen bg-white py-4 px-4">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold">Logbuch — Sternwarte Welzheim</h1>
+          <div className="flex items-center gap-4">
+            <span className="text-sm text-gray-600">
+              {kuerzel} — {beoName}
+            </span>
+            <button
+              onClick={handleLogout}
+              className="text-sm px-3 py-1.5 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700"
+            >
+              Abmelden
+            </button>
+          </div>
+        </div>
+
+        {/* Kuppel-Tabs */}
+        <div className="flex gap-1 mb-4 border-b-2 border-gray-300">
+          {KUPPELN.map((k) => (
+            <button
+              key={k}
+              onClick={() => { setActiveKuppel(k); setEditEntry(null); }}
+              className={`px-5 py-2 text-sm font-medium rounded-t-lg transition-colors ${
+                activeKuppel === k
+                  ? 'bg-[#85B7D7] text-black border-2 border-b-0 border-gray-300'
+                  : 'bg-gray-100 text-gray-600 hover:bg-gray-200'
+              }`}
+            >
+              Kuppel {k}
+            </button>
+          ))}
+        </div>
+
+        {/* Eingabe/Liste-Tabs */}
+        <div className="flex gap-1 mb-6 border-b border-gray-200">
+          {(['eingabe', 'liste'] as const).map((tab) => (
+            <button
+              key={tab}
+              onClick={() => { setActiveTab(tab); if (tab === 'eingabe' && editEntry) setEditEntry(null); }}
+              className={`px-4 py-2 text-sm font-medium transition-colors border-b-2 -mb-px ${
+                activeTab === tab
+                  ? 'border-[#85B7D7] text-gray-900'
+                  : 'border-transparent text-gray-500 hover:text-gray-700'
+              }`}
+            >
+              {tab === 'eingabe' ? 'Eingabe' : 'Liste'}
+            </button>
+          ))}
+        </div>
+
+        {activeTab === 'eingabe' && (
+          <div>
+            {editEntry && (
+              <div className="mb-4 text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2">
+                Eintrag bearbeiten (ID {editEntry.ID})
+              </div>
+            )}
+            <LogbuchForm
+              key={`${activeKuppel}-${editEntry?.ID ?? 'new'}`}
+              kuppel={activeKuppel}
+              currentUserBeo={currentUserBeo}
+              editEntry={editEntry}
+              onSaved={handleSaved}
+            />
+          </div>
+        )}
+
+        {activeTab === 'liste' && (
+          <LogbuchList
+            kuppel={activeKuppel}
+            refreshKey={refreshKey}
+            onEdit={handleEdit}
+          />
+        )}
+
+        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+          <div>
+            <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
+              mailto:rxf@gmx.de
+            </a>
+          </div>
+          <div className="text-right">
+            Version {version} — {buildDate}
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}
--- a/app/api/beos/route.ts
+++ b/app/api/beos/route.ts
@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+import { query } from '@/lib/db';
+
+export async function GET() {
+  try {
+    const rows = await query('SELECT ID, Kuerzel, Name FROM beos ORDER BY Name ASC');
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('GET /api/beos:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
--- a/app/api/logbuch/[id]/route.ts
+++ b/app/api/logbuch/[id]/route.ts
@@ -0,0 +1,79 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { query, getPool } from '@/lib/db';
+import { getSession } from '@/lib/session';
+import type { SelectedObjekt } from '@/types/logbuch';
+
+export async function PUT(request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const { id } = await params;
+  const logbuchId = parseInt(id);
+
+  try {
+    const body = await request.json();
+    const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
+
+    await getPool().execute(
+      `UPDATE logbuch SET Kuppel=?, ArtFuehrung=?, Beginn=?, Ende=?, Besucher=?,
+       Bemerkungen=?, WetterTemp=?, WetterFeuchte=?, WetterDruck=?
+       WHERE ID=?`,
+      [
+        Kuppel, ArtFuehrung, Beginn, Ende,
+        Besucher ?? 0,
+        Bemerkungen?.slice(0, 500) || null,
+        Wetter?.temp ?? null,
+        Wetter?.feuchte ?? null,
+        Wetter?.druck ?? null,
+        logbuchId,
+      ]
+    );
+
+    await query('DELETE FROM logbuch_beos WHERE LogbuchID = ?', [logbuchId]);
+    await query('DELETE FROM logbuch_objekte WHERE LogbuchID = ?', [logbuchId]);
+
+    for (const beoId of (beoIds as number[]) || []) {
+      await query('INSERT INTO logbuch_beos (LogbuchID, BeoID) VALUES (?, ?)', [logbuchId, beoId]);
+    }
+
+    for (const obj of (objekte as SelectedObjekt[]) || []) {
+      let objektId = obj.ID;
+      if (!objektId) {
+        const existing = await query('SELECT ID FROM objekte WHERE Name = ?', [obj.Name]) as { ID: number }[];
+        if (existing[0]) {
+          objektId = existing[0].ID;
+        } else {
+          const [ins] = await getPool().execute(
+            'INSERT INTO objekte (Name) VALUES (?)', [obj.Name]
+          ) as [{ insertId: number }, unknown];
+          objektId = ins.insertId;
+        }
+      }
+      await query('UPDATE objekte SET LastUsed = NOW() WHERE ID = ?', [objektId]);
+      await query(
+        'INSERT INTO logbuch_objekte (LogbuchID, ObjektID, ObjektName) VALUES (?, ?, ?)',
+        [logbuchId, objektId, obj.Name]
+      );
+    }
+
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('PUT /api/logbuch/[id]:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
+
+export async function DELETE(_request: NextRequest, { params }: { params: Promise<{ id: string }> }) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  const { id } = await params;
+
+  try {
+    await query('DELETE FROM logbuch WHERE ID = ?', [parseInt(id)]);
+    return NextResponse.json({ ok: true });
+  } catch (error) {
+    console.error('DELETE /api/logbuch/[id]:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
--- a/app/api/logbuch/route.ts
+++ b/app/api/logbuch/route.ts
@@ -0,0 +1,92 @@
+import { NextRequest, NextResponse } from 'next/server';
+import { query } from '@/lib/db';
+import { getSession } from '@/lib/session';
+import type { SelectedObjekt } from '@/types/logbuch';
+
+export async function GET(request: NextRequest) {
+  const { searchParams } = new URL(request.url);
+  const kuppel = searchParams.get('kuppel') || 'West';
+  const limit = Math.min(parseInt(searchParams.get('limit') || '20'), 100);
+
+  try {
+    const rows = await query(
+      `SELECT
+        l.ID, l.Kuppel, l.ArtFuehrung,
+        DATE_FORMAT(l.Beginn, '%Y-%m-%dT%H:%i') AS Beginn,
+        DATE_FORMAT(l.Ende, '%Y-%m-%dT%H:%i') AS Ende,
+        l.Besucher, l.Bemerkungen,
+        l.WetterTemp, l.WetterFeuchte, l.WetterDruck,
+        l.created_by, l.created_at,
+        GROUP_CONCAT(DISTINCT b.Kuerzel ORDER BY b.Kuerzel SEPARATOR ', ') AS BEOs,
+        GROUP_CONCAT(DISTINCT lo.ObjektName ORDER BY lo.ObjektName SEPARATOR ', ') AS Objekte
+      FROM logbuch l
+      LEFT JOIN logbuch_beos lb ON lb.LogbuchID = l.ID
+      LEFT JOIN beos b ON b.ID = lb.BeoID
+      LEFT JOIN logbuch_objekte lo ON lo.LogbuchID = l.ID
+      WHERE l.Kuppel = ?
+      GROUP BY l.ID
+      ORDER BY l.Beginn DESC
+      LIMIT ?`,
+      [kuppel, limit]
+    );
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('GET /api/logbuch:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
+
+export async function POST(request: NextRequest) {
+  const session = await getSession();
+  if (!session) return NextResponse.json({ error: 'Nicht angemeldet' }, { status: 401 });
+
+  try {
+    const body = await request.json();
+    const { Kuppel, ArtFuehrung, Beginn, Ende, Besucher, beoIds, objekte, Bemerkungen, Wetter } = body;
+
+    const [result] = await (await import('@/lib/db')).getPool().execute(
+      `INSERT INTO logbuch (Kuppel, ArtFuehrung, Beginn, Ende, Besucher, Bemerkungen, WetterTemp, WetterFeuchte, WetterDruck, created_by)
+       VALUES (?, ?, ?, ?, ?, ?, ?, ?, ?, ?)`,
+      [
+        Kuppel, ArtFuehrung, Beginn, Ende,
+        Besucher ?? 0,
+        Bemerkungen?.slice(0, 500) || null,
+        Wetter?.temp ?? null,
+        Wetter?.feuchte ?? null,
+        Wetter?.druck ?? null,
+        session.beoId,
+      ]
+    ) as [{ insertId: number }, unknown];
+
+    const logbuchId = result.insertId;
+
+    for (const beoId of (beoIds as number[]) || []) {
+      await query('INSERT INTO logbuch_beos (LogbuchID, BeoID) VALUES (?, ?)', [logbuchId, beoId]);
+    }
+
+    for (const obj of (objekte as SelectedObjekt[]) || []) {
+      let objektId = obj.ID;
+      if (!objektId) {
+        const existing = await query('SELECT ID FROM objekte WHERE Name = ?', [obj.Name]) as { ID: number }[];
+        if (existing[0]) {
+          objektId = existing[0].ID;
+        } else {
+          const [ins] = await (await import('@/lib/db')).getPool().execute(
+            'INSERT INTO objekte (Name) VALUES (?)', [obj.Name]
+          ) as [{ insertId: number }, unknown];
+          objektId = ins.insertId;
+        }
+      }
+      await query('UPDATE objekte SET LastUsed = NOW() WHERE ID = ?', [objektId]);
+      await query(
+        'INSERT INTO logbuch_objekte (LogbuchID, ObjektID, ObjektName) VALUES (?, ?, ?)',
+        [logbuchId, objektId, obj.Name]
+      );
+    }
+
+    return NextResponse.json({ id: logbuchId }, { status: 201 });
+  } catch (error) {
+    console.error('POST /api/logbuch:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
--- a/app/api/logout/route.ts
+++ b/app/api/logout/route.ts
@@ -0,0 +1,7 @@
+import { NextResponse } from 'next/server';
+import { deleteSession } from '@/lib/session';
+
+export async function POST() {
+  await deleteSession();
+  return NextResponse.json({ ok: true });
+}
--- a/app/api/objekte/route.ts
+++ b/app/api/objekte/route.ts
@@ -0,0 +1,12 @@
+import { NextResponse } from 'next/server';
+import { query } from '@/lib/db';
+
+export async function GET() {
+  try {
+    const rows = await query('SELECT ID, Name FROM objekte ORDER BY LastUsed DESC LIMIT 100');
+    return NextResponse.json(rows);
+  } catch (error) {
+    console.error('GET /api/objekte:', error);
+    return NextResponse.json({ error: 'Datenbankfehler' }, { status: 500 });
+  }
+}
--- a/app/api/wetter/route.ts
+++ b/app/api/wetter/route.ts
@@ -0,0 +1,8 @@
+import { NextResponse } from 'next/server';
+
+export async function GET() {
+  const temp = Math.round((8 + Math.random() * 15) * 10) / 10;
+  const feuchte = Math.round((40 + Math.random() * 50) * 10) / 10;
+  const druck = Math.round((990 + Math.random() * 30) * 10) / 10;
+  return NextResponse.json({ temp, feuchte, druck });
+}
--- a/app/change-password/actions.ts
+++ b/app/change-password/actions.ts
@@ -0,0 +1,41 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+import { getSession, createSession } from '@/lib/session';
+import { hashPassword } from '@/lib/auth';
+import { query } from '@/lib/db';
+
+export async function changePassword(
+  _prevState: { error: string } | undefined,
+  formData: FormData
+): Promise<{ error: string }> {
+  const session = await getSession();
+  if (!session) redirect('/login');
+
+  const newPassword = formData.get('newPassword') as string;
+  const confirmPassword = formData.get('confirmPassword') as string;
+
+  if (!newPassword || newPassword.length < 6) {
+    return { error: 'Das Passwort muss mindestens 6 Zeichen lang sein.' };
+  }
+
+  if (newPassword !== confirmPassword) {
+    return { error: 'Die Passwörter stimmen nicht überein.' };
+  }
+
+  const hashed = await hashPassword(newPassword);
+  await query(
+    'UPDATE beos SET Passwort = ?, MustChangePassword = 0 WHERE ID = ?',
+    [hashed, session.beoId]
+  );
+
+  await createSession({
+    kuerzel: session.kuerzel,
+    beoId: session.beoId,
+    beoName: session.beoName,
+    mustChangePassword: false,
+    isAuthenticated: true,
+  });
+
+  redirect('/');
+}
--- a/app/change-password/page.tsx
+++ b/app/change-password/page.tsx
@@ -0,0 +1,112 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+import { changePassword } from './actions';
+
+export default function ChangePasswordPage() {
+  const [state, action, isPending] = useActionState(changePassword, undefined);
+  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
+
+  return (
+    <div className="min-h-screen bg-white py-4 px-4">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
+        <h1 className="text-3xl font-bold mb-6">Logbuch — Sternwarte Welzheim</h1>
+
+        <div className="flex justify-center py-10">
+          <div className="w-full max-w-sm bg-white border border-gray-300 rounded-xl shadow-md p-8">
+            <h2 className="text-xl font-semibold text-gray-900 mb-2 text-center">Passwort ändern</h2>
+            <p className="text-sm text-amber-700 bg-amber-50 border border-amber-300 rounded-lg px-3 py-2 mb-6 text-center">
+              Bitte wählen Sie ein neues Passwort, bevor Sie fortfahren.
+            </p>
+
+            <form action={action} className="space-y-5">
+              <div>
+                <label htmlFor="newPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                  Neues Passwort
+                </label>
+                <div className="relative">
+                  <input
+                    id="newPassword"
+                    name="newPassword"
+                    type={showNew ? 'text' : 'password'}
+                    required
+                    minLength={6}
+                    className="w-full px-3 py-2 pr-10 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
+                    placeholder="mind. 6 Zeichen"
+                    disabled={isPending}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowNew((v) => !v)}
+                    tabIndex={-1}
+                    className="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-800"
+                  >
+                    {showNew ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 4.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              <div>
+                <label htmlFor="confirmPassword" className="block text-sm font-medium text-gray-700 mb-1">
+                  Passwort bestätigen
+                </label>
+                <div className="relative">
+                  <input
+                    id="confirmPassword"
+                    name="confirmPassword"
+                    type={showConfirm ? 'text' : 'password'}
+                    required
+                    className="w-full px-3 py-2 pr-10 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
+                    placeholder="Passwort wiederholen"
+                    disabled={isPending}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowConfirm((v) => !v)}
+                    tabIndex={-1}
+                    className="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-800"
+                  >
+                    {showConfirm ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 4.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {state?.error && (
+                <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
+                  {state.error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isPending}
+                className="w-full py-2 px-4 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+              >
+                {isPending ? 'Wird gespeichert...' : 'Passwort speichern'}
+              </button>
+            </form>
+          </div>
+        </div>
+      </main>
+    </div>
+  );
+}
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -1,34 +1,15 @@
-import type { Metadata } from "next";
-import { Geist, Geist_Mono } from "next/font/google";
-import "./globals.css";
-
-const geistSans = Geist({
-  variable: "--font-geist-sans",
-  subsets: ["latin"],
-});
-
-const geistMono = Geist_Mono({
-  variable: "--font-geist-mono",
-  subsets: ["latin"],
-});
+import type { Metadata } from 'next';
+import './globals.css';

 export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
+  title: 'Logbuch — Sternwarte Welzheim',
+  description: 'Logbuch für die Sternwarte Welzheim',
 };

-export default function RootLayout({
-  children,
-}: Readonly<{
-  children: React.ReactNode;
-}>) {
+export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
-    <html lang="en">
-      <body
-        className={`${geistSans.variable} ${geistMono.variable} antialiased`}
-      >
-        {children}
-      </body>
+    <html lang="de">
+      <body className="antialiased">{children}</body>
    </html>
  );
 }
--- a/app/login/actions.ts
+++ b/app/login/actions.ts
@@ -0,0 +1,37 @@
+'use server';
+
+import { redirect } from 'next/navigation';
+import { verifyCredentials } from '@/lib/auth';
+import { createSession } from '@/lib/session';
+
+export async function login(
+  _prevState: { error: string } | undefined,
+  formData: FormData
+): Promise<{ error: string }> {
+  const kuerzel = (formData.get('username') as string)?.trim();
+  const password = formData.get('password') as string;
+
+  if (!kuerzel || !password) {
+    return { error: 'Bitte Kürzel und Passwort eingeben.' };
+  }
+
+  const result = await verifyCredentials(kuerzel, password);
+
+  if (!result || !result.valid) {
+    return { error: 'Ungültiges Kürzel oder Passwort.' };
+  }
+
+  await createSession({
+    kuerzel: result.beo.Kuerzel,
+    beoId: result.beo.ID,
+    beoName: result.beo.Name,
+    mustChangePassword: result.beo.MustChangePassword === 1,
+    isAuthenticated: true,
+  });
+
+  if (result.beo.MustChangePassword === 1) {
+    redirect('/change-password');
+  }
+
+  redirect('/');
+}
--- a/app/login/page.tsx
+++ b/app/login/page.tsx
@@ -0,0 +1,110 @@
+'use client';
+
+import { useActionState, useState } from 'react';
+import { login } from './actions';
+import packageJson from '@/package.json';
+
+export default function LoginPage() {
+  const [state, loginAction, isPending] = useActionState(login, undefined);
+  const [showPassword, setShowPassword] = useState(false);
+
+  const version = packageJson.version;
+  const buildDate =
+    process.env.NEXT_PUBLIC_BUILD_DATE ||
+    new Date().toLocaleDateString('de-DE', { day: '2-digit', month: '2-digit', year: 'numeric' });
+
+  return (
+    <div className="min-h-screen bg-white py-4 px-4">
+      <main className="max-w-6xl mx-auto border-2 border-black rounded-lg p-6 bg-[#FFFFDD]">
+        <div className="flex justify-between items-center mb-6">
+          <h1 className="text-3xl font-bold">Logbuch — Sternwarte Welzheim</h1>
+        </div>
+
+        <div className="flex justify-center py-10">
+          <div className="w-full max-w-sm bg-white border border-gray-300 rounded-xl shadow-md p-8">
+            <h2 className="text-xl font-semibold text-gray-900 mb-6 text-center">Anmeldung</h2>
+
+            <form action={loginAction} className="space-y-5">
+              <div>
+                <label htmlFor="username" className="block text-sm font-medium text-gray-700 mb-1">
+                  Kürzel
+                </label>
+                <input
+                  id="username"
+                  name="username"
+                  type="text"
+                  required
+                  autoComplete="off"
+                  className="w-full px-3 py-2 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
+                  placeholder="Kürzel"
+                  disabled={isPending}
+                />
+              </div>
+
+              <div>
+                <label htmlFor="password" className="block text-sm font-medium text-gray-700 mb-1">
+                  Passwort
+                </label>
+                <div className="relative">
+                  <input
+                    id="password"
+                    name="password"
+                    type={showPassword ? 'text' : 'password'}
+                    required
+                    autoComplete="new-password"
+                    className="w-full px-3 py-2 pr-10 border-2 border-gray-400 rounded-lg bg-white text-gray-900 focus:border-blue-500 focus:outline-none text-sm"
+                    placeholder="Passwort"
+                    disabled={isPending}
+                  />
+                  <button
+                    type="button"
+                    onClick={() => setShowPassword((v) => !v)}
+                    tabIndex={-1}
+                    aria-label={showPassword ? 'Passwort verbergen' : 'Passwort anzeigen'}
+                    className="absolute inset-y-0 right-0 px-3 flex items-center text-gray-500 hover:text-gray-800"
+                  >
+                    {showPassword ? (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 4.411m0 0L21 21" />
+                      </svg>
+                    ) : (
+                      <svg xmlns="http://www.w3.org/2000/svg" className="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
+                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
+                      </svg>
+                    )}
+                  </button>
+                </div>
+              </div>
+
+              {state?.error && (
+                <div className="bg-red-50 border border-red-300 text-red-700 px-3 py-2 rounded-lg text-sm">
+                  {state.error}
+                </div>
+              )}
+
+              <button
+                type="submit"
+                disabled={isPending}
+                className="w-full py-2 px-4 bg-[#85B7D7] hover:bg-[#6a9fc5] text-black font-medium rounded-lg transition-colors disabled:opacity-50 disabled:cursor-not-allowed text-sm"
+              >
+                {isPending ? 'Anmeldung läuft...' : 'Anmelden'}
+              </button>
+            </form>
+          </div>
+        </div>
+
+        <footer className="mt-8 flex justify-between items-center text-sm text-gray-600 px-4">
+          <div>
+            <a href="mailto:rxf@gmx.de" className="text-blue-600 hover:underline">
+              mailto:rxf@gmx.de
+            </a>
+          </div>
+          <div className="text-right">
+            Version {version} — {buildDate}
+          </div>
+        </footer>
+      </main>
+    </div>
+  );
+}
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -1,65 +1,16 @@
-import Image from "next/image";
+import { redirect } from 'next/navigation';
+import { getSession } from '@/lib/session';
+import MainClient from './MainClient';
+
+export default async function HomePage() {
+  const session = await getSession();
+  if (!session) redirect('/login');

-export default function Home() {
  return (
-    <div className="flex min-h-screen items-center justify-center bg-zinc-50 font-sans dark:bg-black">
-      <main className="flex min-h-screen w-full max-w-3xl flex-col items-center justify-between py-32 px-16 bg-white dark:bg-black sm:items-start">
-        <Image
-          className="dark:invert"
-          src="/next.svg"
-          alt="Next.js logo"
-          width={100}
-          height={20}
-          priority
-        />
-        <div className="flex flex-col items-center gap-6 text-center sm:items-start sm:text-left">
-          <h1 className="max-w-xs text-3xl font-semibold leading-10 tracking-tight text-black dark:text-zinc-50">
-            To get started, edit the page.tsx file.
-          </h1>
-          <p className="max-w-md text-lg leading-8 text-zinc-600 dark:text-zinc-400">
-            Looking for a starting point or more instructions? Head over to{" "}
-            <a
-              href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Templates
-            </a>{" "}
-            or the{" "}
-            <a
-              href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-              className="font-medium text-zinc-950 dark:text-zinc-50"
-            >
-              Learning
-            </a>{" "}
-            center.
-          </p>
-        </div>
-        <div className="flex flex-col gap-4 text-base font-medium sm:flex-row">
-          <a
-            className="flex h-12 w-full items-center justify-center gap-2 rounded-full bg-foreground px-5 text-background transition-colors hover:bg-[#383838] dark:hover:bg-[#ccc] md:w-[158px]"
-            href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <Image
-              className="dark:invert"
-              src="/vercel.svg"
-              alt="Vercel logomark"
-              width={16}
-              height={16}
-            />
-            Deploy Now
-          </a>
-          <a
-            className="flex h-12 w-full items-center justify-center rounded-full border border-solid border-black/[.08] px-5 transition-colors hover:border-transparent hover:bg-black/[.04] dark:border-white/[.145] dark:hover:bg-[#1a1a1a] md:w-[158px]"
-            href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Documentation
-          </a>
-        </div>
-      </main>
-    </div>
+    <MainClient
+      kuerzel={session.kuerzel}
+      beoId={session.beoId}
+      beoName={session.beoName}
+    />
  );
 }