Error boundary

apps/hub/app/(auth)/layout.tsx

@@ -1,5 +1,7 @@
+"use client";
+import { Error as ErrorComp } from "_components/Error";
+import { ErrorBoundary } from "react-error-boundary";
 import { NextPage } from "next";
-import { ReactNode } from "react";
 
 const AuthLayout: NextPage<
 	Readonly<{
@@ -15,11 +17,30 @@ const AuthLayout: NextPage<
 	>
 		<div className="hero-overlay bg-neutral/60"></div>
 		<div className="hero-content text-center ">
-			<div className="max-w-lg">
-				<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
-					{children}
+			<ErrorBoundary
+				fallbackRender={({ error, resetErrorBoundary }) => {
+					console.log(error);
+					let errorTest;
+					let errorCode = 500;
+					if ("statusCode" in error) {
+						errorCode = error.statusCode;
+					}
+					if ("message" in error || error instanceof Error) {
+						errorTest = error.message;
+					} else if (typeof error === "string") {
+						errorTest = error;
+					} else {
+						errorTest = "Ein unerwarteter Fehler ist aufgetreten.";
+					}
+					return <ErrorComp title={errorTest} statusCode={errorCode} />;
+				}}
+			>
+				<div className="max-w-lg">
+					<div className="card rounded-2xl bg-base-100 w-full min-w-[500px] shadow-2xl max-md:min-w-[400px]">
+						{children}
+					</div>
 				</div>
-			</div>
+			</ErrorBoundary>
 		</div>
 	</div>
 );

apps/hub/app/(auth)/login/_components/Login.tsx

@@ -8,8 +8,10 @@ import { useForm } from "react-hook-form";
 import { Toaster, toast } from "react-hot-toast";
 import { z } from "zod";
 import { Button } from "../../../_components/ui/Button";
+import { useErrorBoundary } from "react-error-boundary";
 
 export const Login = () => {
+	const { showBoundary } = useErrorBoundary();
 	const [isLoading, setIsLoading] = useState(false);
 	const searchParams = useSearchParams();
 	const schema = z.object({
@@ -28,22 +30,26 @@ export const Login = () => {
 			className="card-body"
 			onSubmit={form.handleSubmit(async () => {
 				setIsLoading(true);
-				const data = await signIn("credentials", {
-					redirect: false,
-					email: form.getValues("email"),
-					password: form.getValues("password"),
-				});
-				setIsLoading(false);
-				if (!data || data.error) {
-					toast.error("E-Mail / Passwort ist falsch!", {
-						style: {
-							background: "var(--color-base-100)",
-							color: "var(--color-base-content)",
-						},
+				try {
+					const data = await signIn("credentials", {
+						redirect: false,
+						email: form.getValues("email"),
+						password: form.getValues("password"),
 					});
-					return;
+					setIsLoading(false);
+					if (!data || data.error) {
+						toast.error("E-Mail / Passwort ist falsch!", {
+							style: {
+								background: "var(--color-base-100)",
+								color: "var(--color-base-content)",
+							},
+						});
+						return;
+					}
+					redirect(searchParams.get("redirect") || "/");
+				} catch (error) {
+					showBoundary(error);
 				}
-				redirect(searchParams.get("redirect") || "/");
 			})}
 		>
 			<div>
@@ -99,6 +105,11 @@ export const Login = () => {
 					className="grow"
 				/>
 			</label>
+			<span className="text-sm font-medium flex justify-end">
+				<Link href="/passwort-reset" className="link link-accent link-hover ">
+					Passwort vergessen?
+				</Link>
+			</span>
 			<div className="card-actions mt-6">
 				<Button
 					disabled={isLoading}

apps/hub/app/(auth)/oauth/_components/Authorize.tsx

@@ -3,8 +3,10 @@ import { redirect, useSearchParams } from "next/navigation";
 import { Service } from "../page";
 import { generateToken } from "./action";
 import { useSession } from "next-auth/react";
+import { useErrorBoundary } from "react-error-boundary";
 
 export const Authorize = ({ service }: { service: Service }) => {
+	const { showBoundary } = useErrorBoundary();
 	const searchParams = useSearchParams();
 	const legitimeUrl = service.approvedUrls.some((url) =>
 		searchParams.get("redirect_uri")?.startsWith(url),
@@ -35,15 +37,19 @@ export const Authorize = ({ service }: { service: Service }) => {
 					type="submit"
 					className="btn btn-primary"
 					onClick={async () => {
-						const code = await generateToken(service);
-						const url = new URL(searchParams.get("redirect_uri") as string);
-						url.searchParams.append("code", code?.accessToken as string);
-						url.searchParams.append(
-							"state",
-							searchParams.get("state") as string,
-						);
+						try {
+							const code = await generateToken(service);
+							const url = new URL(searchParams.get("redirect_uri") as string);
+							url.searchParams.append("code", code?.accessToken as string);
+							url.searchParams.append(
+								"state",
+								searchParams.get("state") as string,
+							);
 
-						window.location.href = url.href;
+							window.location.href = url.href;
+						} catch (error) {
+							showBoundary(error);
+						}
 					}}
 				>
 					Zulassen

apps/hub/app/(auth)/passwort-reset/_components/PasswortReset.tsx

@@ -0,0 +1,97 @@
+"use client";
+import { zodResolver } from "@hookform/resolvers/zod";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import { useState } from "react";
+import { useForm } from "react-hook-form";
+import { Toaster, toast } from "react-hot-toast";
+import { z } from "zod";
+import { Button } from "../../../_components/ui/Button";
+import { resetPassword } from "(auth)/passwort-reset/action";
+import { useErrorBoundary } from "react-error-boundary";
+
+export const PasswortReset = () => {
+	const { showBoundary } = useErrorBoundary();
+	const [isLoading, setIsLoading] = useState(false);
+	const schema = z.object({
+		email: z.string().email(),
+	});
+	const navigate = useRouter();
+	type schemaType = z.infer<typeof schema>;
+
+	const form = useForm<schemaType>({
+		resolver: zodResolver(schema),
+	});
+
+	return (
+		<form
+			className="card-body"
+			onSubmit={form.handleSubmit(async () => {
+				try {
+					setIsLoading(true);
+					const { error } = await resetPassword(form.getValues().email);
+					setIsLoading(false);
+
+					if (error) {
+						return toast.error(error, {
+							style: {
+								background: "var(--color-base-100)",
+								color: "var(--color-base-content)",
+							},
+						});
+					}
+					toast.success("Passwort wurde zurückgesetzt!", {
+						style: {
+							background: "var(--color-base-100)",
+							color: "var(--color-base-content)",
+						},
+					});
+					navigate.push("/login");
+				} catch (error) {
+					showBoundary(error);
+				}
+			})}
+		>
+			<div>
+				<Toaster position="top-center" reverseOrder={false} />
+			</div>
+			<h1 className="text-3xl font-bold">Passwort zurücksetzen</h1>
+			<label className="input input-bordered flex items-center gap-2 w-full">
+				<svg
+					xmlns="http://www.w3.org/2000/svg"
+					viewBox="0 0 16 16"
+					fill="currentColor"
+					className="h-4 w-4 opacity-70"
+				>
+					<path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
+					<path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
+				</svg>
+				<input
+					type="text"
+					className="grow"
+					{...form.register("email")}
+					placeholder="Email"
+				/>
+			</label>
+			<p className="text-error">
+				{typeof form.formState.errors.email?.message === "string"
+					? form.formState.errors.email.message
+					: ""}
+			</p>
+			<span className="text-sm font-medium flex justify-end">
+				<Link href="/passwort-reset" className="link link-accent link-hover ">
+					Passwort vergessen?
+				</Link>
+			</span>
+			<div className="card-actions mt-6">
+				<Button
+					disabled={isLoading}
+					isLoading={isLoading}
+					className="btn btn-primary btn-block"
+				>
+					Login
+				</Button>
+			</div>
+		</form>
+	);
+};

apps/hub/app/(auth)/passwort-reset/action.ts

@@ -0,0 +1,42 @@
+"use server";
+
+import { prisma } from "@repo/db";
+import { sendMailByTemplate } from "../../../helper/mail";
+import bcrypt from "bcryptjs";
+
+export const resetPassword = async (email: string) => {
+	try {
+		const user = await prisma.user.findFirst({
+			where: {
+				email,
+			},
+		});
+
+		if (!user) {
+			return { error: "Nutzer nicht gefunden" };
+		}
+
+		const password = Math.random().toString(36).slice(-8);
+		const hashedPassword = await bcrypt.hash(password, 15);
+		await prisma.user.update({
+			where: {
+				email,
+			},
+			data: {
+				password: hashedPassword,
+			},
+		});
+
+		await sendMailByTemplate(user.email, "password-change", {
+			user: user,
+			password: password,
+		});
+		return {};
+	} catch (error) {
+		if (error instanceof Error) {
+			return { error: error.message };
+		} else {
+			return { error: "Ein Fehler ist aufgetreten" };
+		}
+	}
+};

apps/hub/app/(auth)/passwort-reset/page.tsx

@@ -0,0 +1,9 @@
+import { PasswortReset } from "./_components/PasswortReset";
+
+export default async () => {
+	return (
+		<>
+			<PasswortReset />
+		</>
+	);
+};

apps/hub/app/(auth)/register/_components/Register.tsx

@@ -9,8 +9,10 @@ import { useState } from "react";
 import clsx, { ClassValue } from "clsx";
 import { twMerge } from "tailwind-merge";
 import { Button } from "../../../_components/ui/Button";
+import { useErrorBoundary } from "react-error-boundary";
 
 export const Register = () => {
+	const { showBoundary } = useErrorBoundary();
 	const schema = z
 		.object({
 			email: z.string().email({
@@ -48,20 +50,24 @@ export const Register = () => {
 		<form
 			className="card-body"
 			onSubmit={form.handleSubmit(async () => {
-				setIsLoading(true);
-				const values = form.getValues();
-				const user = await register({
-					email: form.getValues("email"),
-					password: form.getValues("password"),
-					firstname: form.getValues("firstname"),
-					lastname: form.getValues("lastname"),
-				});
-				await signIn("credentials", {
-					callbackUrl: "/",
-					email: user.email,
-					password: values.password,
-				});
-				setIsLoading(false);
+				try {
+					setIsLoading(true);
+					const values = form.getValues();
+					const user = await register({
+						email: form.getValues("email"),
+						password: form.getValues("password"),
+						firstname: form.getValues("firstname"),
+						lastname: form.getValues("lastname"),
+					});
+					await signIn("credentials", {
+						callbackUrl: "/",
+						email: user.email,
+						password: values.password,
+					});
+					setIsLoading(false);
+				} catch (error) {
+					showBoundary(error);
+				}
 			})}
 		>
 			<h1 className="text-3xl font-bold">Registrierung</h1>