94 lines
3.5 KiB
TypeScript
94 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import styles from "./CalendarFeedPanel.module.css";
|
|
|
|
export function CalendarFeedPanel({ initiallyConfigured }: { initiallyConfigured: boolean }) {
|
|
const [configured, setConfigured] = useState(initiallyConfigured);
|
|
const [loading, setLoading] = useState(false);
|
|
const [url, setUrl] = useState<string | null>(null);
|
|
const [copied, setCopied] = useState(false);
|
|
const [error, setError] = useState<string | null>(null);
|
|
|
|
async function generate() {
|
|
setLoading(true);
|
|
setError(null);
|
|
setCopied(false);
|
|
try {
|
|
const res = await fetch("/api/admin/calendar-feed/regenerate", { method: "POST", credentials: "include" });
|
|
const data = await res.json().catch(() => ({}));
|
|
if (!res.ok) {
|
|
setError(data.error || "Der Kalender-Link konnte nicht erzeugt werden.");
|
|
return;
|
|
}
|
|
setUrl(data.url);
|
|
setConfigured(true);
|
|
} catch {
|
|
setError("Verbindung fehlgeschlagen.");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function copy() {
|
|
if (!url) return;
|
|
try {
|
|
await navigator.clipboard.writeText(url);
|
|
setCopied(true);
|
|
} catch {
|
|
// Clipboard API can be unavailable (e.g. insecure context) - the
|
|
// input is still selectable/copyable by hand in that case.
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={styles.panel}>
|
|
<h2 className={styles.heading}>Kalender synchronisieren</h2>
|
|
<p className={styles.hint}>
|
|
Abonniere deinen persönlichen Kalender in Apple Kalender, Google Kalender, Outlook, Thunderbird oder einer
|
|
anderen iCalendar-kompatiblen App. Der Link enthält ein geheimes Zugriffstoken - teile ihn nicht.
|
|
</p>
|
|
|
|
{!url && (
|
|
<p className={styles.status}>
|
|
{configured ? "Ein Kalender-Link ist eingerichtet." : "Es ist noch kein Kalender-Link eingerichtet."}
|
|
</p>
|
|
)}
|
|
|
|
{!url && (
|
|
<button type="button" className={styles.button} onClick={generate} disabled={loading}>
|
|
{loading ? "Wird erzeugt …" : configured ? "Kalender-Link neu generieren" : "Kalender-Link generieren"}
|
|
</button>
|
|
)}
|
|
|
|
{error && <p className={styles.error}>{error}</p>}
|
|
|
|
{url && (
|
|
<div className={styles.result}>
|
|
<p className={styles.resultWarning}>Wird nur jetzt einmal angezeigt - bitte gleich kopieren.</p>
|
|
<div className={styles.urlRow}>
|
|
<input className={styles.urlInput} type="text" readOnly value={url} onFocus={(e) => e.currentTarget.select()} />
|
|
<button type="button" className={styles.secondaryButton} onClick={copy}>
|
|
Kopieren
|
|
</button>
|
|
</div>
|
|
{copied && <p className={styles.copied}>In die Zwischenablage kopiert.</p>}
|
|
<button type="button" className={styles.secondaryButton} style={{ marginTop: 12 }} onClick={generate} disabled={loading}>
|
|
{loading ? "Wird erzeugt …" : "Kalender-Link neu generieren"}
|
|
</button>
|
|
</div>
|
|
)}
|
|
|
|
<p className={styles.instructions}>
|
|
<strong>Apple Kalender:</strong> Ablage → Neues Kalenderabonnement → Link einfügen.
|
|
<br />
|
|
<strong>Google Kalender:</strong> Weitere Kalender „+“ → Per URL → Link einfügen.
|
|
<br />
|
|
<strong>Outlook:</strong> Kalender hinzufügen → Aus dem Internet abonnieren → Link einfügen.
|
|
<br />
|
|
<strong>Thunderbird:</strong> Kalender → Neuer Kalender → Im Netzwerk → Link einfügen.
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|