[FEAT] add user

front/src/components/ParameterLayout/ParameterLayout.ts

@@ -0,0 +1,22 @@
+
+export {
+    ParameterLayoutContent as Content,
+    type ParameterLayoutContentProps as ContentProps
+} from './ParameterLayoutContent';
+export {
+    ParameterLayoutFooter as Footer,
+    type ParameterLayoutFooterProps as FooterProps
+} from './ParameterLayoutFooter';
+export {
+    ParameterLayoutHeader as Header,
+    type ParameterLayoutHeaderProps as HeaderProps
+} from './ParameterLayoutHeader';
+export {
+    ParameterLayoutHeaderBase as HeaderBase,
+    type ParameterLayoutHeaderBaseProps as HeaderBaseProps
+} from './ParameterLayoutHeaderBase';
+export {
+    ParameterLayoutRoot as Root,
+    type ParameterLayoutRootProps as RootProps
+} from './ParameterLayoutRoot';
+

front/src/components/ParameterLayout/ParameterLayoutContent.tsx

@@ -0,0 +1,19 @@
+import { Flex } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+export type ParameterLayoutContentProps = {
+    children?:ReactNode;
+}
+
+export const ParameterLayoutContent = ({children}:ParameterLayoutContentProps) => {
+    return <Flex
+      direction="column"
+      width="full"
+      borderY="1px solid black"
+      paddingY="15px"
+      paddingX="25px"
+      minHeight="10px"
+      background="gray.700">
+        {children}
+    </Flex>
+}

front/src/components/ParameterLayout/ParameterLayoutFooter.tsx

@@ -0,0 +1,16 @@
+import { Flex } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+export type ParameterLayoutFooterProps = {
+    children?: ReactNode;
+}
+
+export const ParameterLayoutFooter = ({children}:ParameterLayoutFooterProps) => {
+    return <Flex
+        width="full"
+        paddingY="15px"
+        paddingX="25px"
+        minHeight="10px">
+            {children}
+    </Flex>
+}

front/src/components/ParameterLayout/ParameterLayoutHeader.tsx

@@ -0,0 +1,17 @@
+import { Flex } from "@chakra-ui/react";
+import { ReactNode } from "react";
+
+export type ParameterLayoutHeaderProps = {
+    children?:ReactNode;
+}
+
+export const ParameterLayoutHeader = ({children}:ParameterLayoutHeaderProps) => {
+    return <Flex
+      width="full"
+      paddingY="15px"
+      paddingX="25px"
+      minHeight="10px"
+      >
+        {children}
+    </Flex>
+}

front/src/components/ParameterLayout/ParameterLayoutHeaderBase.tsx

@@ -0,0 +1,23 @@
+import { Flex, Text } from "@chakra-ui/react";
+import { ParameterLayoutHeader } from "./ParameterLayoutHeader";
+
+export type ParameterLayoutHeaderBaseProps = {
+    title:string;
+    description?: string,
+}
+
+export const ParameterLayoutHeaderBase = ({
+    title,
+    description,
+}:ParameterLayoutHeaderBaseProps) => {
+    return <ParameterLayoutHeader>
+    <Flex direction="column">
+        <Text
+            fontSize="25px"
+            fontWeight="bold">
+            {title}
+        </Text>
+        {description && <Text>{description}</Text>}
+    </Flex>
+    </ParameterLayoutHeader>
+}

front/src/components/ParameterLayout/ParameterLayoutRoot.tsx

@@ -0,0 +1,16 @@
+
+import { VStack } from '@chakra-ui/react';
+
+export type ParameterLayoutRootProps = {
+    children?: ReactNode;
+}
+
+export const ParameterLayoutRoot = ({children}:ParameterLayoutRootProps) => {
+    return <VStack gap="0px" marginX="15%" marginY="20px" justify="center"
+    //borderRadius="20px"
+    borderRadius="0px"
+    border="1px solid black"
+    background="gray.500">
+        {children}
+    </VStack>
+}

front/src/components/ParameterLayout/index.ts

@@ -0,0 +1 @@
+export * as ParameterLayout from './ParameterLayout';

front/src/scene/account/ManageAccountPage.tsx

@@ -1,12 +1,13 @@
-import { Box, Center, Flex, HStack, Table, Text, VStack } from '@chakra-ui/react';
+import { Button, Table, Text } from '@chakra-ui/react';
-import { LuCrown } from 'react-icons/lu';
 
 import { PageLayout } from '@/components/Layout/PageLayout';
 import { TopBar } from '@/components/TopBar/TopBar';
 
-import { useColorModeValue } from '@/components/ui/color-mode';
+import { UserCreateWrite } from '@/back-api';
-import { Application } from '@/back-api';
+import { useFormidable } from '@/components/form/Formidable';
-import { ApplicationService } from '@/service/application';
+import { FormInput } from '@/components/form/FormInput';
+import { FormPassword } from '@/components/form/FormPassword';
+import { ParameterLayout } from '@/components/ParameterLayout';
 import { UserService } from '@/service/user.service';
 
 const options: Intl.DateTimeFormatOptions = {
@@ -24,34 +25,9 @@ export const ManageAccountPage = () => {
     <>
       <TopBar title="Manage accounts" />
       <PageLayout>
-        <VStack gap="0px" marginX="15%" marginY="20px" justify="center" 
+        <ParameterLayout.Root>
-              //borderRadius="20px"
+            <ParameterLayout.HeaderBase title="Users" description="List of all users"/>
-              borderRadius="0px"
+            <ParameterLayout.Content>
-              border="1px solid black"
-              background="gray.500">
-            <Flex 
-              width="full"
-              paddingY="15px"
-              paddingX="25px"
-              minHeight="10px"
-              >
-                <Flex direction="column">
-                    <Text
-                        fontSize="25px"
-                        fontWeight="bold">
-                        Users
-                    </Text>
-                    <Text>List of all users</Text>
-                </Flex>
-            </Flex>
-            <Flex 
-              direction="column"
-              width="full"
-              borderY="1px solid black"
-              paddingY="15px"
-              paddingX="25px"
-              minHeight="10px"
-              background="gray.700">
                 <Table.Root size="sm" variant="outline" interactive>
                     <Table.Header>
                     <Table.Row>
@@ -78,16 +54,65 @@ export const ManageAccountPage = () => {
                     ))}
                     </Table.Body>
                 </Table.Root>
-            </Flex>
+            </ParameterLayout.Content>
-            <Flex 
+            <ParameterLayout.Footer/>
-              width="full"
+        </ParameterLayout.Root>
-              paddingY="15px"
+        <CreateUserComponent/>
-              paddingX="25px"
-              minHeight="10px">
-            </Flex>
-        </VStack>
       </PageLayout>
     </>
   );
 };
 
+export const CreateUserComponent = () => {
+
+const form = useFormidable<UserCreateWrite>({
+  initialValues: {
+    login: "",
+    email: "",
+    password: "",
+  },
+  configuration: {
+    enableModifyNotification: false,
+    enableReset: false,
+  }
+});
+
+//const { connect, lastError, isConnectionLoading } = useLogin();
+const {userCreate, error, isCalling} = UserService.useCreate({});
+const onSubmit = () => {
+  userCreate(form.values);
+};
+
+return <ParameterLayout.Root>
+            <ParameterLayout.HeaderBase title="Create users" />
+            <ParameterLayout.Content>
+              {error && <Text colorPalette="@danger">{error}</Text>}
+              <FormInput
+                form={form}
+                variableName="login"
+                isRequired
+                label="Username"
+              />
+              <FormPassword
+                form={form}
+                variableName="password"
+                isRequired
+                label="Password"
+              />
+            </ParameterLayout.Content>
+            <ParameterLayout.Footer>
+            <Button
+                marginLeft="55%"
+                marginTop="10px"
+                variant="solid"
+                background="green"
+                width="45%"
+                disabled={isCalling}
+                onClick={onSubmit}
+              >
+                Login
+              </Button>
+            </ParameterLayout.Footer>
+        </ParameterLayout.Root>
+
+}

front/src/service/user.service.ts

@@ -4,9 +4,9 @@
  * @license PROPRIETARY (see license file)
  */
 
-import { UserResource } from "@/back-api";
+import { UserAuthGet, UserCreateWrite, UserResource } from "@/back-api";
+import { useQuery, useQueryCall, useQueryCallProps } from "@/utils/query";
 import { useSessionService } from "./session";
-import { useQuery } from "@/utils/query";
 
 export namespace UserService {
 	export const useGets = () => {
@@ -19,4 +19,18 @@ export namespace UserService {
 			},
 		});
 	};
+	export const useCreate = ({ config }: { config?: Omit<useQueryCallProps<UserAuthGet, any>, 'queryFunction'> }) => {
+		const { getRestConfig } = useSessionService();
+		const { call, ...rest } = useQueryCall<UserAuthGet, UserCreateWrite>({
+			queryFunction: (data) => {
+				return UserResource.create({
+					restConfig: getRestConfig(),
+					data: { ...data },
+				});
+			},
+			...config
+		});
+		return { userCreate: call, ...rest };
+	};
 }
+