@tulip-systems/core 0.2.0

package/src/lib/utils/time-picker.ts

@@ -0,0 +1,139 @@
+/**
+ * regular expression to check for valid hour format (01-23)
+ */
+export function isValidHour(value: string) {
+  return /^(0[0-9]|1[0-9]|2[0-3])$/.test(value);
+}
+
+/**
+ * regular expression to check for valid 12 hour format (01-12)
+ */
+export function isValid12Hour(value: string) {
+  return /^(0[1-9]|1[0-2])$/.test(value);
+}
+
+/**
+ * regular expression to check for valid minute format (00-59)
+ */
+export function isValidMinuteOrSecond(value: string) {
+  return /^[0-5][0-9]$/.test(value);
+}
+
+type GetValidNumberConfig = { max: number; min?: number; loop?: boolean };
+
+export function getValidNumber(
+  value: string,
+  { max, min = 0, loop = false }: GetValidNumberConfig,
+) {
+  let numericValue = parseInt(value, 10);
+
+  if (!isNaN(numericValue)) {
+    if (!loop) {
+      if (numericValue > max) numericValue = max;
+      if (numericValue < min) numericValue = min;
+    } else {
+      if (numericValue > max) numericValue = min;
+      if (numericValue < min) numericValue = max;
+    }
+    return numericValue.toString().padStart(2, "0");
+  }
+
+  return "00";
+}
+
+export function getValidHour(value: string) {
+  if (isValidHour(value)) return value;
+  return getValidNumber(value, { max: 23 });
+}
+
+export function getValid12Hour(value: string) {
+  if (isValid12Hour(value)) return value;
+  return getValidNumber(value, { max: 12 });
+}
+
+export function getValidMinuteOrSecond(value: string) {
+  if (isValidMinuteOrSecond(value)) return value;
+  return getValidNumber(value, { max: 59 });
+}
+
+type GetValidArrowNumberConfig = {
+  min: number;
+  max: number;
+  step: number;
+};
+
+export function getValidArrowNumber(value: string, { min, max, step }: GetValidArrowNumberConfig) {
+  let numericValue = parseInt(value, 10);
+  if (!isNaN(numericValue)) {
+    numericValue += step;
+    return getValidNumber(String(numericValue), { min, max, loop: true });
+  }
+  return "00";
+}
+
+export function getValidArrowHour(value: string, step: number) {
+  return getValidArrowNumber(value, { min: 0, max: 23, step });
+}
+
+export function getValidArrowMinuteOrSecond(value: string, step: number) {
+  return getValidArrowNumber(value, { min: 0, max: 59, step });
+}
+
+export function setMinutes(date: Date, value: string) {
+  const minutes = getValidMinuteOrSecond(value);
+  date.setMinutes(parseInt(minutes, 10));
+  return date;
+}
+
+export function setSeconds(date: Date, value: string) {
+  const seconds = getValidMinuteOrSecond(value);
+  date.setSeconds(parseInt(seconds, 10));
+  return date;
+}
+
+export function setHours(date: Date, value: string) {
+  const hours = getValidHour(value);
+  date.setHours(parseInt(hours, 10));
+  return date;
+}
+
+export type TimePickerType = "minutes" | "seconds" | "hours"; // | "12hours";
+
+export function setDateByType(date: Date, value: string, type: TimePickerType) {
+  switch (type) {
+    case "minutes":
+      return setMinutes(date, value);
+    case "seconds":
+      return setSeconds(date, value);
+    case "hours":
+      return setHours(date, value);
+    default:
+      return date;
+  }
+}
+
+export function getDateByType(date: Date, type: TimePickerType) {
+  switch (type) {
+    case "minutes":
+      return getValidMinuteOrSecond(String(date.getMinutes()));
+    case "seconds":
+      return getValidMinuteOrSecond(String(date.getSeconds()));
+    case "hours":
+      return getValidHour(String(date.getHours()));
+    default:
+      return "00";
+  }
+}
+
+export function getArrowByType(value: string, step: number, type: TimePickerType) {
+  switch (type) {
+    case "minutes":
+      return getValidArrowMinuteOrSecond(value, step);
+    case "seconds":
+      return getValidArrowMinuteOrSecond(value, step);
+    case "hours":
+      return getValidArrowHour(value, step);
+    default:
+      return "00";
+  }
+}

package/src/lib/utils/url.ts

@@ -0,0 +1,12 @@
+/**
+ * Get the production url for a path
+ * @param {string} path
+ * @returns {string}
+ */
+export function url(path: string = ""): string {
+  const base = process.env.NEXT_PUBLIC_DEPLOYMENT_URL ?? process.env.NEXT_PUBLIC_VERCEL_URL;
+
+  if (base) return `https://${base}${path}`;
+
+  return `http://localhost:${process.env.NEXT_PUBLIC_PORT ?? 3000}` + path;
+}

package/src/modules/auth/components/allowed.client.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { JSX } from "react";
+import { usePermission } from "../hooks/use-permission.client";
+import { type Permission } from "../lib/permissions";
+
+/**
+ * Allowed
+ */
+type AllowedProps = {
+  permission: Permission;
+  fallback?: JSX.Element | string;
+  children: React.ReactNode;
+};
+
+export function Allowed({ permission, fallback, children }: AllowedProps) {
+  const { data } = usePermission(permission);
+
+  if (data?.success) return <>{children}</>;
+
+  return <>{fallback}</>;
+}

package/src/modules/auth/components/allowed.server.tsx

@@ -0,0 +1,41 @@
+import "server-cli-only";
+
+import { type Permission } from "@/modules/auth/lib/permissions";
+import { type TDatabaseSchema } from "@/modules/config/db/types";
+import { TulipConfig } from "@/modules/config/lib/config.server";
+import { getTulip } from "@/modules/config/lib/resolve.server";
+import { JSX } from "react";
+import { getSession } from "../lib/helpers.server";
+
+type AllowedProps<TSchema extends TDatabaseSchema> = {
+  config: TulipConfig<TSchema>;
+  permission: Permission;
+  fallback?: JSX.Element | string;
+  children: React.ReactNode;
+};
+
+export async function Allowed<TSchema extends TDatabaseSchema>({
+  config,
+  permission,
+  fallback,
+  children,
+}: AllowedProps<TSchema>) {
+  const { auth } = await getTulip({ config });
+  const { user } = await getSession({ auth });
+
+  const { success, error } = await auth.api.userHasPermission({
+    body: {
+      userId: user.id,
+      permission,
+    },
+  });
+
+  if (error) {
+    console.error(error);
+    return <>{fallback}</>;
+  }
+
+  if (success) return <>{children}</>;
+
+  return <>{fallback}</>;
+}

package/src/modules/auth/components/auth-layout.server.tsx

@@ -0,0 +1,31 @@
+import "server-cli-only";
+
+import { TDatabaseSchema } from "@/modules/config/db/types";
+import { getTulip, GetTulipParams } from "@/modules/config/lib/resolve.server";
+import Image from "next/image";
+import Link from "next/link";
+import { PropsWithChildren } from "react";
+
+export async function AuthLayout<TSchema extends TDatabaseSchema>(
+  props: PropsWithChildren<GetTulipParams<TSchema>>,
+) {
+  const { general } = await getTulip(props);
+
+  return (
+    <div className="container relative mx-auto grid h-[100dvh] flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
+      <div className="bg-muted relative hidden h-full flex-col p-10 text-white lg:flex dark:border-r">
+        <Image src="/images/auth-background.jpeg" alt="Background" className="object-cover" fill />
+
+        <Link href="/" className="relative z-20 flex items-center text-lg font-bold">
+          {general.name}
+        </Link>
+
+        <div className="relative z-20 mt-auto">
+          <blockquote className="space-y-2 text-sm">Developed by NewCode</blockquote>
+        </div>
+      </div>
+
+      {props.children}
+    </div>
+  );
+}

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

@@ -0,0 +1,78 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form.client";
+import { Input } from "@/components/ui/input";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { authClient } from "../handler/client.client";
+import { forgotPasswordSchema } from "../lib/validators";
+
+export function ForgetPasswordPage() {
+  const [isPending, startTransition] = React.useTransition();
+
+  const form = useForm<z.infer<typeof forgotPasswordSchema>>({
+    resolver: standardSchemaResolver(forgotPasswordSchema),
+    defaultValues: { email: "" },
+    disabled: isPending,
+  });
+
+  return (
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord vergeten</h1>
+        <p className="text-muted-foreground text-sm">
+          Schrijf je email zodat we je een mail kunnen verzenden om je wachtwoord te herstellen.
+        </p>
+      </div>
+
+      <Form {...form}>
+        <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"
+        >
+          <FormField
+            control={form.control}
+            name="email"
+            render={({ field }) => (
+              <FormItem>
+                <FormControl>
+                  <Input placeholder="email@example.be" {...field} />
+                </FormControl>
+                <FormMessage />
+              </FormItem>
+            )}
+          />
+
+          <Button disabled={form.formState.disabled} className="w-full">
+            {isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Verzenden
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/src/modules/auth/components/login-page.client.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form.client";
+import { Input } from "@/components/ui/input";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
+import React, { use } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { authClient } from "../handler/client.client";
+import { loginSchema } from "../lib/validators";
+
+export function LoginPage(props: { searchParams: Promise<{ callbackURL?: string }> }) {
+  const { callbackURL } = use(props.searchParams);
+
+  const router = useRouter();
+
+  const [isPending, startTransition] = React.useTransition();
+
+  const form = useForm<z.infer<typeof loginSchema>>({
+    resolver: standardSchemaResolver(loginSchema),
+    defaultValues: { email: "", password: "" },
+    disabled: isPending,
+  });
+
+  return (
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight">Login</h1>
+        <p className="text-muted-foreground text-sm">
+          Schrijf je email en wachtwoord in om in te loggen.
+        </p>
+      </div>
+
+      <Form {...form}>
+        <form
+          className="space-y-6"
+          onSubmit={form.handleSubmit((data) =>
+            startTransition(async () => {
+              await authClient.signIn.email(data, {
+                onSuccess: () => {
+                  router.replace(callbackURL ?? "/");
+                  toast.success("Succesvol ingelogd");
+                },
+                onError: ({ error }) => {
+                  console.error("Login error: ", error);
+
+                  if (error.status === 401) {
+                    toast.error("Ongeldige email of wachtwoord");
+                    return;
+                  }
+
+                  if (error.status === 403) {
+                    toast.error("Account is geblokkeerd");
+                    return;
+                  }
+
+                  if (error.status === 429) {
+                    toast.error("Te veel login pogingen");
+                    return;
+                  }
+
+                  toast.error("Er is iets misgegaan");
+                },
+              });
+            }),
+          )}
+        >
+          <div className="flex flex-col gap-3">
+            <FormField
+              control={form.control}
+              name="email"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input placeholder="email@example.be" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormControl>
+                    <Input type="password" placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <Button disabled={form.formState.disabled} className="w-full">
+            {isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Inloggen
+          </Button>
+        </form>
+      </Form>
+
+      <p className="text-muted-foreground px-8 text-center text-sm">
+        <Link
+          href="/auth/forget-password"
+          className="hover:text-primary underline underline-offset-4"
+        >
+          Wachtwoord vergeten
+        </Link>
+      </p>
+    </div>
+  );
+}

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

@@ -0,0 +1,107 @@
+"use client";
+
+import { Icons } from "@/components/common/icons";
+import { Button } from "@/components/ui/button";
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form.client";
+import { Input } from "@/components/ui/input";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import { useRouter } from "next/navigation";
+import React, { use } from "react";
+import { useForm } from "react-hook-form";
+import { toast } from "sonner";
+import * as z from "zod";
+import { authClient } from "../handler/client.client";
+import { resetPasswordSchema } from "../lib/validators";
+
+export function ResetPasswordPage(params: {
+  searchParams: Promise<{ email: string; otp: string }>;
+}) {
+  const { email, otp } = use(params.searchParams);
+
+  const router = useRouter();
+
+  const [isPending, startTransition] = React.useTransition();
+
+  const form = useForm<z.infer<typeof resetPasswordSchema>>({
+    resolver: standardSchemaResolver(resetPasswordSchema),
+    disabled: isPending,
+  });
+
+  return (
+    <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
+      <div className="flex flex-col space-y-2 text-center">
+        <h1 className="text-3xl font-semibold tracking-tight">Wachtwoord herstellen</h1>
+        <p className="text-muted-foreground text-sm">K</p>
+      </div>
+
+      <Form {...form}>
+        <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"
+        >
+          <div className="flex flex-col gap-3">
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wachtwoord</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="passwordConfirmation"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Herhaal Wachtwoord</FormLabel>
+                  <FormControl>
+                    <Input type="password" placeholder="********" {...field} />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <Button disabled={form.formState.disabled} className="w-full">
+            {isPending && <Icons.spinner className="mr-2 h-4 w-4 animate-spin" />}
+            Verzenden
+          </Button>
+        </form>
+      </Form>
+    </div>
+  );
+}

package/src/modules/auth/components/update-password-command.tsx

@@ -0,0 +1,79 @@
+"use client";
+
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from "@/components/ui/form.client";
+import { Input } from "@/components/ui/input";
+import {
+  CommandFormDialog,
+  CommandFormDialogCancel,
+  CommandFormDialogContent,
+  CommandFormDialogFooter,
+  CommandFormDialogHeader,
+  CommandFormDialogSubmit,
+  CommandFormDialogTitle,
+  CommandFormDialogTrigger,
+} from "@/modules/commands/components/form-dialog-command.client";
+import { standardSchemaResolver } from "@hookform/resolvers/standard-schema";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { updatePasswordSchema, UpdatePasswordSchema } from "../lib/validators";
+
+export type UpdatePasswordCommandProps = {
+  action: (data: UpdatePasswordSchema) => Promise<unknown>;
+  defaultValues?: Partial<UpdatePasswordSchema>;
+  children?: React.ReactNode;
+};
+
+export function UpdatePasswordCommand({
+  action,
+  defaultValues,
+  children,
+}: UpdatePasswordCommandProps) {
+  const form = useForm<UpdatePasswordSchema>({
+    resolver: standardSchemaResolver(updatePasswordSchema),
+    defaultValues,
+  });
+
+  return (
+    <CommandFormDialog>
+      {children}
+
+      <Form {...form}>
+        <CommandFormDialogContent action={action} message="Succesvol aangepast">
+          <CommandFormDialogHeader>
+            <CommandFormDialogTitle>Wachtwoord wijzigen</CommandFormDialogTitle>
+          </CommandFormDialogHeader>
+
+          <div className="space-y-8 py-10">
+            <FormField
+              control={form.control}
+              name="password"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Wachtwoord</FormLabel>
+                  <FormControl>
+                    <Input {...field} type="password" />
+                  </FormControl>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </div>
+
+          <CommandFormDialogFooter>
+            <CommandFormDialogCancel>Annuleren</CommandFormDialogCancel>
+            <CommandFormDialogSubmit>Opslaan</CommandFormDialogSubmit>
+          </CommandFormDialogFooter>
+        </CommandFormDialogContent>
+      </Form>
+    </CommandFormDialog>
+  );
+}
+
+export const UpdatePasswordCommandTrigger = CommandFormDialogTrigger;