Aktueller Stand
This commit is contained in:
327
app/settings/page.tsx
Normal file
327
app/settings/page.tsx
Normal file
@@ -0,0 +1,327 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { signOut, useSession } from "next-auth/react";
|
||||
|
||||
export default function SettingsPage() {
|
||||
const { data } = useSession();
|
||||
const [viewToken, setViewToken] = useState<string | null>(null);
|
||||
const [viewId, setViewId] = useState<string | null>(null);
|
||||
const [subscribedCategories, setSubscribedCategories] = useState<Set<string>>(new Set());
|
||||
const [allCategories, setAllCategories] = useState<{ id: string; name: string }[]>([]);
|
||||
const [categoryError, setCategoryError] = useState<string | null>(null);
|
||||
const [categoryStatus, setCategoryStatus] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [status, setStatus] = useState<string | null>(null);
|
||||
const [profileError, setProfileError] = useState<string | null>(null);
|
||||
const [profileStatus, setProfileStatus] = useState<string | null>(null);
|
||||
const [theme, setTheme] = useState<"light" | "dark">("light");
|
||||
const [copyStatus, setCopyStatus] = useState<"success" | "error" | null>(null);
|
||||
|
||||
const loadView = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/views/default");
|
||||
if (!response.ok) return;
|
||||
const payload = await response.json();
|
||||
setViewToken(payload.token);
|
||||
setViewId(payload.id);
|
||||
const ids = new Set<string>(
|
||||
(payload.categories || []).map((item: { categoryId: string }) => item.categoryId)
|
||||
);
|
||||
setSubscribedCategories(ids);
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
const loadCategories = async () => {
|
||||
try {
|
||||
const response = await fetch("/api/categories");
|
||||
if (!response.ok) return;
|
||||
setAllCategories(await response.json());
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
if (data?.user) {
|
||||
loadView();
|
||||
loadCategories();
|
||||
}
|
||||
}, [data?.user]);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window === "undefined") return;
|
||||
const saved = window.localStorage.getItem("theme");
|
||||
const next = saved === "dark" ? "dark" : "light";
|
||||
setTheme(next);
|
||||
document.documentElement.dataset.theme = next;
|
||||
}, []);
|
||||
|
||||
const rotateToken = async () => {
|
||||
setError(null);
|
||||
setStatus(null);
|
||||
setCopyStatus(null);
|
||||
const response = await fetch("/api/views/default/rotate", { method: "POST" });
|
||||
if (!response.ok) {
|
||||
const payload = await response.json();
|
||||
setError(payload.error || "Token konnte nicht erneuert werden.");
|
||||
return;
|
||||
}
|
||||
const payload = await response.json();
|
||||
setViewToken(payload.token);
|
||||
setStatus("Neuer iCal-Link erstellt.");
|
||||
};
|
||||
|
||||
const updateProfile = async (event: React.FormEvent<HTMLFormElement>) => {
|
||||
event.preventDefault();
|
||||
setProfileError(null);
|
||||
setProfileStatus(null);
|
||||
const formData = new FormData(event.currentTarget);
|
||||
const payload = {
|
||||
currentPassword: formData.get("currentPassword"),
|
||||
newEmail: formData.get("newEmail"),
|
||||
newPassword: formData.get("newPassword")
|
||||
};
|
||||
|
||||
const response = await fetch("/api/profile", {
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(payload)
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const data = await response.json();
|
||||
setProfileError(data.error || "Profil konnte nicht aktualisiert werden.");
|
||||
return;
|
||||
}
|
||||
|
||||
const dataRes = await response.json();
|
||||
setProfileStatus("Profil aktualisiert.");
|
||||
if (dataRes.changedEmail || dataRes.changedPassword) {
|
||||
setProfileStatus("Profil aktualisiert. Bitte erneut anmelden.");
|
||||
await signOut({ callbackUrl: "/login" });
|
||||
}
|
||||
};
|
||||
|
||||
const baseUrl = typeof window === "undefined" ? "" : window.location.origin;
|
||||
const icalUrl = viewToken ? `${baseUrl}/api/ical/${viewToken}` : "";
|
||||
|
||||
const applyTheme = (next: "light" | "dark") => {
|
||||
setTheme(next);
|
||||
if (typeof window !== "undefined") {
|
||||
window.localStorage.setItem("theme", next);
|
||||
document.documentElement.dataset.theme = next;
|
||||
}
|
||||
};
|
||||
|
||||
const copyIcalUrl = async () => {
|
||||
if (!icalUrl) return;
|
||||
setCopyStatus(null);
|
||||
try {
|
||||
if (navigator.clipboard?.writeText) {
|
||||
await navigator.clipboard.writeText(icalUrl);
|
||||
} else {
|
||||
const textarea = document.createElement("textarea");
|
||||
textarea.value = icalUrl;
|
||||
textarea.setAttribute("readonly", "true");
|
||||
textarea.style.position = "absolute";
|
||||
textarea.style.left = "-9999px";
|
||||
document.body.appendChild(textarea);
|
||||
textarea.select();
|
||||
document.execCommand("copy");
|
||||
document.body.removeChild(textarea);
|
||||
}
|
||||
setCopyStatus("success");
|
||||
} catch {
|
||||
setCopyStatus("error");
|
||||
}
|
||||
window.setTimeout(() => setCopyStatus(null), 2500);
|
||||
};
|
||||
|
||||
const toggleCategory = async (categoryId: string) => {
|
||||
if (!viewId) return;
|
||||
setCategoryError(null);
|
||||
setCategoryStatus(null);
|
||||
const isSubscribed = subscribedCategories.has(categoryId);
|
||||
const response = await fetch(`/api/views/${viewId}/categories`, {
|
||||
method: isSubscribed ? "DELETE" : "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ categoryId })
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const payload = await response.json();
|
||||
setCategoryError(payload.error || "Kategorien konnten nicht aktualisiert werden.");
|
||||
return;
|
||||
}
|
||||
|
||||
const next = new Set(subscribedCategories);
|
||||
if (isSubscribed) {
|
||||
next.delete(categoryId);
|
||||
setCategoryStatus("Kategorie entfernt.");
|
||||
} else {
|
||||
next.add(categoryId);
|
||||
setCategoryStatus("Kategorie abonniert.");
|
||||
}
|
||||
setSubscribedCategories(next);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<section className="card space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">Profil</p>
|
||||
<h1 className="text-2xl font-semibold">Einstellungen</h1>
|
||||
</div>
|
||||
<form onSubmit={updateProfile} className="grid gap-3 md:grid-cols-2">
|
||||
<input
|
||||
name="newEmail"
|
||||
type="email"
|
||||
placeholder={`Neue E-Mail (aktuell: ${data?.user?.email || ""})`}
|
||||
className="rounded-xl border border-slate-300 px-3 py-2 md:col-span-2"
|
||||
/>
|
||||
<input
|
||||
name="newPassword"
|
||||
type="password"
|
||||
placeholder="Neues Passwort"
|
||||
className="rounded-xl border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<input
|
||||
name="currentPassword"
|
||||
type="password"
|
||||
placeholder="Aktuelles Passwort (Pflicht)"
|
||||
required
|
||||
className="rounded-xl border border-slate-300 px-3 py-2"
|
||||
/>
|
||||
<button type="submit" className="btn-accent md:col-span-2">
|
||||
Speichern
|
||||
</button>
|
||||
</form>
|
||||
{profileStatus && (
|
||||
<p className="text-sm text-emerald-600">{profileStatus}</p>
|
||||
)}
|
||||
{profileError && <p className="text-sm text-red-600">{profileError}</p>}
|
||||
</section>
|
||||
|
||||
<section className="card space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
||||
Darstellung
|
||||
</p>
|
||||
<h2 className="text-lg font-semibold">Theme</h2>
|
||||
</div>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyTheme("light")}
|
||||
className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
|
||||
theme === "light"
|
||||
? "border-slate-900 bg-slate-900 text-white"
|
||||
: "border-slate-200 text-slate-700 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
Hell
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => applyTheme("dark")}
|
||||
className={`rounded-full border px-4 py-2 text-sm font-semibold transition ${
|
||||
theme === "dark"
|
||||
? "border-slate-900 bg-slate-900 text-white"
|
||||
: "border-slate-200 text-slate-700 hover:bg-slate-100"
|
||||
}`}
|
||||
>
|
||||
Dunkel
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section className="card space-y-3">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">iCal</p>
|
||||
<h2 className="text-lg font-semibold">Persönlicher Kalenderlink</h2>
|
||||
</div>
|
||||
<p className="text-sm text-slate-600">
|
||||
Dein Link kann in externen Kalender-Apps abonniert werden.
|
||||
</p>
|
||||
{viewToken ? (
|
||||
<div className="rounded-xl border border-slate-200 bg-slate-50 p-3 text-sm">
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<p className="font-medium">iCal URL</p>
|
||||
<div className="relative">
|
||||
<button
|
||||
type="button"
|
||||
onClick={copyIcalUrl}
|
||||
aria-label="iCal-Link kopieren"
|
||||
className="rounded-full border border-slate-200 p-2 text-slate-600 transition hover:bg-slate-100"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" className="h-4 w-4" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<rect x="9" y="9" width="13" height="13" rx="2" />
|
||||
<rect x="3" y="3" width="13" height="13" rx="2" />
|
||||
</svg>
|
||||
</button>
|
||||
{copyStatus && (
|
||||
<div
|
||||
className={`absolute right-0 top-full mt-2 rounded-full px-3 py-1 text-[11px] font-semibold shadow ${
|
||||
copyStatus === "success"
|
||||
? "bg-emerald-100 text-emerald-700"
|
||||
: "bg-rose-100 text-rose-700"
|
||||
}`}
|
||||
>
|
||||
{copyStatus === "success" ? "Kopiert" : "Fehler"}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<p className="break-all text-slate-700">{icalUrl}</p>
|
||||
</div>
|
||||
) : (
|
||||
<p className="text-sm text-slate-600">iCal-Link wird geladen...</p>
|
||||
)}
|
||||
<button type="button" className="btn-ghost" onClick={rotateToken}>
|
||||
Link erneuern
|
||||
</button>
|
||||
{status && <p className="text-sm text-emerald-600">{status}</p>}
|
||||
{error && <p className="text-sm text-red-600">{error}</p>}
|
||||
</section>
|
||||
|
||||
<section className="card space-y-4">
|
||||
<div>
|
||||
<p className="text-xs uppercase tracking-[0.2em] text-slate-500">
|
||||
Kategorien
|
||||
</p>
|
||||
<h2 className="text-lg font-semibold">Kategorien abonnieren</h2>
|
||||
</div>
|
||||
{allCategories.length === 0 ? (
|
||||
<p className="text-sm text-slate-600">Noch keine Kategorien vorhanden.</p>
|
||||
) : (
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{allCategories.map((category) => {
|
||||
const isSubscribed = subscribedCategories.has(category.id);
|
||||
return (
|
||||
<button
|
||||
key={category.id}
|
||||
type="button"
|
||||
className={`rounded-full border px-3 py-1 text-xs ${
|
||||
isSubscribed
|
||||
? "border-emerald-200 bg-emerald-50 text-emerald-700"
|
||||
: "border-slate-200 text-slate-700"
|
||||
}`}
|
||||
onClick={() => toggleCategory(category.id)}
|
||||
>
|
||||
{category.name}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
)}
|
||||
{categoryStatus && (
|
||||
<p className="text-sm text-emerald-600">{categoryStatus}</p>
|
||||
)}
|
||||
{categoryError && <p className="text-sm text-red-600">{categoryError}</p>}
|
||||
</section>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user