Error boundary

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