@tulip-systems/core 0.8.3 → 0.9.0

package/dist/src/modules/auth/components/forget-password-page.client.mjs

@@ -0,0 +1,72 @@
+"use client";
+
+import { Icons } from "../../../components/common/icons.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { useAuthClient } from "../hooks/use-auth-client.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { Form as Form$1, FormControl, FormField, FormItem, FormMessage } from "../../../components/ui/form.client.mjs";
+import { forgotPasswordSchema } from "../lib/validators.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+
+//#region src/modules/auth/components/forget-password-page.client.tsx
+function ForgetPasswordPage() {
+	const authClient = useAuthClient();
+	const [isPending, startTransition] = React.useTransition();
+	const form = useForm({
+		resolver: standardSchemaResolver(forgotPasswordSchema),
+		defaultValues: { email: "" },
+		disabled: isPending
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col space-y-2 text-center",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "font-semibold text-3xl tracking-tight",
+				children: "Wachtwoord vergeten"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "Schrijf je email zodat we je een mail kunnen verzenden om je wachtwoord te herstellen."
+			})]
+		}), /* @__PURE__ */ jsx(Form$1, {
+			...form,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: form.handleSubmit(({ email }) => startTransition(async () => {
+					await authClient.emailOtp.sendVerificationOtp({
+						type: "forget-password",
+						email,
+						fetchOptions: {
+							onSuccess: () => {
+								toast.success("Succesvol verzonden", { description: "We hebben je een email verzonden om je wachtwoord te herstellen." });
+							},
+							onError: ({ error }) => {
+								console.error("Error: ", error);
+								toast.error("Er is iets misgegaan");
+							}
+						}
+					});
+				})),
+				className: "space-y-6",
+				children: [/* @__PURE__ */ jsx(FormField, {
+					control: form.control,
+					name: "email",
+					render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+						placeholder: "email@example.be",
+						...field
+					}) }), /* @__PURE__ */ jsx(FormMessage, {})] })
+				}), /* @__PURE__ */ jsxs(Button, {
+					disabled: form.formState.disabled,
+					className: "w-full",
+					children: [isPending && /* @__PURE__ */ jsx(Icons.spinner, { className: "mr-2 h-4 w-4 animate-spin" }), "Verzenden"]
+				})]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { ForgetPasswordPage };

package/dist/src/modules/auth/components/guard.server.d.mts

@@ -0,0 +1,14 @@
+import { TDatabaseSchema } from "../../database/lib/types.mjs";
+import { TulipContext } from "../../config/lib/context.mjs";
+import "../../../../config.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import { PropsWithChildren } from "react";
+import "server-cli-only";
+
+//#region src/modules/auth/components/guard.server.d.ts
+declare function AuthGuard<TSchema extends TDatabaseSchema>({
+  children,
+  auth
+}: PropsWithChildren<Pick<TulipContext<TSchema>, "auth">>): Promise<react_jsx_runtime0.JSX.Element>;
+//#endregion
+export { AuthGuard };

package/dist/src/modules/auth/components/guard.server.mjs

@@ -0,0 +1,20 @@
+import { getQueryClient } from "../../router/lib/query-client.mjs";
+import { HydrateClient } from "../../router/lib/query-client.server.mjs";
+import { getSession } from "../lib/helpers.server.mjs";
+import { jsx } from "react/jsx-runtime";
+import { redirect } from "next/navigation";
+import "server-cli-only";
+
+//#region src/modules/auth/components/guard.server.tsx
+async function AuthGuard({ children, auth }) {
+	const session = await getSession({ auth });
+	if (!session) redirect("/auth/login");
+	getQueryClient().prefetchQuery({
+		queryKey: ["session"],
+		queryFn: async () => session
+	});
+	return /* @__PURE__ */ jsx(HydrateClient, { children });
+}
+
+//#endregion
+export { AuthGuard };

package/dist/src/modules/auth/components/login-page.client.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/auth/components/login-page.client.d.ts
+type LoginPageProps = {
+  options?: {
+    enablePasskey?: boolean;
+  };
+};
+declare function LoginPage(props: LoginPageProps): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { LoginPage };

package/dist/src/modules/auth/components/login-page.client.mjs

@@ -0,0 +1,155 @@
+"use client";
+
+import { Icons } from "../../../components/common/icons.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { useAuthClient } from "../hooks/use-auth-client.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { Form as Form$1, FormControl, FormField, FormItem, FormMessage } from "../../../components/ui/form.client.mjs";
+import { loginSchema } from "../lib/validators.mjs";
+import { Eye, EyeOff, FingerprintIcon } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { useRouter } from "next/navigation";
+import Link from "next/link";
+import { useMutation } from "@tanstack/react-query";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { parseAsString, useQueryState } from "nuqs";
+
+//#region src/modules/auth/components/login-page.client.tsx
+function LoginPage(props) {
+	const router = useRouter();
+	const authClient = useAuthClient();
+	const [callbackURL] = useQueryState("callbackURL", parseAsString);
+	const [showPassword, setShowPassword] = useState(false);
+	const loginWithEmailMutation = useMutation({
+		mutationFn: async (data) => {
+			const result = await authClient.signIn.email({
+				...data,
+				callbackURL: callbackURL ?? "/admin"
+			});
+			if (result.error) throw result.error;
+			return result.data;
+		},
+		onError: (err) => {
+			console.error("Login error: ", err);
+			if ("status" in err) {
+				if (err.status === 401) {
+					toast.error("Ongeldige email of wachtwoord");
+					return;
+				}
+				if (err.status === 403) {
+					toast.error("Account is geblokkeerd");
+					return;
+				}
+				if (err.status === 429) {
+					toast.error("Te veel login pogingen");
+					return;
+				}
+			}
+			toast.error("Er is iets misgegaan");
+		}
+	});
+	const loginWithPasskeyMutation = useMutation({
+		mutationFn: async () => {
+			const result = await authClient.signIn.passkey();
+			if (result.error) throw result.error;
+			return result.data;
+		},
+		onSuccess: () => {
+			router.replace(callbackURL ?? "/admin");
+			toast.success("Succesvol ingelogd");
+		},
+		onError: (err) => {
+			console.error("Login error: ", err);
+			toast.error("Er is iets misgegaan");
+		}
+	});
+	const disabled = loginWithEmailMutation.isPending || loginWithPasskeyMutation.isPending;
+	const form = useForm({
+		resolver: standardSchemaResolver(loginSchema),
+		defaultValues: {
+			email: "",
+			password: ""
+		},
+		disabled
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]",
+		children: [
+			/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col space-y-2 text-center",
+				children: [/* @__PURE__ */ jsx("h1", {
+					className: "font-semibold text-3xl tracking-tight",
+					children: "Login"
+				}), /* @__PURE__ */ jsx("p", {
+					className: "text-muted-foreground text-sm",
+					children: "Schrijf je email en wachtwoord in om in te loggen."
+				})]
+			}),
+			/* @__PURE__ */ jsx(Form$1, {
+				...form,
+				children: /* @__PURE__ */ jsxs("form", {
+					className: "space-y-6",
+					onSubmit: form.handleSubmit((data) => loginWithEmailMutation.mutate(data)),
+					children: [/* @__PURE__ */ jsxs("div", {
+						className: "flex flex-col gap-3",
+						children: [/* @__PURE__ */ jsx(FormField, {
+							control: form.control,
+							name: "email",
+							render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+								placeholder: "email@example.be",
+								...field
+							}) }), /* @__PURE__ */ jsx(FormMessage, {})] })
+						}), /* @__PURE__ */ jsx(FormField, {
+							control: form.control,
+							name: "password",
+							render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(Input, {
+									type: showPassword ? "text" : "password",
+									placeholder: "********",
+									...field
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent",
+									onClick: () => setShowPassword(!showPassword),
+									disabled,
+									children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 text-muted-foreground" })
+								})]
+							}) }), /* @__PURE__ */ jsx(FormMessage, {})] })
+						})]
+					}), /* @__PURE__ */ jsxs("div", {
+						className: "space-y-3",
+						children: [/* @__PURE__ */ jsxs(Button, {
+							disabled,
+							className: "w-full",
+							children: [loginWithEmailMutation.isPending && /* @__PURE__ */ jsx(Icons.spinner, { className: "mr-2 h-4 w-4 animate-spin" }), "Inloggen"]
+						}), props.options?.enablePasskey && /* @__PURE__ */ jsxs(Button, {
+							className: "w-full",
+							type: "button",
+							variant: "outline",
+							disabled,
+							onClick: () => loginWithPasskeyMutation.mutate(),
+							children: [loginWithPasskeyMutation.isPending ? /* @__PURE__ */ jsx(Icons.spinner, { className: "mr-2 h-4 w-4 animate-spin" }) : /* @__PURE__ */ jsx(FingerprintIcon, { className: "mr-2 h-4 w-4" }), "Inloggen met passkey"]
+						})]
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("p", {
+				className: "px-8 text-center text-muted-foreground text-sm",
+				children: /* @__PURE__ */ jsx(Link, {
+					href: "/auth/forget-password",
+					className: "underline underline-offset-4 hover:text-primary",
+					children: "Wachtwoord vergeten"
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { LoginPage };

package/dist/src/modules/auth/components/reset-password-page.client.d.mts

@@ -0,0 +1,11 @@
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+
+//#region src/modules/auth/components/reset-password-page.client.d.ts
+declare function ResetPasswordPage(params: {
+  searchParams: Promise<{
+    email: string;
+    otp: string;
+  }>;
+}): react_jsx_runtime0.JSX.Element;
+//#endregion
+export { ResetPasswordPage };

package/dist/src/modules/auth/components/reset-password-page.client.mjs

@@ -0,0 +1,121 @@
+"use client";
+
+import { Icons } from "../../../components/common/icons.mjs";
+import { Button } from "../../../components/ui/button.mjs";
+import { useAuthClient } from "../hooks/use-auth-client.mjs";
+import { Input } from "../../../components/ui/input.mjs";
+import { Form as Form$1, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../components/ui/form.client.mjs";
+import { resetPasswordSchema } from "../lib/validators.mjs";
+import { Eye, EyeOff } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { use, useState } from "react";
+import { useRouter } from "next/navigation";
+import { toast } from "sonner";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+
+//#region src/modules/auth/components/reset-password-page.client.tsx
+function ResetPasswordPage(params) {
+	const { email, otp } = use(params.searchParams);
+	const router = useRouter();
+	const authClient = useAuthClient();
+	const [showPassword, setShowPassword] = useState(false);
+	const [showPasswordConfirm, setShowPasswordConfirm] = useState(false);
+	const [isPending, startTransition] = React.useTransition();
+	const form = useForm({
+		resolver: standardSchemaResolver(resetPasswordSchema),
+		disabled: isPending
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]",
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: "flex flex-col space-y-2 text-center",
+			children: [/* @__PURE__ */ jsx("h1", {
+				className: "font-semibold text-3xl tracking-tight",
+				children: "Wachtwoord herstellen"
+			}), /* @__PURE__ */ jsx("p", {
+				className: "text-muted-foreground text-sm",
+				children: "Vul je nieuwe wachtwoord in"
+			})]
+		}), /* @__PURE__ */ jsx(Form$1, {
+			...form,
+			children: /* @__PURE__ */ jsxs("form", {
+				onSubmit: form.handleSubmit(({ password }) => startTransition(async () => {
+					await authClient.emailOtp.resetPassword({
+						email,
+						otp,
+						password,
+						fetchOptions: {
+							onSuccess: () => {
+								toast.success("Wachtwoord succesvol gewijzigd", { description: "Log nu in met je nieuw wachtwoord." });
+								router.replace("/auth/login");
+							},
+							onError: ({ error }) => {
+								console.error("Error: ", error);
+								toast.error("Er is iets misgegaan");
+							}
+						}
+					});
+				})),
+				className: "space-y-6",
+				children: [/* @__PURE__ */ jsxs("div", {
+					className: "flex flex-col gap-3",
+					children: [/* @__PURE__ */ jsx(FormField, {
+						control: form.control,
+						name: "password",
+						render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+							/* @__PURE__ */ jsx(FormLabel, { children: "Wachtwoord" }),
+							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(Input, {
+									type: showPassword ? "text" : "password",
+									placeholder: "********",
+									...field
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent",
+									onClick: () => setShowPassword(!showPassword),
+									disabled: form.formState.disabled,
+									children: showPassword ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 text-muted-foreground" })
+								})]
+							}) }),
+							/* @__PURE__ */ jsx(FormMessage, {})
+						] })
+					}), /* @__PURE__ */ jsx(FormField, {
+						control: form.control,
+						name: "passwordConfirmation",
+						render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+							/* @__PURE__ */ jsx(FormLabel, { children: "Herhaal Wachtwoord" }),
+							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsxs("div", {
+								className: "relative",
+								children: [/* @__PURE__ */ jsx(Input, {
+									type: showPasswordConfirm ? "text" : "password",
+									placeholder: "********",
+									...field
+								}), /* @__PURE__ */ jsx(Button, {
+									type: "button",
+									variant: "ghost",
+									size: "sm",
+									className: "absolute top-0 right-0 h-full px-3 py-2 hover:bg-transparent",
+									onClick: () => setShowPasswordConfirm(!showPasswordConfirm),
+									disabled: form.formState.disabled,
+									children: showPasswordConfirm ? /* @__PURE__ */ jsx(EyeOff, { className: "h-4 w-4 text-muted-foreground" }) : /* @__PURE__ */ jsx(Eye, { className: "h-4 w-4 text-muted-foreground" })
+								})]
+							}) }),
+							/* @__PURE__ */ jsx(FormMessage, {})
+						] })
+					})]
+				}), /* @__PURE__ */ jsxs(Button, {
+					disabled: form.formState.disabled,
+					className: "w-full",
+					children: [isPending && /* @__PURE__ */ jsx(Icons.spinner, { className: "mr-2 h-4 w-4 animate-spin" }), "Verzenden"]
+				})]
+			})
+		})]
+	});
+}
+
+//#endregion
+export { ResetPasswordPage };

package/dist/src/modules/auth/components/update-password-command.d.mts

@@ -0,0 +1,22 @@
+import { UpdatePasswordSchema } from "../lib/validators.mjs";
+import { CommandFormDialogTrigger } from "../../commands/components/primitives/form-dialog-command.client.mjs";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
+import React from "react";
+import { DefaultError, MutationOptions } from "@tanstack/react-query";
+
+//#region src/modules/auth/components/update-password-command.d.ts
+type UpdatePasswordCommandProps<TData = unknown, TError = DefaultError, TVariables = undefined, TOnMutateResult = unknown> = {
+  variables: (values: UpdatePasswordSchema) => TVariables;
+  mutation: MutationOptions<TData, TError, TVariables, TOnMutateResult>;
+  defaultValues?: Partial<UpdatePasswordSchema>;
+  children?: React.ReactNode;
+};
+declare function UpdatePasswordCommand<TData = unknown, TError = DefaultError, TVariables = undefined, TOnMutateResult = unknown>({
+  variables,
+  mutation,
+  defaultValues,
+  children
+}: UpdatePasswordCommandProps<TData, TError, TVariables, TOnMutateResult>): react_jsx_runtime0.JSX.Element;
+declare const UpdatePasswordCommandTrigger: typeof CommandFormDialogTrigger;
+//#endregion
+export { UpdatePasswordCommand, UpdatePasswordCommandProps, UpdatePasswordCommandTrigger };

package/dist/src/modules/auth/components/update-password-command.mjs

@@ -0,0 +1,47 @@
+"use client";
+
+import { Input } from "../../../components/ui/input.mjs";
+import { Form as Form$1, FormControl, FormField, FormItem, FormLabel, FormMessage } from "../../../components/ui/form.client.mjs";
+import { updatePasswordSchema } from "../lib/validators.mjs";
+import { CommandFormDialog, CommandFormDialogCancel, CommandFormDialogContent, CommandFormDialogFooter, CommandFormDialogHeader, CommandFormDialogSubmit, CommandFormDialogTitle, CommandFormDialogTrigger } from "../../commands/components/primitives/form-dialog-command.client.mjs";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useForm } from "react-hook-form";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+
+//#region src/modules/auth/components/update-password-command.tsx
+function UpdatePasswordCommand({ variables, mutation, defaultValues, children }) {
+	const form = useForm({
+		resolver: standardSchemaResolver(updatePasswordSchema),
+		defaultValues
+	});
+	return /* @__PURE__ */ jsxs(CommandFormDialog, { children: [children, /* @__PURE__ */ jsx(Form$1, {
+		...form,
+		children: /* @__PURE__ */ jsxs(CommandFormDialogContent, {
+			variables,
+			mutation,
+			children: [
+				/* @__PURE__ */ jsx(CommandFormDialogHeader, { children: /* @__PURE__ */ jsx(CommandFormDialogTitle, { children: "Wachtwoord wijzigen" }) }),
+				/* @__PURE__ */ jsx("div", {
+					className: "space-y-8 py-10",
+					children: /* @__PURE__ */ jsx(FormField, {
+						control: form.control,
+						name: "password",
+						render: ({ field }) => /* @__PURE__ */ jsxs(FormItem, { children: [
+							/* @__PURE__ */ jsx(FormLabel, { children: "Wachtwoord" }),
+							/* @__PURE__ */ jsx(FormControl, { children: /* @__PURE__ */ jsx(Input, {
+								...field,
+								type: "password"
+							}) }),
+							/* @__PURE__ */ jsx(FormMessage, {})
+						] })
+					})
+				}),
+				/* @__PURE__ */ jsxs(CommandFormDialogFooter, { children: [/* @__PURE__ */ jsx(CommandFormDialogCancel, { children: "Annuleren" }), /* @__PURE__ */ jsx(CommandFormDialogSubmit, { children: "Opslaan" })] })
+			]
+		})
+	})] });
+}
+const UpdatePasswordCommandTrigger = CommandFormDialogTrigger;
+
+//#endregion
+export { UpdatePasswordCommand, UpdatePasswordCommandTrigger };