Simplify and better input models
This commit is contained in:
parent
63272dfb67
commit
c0c098d90d
@ -4,6 +4,7 @@ import org.kar.archidata.checker.CheckJPA;
|
||||
|
||||
import com.fasterxml.jackson.annotation.JsonInclude;
|
||||
|
||||
import jakarta.validation.constraints.Email;
|
||||
import jakarta.validation.constraints.NotNull;
|
||||
import jakarta.validation.constraints.Pattern;
|
||||
import jakarta.validation.constraints.Size;
|
||||
@ -16,7 +17,7 @@ public class UserCreate {
|
||||
public String login;
|
||||
@NotNull
|
||||
@Size(min = 5, max = 128)
|
||||
@Pattern(regexp = "^[a-zA-Z0-9\\-\\._]+@[a-zA-Z0-9\\-_]+\\.[a-zA-Z0-9]+$")
|
||||
@Email()
|
||||
public String email;
|
||||
@NotNull
|
||||
@Size(min = 128, max = 128)
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"display": "2025-02-04",
|
||||
"version": "0.0.1-dev\n - 2025-02-04T20:48:08+01:00",
|
||||
"display": "2025-02-09",
|
||||
"version": "0.0.1-dev\n - 2025-02-09T21:15:14+01:00",
|
||||
"commit": "0.0.1-dev\n",
|
||||
"date": "2025-02-04T20:48:08+01:00"
|
||||
"date": "2025-02-09T21:15:14+01:00"
|
||||
}
|
||||
2836
front/pnpm-lock.yaml
generated
2836
front/pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
@ -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 = {
|
||||
@ -29,8 +16,8 @@ export type DragNdropProps = {
|
||||
};
|
||||
|
||||
export const DragNdrop = ({
|
||||
onFilesSelected = () => { },
|
||||
onUriSelected = () => { },
|
||||
onFilesSelected = () => {},
|
||||
onUriSelected = () => {},
|
||||
width = '100px',
|
||||
height = '100px',
|
||||
}: DragNdropProps) => {
|
||||
@ -111,7 +98,9 @@ export const CenterIcon = ({
|
||||
top="50%"
|
||||
left="50%"
|
||||
transform="translate(-50%, -50%)"
|
||||
>{children}</Box>
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
@ -130,20 +119,15 @@ export type FormCoversProps = {
|
||||
export const FormCovers = ({
|
||||
name,
|
||||
ref,
|
||||
onFilesSelected = () => { },
|
||||
onUriSelected = () => { },
|
||||
onRemove = () => { },
|
||||
onFilesSelected = () => {},
|
||||
onUriSelected = () => {},
|
||||
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}>
|
||||
|
||||
@ -1,67 +1,128 @@
|
||||
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';
|
||||
|
||||
import { useFormidableContextElement } from '../formidable';
|
||||
|
||||
const DisplayLabel = ({
|
||||
label,
|
||||
isRequired,
|
||||
}: {
|
||||
label?: ReactNode;
|
||||
isRequired: boolean;
|
||||
}) => {
|
||||
if (!label) {
|
||||
return <></>;
|
||||
}
|
||||
return (
|
||||
<Text marginRight="auto" fontWeight="bold">
|
||||
{label}{' '}
|
||||
{isRequired && (
|
||||
<Text as="span" color="red.600">
|
||||
*
|
||||
</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;
|
||||
isModify?: boolean;
|
||||
onRestore?: () => void;
|
||||
isRequired?: boolean;
|
||||
children: ReactNode;
|
||||
enableModifyNotification?: boolean;
|
||||
enableReset?: boolean;
|
||||
disableSingleLine?: boolean;
|
||||
};
|
||||
|
||||
export const FormGroup = ({
|
||||
children,
|
||||
error,
|
||||
name,
|
||||
help,
|
||||
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 && (
|
||||
<Text marginRight="auto" fontWeight="bold">
|
||||
{label}{' '}
|
||||
{isRequired && (
|
||||
<Text as="span" color="red.600">
|
||||
*
|
||||
</Text>
|
||||
)}
|
||||
</Text>
|
||||
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>
|
||||
</>
|
||||
)}
|
||||
{!!onRestore && isModify && enableReset && (
|
||||
<MdRefresh size="15px" onClick={onRestore} cursor="pointer" />
|
||||
{!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}
|
||||
<DisplayHelp help={help} />
|
||||
<DisplayError error={error} />
|
||||
</>
|
||||
)}
|
||||
</Flex>
|
||||
{children}
|
||||
{!!help && (
|
||||
<Flex direction="row">
|
||||
<MdHelpOutline />
|
||||
<Text>{help}</Text>
|
||||
</Flex>
|
||||
)}
|
||||
|
||||
{!!error && (
|
||||
<Flex direction="row">
|
||||
<MdErrorOutline />
|
||||
<Text>{error}</Text>
|
||||
</Flex>
|
||||
)}
|
||||
</Flex>
|
||||
);
|
||||
);
|
||||
};
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -21,32 +21,29 @@ 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">
|
||||
<Input
|
||||
ref={ref}
|
||||
type={showPassword? "text" : "password"}
|
||||
name={name}
|
||||
autoComplete={name}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
paddingRight="47px"
|
||||
/>
|
||||
<Button variant="ghost" onClick={toggleVisible} position="absolute" top="0" right="0" _hover={{bg:"#0000", shadow:"none", color:"black"}}>
|
||||
{showPassword? <LuEye/> : <LuEyeOff/>}
|
||||
</Button>
|
||||
<chakra.div position="relative" width="full">
|
||||
<Input
|
||||
ref={ref}
|
||||
type={showPassword? "text" : "password"}
|
||||
name={name}
|
||||
autoComplete={name}
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
paddingRight="47px"
|
||||
/>
|
||||
<Button variant="ghost" onClick={toggleVisible} position="absolute" top="0" right="0" _hover={{bg:"#0000", shadow:"none", color:"black"}}>
|
||||
{showPassword? <LuEye/> : <LuEyeOff/>}
|
||||
</Button>
|
||||
</chakra.div>
|
||||
</FormGroup>
|
||||
);
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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,
|
||||
};
|
||||
};
|
||||
|
||||
@ -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: { },
|
||||
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();
|
||||
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) => {
|
||||
console.log(`new values: ${name}=>${value}`);
|
||||
form.setValues({ [name]: value });
|
||||
}, [name, form, form.setValues]);
|
||||
const onChange = useCallback(
|
||||
(value) => {
|
||||
console.log(`new values: ${name}=>${value}`);
|
||||
form.setValues({ [name]: value });
|
||||
},
|
||||
[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= {
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -1,31 +1,30 @@
|
||||
|
||||
|
||||
|
||||
|
||||
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>{
|
||||
export interface FormidableFormProps<TYPE extends object = object> {
|
||||
form: ReturnType<typeof useFormidable<TYPE>>;
|
||||
children: ReactNode;
|
||||
onSubmit?:( data: TYPE) => void;
|
||||
onSubmitDelta?:( data: Partial<TYPE>) => void;
|
||||
onSubmit?: (data: TYPE) => void;
|
||||
onSubmitDelta?: (data: Partial<TYPE>) => void;
|
||||
}
|
||||
|
||||
export const FormidableForm = <TYPE extends object = object>({
|
||||
onSubmit,
|
||||
onSubmitDelta,
|
||||
onSubmit,
|
||||
onSubmitDelta,
|
||||
form,
|
||||
children,
|
||||
}: FormidableFormProps<TYPE>) => {
|
||||
const handleSubmit = (event: React.FormEvent) => {
|
||||
event.preventDefault();
|
||||
const hasErrors = false;//Object.values(errors).some((err) => err);
|
||||
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);
|
||||
}
|
||||
@ -37,9 +36,8 @@ onSubmitDelta,
|
||||
return (
|
||||
<FormidableContext form={form}>
|
||||
<Box as="form" onSubmit={handleSubmit}>
|
||||
{children}
|
||||
{children}
|
||||
</Box>
|
||||
</FormidableContext>
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -5,4 +5,7 @@ export {
|
||||
} from './FormidableContext'
|
||||
export {
|
||||
useFormidable
|
||||
} from './FormidableConfig';
|
||||
} from './FormidableConfig';
|
||||
export {
|
||||
zodResolver
|
||||
} from './utils';
|
||||
@ -1,56 +1,87 @@
|
||||
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 => {
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key] === true) {
|
||||
return true;
|
||||
}
|
||||
for (const key in obj) {
|
||||
if (obj.hasOwnProperty(key) && obj[key] === true) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return false;
|
||||
};
|
||||
|
||||
export function getDifferences(
|
||||
obj1: object,
|
||||
obj2: object
|
||||
obj1: object,
|
||||
obj2: object
|
||||
): { [key: string]: boolean } {
|
||||
// Create an empty object to store the differences
|
||||
const result: { [key: string]: boolean } = {};
|
||||
// Recursive function to compare values
|
||||
function compareValues(value1: any, value2: any): boolean {
|
||||
// If both values are objects, compare their properties recursively
|
||||
if (isObject(value1) && isObject(value2)) {
|
||||
return hasAnyTrue(getDifferences(value1, value2));
|
||||
}
|
||||
// If both values are arrays, compare their elements
|
||||
if (isArray(value1) && isArray(value2)) {
|
||||
//console.log(`Check is array: ${JSON.stringify(value1)} =?= ${JSON.stringify(value2)}`);
|
||||
if (value1.length !== value2.length) {
|
||||
return true;
|
||||
}
|
||||
for (let i = 0; i < value1.length; i++) {
|
||||
if (compareValues(value1[i], value2[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
// Otherwise, compare the values directly
|
||||
//console.log(`compare : ${value1} =?= ${value2}`);
|
||||
return value1 !== value2;
|
||||
// Create an empty object to store the differences
|
||||
const result: { [key: string]: boolean } = {};
|
||||
// Recursive function to compare values
|
||||
function compareValues(value1: any, value2: any): boolean {
|
||||
// If both values are objects, compare their properties recursively
|
||||
if (isObject(value1) && isObject(value2)) {
|
||||
return hasAnyTrue(getDifferences(value1, value2));
|
||||
}
|
||||
|
||||
// Get all keys from both objects
|
||||
const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
|
||||
|
||||
// Iterate over all keys
|
||||
for (const key of allKeys) {
|
||||
if (compareValues(obj1[key], obj2[key])) {
|
||||
result[key] = true;
|
||||
} else {
|
||||
result[key] = false;
|
||||
// If both values are arrays, compare their elements
|
||||
if (isArray(value1) && isArray(value2)) {
|
||||
//console.log(`Check is array: ${JSON.stringify(value1)} =?= ${JSON.stringify(value2)}`);
|
||||
if (value1.length !== value2.length) {
|
||||
return true;
|
||||
}
|
||||
for (let i = 0; i < value1.length; i++) {
|
||||
if (compareValues(value1[i], value2[i])) {
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return false;
|
||||
}
|
||||
return result;
|
||||
// Otherwise, compare the values directly
|
||||
//console.log(`compare : ${value1} =?= ${value2}`);
|
||||
return value1 !== value2;
|
||||
}
|
||||
|
||||
// Get all keys from both objects
|
||||
const allKeys = new Set([...Object.keys(obj1), ...Object.keys(obj2)]);
|
||||
|
||||
// Iterate over all keys
|
||||
for (const key of allKeys) {
|
||||
if (compareValues(obj1[key], obj2[key])) {
|
||||
result[key] = true;
|
||||
} else {
|
||||
result[key] = false;
|
||||
}
|
||||
}
|
||||
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;
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
@ -1,22 +1,23 @@
|
||||
import { Button, Table, Text } from '@chakra-ui/react';
|
||||
import { z as zod } from 'zod';
|
||||
|
||||
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,55 +27,97 @@ export const ManageAccountPage = () => {
|
||||
<TopBar title="Manage accounts" />
|
||||
<PageLayout>
|
||||
<ParameterLayout.Root>
|
||||
<ParameterLayout.HeaderBase title="Users" description="List of all users"/>
|
||||
<ParameterLayout.Content>
|
||||
<Table.Root size="sm" variant="outline" interactive>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>id</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>Login</Table.ColumnHeader>
|
||||
<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.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users?.map((data) => (
|
||||
<Table.Row key={data.id}>
|
||||
<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 textAlign="end">
|
||||
{data.lastConnection ? (new Date(data.lastConnection)).toLocaleDateString("fr-FR", options): ""}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</ParameterLayout.Content>
|
||||
<ParameterLayout.Footer/>
|
||||
<ParameterLayout.HeaderBase
|
||||
title="Users"
|
||||
description="List of all users"
|
||||
/>
|
||||
<ParameterLayout.Content>
|
||||
<Table.Root size="sm" variant="outline" interactive>
|
||||
<Table.Header>
|
||||
<Table.Row>
|
||||
<Table.ColumnHeader>id</Table.ColumnHeader>
|
||||
<Table.ColumnHeader>Login</Table.ColumnHeader>
|
||||
<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.Row>
|
||||
</Table.Header>
|
||||
<Table.Body>
|
||||
{users?.map((data) => (
|
||||
<Table.Row key={data.id}>
|
||||
<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 textAlign="end">
|
||||
{data.lastConnection
|
||||
? new Date(data.lastConnection).toLocaleDateString(
|
||||
'fr-FR',
|
||||
options
|
||||
)
|
||||
: ''}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
))}
|
||||
</Table.Body>
|
||||
</Table.Root>
|
||||
</ParameterLayout.Content>
|
||||
<ParameterLayout.Footer />
|
||||
</ParameterLayout.Root>
|
||||
<CreateUserComponent/>
|
||||
<CreateUserComponent />
|
||||
</PageLayout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const CreateUserComponent = () => {
|
||||
const passwordSchema = zod
|
||||
.string()
|
||||
.min(8, 'The password must be at least 8 characters long.')
|
||||
.max(128, 'The password must not exceed 128 characters.')
|
||||
.refine((value) => /[a-z]/.test(value), {
|
||||
message: 'The password must contain at least one lowercase letter.',
|
||||
})
|
||||
.refine((value) => /[A-Z]/.test(value), {
|
||||
message: 'The password must contain at least one uppercase letter.',
|
||||
})
|
||||
.refine((value) => /\d/.test(value), {
|
||||
message: 'The password must contain at least one number.',
|
||||
})
|
||||
.refine(
|
||||
//(value) => /[]/.test(value),
|
||||
(value) => /[-_@()\{\}\[\]=+\*\/\<\>!$=\'\|`&~"#²\:\/;\.,\?]/.test(value),
|
||||
{
|
||||
message:
|
||||
'The password must contain at least one special character in: -_@(){}[]=+*/<>!$=\'|`&~"#²:/;.,?',
|
||||
}
|
||||
)
|
||||
.refine((value) => !/\s/.test(value), {
|
||||
message: 'The password must not contain spaces.',
|
||||
});
|
||||
|
||||
export const ZodUserCreateWithNewPassword = ZodUserCreateWrite.omit({
|
||||
password: true,
|
||||
}).extend({
|
||||
password: passwordSchema,
|
||||
});
|
||||
|
||||
export const CreateUserComponent = () => {
|
||||
const form = useFormidable<UserCreateWrite>({
|
||||
initialValues: {
|
||||
login: "",
|
||||
email: "",
|
||||
password: "",
|
||||
login: '',
|
||||
email: '',
|
||||
password: '',
|
||||
},
|
||||
configuration: {
|
||||
enableModifyNotification: false,
|
||||
enableReset: false,
|
||||
}
|
||||
singleLineForm: true,
|
||||
},
|
||||
resolver: zodResolver(ZodUserCreateWithNewPassword),
|
||||
});
|
||||
|
||||
//const { connect, lastError, isConnectionLoading } = useLogin();
|
||||
@ -84,36 +127,35 @@ export const CreateUserComponent = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
<ParameterLayout.Root>
|
||||
<ParameterLayout.HeaderBase title="Create users" />
|
||||
<ParameterLayout.Content>
|
||||
{userCreate.error && <Text colorPalette="@danger">{userCreate.error.message}</Text>}
|
||||
<FormInput
|
||||
form={form}
|
||||
name="login"
|
||||
isRequired
|
||||
label="Username"
|
||||
<Formidable.From form={form}>
|
||||
<ParameterLayout.Root>
|
||||
<ParameterLayout.HeaderBase
|
||||
title="Create a users"
|
||||
description="Add a new user on the server"
|
||||
/>
|
||||
<FormPassword
|
||||
form={form}
|
||||
name="password"
|
||||
isRequired
|
||||
label="Password"
|
||||
/>
|
||||
</ParameterLayout.Content>
|
||||
<ParameterLayout.Footer>
|
||||
<Button
|
||||
marginLeft="55%"
|
||||
marginTop="10px"
|
||||
variant="solid"
|
||||
background="green"
|
||||
width="45%"
|
||||
disabled={userCreate.isCalling}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</ParameterLayout.Footer>
|
||||
</ParameterLayout.Root>);
|
||||
|
||||
}
|
||||
<ParameterLayout.Content>
|
||||
{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="auto"
|
||||
marginTop="10px"
|
||||
variant="solid"
|
||||
background="green"
|
||||
width="250px"
|
||||
maxWidth="45%"
|
||||
disabled={userCreate.isCalling}
|
||||
onClick={onSubmit}
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</ParameterLayout.Footer>
|
||||
</ParameterLayout.Root>
|
||||
</Formidable.From>
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,14 +1,14 @@
|
||||
import { Box, Flex, Image, Text, Button } from '@chakra-ui/react';
|
||||
import { Box, Button, Flex, Image, Text } from '@chakra-ui/react';
|
||||
|
||||
import avatar from '@/assets/images/avatar_generic.svg';
|
||||
import { PageLayout } from '@/components/Layout/PageLayout';
|
||||
import { useFormidable } from '@/components/formidable/FormidableConfig';
|
||||
import { FormInput } from '@/components/form/FormInput';
|
||||
import { useLogin } from './useLogin';
|
||||
import { FormPassword } from '@/components/form/FormPassword';
|
||||
import { useFormidable } from '@/components/formidable/FormidableConfig';
|
||||
import { FormidableForm } from '@/components/formidable/FormidableForm';
|
||||
import { on } from 'events';
|
||||
|
||||
|
||||
import { useLogin } from './useLogin';
|
||||
|
||||
type LoginFormInputs = {
|
||||
login: string;
|
||||
password: string;
|
||||
@ -17,13 +17,13 @@ type LoginFormInputs = {
|
||||
export const SignInPage = () => {
|
||||
const form = useFormidable<LoginFormInputs>({
|
||||
initialValues: {
|
||||
login: "",
|
||||
password: "",
|
||||
login: '',
|
||||
password: '',
|
||||
},
|
||||
configuration: {
|
||||
enableModifyNotification: false,
|
||||
enableReset: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
const { connect, lastError, isConnectionLoading } = useLogin();
|
||||
|
||||
@ -35,38 +35,36 @@ export const SignInPage = () => {
|
||||
<>
|
||||
{/* <TopBar title="Login" /> */}
|
||||
<PageLayout>
|
||||
<Flex
|
||||
marginX="auto"
|
||||
width="full"
|
||||
height="90%"
|
||||
direction="column"
|
||||
>
|
||||
<Flex marginX="auto" width="full" height="90%" direction="column">
|
||||
<Box
|
||||
bg="white"
|
||||
padding="30px"
|
||||
shadow="md"
|
||||
width="400px"
|
||||
margin="auto"
|
||||
background={{ _light: "gray.50", _dark: "gray.800" }}
|
||||
background={{ _light: 'gray.50', _dark: 'gray.800' }}
|
||||
>
|
||||
<Text width="100%" textAlign="center" fontWeight="bold" fontSize="25px">
|
||||
<Text
|
||||
width="100%"
|
||||
textAlign="center"
|
||||
fontWeight="bold"
|
||||
fontSize="25px"
|
||||
>
|
||||
Sign-In
|
||||
</Text>
|
||||
<Image marginX="auto"
|
||||
marginY="10px" src={avatar} width="128px" height="128px" borderRadius="100%" />
|
||||
<Image
|
||||
marginX="auto"
|
||||
marginY="10px"
|
||||
src={avatar}
|
||||
width="128px"
|
||||
height="128px"
|
||||
borderRadius="100%"
|
||||
/>
|
||||
<FormidableForm form={form} onSubmit={onSubmit}>
|
||||
<Flex align="center" justify="center" direction="column">
|
||||
{lastError && <Text colorPalette="@danger">{lastError}</Text>}
|
||||
<FormInput
|
||||
name="login"
|
||||
isRequired
|
||||
label="Username"
|
||||
/>
|
||||
<FormPassword
|
||||
name="password"
|
||||
isRequired
|
||||
label="Password"
|
||||
/>
|
||||
<FormInput name="login" isRequired label="Username" />
|
||||
<FormPassword name="password" isRequired label="Password" />
|
||||
<Button
|
||||
marginLeft="55%"
|
||||
marginTop="10px"
|
||||
@ -78,7 +76,7 @@ export const SignInPage = () => {
|
||||
>
|
||||
Login
|
||||
</Button>
|
||||
</Flex >
|
||||
</Flex>
|
||||
</FormidableForm>
|
||||
</Box>
|
||||
</Flex>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user