Simplify and better input models

front/src/back-api/model/user-create.ts

@@ -1,14 +1,12 @@
 /**
  * Interface of the server (auto-generated code)
  */
-import { z as zod } from "zod";
-
+import { z as zod } from 'zod';
 
 export const ZodUserCreate = zod.object({
   login: zod.string().min(3).max(128),
   email: zod.string().min(5).max(128),
   password: zod.string().min(128).max(128),
-
 });
 
 export type UserCreate = zod.infer<typeof ZodUserCreate>;
@@ -26,7 +24,6 @@ export const ZodUserCreateWrite = zod.object({
   login: zod.string().min(3).max(128).optional(),
   email: zod.string().min(5).max(128).optional(),
   password: zod.string().min(128).max(128).optional(),
-
 });
 
 export type UserCreateWrite = zod.infer<typeof ZodUserCreateWrite>;

front/src/components/form/FormCovers.tsx

@@ -1,24 +1,11 @@
-import {
-  DragEventHandler,
-  ReactNode,
-  RefObject,
-} from 'react';
+import { DragEventHandler, ReactNode, RefObject } from 'react';
 
-import {
-  Box,
-  BoxProps,
-  Center,
-  Flex,
-  HStack,
-  Image,
-} from '@chakra-ui/react';
-import {
-  MdHighlightOff,
-  MdUploadFile,
-} from 'react-icons/md';
+import { Box, BoxProps, Center, Flex, HStack, Image } from '@chakra-ui/react';
+import { MdHighlightOff, MdUploadFile } from 'react-icons/md';
 
 import { FormGroup } from '@/components/form/FormGroup';
 import { DataUrlAccess } from '@/utils/data-url-access';
+
 import { useFormidableContextElement } from '../formidable';
 
 export type DragNdropProps = {
@@ -111,7 +98,9 @@ export const CenterIcon = ({
         top="50%"
         left="50%"
         transform="translate(-50%, -50%)"
-      >{children}</Box>
+      >
+        {children}
+      </Box>
     </Box>
   );
 };
@@ -135,15 +124,10 @@ export const FormCovers = ({
   onRemove = () => {},
   ...rest
 }: FormCoversProps) => {
-  const {value, isModify, onRestore} = useFormidableContextElement(name);
-  const urls =
-    DataUrlAccess.getListThumbnailUrl(value) ?? [];
+  const { value } = useFormidableContextElement(name);
+  const urls = DataUrlAccess.getListThumbnailUrl(value) ?? [];
   return (
-    <FormGroup
-      isModify={isModify}
-      onRestore={onRestore}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <HStack wrap="wrap" width="full">
         {urls.map((data, index) => (
           <Flex align="flex-start" key={data}>

front/src/components/form/FormGroup.tsx

@@ -1,41 +1,21 @@
 import { ReactNode } from 'react';
 
-import { Flex, Text } from '@chakra-ui/react';
+import { Box, Flex, Text } from '@chakra-ui/react';
 import { MdErrorOutline, MdHelpOutline, MdRefresh } from 'react-icons/md';
 
-export type FormGroupProps = {
-  error?: ReactNode;
-  help?: ReactNode;
-  label?: ReactNode;
-  isModify?: boolean;
-  onRestore?: () => void;
-  isRequired?: boolean;
-  children: ReactNode;
-  enableModifyNotification?: boolean;
-  enableReset?: boolean;
-};
+import { useFormidableContextElement } from '../formidable';
 
-export const FormGroup = ({
-  children,
-  error,
-  help,
+const DisplayLabel = ({
   label,
-  isModify = false,
-  isRequired = false,
-  enableModifyNotification = false,
-  enableReset = false,
-  onRestore,
-}: FormGroupProps) => (
-  <Flex
-    borderLeftWidth="3px"
-    borderLeftColor={error ? 'red' : enableModifyNotification && isModify ? 'blue' : '#00000000'}
-    paddingLeft="7px"
-    paddingY="4px"
-    width="full"
-    direction="column"
-  >
-    <Flex direction="row" width="full" gap="52px">
-      {!!label && (
+  isRequired,
+}: {
+  label?: ReactNode;
+  isRequired: boolean;
+}) => {
+  if (!label) {
+    return <></>;
+  }
+  return (
     <Text marginRight="auto" fontWeight="bold">
       {label}{' '}
       {isRequired && (
@@ -44,24 +24,105 @@ export const FormGroup = ({
         </Text>
       )}
     </Text>
-      )}
+  );
+};
+
+const DisplayHelp = ({ help }: { help?: ReactNode }) => {
+  if (!help) {
+    return <></>;
+  }
+  return (
+    <Flex direction="row">
+      <MdHelpOutline />
+      <Text alignContent="center">{help}</Text>
+    </Flex>
+  );
+};
+const DisplayError = ({ error }: { error?: ReactNode }) => {
+  if (!error) {
+    return <></>;
+  }
+  return (
+    <Flex direction="row" color="red.600">
+      <MdErrorOutline />
+      <Text alignContent="center">{error}</Text>
+    </Flex>
+  );
+};
+
+export type FormGroupProps = {
+  children: ReactNode;
+  name: string;
+  error?: ReactNode;
+  help?: ReactNode;
+  label?: ReactNode;
+  isRequired?: boolean;
+  disableSingleLine?: boolean;
+};
+
+export const FormGroup = ({
+  children,
+  name,
+  help,
+  label,
+  isRequired = false,
+  disableSingleLine,
+}: FormGroupProps) => {
+  const { form, error, isModify, onRestore } =
+    useFormidableContextElement(name);
+  const enableModifyNotification =
+    form.configuration.enableModifyNotification ?? false;
+  const enableReset = form.configuration.enableReset ?? false;
+  const singleLine = disableSingleLine
+    ? false
+    : form.configuration.singleLineForm;
+  return (
+    <Flex
+      borderLeftWidth="3px"
+      borderLeftColor={
+        error
+          ? 'red.600'
+          : enableModifyNotification && isModify
+            ? 'blue.600'
+            : '#00000000'
+      }
+      paddingLeft="7px"
+      paddingY="4px"
+      width="full"
+      direction="column"
+    >
+      {singleLine && (
+        <>
+          <Flex direction="row" width="full" gap="52px">
+            <Box width="10%">
+              <DisplayLabel label={label} isRequired={isRequired} />
               {!!onRestore && isModify && enableReset && (
                 <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
               )}
+            </Box>
+            <Flex direction="column" width={'90%'} gap="5px">
+              {children}
+              <DisplayHelp help={help} />
+              <DisplayError error={error} />
+            </Flex>
+          </Flex>
+        </>
+      )}
+      {!singleLine && (
+        <>
+          <Flex direction="row" width="full" gap="52px">
+            <Box width="full">
+              <DisplayLabel label={label} isRequired={isRequired} />
+              {!!onRestore && isModify && enableReset && (
+                <MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
+              )}
+            </Box>
           </Flex>
           {children}
-    {!!help && (
-      <Flex direction="row">
-        <MdHelpOutline />
-        <Text>{help}</Text>
-      </Flex>
-    )}
-
-    {!!error && (
-      <Flex direction="row">
-        <MdErrorOutline />
-        <Text>{error}</Text>
-      </Flex>
+          <DisplayHelp help={help} />
+          <DisplayError error={error} />
+        </>
       )}
     </Flex>
   );
+};

front/src/components/form/FormInput.tsx

@@ -19,13 +19,10 @@ export const FormInput = ({
   placeholder,
   ...rest
 }: FormInputProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const {value, onChange} = useFormidableContextElement(name);
   return (
     <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
+      name={name}
       {...rest}
     >
       <Input

front/src/components/form/FormNumber.tsx

@@ -1,8 +1,13 @@
 import { RefObject } from 'react';
 
 import { FormGroup } from '@/components/form/FormGroup';
-import { NumberInputField, NumberInputProps, NumberInputRoot } from '../ui/number-input';
+
 import { useFormidableContextElement } from '../formidable';
+import {
+  NumberInputField,
+  NumberInputProps,
+  NumberInputRoot,
+} from '../ui/number-input';
 
 export type FormNumberProps = Pick<
   NumberInputProps,
@@ -25,15 +30,10 @@ export const FormNumber = ({
   defaultValue,
   ...rest
 }: FormNumberProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   return (
-    <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <NumberInputRoot
         ref={ref}
         value={value}

front/src/components/form/FormPassword.tsx

@@ -21,20 +21,17 @@ export const FormPassword = ({
   placeholder,
   ...rest
 }: FormInputProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const {value, onChange} = useFormidableContextElement(name);
   const [showPassword, setShowPassword] = useState<boolean>(false);
   function toggleVisible(): void {
     setShowPassword((value) => ! value)
   }
   return (
     <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
+      name={name}
       {...rest}
     >
-      <chakra.div position="relative">
+      <chakra.div position="relative" width="full">
         <Input
           ref={ref}
           type={showPassword? "text" : "password"}

front/src/components/form/FormSelect.tsx

@@ -1,6 +1,8 @@
 import { RefObject } from 'react';
+
 import { FormGroup } from '@/components/form/FormGroup';
 import { SelectSingle } from '@/components/select/SelectSingle';
+
 import { useFormidableContextElement } from '../formidable';
 
 export type FormSelectProps = {
@@ -37,21 +39,18 @@ export const FormSelect = ({
   addNewItem,
   ...rest
 }: FormSelectProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   // if set add capability to add the search item
   const onCreate = !addNewItem
     ? undefined
     : (data: string) => {
-      addNewItem(data).then((data: object) => form.setValues({ [name]: data[keyInputKey] }));
+        addNewItem(data).then((data: object) =>
+          form.setValues({ [name]: data[keyInputKey] })
+        );
       };
   return (
-    <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <SelectSingle
         ref={ref}
         value={value}

front/src/components/form/FormSelectMultiple.tsx

@@ -2,7 +2,11 @@ import { RefObject } from 'react';
 
 import { FormGroup } from '@/components/form/FormGroup';
 import { SelectMultiple } from '@/components/select/SelectMultiple';
-import { useFormidableContext, useFormidableContextElement } from '../formidable';
+
+import {
+  useFormidableContext,
+  useFormidableContextElement,
+} from '../formidable';
 
 export type FormSelectMultipleProps = {
   // Form: Name of the variable
@@ -35,21 +39,20 @@ export const FormSelectMultiple = ({
   addNewItem,
   ...rest
 }: FormSelectMultipleProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   // if set add capability to add the search item
   const onCreate = !addNewItem
     ? undefined
     : (data: string) => {
-      addNewItem(data).then((data: object) => form.setValues({ [name]: [...(form.values[name] ?? []), data[keyInputKey]] }));
+        addNewItem(data).then((data: object) =>
+          form.setValues({
+            [name]: [...(form.values[name] ?? []), data[keyInputKey]],
+          })
+        );
       };
   return (
-    <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <SelectMultiple
         //ref={ref}
         values={value}

front/src/components/form/FormTextarea.tsx

@@ -3,6 +3,7 @@ import { RefObject } from 'react';
 import { Textarea } from '@chakra-ui/react';
 
 import { FormGroup } from '@/components/form/FormGroup';
+
 import { useFormidableContextElement } from '../formidable';
 
 export type FormTextareaProps = {
@@ -19,15 +20,10 @@ export const FormTextarea = ({
   placeholder,
   ...rest
 }: FormTextareaProps) => {
-  const {form, value, isModify, onChange, onRestore} = useFormidableContextElement(name);
+  const { form, value, isModify, onChange, onRestore } =
+    useFormidableContextElement(name);
   return (
-    <FormGroup
-      enableModifyNotification={form.configuration.enableModifyNotification}
-      enableReset={form.configuration.enableReset}
-      isModify={isModify}
-      onRestore={onRestore}
-      {...rest}
-    >
+    <FormGroup name={name} {...rest}>
       <Textarea
         name={name}
         ref={ref}

front/src/components/formidable/FormidableConfig.tsx

@@ -1,26 +1,39 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { z as zod } from 'zod';
+
 import { isArray, isNullOrUndefined, isObject } from '@/utils/validator';
+
 import { getDifferences, hasAnyTrue } from './utils';
 
 export type FormidableConfig = {
   enableReset?: boolean;
   enableModifyNotification?: boolean;
+  singleLineForm?: boolean;
 };
 const initialFormConfig: Required<FormidableConfig> = {
   enableReset: true,
   enableModifyNotification: true,
+  singleLineForm: false,
 };
 
 export const useFormidable = <TYPE extends object = object>({
   initialValues = {} as TYPE,
   configuration: inputConfiguration = initialFormConfig,
+  resolver = (_data: TYPE) => {
+    return {};
+  },
 }: {
   initialValues?: TYPE;
   configuration?: FormidableConfig;
+  resolver?: (data: any) => Record<string, string>;
 }) => {
-  const configuration: Required<FormidableConfig> = { ...initialFormConfig, ...inputConfiguration };
+  const configuration: Required<FormidableConfig> = {
+    ...initialFormConfig,
+    ...inputConfiguration,
+  };
   const [values, setValues] = useState<TYPE>({ ...initialValues } as TYPE);
+  const [errors, setErrors] = useState<object>({});
   const [initialData, setInitialData] = useState<TYPE>(initialValues);
   const [isModify, setIsModify] = useState<{ [key: string]: boolean }>({});
   const [isFormModified, setIsFormModified] = useState<boolean>(false);
@@ -57,10 +70,11 @@ export const useFormidable = <TYPE extends object = object>({
         const ret = getDifferences(initialData, newValues);
         setIsModify(ret);
         setIsFormModified(hasAnyTrue(ret));
+        setErrors(resolver(newValues));
         return newValues;
       });
     },
-    [setValues, initialData]
+    [setValues, initialData, setErrors, setIsFormModified, setIsModify]
   );
   const restoreValue = useCallback(
     (data: object) => {
@@ -121,6 +135,7 @@ export const useFormidable = <TYPE extends object = object>({
     restoreValue,
     setValues: setValuesExternal,
     values,
+    errors,
     configuration,
   };
 };

front/src/components/formidable/FormidableContext.tsx

@@ -1,8 +1,10 @@
-
-
-
-
-import { ReactNode, createContext, useCallback, useContext, useMemo } from 'react';
+import {
+  ReactNode,
+  createContext,
+  useCallback,
+  useContext,
+  useMemo,
+} from 'react';
 
 import { UseFormidableReturn } from './FormidableConfig';
 
@@ -12,47 +14,65 @@ export type FromContextProps = {
 
 export const formContext = createContext<FromContextProps>({
   form: {
-    getDeltaData: ({}:{omit?: string[], only?: string[]}) => {return {};},
+    getDeltaData: ({}: { omit?: string[]; only?: string[] }) => {
+      return {};
+    },
     isFormModified: false,
     isModify: {},
     restoreValues: () => {},
     restoreValue: (_data: object) => {},
     setValues: (_data: object) => {},
     values: {},
-    configuration: {enableReset: false, enableModifyNotification: false}
-  }
+    errors: {},
+    configuration: {
+      enableReset: false,
+      enableModifyNotification: false,
+      singleLineForm: false,
+    },
+  },
 });
 
-
 export const useFormidableContext = () => {
   const context = useContext(formContext);
   if (!context) {
-    throw new Error("useFormContext must be used within a FormProvider");
+    throw new Error('useFormContext must be used within a FormProvider');
   }
   if (!context.form) {
-    throw new Error("useFormContext without defining a From");
+    throw new Error('useFormContext without defining a From');
   }
   return context;
 };
 export const useFormidableContextElement = (name: string) => {
   const { form } = useFormidableContext();
   if (name === undefined) {
-    console.error("Can not request useFormidableContextElement with empty 'name'");
+    console.error(
+      "Can not request useFormidableContextElement with empty 'name'"
+    );
   }
-  const onChange = useCallback((value) => {
+  const onChange = useCallback(
+    (value) => {
       console.log(`new values: ${name}=>${value}`);
       form.setValues({ [name]: value });
-  }, [name, form, form.setValues]);
+    },
+    [name, form, form.setValues]
+  );
   const onRestore = useCallback(() => {
     form.restoreValue({ [name]: true });
   }, [name, form, form.restoreValue]);
-  return {form, value: form.values[name], isModify: form.isModify[name], onChange, onRestore};
+  return {
+    form,
+    value: form.values[name],
+    error: form.errors[name],
+    isModify: form.isModify[name],
+    onChange,
+    onRestore,
+  };
 };
 
 export type FormidableContextProps = {
   form: UseFormidableReturn;
   children: ReactNode;
-}
+};
 
 export const FormidableContext = ({
   form,
@@ -65,9 +85,6 @@ export const FormidableContext = ({
     [form]
   );
   return (
-    <formContext.Provider value={memoContext}>
-      {children}
-    </formContext.Provider>
+    <formContext.Provider value={memoContext}>{children}</formContext.Provider>
   );
 };
-

front/src/components/formidable/FormidableForm.tsx

@@ -1,12 +1,9 @@
-
-
-
-
 import { ReactNode } from 'react';
 
+import { Box } from '@chakra-ui/react';
+
 import { useFormidable } from './FormidableConfig';
 import { FormidableContext } from './FormidableContext';
-import { Box } from '@chakra-ui/react';
 
 export interface FormidableFormProps<TYPE extends object = object> {
   form: ReturnType<typeof useFormidable<TYPE>>;
@@ -25,7 +22,9 @@ onSubmitDelta,
     event.preventDefault();
     const hasErrors = false; //Object.values(errors).some((err) => err);
     if (!hasErrors) {
-      console.log(`request From submit !!! ${JSON.stringify(form.values, null, 2)}`);
+      console.log(
+        `request From submit !!! ${JSON.stringify(form.values, null, 2)}`
+      );
       if (onSubmit) {
         onSubmit(form.values);
       }
@@ -42,4 +41,3 @@ onSubmitDelta,
     </FormidableContext>
   );
 };
-

front/src/components/formidable/index.ts

@@ -6,3 +6,6 @@ export {
 export {
     useFormidable
 } from './FormidableConfig';
+export {
+    zodResolver
+} from './utils';

front/src/components/formidable/utils.ts

@@ -1,5 +1,7 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 
+import { ZodError } from 'zod';
+
 import { isArray, isNullOrUndefined, isObject } from '@/utils/validator';
 
 export const hasAnyTrue = (obj: { [key: string]: boolean }): boolean => {
@@ -54,3 +56,32 @@ export function getDifferences(
   }
   return result;
 }
+
+export const zodResolver = (zodModel) => {
+  return (data: any) => {
+    try {
+      console.log(`check resolver of: ${JSON.stringify(data, null, 2)}`);
+      zodModel.parse(data);
+      return {};
+    } catch (error) {
+      if (error instanceof ZodError) {
+        console.log(
+          `catch error with resolver: ${JSON.stringify(error, null, 2)}`
+        );
+        const formattedErrors = error.issues.reduce(
+          (acc, issue) => {
+            if (issue.path.length > 0) {
+              acc[issue.path[0]] = issue.message;
+            }
+            return acc;
+          },
+          {} as Record<string, string>
+        );
+        console.log(`get errors: ${JSON.stringify(formattedErrors, null, 2)}`);
+        return formattedErrors;
+      }
+      // prevent zod error
+      throw error;
+    }
+  };
+};

front/src/scene/account/ManageAccountPage.tsx

@@ -1,22 +1,22 @@
 import { Button, Table, Text } from '@chakra-ui/react';
 
+import { UserCreateWrite, ZodUserCreateWrite } from '@/back-api';
 import { PageLayout } from '@/components/Layout/PageLayout';
+import { ParameterLayout } from '@/components/ParameterLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
-
-import { UserCreateWrite } from '@/back-api';
-import { useFormidable } from '@/components/formidable/FormidableConfig';
 import { FormInput } from '@/components/form/FormInput';
 import { FormPassword } from '@/components/form/FormPassword';
-import { ParameterLayout } from '@/components/ParameterLayout';
+import { Formidable, zodResolver } from '@/components/formidable';
+import { useFormidable } from '@/components/formidable/FormidableConfig';
 import { UserService } from '@/service/user.service';
 
 const options: Intl.DateTimeFormatOptions = {
-  year: "numeric",
-  month: "2-digit",
-  day: "2-digit",
-  hour: "2-digit",
-  minute: "2-digit",
-  second: "2-digit",
+  year: 'numeric',
+  month: '2-digit',
+  day: '2-digit',
+  hour: '2-digit',
+  minute: '2-digit',
+  second: '2-digit',
   //timeZoneName: "short",
 };
 export const ManageAccountPage = () => {
@@ -26,7 +26,10 @@ export const ManageAccountPage = () => {
       <TopBar title="Manage accounts" />
       <PageLayout>
         <ParameterLayout.Root>
-            <ParameterLayout.HeaderBase title="Users" description="List of all users"/>
+          <ParameterLayout.HeaderBase
+            title="Users"
+            description="List of all users"
+          />
           <ParameterLayout.Content>
             <Table.Root size="sm" variant="outline" interactive>
               <Table.Header>
@@ -36,7 +39,9 @@ export const ManageAccountPage = () => {
                   <Table.ColumnHeader>e-mail</Table.ColumnHeader>
                   <Table.ColumnHeader>blocked</Table.ColumnHeader>
                   <Table.ColumnHeader>avatar</Table.ColumnHeader>
-                        <Table.ColumnHeader textAlign="end">Last connection</Table.ColumnHeader>
+                  <Table.ColumnHeader textAlign="end">
+                    Last connection
+                  </Table.ColumnHeader>
                 </Table.Row>
               </Table.Header>
               <Table.Body>
@@ -45,10 +50,15 @@ export const ManageAccountPage = () => {
                     <Table.Cell>{data.id}</Table.Cell>
                     <Table.Cell>{data.login}</Table.Cell>
                     <Table.Cell>{data.email}</Table.Cell>
-                        <Table.Cell>{data.blocked? "true" : "false"}</Table.Cell>
-                        <Table.Cell>{data.avatar? "yes" : "no"}</Table.Cell>
+                    <Table.Cell>{data.blocked ? 'true' : 'false'}</Table.Cell>
+                    <Table.Cell>{data.avatar ? 'yes' : 'no'}</Table.Cell>
                     <Table.Cell textAlign="end">
-                            {data.lastConnection ? (new Date(data.lastConnection)).toLocaleDateString("fr-FR", options): ""}
+                      {data.lastConnection
+                        ? new Date(data.lastConnection).toLocaleDateString(
+                            'fr-FR',
+                            options
+                          )
+                        : ''}
                     </Table.Cell>
                   </Table.Row>
                 ))}
@@ -64,17 +74,18 @@ export const ManageAccountPage = () => {
 };
 
 export const CreateUserComponent = () => {
-
   const form = useFormidable<UserCreateWrite>({
     initialValues: {
-      login: "",
-      email: "",
-      password: "",
+      login: '',
+      email: '',
+      password: '',
     },
     configuration: {
       enableModifyNotification: false,
       enableReset: false,
-    }
+      singleLineForm: true,
+    },
+    resolver: zodResolver(ZodUserCreateWrite),
   });
 
   //const { connect, lastError, isConnectionLoading } = useLogin();
@@ -84,36 +95,35 @@ export const CreateUserComponent = () => {
   };
 
   return (
+    <Formidable.From form={form}>
       <ParameterLayout.Root>
-      <ParameterLayout.HeaderBase title="Create users" />
+        <ParameterLayout.HeaderBase
+          title="Create a users"
+          description="Add a new user on the server"
+        />
         <ParameterLayout.Content>
-        {userCreate.error && <Text colorPalette="@danger">{userCreate.error.message}</Text>}
-        <FormInput
-          form={form}
-          name="login"
-          isRequired
-          label="Username"
-        />
-        <FormPassword
-          form={form}
-          name="password"
-          isRequired
-          label="Password"
-        />
+          {userCreate.error && (
+            <Text colorPalette="@danger">{userCreate.error.message}</Text>
+          )}
+          <FormInput name="login" isRequired label="Username" />
+          <FormInput name="email" isRequired label="E-mail" />
+          <FormPassword name="password" isRequired label="Password" />
         </ParameterLayout.Content>
         <ParameterLayout.Footer>
           <Button
-          marginLeft="55%"
+            marginLeft="auto"
             marginTop="10px"
             variant="solid"
             background="green"
-          width="45%"
+            width="250px"
+            maxWidth="45%"
             disabled={userCreate.isCalling}
             onClick={onSubmit}
           >
             Login
           </Button>
         </ParameterLayout.Footer>
-  </ParameterLayout.Root>);
-
-}
+      </ParameterLayout.Root>
+    </Formidable.From>
+  );
+};

front/src/scene/connection/SignInPage.tsx

@@ -7,7 +7,6 @@ import { FormInput } from '@/components/form/FormInput';
 import { useLogin } from './useLogin';
 import { FormPassword } from '@/components/form/FormPassword';
 import { FormidableForm } from '@/components/formidable/FormidableForm';
-import { on } from 'events';
  
 type LoginFormInputs = {
   login: string;