User bearbeiten Page

apps/hub/app/(app)/admin/user/[id]/_components/forms.tsx

@@ -0,0 +1,169 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import { BADGES, User } from "@repo/db";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { z } from "zod";
+import { updateUser } from "../../../../settings/actions";
+import { toast } from "react-hot-toast";
+import {
+	PersonIcon,
+	EnvelopeClosedIcon,
+	BookmarkIcon,
+	MixerHorizontalIcon,
+	LightningBoltIcon,
+	LockOpen1Icon,
+	HobbyKnifeIcon,
+	HeartIcon,
+} from "@radix-ui/react-icons";
+import { Button } from "../../../../../_components/ui/Button";
+import { Select } from "../../../../../_components/ui/Select";
+
+interface ProfileFormProps {
+	user: User | null;
+}
+
+export const ProfileForm: React.FC<ProfileFormProps> = ({ user }) => {
+	const schema = z.object({
+		firstname: z.string().min(2).max(30),
+		lastname: z.string().min(2).max(30),
+		email: z.string().email({
+			message: "Bitte gebe eine gültige E-Mail Adresse ein",
+		}),
+	});
+	const [isLoading, setIsLoading] = useState(false);
+	type IFormInput = z.infer<typeof schema>;
+
+	const form = useForm<IFormInput>({
+		defaultValues: {
+			firstname: user?.firstname,
+			lastname: user?.lastname,
+			email: user?.email,
+		},
+		resolver: zodResolver(schema),
+	});
+	return (
+		<form
+			className="card-body"
+			onSubmit={form.handleSubmit(async (values) => {
+				setIsLoading(true);
+				await updateUser(values);
+				form.reset(values);
+				setIsLoading(false);
+				toast.success("Deine Änderungen wurden gespeichert!", {
+					style: {
+						background: "var(--color-base-100)",
+						color: "var(--color-base-content)",
+					},
+				});
+			})}
+		>
+			<h2 className="card-title">
+				<MixerHorizontalIcon className="w-5 h-5" /> User bearbeiten
+			</h2>
+			<div className="text-left">
+				<label className="floating-label w-full mb-5 mt-5">
+					<span className="text-lg flex items-center gap-2">
+						<PersonIcon /> Vorname
+					</span>
+					<input
+						{...form.register("firstname")}
+						type="text"
+						className="input input-bordered w-full"
+						defaultValue={user?.firstname}
+						placeholder="Vorname"
+					/>
+				</label>
+				{form.formState.errors.firstname && (
+					<p className="text-error">
+						{form.formState.errors.firstname.message}
+					</p>
+				)}
+				<label className="floating-label w-full mb-5">
+					<span className="text-lg flex items-center gap-2">
+						<PersonIcon /> Nachname
+					</span>
+					<input
+						{...form.register("lastname")}
+						type="text"
+						className="input input-bordered w-full"
+						defaultValue={user?.lastname}
+						placeholder="Nachname"
+					/>
+				</label>
+				{form.formState.errors.lastname && (
+					<p className="text-error">
+						{form.formState.errors.lastname?.message}
+					</p>
+				)}
+				<label className="floating-label w-full">
+					<span className="text-lg flex items-center gap-2">
+						<EnvelopeClosedIcon /> E-Mail
+					</span>
+					<input
+						{...form.register("email")}
+						type="text"
+						className="input input-bordered w-full mb-2"
+						defaultValue={user?.email}
+						placeholder="E-Mail"
+					/>
+				</label>
+				{form.formState.errors.email && (
+					<p className="text-error">{form.formState.errors.email?.message}</p>
+				)}
+				<Select
+					isMulti
+					form={form}
+					name="finishedBadges"
+					label="Badges"
+					options={Object.entries(BADGES).map(([key, value]) => ({
+						label: value,
+						value: key,
+					}))}
+				/>
+				<div className="card-actions justify-center pt-6">
+					<Button
+						role="submit"
+						className="btn-sm btn-wide btn-outline btn-primary"
+						disabled={!form.formState.isDirty}
+						isLoading={isLoading}
+					>
+						<BookmarkIcon /> Speichern
+					</Button>
+				</div>
+			</div>
+		</form>
+	);
+};
+
+export const AdminForm: React.FC<ProfileFormProps> = ({ user }) => {
+	return (
+		<div className="card-body">
+			<h2 className="card-title">
+				<LightningBoltIcon className="w-5 h-5" /> Administration
+			</h2>
+			<div className="text-left">
+				<div className="card-actions pt-6">
+					<Button
+						role="submit"
+						className="btn-sm btn-wide btn-outline btn-success"
+					>
+						<LockOpen1Icon /> Passwort zurücksetzen
+					</Button>
+					<Button
+						role="submit"
+						className="btn-sm btn-wide btn-outline btn-error"
+					>
+						<HobbyKnifeIcon /> User Sperren
+					</Button>
+					<Button
+						role="submit"
+						className="btn-sm btn-wide btn-outline btn-warning"
+					>
+						<HeartIcon /> User Entperren
+					</Button>
+				</div>
+			</div>
+		</div>
+	);
+};

apps/hub/app/(app)/admin/user/[id]/page.tsx

@@ -1,22 +1,33 @@
-import { PrismaClient } from "@repo/db";
+import { PersonIcon } from "@radix-ui/react-icons";
+import { PrismaClient, User } from "@repo/db";
+import { AdminForm, ProfileForm } from "./_components/forms";
 
-export default async ({ params }: { params: Promise<{ id: string }> }) => {
+export default async ({ params }: { params: { id: string } }) => {
 	const prisma = new PrismaClient();
-	const { id } = await params;
+	const { id } = params;
 
-	const user = await prisma.user.findUnique({
+	const user: User | null = await prisma.user.findUnique({
 		where: {
 			id: id,
 		},
 	});
+
 	console.log(user);
+
 	return (
-		<div>
+		<div className="grid grid-cols-6 gap-4">
-			<h1>
+			<div className="col-span-full">
-				{user?.firstname} {user?.lastname}
+				<p className="text-2xl font-semibold text-left flex items-center gap-2">
-			</h1>
+					<PersonIcon className="w-5 h-5" />
-			<p>{user?.email}</p>
+					{user?.firstname} {user?.lastname} #{user?.publicId}
-			{/* TODO: Hier Nutzerdaten bearbeiten */}
+				</p>
+			</div>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<ProfileForm user={user} />
+			</div>
+			<div className="card bg-base-200 shadow-xl mb-4 col-span-6 xl:col-span-3">
+				<AdminForm user={user} />
+			</div>
 		</div>
 	);
 };