780 lines
33 KiB
TypeScript
780 lines
33 KiB
TypeScript
|
"use client";
|
|||
|
|
|
|||
|
|
import {
|
|||
|
|
BeakerIcon,
|
|||
|
|
BellIcon,
|
|||
|
|
ChevronRightIcon,
|
|||
|
|
ClockIcon,
|
|||
|
|
EyeIcon,
|
|||
|
|
EyeSlashIcon,
|
|||
|
|
FireIcon,
|
|||
|
|
MoonIcon,
|
|||
|
|
ScaleIcon,
|
|||
|
|
SunIcon,
|
|||
|
|
} from "@heroicons/react/24/outline";
|
|||
|
|
import Link from "next/link";
|
|||
|
|
import { useEffect, useMemo, useState } from "react";
|
|||
|
|
import { DataPageLayout } from "@/app/_components/data-page-layout";
|
|||
|
|
import { useTheme } from "@/app/_components/theme-provider";
|
|||
|
|
import { authClient } from "@/lib/auth-client";
|
|||
|
|
import { HellthGoals, loadHellthData } from "@/lib/hellth-data";
|
|||
|
|
import { trpc } from "@/lib/trpc";
|
|||
|
|
|
|||
|
|
const PASSWORD_CHARS =
|
|||
|
|
"ABCDEFGHJKMNPQRSTUVWXYZabcdefghjkmnpqrstuvwxyz23456789!@#$%&*";
|
|||
|
|
|
|||
|
|
const dietPreferenceOptions = [
|
|||
|
|
{ id: "vegan", label: "Vegan" },
|
|||
|
|
{ id: "vegetarian", label: "Vegetarisch" },
|
|||
|
|
{ id: "meat", label: "Fleisch" },
|
|||
|
|
{ id: "fish", label: "Fisch" },
|
|||
|
|
] as const;
|
|||
|
|
|
|||
|
|
type DietPreference = (typeof dietPreferenceOptions)[number]["id"];
|
|||
|
|
|
|||
|
|
function todayKey() {
|
|||
|
|
return new Date().toISOString().slice(0, 10);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function generatePassword(length = 16) {
|
|||
|
|
const bytes = crypto.getRandomValues(new Uint8Array(length));
|
|||
|
|
return Array.from(bytes, (byte) => PASSWORD_CHARS[byte % PASSWORD_CHARS.length]!).join(
|
|||
|
|
"",
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function toOptimizedAvatarDataUrl(file: File) {
|
|||
|
|
const bitmap = await createImageBitmap(file);
|
|||
|
|
const maxEdge = 320;
|
|||
|
|
const scale = Math.min(1, maxEdge / Math.max(bitmap.width, bitmap.height));
|
|||
|
|
const width = Math.max(1, Math.round(bitmap.width * scale));
|
|||
|
|
const height = Math.max(1, Math.round(bitmap.height * scale));
|
|||
|
|
|
|||
|
|
const canvas = document.createElement("canvas");
|
|||
|
|
canvas.width = width;
|
|||
|
|
canvas.height = height;
|
|||
|
|
const ctx = canvas.getContext("2d");
|
|||
|
|
if (!ctx) throw new Error("Canvas nicht verfügbar");
|
|||
|
|
|
|||
|
|
ctx.drawImage(bitmap, 0, 0, width, height);
|
|||
|
|
bitmap.close();
|
|||
|
|
|
|||
|
|
const dataUrl = canvas.toDataURL("image/webp", 0.82);
|
|||
|
|
if (!dataUrl.startsWith("data:image/")) {
|
|||
|
|
throw new Error("Profilbild konnte nicht verarbeitet werden.");
|
|||
|
|
}
|
|||
|
|
if (dataUrl.length > 120_000) {
|
|||
|
|
throw new Error("Profilbild ist nach Komprimierung noch zu groß.");
|
|||
|
|
}
|
|||
|
|
return dataUrl;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function EinstellungenPage() {
|
|||
|
|
const { isDark, toggleDark } = useTheme();
|
|||
|
|
const utils = trpc.useUtils();
|
|||
|
|
const profileQuery = trpc.users.myProfile.useQuery();
|
|||
|
|
const securityQuery = trpc.security.status.useQuery();
|
|||
|
|
const healthOverviewQuery = trpc.health.overview.useQuery({ date: todayKey() });
|
|||
|
|
const passkeysQuery = authClient.useListPasskeys();
|
|||
|
|
const userKey = profileQuery.data?.id ?? profileQuery.data?.email ?? null;
|
|||
|
|
|
|||
|
|
const [statusMessage, setStatusMessage] = useState<string | null>(null);
|
|||
|
|
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
|||
|
|
const [healthGoals, setHealthGoals] = useState<HellthGoals | null>(null);
|
|||
|
|
const [firstName, setFirstName] = useState("");
|
|||
|
|
const [lastName, setLastName] = useState("");
|
|||
|
|
const [phone, setPhone] = useState("");
|
|||
|
|
const [mobile, setMobile] = useState("");
|
|||
|
|
const [street, setStreet] = useState("");
|
|||
|
|
const [postalCode, setPostalCode] = useState("");
|
|||
|
|
const [city, setCity] = useState("");
|
|||
|
|
const [image, setImage] = useState<string | null>(null);
|
|||
|
|
const [dietPreferences, setDietPreferences] = useState<DietPreference[]>(["vegan", "vegetarian", "meat", "fish"]);
|
|||
|
|
const [mealsPerDay, setMealsPerDay] = useState("3");
|
|||
|
|
const [cooksPerDay, setCooksPerDay] = useState("1");
|
|||
|
|
const [preferredMealPrepDays, setPreferredMealPrepDays] = useState("0");
|
|||
|
|
const [meatFishFrequency, setMeatFishFrequency] = useState<"none" | "once_per_day" | "flexible">("flexible");
|
|||
|
|
|
|||
|
|
const isPlatformAdmin = profileQuery.data?.role === "admin";
|
|||
|
|
const [currentPassword, setCurrentPassword] = useState("");
|
|||
|
|
const [newPassword, setNewPassword] = useState("");
|
|||
|
|
const [confirmNewPassword, setConfirmNewPassword] = useState("");
|
|||
|
|
const [showCurrentPassword, setShowCurrentPassword] = useState(false);
|
|||
|
|
const [showNewPassword, setShowNewPassword] = useState(false);
|
|||
|
|
const [showConfirmPassword, setShowConfirmPassword] = useState(false);
|
|||
|
|
const [newPasskeyName, setNewPasskeyName] = useState("");
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (profileQuery.data) {
|
|||
|
|
setFirstName(profileQuery.data.firstName ?? profileQuery.data.name ?? "");
|
|||
|
|
setLastName(profileQuery.data.lastName ?? profileQuery.data.name ?? "");
|
|||
|
|
setPhone(profileQuery.data.phone ?? "");
|
|||
|
|
setMobile(profileQuery.data.mobile ?? "");
|
|||
|
|
setStreet(profileQuery.data.street ?? "");
|
|||
|
|
setPostalCode(profileQuery.data.postalCode ?? "");
|
|||
|
|
setCity(profileQuery.data.city ?? "");
|
|||
|
|
setImage(profileQuery.data.image ?? null);
|
|||
|
|
}
|
|||
|
|
}, [profileQuery.data]);
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (!userKey) return;
|
|||
|
|
setHealthGoals(loadHellthData(userKey).goals);
|
|||
|
|
}, [userKey]);
|
|||
|
|
|
|||
|
|
const updateMyProfile = trpc.users.updateMyProfile.useMutation({
|
|||
|
|
onSuccess: async () => {
|
|||
|
|
await Promise.all([utils.users.myProfile.invalidate(), utils.security.status.invalidate()]);
|
|||
|
|
setStatusMessage("Profil gespeichert.");
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
},
|
|||
|
|
onError: (error) => {
|
|||
|
|
setErrorMessage(error.message);
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const changeMyPassword = trpc.users.changeMyPassword.useMutation({
|
|||
|
|
onSuccess: () => {
|
|||
|
|
setCurrentPassword("");
|
|||
|
|
setNewPassword("");
|
|||
|
|
setConfirmNewPassword("");
|
|||
|
|
setStatusMessage("Passwort erfolgreich aktualisiert.");
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
},
|
|||
|
|
onError: (error) => {
|
|||
|
|
setErrorMessage(error.message);
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const updateHealthProfile = trpc.health.upsertProfile.useMutation({
|
|||
|
|
onSuccess: async () => {
|
|||
|
|
await healthOverviewQuery.refetch();
|
|||
|
|
await utils.health.recipeRecommendations.invalidate();
|
|||
|
|
setStatusMessage("Essenspräferenzen gespeichert.");
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
},
|
|||
|
|
onError: (error) => {
|
|||
|
|
setErrorMessage(error.message);
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
},
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
useEffect(() => {
|
|||
|
|
const profile = healthOverviewQuery.data?.profile;
|
|||
|
|
if (!profile) return;
|
|||
|
|
setDietPreferences((profile.dietPreferences?.length ? profile.dietPreferences : ["vegan", "vegetarian", "meat", "fish"]) as DietPreference[]);
|
|||
|
|
setMealsPerDay(String(profile.mealsPerDay ?? 3));
|
|||
|
|
setCooksPerDay(String(profile.cooksPerDay ?? 1));
|
|||
|
|
setPreferredMealPrepDays(String(profile.preferredMealPrepDays ?? 0));
|
|||
|
|
setMeatFishFrequency((profile.meatFishFrequency as "none" | "once_per_day" | "flexible") ?? "flexible");
|
|||
|
|
}, [healthOverviewQuery.data?.profile]);
|
|||
|
|
|
|||
|
|
function toggleDietPreference(preference: DietPreference) {
|
|||
|
|
setDietPreferences((current) => {
|
|||
|
|
const next = current.includes(preference) ? current.filter((item) => item !== preference) : [...current, preference];
|
|||
|
|
return next.length ? next : current;
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function saveEatingPreferences() {
|
|||
|
|
const profile = healthOverviewQuery.data?.profile;
|
|||
|
|
updateHealthProfile.mutate({
|
|||
|
|
goal: profile?.goal ?? "healthier",
|
|||
|
|
age: profile?.age ?? null,
|
|||
|
|
heightCm: profile?.heightCm == null ? null : Number(profile.heightCm),
|
|||
|
|
currentWeightKg: profile?.currentWeightKg == null ? null : Number(profile.currentWeightKg),
|
|||
|
|
targetWeightKg: profile?.targetWeightKg == null ? null : Number(profile.targetWeightKg),
|
|||
|
|
activityLevel: profile?.activityLevel ?? "moderate",
|
|||
|
|
dietStyle: profile?.dietStyle ?? "flexible",
|
|||
|
|
dietPreferences,
|
|||
|
|
mealsPerDay: Number(mealsPerDay) || 3,
|
|||
|
|
cooksPerDay: Number(cooksPerDay) || 1,
|
|||
|
|
preferredMealPrepDays: Number(preferredMealPrepDays) || 0,
|
|||
|
|
meatFishFrequency,
|
|||
|
|
cookingTime: (profile?.cookingTime as "low" | "medium" | "high" | undefined) ?? "medium",
|
|||
|
|
budgetFocus: profile?.budgetFocus ?? false,
|
|||
|
|
excludedFoods: profile?.excludedFoods ?? null,
|
|||
|
|
biggestChallenge: profile?.biggestChallenge ?? null,
|
|||
|
|
medicalNote: profile?.medicalNote ?? false,
|
|||
|
|
completed: Boolean(profile?.completedAt),
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const isBusy = updateMyProfile.isPending || changeMyPassword.isPending;
|
|||
|
|
const passwordMismatch =
|
|||
|
|
confirmNewPassword.length > 0 && newPassword !== confirmNewPassword;
|
|||
|
|
const canSaveProfile = useMemo(
|
|||
|
|
() =>
|
|||
|
|
!!firstName.trim() &&
|
|||
|
|
firstName.trim().length >= 2 &&
|
|||
|
|
(firstName.trim() !== (profileQuery.data?.firstName ?? profileQuery.data?.name ?? "") ||
|
|||
|
|
(lastName.trim() || null) !== (profileQuery.data?.lastName ?? null) ||
|
|||
|
|
(phone.trim() || null) !== (profileQuery.data?.phone ?? null) ||
|
|||
|
|
(mobile.trim() || null) !== (profileQuery.data?.mobile ?? null) ||
|
|||
|
|
(street.trim() || null) !== (profileQuery.data?.street ?? null) ||
|
|||
|
|
(postalCode.trim() || null) !== (profileQuery.data?.postalCode ?? null) ||
|
|||
|
|
(city.trim() || null) !== (profileQuery.data?.city ?? null) ||
|
|||
|
|
(image ?? null) !== (profileQuery.data?.image ?? null)),
|
|||
|
|
[
|
|||
|
|
firstName,
|
|||
|
|
lastName,
|
|||
|
|
phone,
|
|||
|
|
mobile,
|
|||
|
|
street,
|
|||
|
|
postalCode,
|
|||
|
|
city,
|
|||
|
|
image,
|
|||
|
|
profileQuery.data?.firstName,
|
|||
|
|
profileQuery.data?.name,
|
|||
|
|
profileQuery.data?.lastName,
|
|||
|
|
profileQuery.data?.phone,
|
|||
|
|
profileQuery.data?.mobile,
|
|||
|
|
profileQuery.data?.street,
|
|||
|
|
profileQuery.data?.postalCode,
|
|||
|
|
profileQuery.data?.city,
|
|||
|
|
profileQuery.data?.image,
|
|||
|
|
],
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
async function handleAddPasskey() {
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
const result = await authClient.passkey.addPasskey({
|
|||
|
|
name: newPasskeyName.trim() || undefined,
|
|||
|
|
});
|
|||
|
|
if (result.error) {
|
|||
|
|
setErrorMessage(result.error.message ?? "Passkey konnte nicht hinzugefügt werden.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
setStatusMessage("Passkey erfolgreich hinzugefügt.");
|
|||
|
|
setNewPasskeyName("");
|
|||
|
|
await passkeysQuery.refetch();
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function handleImageUpload(file: File) {
|
|||
|
|
if (!file.type.startsWith("image/")) {
|
|||
|
|
setErrorMessage("Bitte eine Bilddatei auswählen.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
if (file.size > 5 * 1024 * 1024) {
|
|||
|
|
setErrorMessage("Profilbild ist zu groß. Maximal 5 MB.");
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
const dataUrl = await toOptimizedAvatarDataUrl(file);
|
|||
|
|
setImage(dataUrl);
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
} catch (error) {
|
|||
|
|
setErrorMessage(
|
|||
|
|
error instanceof Error
|
|||
|
|
? error.message
|
|||
|
|
: "Profilbild konnte nicht verarbeitet werden.",
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<DataPageLayout title="Einstellungen" description="Persönliches Profil und Sicherheit">
|
|||
|
|
<div className="mb-6 grid grid-cols-1 gap-4 xl:grid-cols-3">
|
|||
|
|
<section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
|
|||
|
|
<h2 className="text-xl font-black text-gray-400">Ziele</h2>
|
|||
|
|
<div className="mt-5 divide-y divide-gray-100">
|
|||
|
|
{[
|
|||
|
|
{ icon: FireIcon, label: "Kalorien", value: `${healthGoals?.calories ?? 2000} kcal`, color: "text-orange-500" },
|
|||
|
|
{ icon: ScaleIcon, label: "Makros", value: `${healthGoals?.carbs ?? 200}/${healthGoals?.fat ?? 67}/${healthGoals?.protein ?? 150} g`, color: "text-blue-500" },
|
|||
|
|
{ icon: ClockIcon, label: "Fasten", value: `${healthGoals?.fastingHours ?? 12} h`, color: "text-rose-500" },
|
|||
|
|
{ icon: BeakerIcon, label: "Wasser", value: `${healthGoals?.drinkMl ?? 2500} ml`, color: "text-blue-500" },
|
|||
|
|
{ icon: ScaleIcon, label: "Gewicht", value: `${healthGoals?.weightKg ?? 120} kg`, color: "text-orange-500" },
|
|||
|
|
].map((item) => (
|
|||
|
|
<Link key={item.label} href="/ziele" className="flex w-full items-center gap-4 py-4 text-left">
|
|||
|
|
<item.icon className={`h-7 w-7 ${item.color}`} />
|
|||
|
|
<span className="flex-1 text-lg font-black text-gray-950">{item.label}</span>
|
|||
|
|
<span className="text-lg font-black text-gray-400">{item.value}</span>
|
|||
|
|
<ChevronRightIcon className="h-5 w-5 text-gray-300" />
|
|||
|
|
</Link>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
|
|||
|
|
<h2 className="text-xl font-black text-gray-400">Rezept-Präferenzen</h2>
|
|||
|
|
<div className="mt-5 space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-black uppercase text-gray-400">Ernährung</p>
|
|||
|
|
<div className="mt-2 grid grid-cols-2 gap-2">
|
|||
|
|
{dietPreferenceOptions.map((option) => (
|
|||
|
|
<button
|
|||
|
|
key={option.id}
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => toggleDietPreference(option.id)}
|
|||
|
|
className={`rounded-full px-3 py-2 text-sm font-black ${
|
|||
|
|
dietPreferences.includes(option.id) ? "bg-[#0F766E] text-white" : "bg-gray-100 text-gray-500"
|
|||
|
|
}`}
|
|||
|
|
>
|
|||
|
|
{option.label}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="grid grid-cols-3 gap-2">
|
|||
|
|
<label className="space-y-1">
|
|||
|
|
<span className="text-xs font-black uppercase text-gray-400">Mahlzeiten</span>
|
|||
|
|
<input value={mealsPerDay} onChange={(event) => setMealsPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
|
|||
|
|
</label>
|
|||
|
|
<label className="space-y-1">
|
|||
|
|
<span className="text-xs font-black uppercase text-gray-400">Kochen/Tag</span>
|
|||
|
|
<input value={cooksPerDay} onChange={(event) => setCooksPerDay(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
|
|||
|
|
</label>
|
|||
|
|
<label className="space-y-1">
|
|||
|
|
<span className="text-xs font-black uppercase text-gray-400">Mealprep</span>
|
|||
|
|
<input value={preferredMealPrepDays} onChange={(event) => setPreferredMealPrepDays(event.target.value)} className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold" />
|
|||
|
|
</label>
|
|||
|
|
</div>
|
|||
|
|
<label className="block space-y-1">
|
|||
|
|
<span className="text-xs font-black uppercase text-gray-400">Fleisch/Fisch</span>
|
|||
|
|
<select
|
|||
|
|
value={meatFishFrequency}
|
|||
|
|
onChange={(event) => setMeatFishFrequency(event.target.value as "none" | "once_per_day" | "flexible")}
|
|||
|
|
className="w-full rounded-2xl border border-gray-200 px-3 py-2 text-sm font-bold"
|
|||
|
|
>
|
|||
|
|
<option value="none">nie</option>
|
|||
|
|
<option value="once_per_day">maximal 1x am Tag</option>
|
|||
|
|
<option value="flexible">flexibel</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={saveEatingPreferences}
|
|||
|
|
disabled={updateHealthProfile.isPending}
|
|||
|
|
className="w-full rounded-full bg-gray-950 px-4 py-3 text-sm font-black text-white disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
Präferenzen speichern
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className="rounded-[2rem] bg-white p-6 shadow-sm ring-1 ring-gray-100">
|
|||
|
|
<h2 className="text-xl font-black text-gray-400">Anwendung</h2>
|
|||
|
|
<div className="mt-5 space-y-4">
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
<BellIcon className="h-7 w-7 text-green-500" />
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<p className="text-lg font-black text-gray-950">Tägliche Erinnerung</p>
|
|||
|
|
<p className="text-sm font-bold text-gray-400">Tracking und Planung</p>
|
|||
|
|
</div>
|
|||
|
|
<span className="relative inline-flex h-8 w-14 rounded-full bg-green-500">
|
|||
|
|
<span className="absolute right-1 top-1 h-6 w-6 rounded-full bg-white" />
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center gap-4">
|
|||
|
|
{isDark ? <MoonIcon className="h-7 w-7 text-indigo-400" /> : <SunIcon className="h-7 w-7 text-amber-500" />}
|
|||
|
|
<div className="flex-1">
|
|||
|
|
<p className="text-lg font-black text-gray-950">Dunkles Design</p>
|
|||
|
|
<p className="text-sm font-bold text-gray-400">{isDark ? "aktiv" : "inaktiv"}</p>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={toggleDark}
|
|||
|
|
className={`relative inline-flex h-8 w-14 rounded-full ${isDark ? "bg-[#0F766E]" : "bg-gray-200"}`}
|
|||
|
|
aria-label="Dunkles Design umschalten"
|
|||
|
|
>
|
|||
|
|
<span className={`absolute top-1 h-6 w-6 rounded-full bg-white transition ${isDark ? "right-1" : "left-1"}`} />
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 lg:grid-cols-3 gap-6">
|
|||
|
|
<section className="lg:col-span-2 bg-white border border-gray-200 rounded-xl p-6 space-y-5">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-lg font-semibold text-[#333333]">Mein Profil</h2>
|
|||
|
|
<p className="text-sm text-gray-500 mt-1">
|
|||
|
|
Du kannst dein eigenes Profil bearbeiten. Höhere Admins können dich zusätzlich in
|
|||
|
|
der Benutzerverwaltung bearbeiten.
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Name</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={firstName}
|
|||
|
|
onChange={(event) => setFirstName(event.target.value)}
|
|||
|
|
placeholder="Vorname"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Nachname</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={lastName}
|
|||
|
|
onChange={(event) => setLastName(event.target.value)}
|
|||
|
|
placeholder="Nachname"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Profilbild</label>
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<div className="w-16 h-16 rounded-full bg-gray-100 border border-gray-200 overflow-hidden shrink-0">
|
|||
|
|
{image ? (
|
|||
|
|
// eslint-disable-next-line @next/next/no-img-element
|
|||
|
|
<img src={image} alt="Profilbild" className="w-full h-full object-cover" />
|
|||
|
|
) : (
|
|||
|
|
<div className="w-full h-full flex items-center justify-center text-sm text-gray-400">
|
|||
|
|
-
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
<label className="inline-flex px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm cursor-pointer">
|
|||
|
|
Bild hochladen
|
|||
|
|
<input
|
|||
|
|
type="file"
|
|||
|
|
accept="image/*"
|
|||
|
|
className="hidden"
|
|||
|
|
onChange={(event) => {
|
|||
|
|
const file = event.target.files?.[0];
|
|||
|
|
if (file) {
|
|||
|
|
void handleImageUpload(file);
|
|||
|
|
}
|
|||
|
|
event.currentTarget.value = "";
|
|||
|
|
}}
|
|||
|
|
/>
|
|||
|
|
</label>
|
|||
|
|
<p className="text-xs text-gray-500">Bild wird automatisch skaliert und komprimiert.</p>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setImage(null)}
|
|||
|
|
className="block text-xs text-red-600 hover:text-red-700"
|
|||
|
|
>
|
|||
|
|
Bild entfernen
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<div className="md:col-span-2">
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">E-Mail</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm bg-gray-50 text-gray-500"
|
|||
|
|
value={profileQuery.data?.email ?? ""}
|
|||
|
|
disabled
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Telefon</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={phone}
|
|||
|
|
onChange={(event) => setPhone(event.target.value)}
|
|||
|
|
placeholder="Telefon"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Mobil</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={mobile}
|
|||
|
|
onChange={(event) => setMobile(event.target.value)}
|
|||
|
|
placeholder="Mobil"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div className="md:col-span-2">
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Straße</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={street}
|
|||
|
|
onChange={(event) => setStreet(event.target.value)}
|
|||
|
|
placeholder="Straße und Hausnummer"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">PLZ</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={postalCode}
|
|||
|
|
onChange={(event) => setPostalCode(event.target.value)}
|
|||
|
|
placeholder="PLZ"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
<div>
|
|||
|
|
<label className="block text-sm font-medium text-gray-700 mb-1.5">Ort</label>
|
|||
|
|
<input
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
value={city}
|
|||
|
|
onChange={(event) => setCity(event.target.value)}
|
|||
|
|
placeholder="Ort"
|
|||
|
|
/>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
updateMyProfile.mutate({
|
|||
|
|
firstName: firstName.trim(),
|
|||
|
|
lastName: lastName.trim() || null,
|
|||
|
|
phone: phone.trim() || null,
|
|||
|
|
mobile: mobile.trim() || null,
|
|||
|
|
street: street.trim() || null,
|
|||
|
|
postalCode: postalCode.trim() || null,
|
|||
|
|
city: city.trim() || null,
|
|||
|
|
image,
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
disabled={isBusy || !canSaveProfile}
|
|||
|
|
className="px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
Profil speichern
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className="bg-white border border-gray-200 rounded-xl p-6 space-y-4">
|
|||
|
|
<h2 className="text-lg font-semibold text-[#333333]">Sicherheit</h2>
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
2FA Status:{" "}
|
|||
|
|
<strong>{securityQuery.data?.twoFactorEnabled ? "aktiv" : "nicht aktiv"}</strong>
|
|||
|
|
</p>
|
|||
|
|
{securityQuery.data?.twoFactorRecoveryRequired && (
|
|||
|
|
<p className="text-xs text-amber-700 bg-amber-50 border border-amber-200 rounded-md px-3 py-2">
|
|||
|
|
2FA Recovery aktiv: Bitte OTP neu einrichten.
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
<div className="flex flex-wrap gap-2">
|
|||
|
|
<Link
|
|||
|
|
href="/sicherheit/2fa-setup"
|
|||
|
|
className="inline-flex px-4 py-2 rounded-lg bg-gray-900 text-white text-sm"
|
|||
|
|
>
|
|||
|
|
2FA verwalten
|
|||
|
|
</Link>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="border-t border-gray-100 pt-4 space-y-2">
|
|||
|
|
<h3 className="text-sm font-semibold text-gray-800">Passkeys</h3>
|
|||
|
|
<p className="text-sm text-gray-600">
|
|||
|
|
Passkeys erlauben die Anmeldung per Gerät (z. B. Windows Hello, Touch ID oder
|
|||
|
|
Passwortmanager).
|
|||
|
|
</p>
|
|||
|
|
<div className="flex flex-col sm:flex-row gap-2">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
value={newPasskeyName}
|
|||
|
|
onChange={(event) => setNewPasskeyName(event.target.value)}
|
|||
|
|
placeholder="Name (optional), z. B. Laptop"
|
|||
|
|
className="flex-1 border border-gray-200 rounded-lg px-3 py-2.5 text-sm"
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => void handleAddPasskey()}
|
|||
|
|
disabled={isBusy}
|
|||
|
|
className="px-4 py-2 rounded-lg bg-gray-900 text-white text-sm disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
Passkey hinzufügen
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{passkeysQuery.isPending && (
|
|||
|
|
<p className="text-xs text-gray-500">Passkeys werden geladen...</p>
|
|||
|
|
)}
|
|||
|
|
{passkeysQuery.error && (
|
|||
|
|
<p className="text-xs text-red-600">
|
|||
|
|
{passkeysQuery.error.message ?? "Passkeys konnten nicht geladen werden."}
|
|||
|
|
</p>
|
|||
|
|
)}
|
|||
|
|
{!passkeysQuery.isPending &&
|
|||
|
|
!passkeysQuery.error &&
|
|||
|
|
(passkeysQuery.data?.length ?? 0) === 0 && (
|
|||
|
|
<p className="text-xs text-gray-500">Noch keine Passkeys hinterlegt.</p>
|
|||
|
|
)}
|
|||
|
|
{(passkeysQuery.data ?? []).map((item) => (
|
|||
|
|
<div
|
|||
|
|
key={item.id}
|
|||
|
|
className="rounded-md border border-gray-200 bg-gray-50 px-3 py-2 text-xs text-gray-700"
|
|||
|
|
>
|
|||
|
|
<p className="font-medium text-gray-800">{item.name || "Unbenannter Passkey"}</p>
|
|||
|
|
<p className="text-gray-500">Erstellt: {new Date(item.createdAt).toLocaleString("de-DE")}</p>
|
|||
|
|
</div>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div className="border-t border-gray-100 pt-4 space-y-3">
|
|||
|
|
<h3 className="text-sm font-semibold text-gray-800">Passwort zurücksetzen</h3>
|
|||
|
|
<div className="relative">
|
|||
|
|
<input
|
|||
|
|
type={showCurrentPassword ? "text" : "password"}
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
|
|||
|
|
placeholder="Aktuelles Passwort"
|
|||
|
|
value={currentPassword}
|
|||
|
|
onChange={(event) => setCurrentPassword(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowCurrentPassword((value) => !value)}
|
|||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|||
|
|
aria-label={showCurrentPassword ? "Passwort verbergen" : "Passwort anzeigen"}
|
|||
|
|
>
|
|||
|
|
{showCurrentPassword ? (
|
|||
|
|
<EyeSlashIcon className="w-4 h-4" />
|
|||
|
|
) : (
|
|||
|
|
<EyeIcon className="w-4 h-4" />
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative">
|
|||
|
|
<input
|
|||
|
|
type={showNewPassword ? "text" : "password"}
|
|||
|
|
className="w-full border border-gray-200 rounded-lg px-3 py-2.5 pr-11 text-sm"
|
|||
|
|
placeholder="Neues Passwort (mind. 16 Zeichen)"
|
|||
|
|
value={newPassword}
|
|||
|
|
onChange={(event) => setNewPassword(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowNewPassword((value) => !value)}
|
|||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|||
|
|
aria-label={showNewPassword ? "Passwort verbergen" : "Passwort anzeigen"}
|
|||
|
|
>
|
|||
|
|
{showNewPassword ? (
|
|||
|
|
<EyeSlashIcon className="w-4 h-4" />
|
|||
|
|
) : (
|
|||
|
|
<EyeIcon className="w-4 h-4" />
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
<div className="relative">
|
|||
|
|
<input
|
|||
|
|
type={showConfirmPassword ? "text" : "password"}
|
|||
|
|
className={`w-full border rounded-lg px-3 py-2.5 pr-11 text-sm ${
|
|||
|
|
passwordMismatch ? "border-red-300" : "border-gray-200"
|
|||
|
|
}`}
|
|||
|
|
placeholder="Neues Passwort bestätigen"
|
|||
|
|
value={confirmNewPassword}
|
|||
|
|
onChange={(event) => setConfirmNewPassword(event.target.value)}
|
|||
|
|
/>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => setShowConfirmPassword((value) => !value)}
|
|||
|
|
className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-400 hover:text-gray-600"
|
|||
|
|
aria-label={showConfirmPassword ? "Passwort verbergen" : "Passwort anzeigen"}
|
|||
|
|
>
|
|||
|
|
{showConfirmPassword ? (
|
|||
|
|
<EyeSlashIcon className="w-4 h-4" />
|
|||
|
|
) : (
|
|||
|
|
<EyeIcon className="w-4 h-4" />
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{passwordMismatch && (
|
|||
|
|
<p className="text-xs text-red-600">Die neuen Passwörter stimmen nicht überein.</p>
|
|||
|
|
)}
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={() => {
|
|||
|
|
const generated = generatePassword(16);
|
|||
|
|
setNewPassword(generated);
|
|||
|
|
setConfirmNewPassword(generated);
|
|||
|
|
setShowNewPassword(true);
|
|||
|
|
setShowConfirmPassword(true);
|
|||
|
|
}}
|
|||
|
|
className="px-3 py-2 rounded-lg bg-gray-100 text-gray-700 text-sm w-fit"
|
|||
|
|
>
|
|||
|
|
Passwort generieren (16)
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setStatusMessage(null);
|
|||
|
|
setErrorMessage(null);
|
|||
|
|
changeMyPassword.mutate({
|
|||
|
|
currentPassword,
|
|||
|
|
newPassword,
|
|||
|
|
});
|
|||
|
|
}}
|
|||
|
|
disabled={
|
|||
|
|
isBusy ||
|
|||
|
|
!currentPassword ||
|
|||
|
|
newPassword.length < 16 ||
|
|||
|
|
confirmNewPassword.length < 16 ||
|
|||
|
|
passwordMismatch
|
|||
|
|
}
|
|||
|
|
className="w-full px-4 py-2 rounded-lg bg-[#0F766E] text-white text-sm font-medium disabled:opacity-50"
|
|||
|
|
>
|
|||
|
|
Passwort aktualisieren
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
|
|||
|
|
<section className="lg:col-span-3 bg-white border border-gray-200 rounded-xl p-6 space-y-4">
|
|||
|
|
<div>
|
|||
|
|
<h2 className="text-lg font-semibold text-[#333333]">Darstellung</h2>
|
|||
|
|
<p className="text-sm text-gray-500 mt-1">Erscheinungsbild der Anwendung anpassen.</p>
|
|||
|
|
</div>
|
|||
|
|
<div className="flex items-center justify-between rounded-lg border border-gray-100 bg-gray-50 px-4 py-3">
|
|||
|
|
<div className="flex items-center gap-3">
|
|||
|
|
{isDark ? (
|
|||
|
|
<MoonIcon className="h-5 w-5 text-indigo-400" />
|
|||
|
|
) : (
|
|||
|
|
<SunIcon className="h-5 w-5 text-amber-500" />
|
|||
|
|
)}
|
|||
|
|
<div>
|
|||
|
|
<p className="text-sm font-medium text-gray-900">Dunkles Design</p>
|
|||
|
|
<p className="text-xs text-gray-500">
|
|||
|
|
{isDark ? "Dunkles Design ist aktiv" : "Helles Design ist aktiv"}
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<button
|
|||
|
|
type="button"
|
|||
|
|
onClick={toggleDark}
|
|||
|
|
className={`relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 focus:outline-none ${
|
|||
|
|
isDark ? "bg-[#0F766E]" : "bg-gray-200"
|
|||
|
|
}`}
|
|||
|
|
role="switch"
|
|||
|
|
aria-checked={isDark}
|
|||
|
|
aria-label="Dunkles Design umschalten"
|
|||
|
|
>
|
|||
|
|
<span
|
|||
|
|
className={`pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ${
|
|||
|
|
isDark ? "translate-x-5" : "translate-x-0"
|
|||
|
|
}`}
|
|||
|
|
/>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{profileQuery.isLoading && (
|
|||
|
|
<div className="mt-6 text-sm rounded-lg border border-gray-200 bg-white px-4 py-3 text-gray-500">
|
|||
|
|
Profil wird geladen...
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{(profileQuery.error || securityQuery.error) && (
|
|||
|
|
<div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
|
|||
|
|
{profileQuery.error?.message ?? securityQuery.error?.message}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{statusMessage && (
|
|||
|
|
<div className="mt-6 text-sm rounded-lg border border-green-200 bg-green-50 px-4 py-3 text-green-700">
|
|||
|
|
{statusMessage}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{errorMessage && (
|
|||
|
|
<div className="mt-6 text-sm rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-red-700">
|
|||
|
|
{errorMessage}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</DataPageLayout>
|
|||
|
|
);
|
|||
|
|
}
|