feat: add i18n translated form errors (#509)

apps/nextjs/src/app/[locale]/manage/integrations/_integration-secret-inputs.tsx

@@ -10,6 +10,7 @@ import { useI18n } from "@homarr/translation/client";
 import { integrationSecretIcons } from "./_integration-secret-icons";
 
 interface IntegrationSecretInputProps {
+  withAsterisk?: boolean;
   label?: string;
   kind: IntegrationSecretKind;
   value?: string;

apps/nextjs/src/app/[locale]/manage/integrations/edit/[id]/_integration-edit-form.tsx

@@ -10,7 +10,7 @@ import {
   getAllSecretKindOptions,
   getDefaultSecretKinds,
 } from "@homarr/definitions";
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import { useConfirmModal } from "@homarr/modals";
 import {
   showErrorNotification,
@@ -55,9 +55,8 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
   });
 
   const router = useRouter();
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.integration.update.omit({ id: true }), {
     initialValues: initialFormValues,
-    validate: zodResolver(validation.integration.update.omit({ id: true })),
     onValuesChange,
   });
   const { mutateAsync, isPending } = clientApi.integration.update.useMutation();
@@ -103,11 +102,13 @@ export const EditIntegrationForm = ({ integration }: EditIntegrationForm) => {
         <TestConnectionNoticeAlert />
 
         <TextInput
+          withAsterisk
           label={t("integration.field.name.label")}
           {...form.getInputProps("name")}
         />
 
         <TextInput
+          withAsterisk
           label={t("integration.field.url.label")}
           {...form.getInputProps("url")}
         />

apps/nextjs/src/app/[locale]/manage/integrations/new/_integration-new-form.tsx

@@ -19,7 +19,7 @@ import type {
 } from "@homarr/definitions";
 import { getAllSecretKindOptions } from "@homarr/definitions";
 import type { UseFormReturnType } from "@homarr/form";
-import { useForm, zodResolver } from "@homarr/form";
+import { useZodForm } from "@homarr/form";
 import {
   showErrorNotification,
   showSuccessNotification,
@@ -60,9 +60,8 @@ export const NewIntegrationForm = ({
     initialFormValue: initialFormValues,
   });
   const router = useRouter();
-  const form = useForm<FormType>({
+  const form = useZodForm(validation.integration.create.omit({ kind: true }), {
     initialValues: initialFormValues,
-    validate: zodResolver(validation.integration.create.omit({ kind: true })),
     onValuesChange,
   });
   const { mutateAsync, isPending } = clientApi.integration.create.useMutation();
@@ -100,11 +99,13 @@ export const NewIntegrationForm = ({
         <TestConnectionNoticeAlert />
 
         <TextInput
+          withAsterisk
           label={t("integration.field.name.label")}
           {...form.getInputProps("name")}
         />
 
         <TextInput
+          withAsterisk
           label={t("integration.field.url.label")}
           {...form.getInputProps("url")}
         />
@@ -119,6 +120,7 @@ export const NewIntegrationForm = ({
             )}
             {form.values.secrets.map(({ kind }, index) => (
               <IntegrationSecretInput
+                withAsterisk
                 key={kind}
                 kind={kind}
                 {...form.getInputProps(`secrets.${index}.value`)}