Merge branch 'dev' into ajnart/fix-duplicate-users

apps/nextjs/src/app/[locale]/auth/invite/[id]/_registration-form.tsx

@@ -4,11 +4,8 @@ import { useRouter } from "next/navigation";
 import { Button, PasswordInput, Stack, TextInput } from "@mantine/core";
 
 import { clientApi } from "@homarr/api/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -24,18 +21,15 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
   const t = useScopedI18n("user");
   const router = useRouter();
   const { mutate, isPending } = clientApi.user.register.useMutation();
-  const form = useForm<FormType>({
-    validate: zodResolver(validation.user.registration),
+  const form = useZodForm(validation.user.registration, {
     initialValues: {
       username: "",
       password: "",
       confirmPassword: "",
     },
-    validateInputOnBlur: true,
-    validateInputOnChange: true,
   });
 
-  const handleSubmit = (values: FormType) => {
+  const handleSubmit = (values: z.infer<typeof validation.user.registration>) => {
     mutate(
       {
         ...values,
@@ -69,11 +63,7 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     <Stack gap="xl">
       <form onSubmit={form.onSubmit(handleSubmit)}>
         <Stack gap="lg">
-          <TextInput
-            label={t("field.username.label")}
-            autoComplete="off"
-            {...form.getInputProps("username")}
-          />
+          <TextInput label={t("field.username.label")} autoComplete="off" {...form.getInputProps("username")} />
           <PasswordInput
             label={t("field.password.label")}
             autoComplete="new-password"
@@ -93,5 +83,3 @@ export const RegistrationForm = ({ invite }: RegistrationFormProps) => {
     </Stack>
   );
 };
-
-type FormType = z.infer<typeof validation.user.registration>;

apps/nextjs/src/app/[locale]/auth/invite/[id]/page.tsx

@@ -18,18 +18,12 @@ interface InviteUsagePageProps {
   };
 }
 
-export default async function InviteUsagePage({
-  params,
-  searchParams,
-}: InviteUsagePageProps) {
+export default async function InviteUsagePage({ params, searchParams }: InviteUsagePageProps) {
   const session = await auth();
   if (session) notFound();
 
   const invite = await db.query.invites.findFirst({
-    where: and(
-      eq(invites.id, params.id),
-      eq(invites.token, searchParams.token),
-    ),
+    where: and(eq(invites.id, params.id), eq(invites.token, searchParams.token)),
     columns: {
       id: true,
       token: true,

apps/nextjs/src/app/[locale]/auth/login/_login-form.tsx

@@ -2,22 +2,12 @@
 
 import { useState } from "react";
 import { useRouter } from "next/navigation";
-import {
-  Alert,
-  Button,
-  PasswordInput,
-  rem,
-  Stack,
-  TextInput,
-} from "@mantine/core";
+import { Alert, Button, PasswordInput, rem, Stack, TextInput } from "@mantine/core";
 import { IconAlertTriangle } from "@tabler/icons-react";
 
 import { signIn } from "@homarr/auth/client";
-import { useForm, zodResolver } from "@homarr/form";
-import {
-  showErrorNotification,
-  showSuccessNotification,
-} from "@homarr/notifications";
+import { useZodForm } from "@homarr/form";
+import { showErrorNotification, showSuccessNotification } from "@homarr/notifications";
 import { useScopedI18n } from "@homarr/translation/client";
 import type { z } from "@homarr/validation";
 import { validation } from "@homarr/validation";
@@ -27,15 +17,14 @@ export const LoginForm = () => {
   const router = useRouter();
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string>();
-  const form = useForm<FormType>({
-    validate: zodResolver(validation.user.signIn),
+  const form = useZodForm(validation.user.signIn, {
     initialValues: {
       name: "",
       password: "",
     },
   });
 
-  const handleSubmitAsync = async (values: FormType) => {
+  const handleSubmitAsync = async (values: z.infer<typeof validation.user.signIn>) => {
     setIsLoading(true);
     setError(undefined);
     await signIn("credentials", {
@@ -66,18 +55,10 @@ export const LoginForm = () => {
 
   return (
     <Stack gap="xl">
-      <form
-        onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}
-      >
+      <form onSubmit={form.onSubmit((values) => void handleSubmitAsync(values))}>
         <Stack gap="lg">
-          <TextInput
-            label={t("field.username.label")}
-            {...form.getInputProps("name")}
-          />
-          <PasswordInput
-            label={t("field.password.label")}
-            {...form.getInputProps("password")}
-          />
+          <TextInput label={t("field.username.label")} {...form.getInputProps("name")} />
+          <PasswordInput label={t("field.password.label")} {...form.getInputProps("password")} />
           <Button type="submit" fullWidth loading={isLoading}>
             {t("action.login.label")}
           </Button>
@@ -92,5 +73,3 @@ export const LoginForm = () => {
     </Stack>
   );
 };
-
-type FormType = z.infer<typeof validation.user.signIn>;