This commit is contained in:
PxlLoewe
2025-03-14 08:26:08 -07:00
10 changed files with 481 additions and 577 deletions

View File

@@ -13,12 +13,12 @@
"@types/express": "^5.0.0",
"@types/node": "^22.13.5",
"@types/nodemailer": "^6.4.17",
"@types/socket.io-redis": "^1.0.27",
"@types/socket.io-redis": "^3.0.0",
"concurrently": "^9.1.2",
"typescript": "latest"
},
"dependencies": {
"@react-email/components": "^0.0.32",
"@react-email/components": "^0.0.33",
"@socket.io/redis-adapter": "^8.3.0",
"axios": "^1.7.9",
"cron": "^4.1.0",
@@ -29,6 +29,6 @@
"react": "^19.0.0",
"redis": "^4.7.0",
"socket.io": "^4.8.1",
"socket.io-redis": "^5.4.0"
"socket.io-redis": "^6.1.1"
}
}

View File

@@ -13,7 +13,7 @@
"dependencies": {
"@radix-ui/react-icons": "^1.3.2",
"@repo/ui": "*",
"@tailwindcss/postcss": "^4.0.2",
"@tailwindcss/postcss": "^4.0.14",
"leaflet": "^1.9.4",
"next": "^15.1.0",
"next-auth": "^4.24.11",
@@ -21,17 +21,17 @@
"react": "^19.0.0",
"react-dom": "^19.0.0",
"socket.io-client": "^4.8.1",
"tailwindcss": "^4.0.2",
"tailwindcss": "^4.0.14",
"zustand": "^5.0.3"
},
"devDependencies": {
"@repo/eslint-config": "*",
"@repo/typescript-config": "*",
"@types/leaflet": "^1.9.16",
"@types/node": "^20",
"@types/react": "18.3.1",
"@types/react-dom": "18.3.0",
"@types/node": "^22.13.10",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"daisyui": "^5.0.0-beta.6",
"typescript": "5.5.4"
"typescript": "^5.8.2"
}
}

View File

@@ -19,9 +19,9 @@
"devDependencies": {
"@repo/eslint-config": "*",
"@repo/typescript-config": "*",
"@types/node": "^20",
"@types/react": "18.3.1",
"@types/react-dom": "18.3.0",
"typescript": "5.5.4"
"@types/node": "^22.13.10",
"@types/react": "^19.0.10",
"@types/react-dom": "^19.0.4",
"typescript": "^5.8.2"
}
}

View File

@@ -16,7 +16,7 @@
"typescript": "latest"
},
"dependencies": {
"@react-email/components": "^0.0.32",
"@react-email/components": "^0.0.33",
"axios": "^1.7.9",
"cron": "^4.1.0",
"dotenv": "^16.4.7",

View File

@@ -34,3 +34,4 @@ You can check out [the Next.js GitHub repository](https://github.com/vercel/next
The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
Check out our [Next.js deployment documentation](https://nextjs.org/docs/app/building-your-application/deploying) for more details.
test

View File

@@ -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>
);
};

View File

@@ -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>
<h1>
{user?.firstname} {user?.lastname}
</h1>
<p>{user?.email}</p>
{/* TODO: Hier Nutzerdaten bearbeiten */}
<div className="grid grid-cols-6 gap-4">
<div className="col-span-full">
<p className="text-2xl font-semibold text-left flex items-center gap-2">
<PersonIcon className="w-5 h-5" />
{user?.firstname} {user?.lastname} #{user?.publicId}
</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>
);
};

View File

@@ -9,7 +9,7 @@
"lint": "next lint"
},
"dependencies": {
"@hookform/resolvers": "^3.10.0",
"@hookform/resolvers": "^4.1.3",
"@next-auth/prisma-adapter": "^1.0.7",
"@repo/db": "*",
"@repo/ui": "*",
@@ -17,25 +17,25 @@
"@tanstack/react-table": "^8.20.6",
"@uiw/react-md-editor": "^4.0.5",
"axios": "^1.7.9",
"bcryptjs": "^2.4.3",
"bcryptjs": "^3.0.2",
"clsx": "^2.1.1",
"date-fns": "^4.1.0",
"i": "^0.3.7",
"jsonwebtoken": "^9.0.2",
"lodash": "^4.17.21",
"lucide-react": "^0.474.0",
"next": "15.1.4",
"lucide-react": "^0.479.0",
"next": "^15.2.2",
"next-auth": "^4.24.11",
"next-remove-imports": "^1.0.12",
"npm": "^11.1.0",
"react": "^19.0.0",
"react-datepicker": "^8.1.0",
"react-day-picker": "^9.5.1",
"react-day-picker": "^9.6.2",
"react-dom": "^19.0.0",
"react-hook-form": "^7.54.2",
"react-hot-toast": "^2.5.1",
"react-select": "^5.10.0",
"tailwind-merge": "^2.6.0",
"tailwind-merge": "^3.0.2",
"zod": "^3.24.1"
},
"devDependencies": {
@@ -43,13 +43,13 @@
"@tailwindcss/postcss": "^4.0.8",
"@types/bcryptjs": "^2.4.6",
"@types/jsonwebtoken": "^9.0.8",
"@types/node": "^20",
"@types/node": "^22.13.10",
"@types/react": "^19",
"@types/react-dom": "^19",
"daisyui": "^5.0.0-beta.8",
"eslint": "^9",
"eslint-config-next": "15.1.4",
"postcss": "^8",
"eslint-config-next": "^15.2.2",
"postcss": "^8.5.3",
"tailwindcss": "^4.0.8",
"typescript": "^5"
}

809
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -11,7 +11,7 @@
"devDependencies": {
"prettier": "^3.2.5",
"turbo": "^2.4.0",
"typescript": "5.5.4"
"typescript": "^5.8.2"
},
"engines": {
"node": ">=18"