accounts and notifications

4 files changed, 31 insertions, 4 deletions

diff --git a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
index d8877333c..87c4c43fb 100644
--- a/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/FormProvider.tsx
@@ -41,10 +41,12 @@ export function FormProvider<T>({
   children,
   initialValue,
   onUpdate,
+  onSubmit,
   computeFormState,
 }: {
   initialValue?: Partial<T>;
   onUpdate?: (v: Partial<T>) => void;
+  onSubmit: (v: T) => void;
   computeFormState?: (v: T) => FormState<T>;
   children: ComponentChildren;
 }): VNode {
@@ -58,7 +60,15 @@ export function FormProvider<T>({
     <FormContext.Provider
       value={{ initialValue, value, onUpdate, computeFormState }}
     >
-      <form>{children}</form>
+      <form
+        onSubmit={(e) => {
+          e.preventDefault();
+          //@ts-ignore
+          onSubmit(value.current);
+        }}
+      >
+        {children}
+      </form>
     </FormContext.Provider>
   );
 }
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
index 255654949..32b16313d 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputLine.tsx
@@ -23,7 +23,7 @@ interface StringConverter<T> {
 }
 
 export interface UIFormProps<T> {
-  name: string;
+  name: keyof T;
   label: TranslatedString;
   placeholder?: TranslatedString;
   tooltip?: TranslatedString;
@@ -181,7 +181,11 @@ function defaultFromString(v: string) {
   return v;
 }
 
-export function InputLine<T>(props: { type: string } & UIFormProps<T>): VNode {
+type InputType = "text" | "text-area" | "password" | "email";
+
+export function InputLine<T>(
+  props: { type: InputType } & UIFormProps<T>,
+): VNode {
   const { name, placeholder, before, after, converter, type } = props;
   const { value, onChange, state, isDirty } = useField(name);
 
diff --git a/packages/exchange-backoffice-ui/src/handlers/InputText.tsx b/packages/exchange-backoffice-ui/src/handlers/InputText.tsx
index 107d87860..014730d92 100644
--- a/packages/exchange-backoffice-ui/src/handlers/InputText.tsx
+++ b/packages/exchange-backoffice-ui/src/handlers/InputText.tsx
@@ -1,6 +1,6 @@
 import { VNode, h } from "preact";
 import { InputLine, UIFormProps } from "./InputLine.js";
 
-export function InputText(props: UIFormProps<string>): VNode {
+export function InputText<T>(props: UIFormProps<T>): VNode {
   return <InputLine type="text" {...props} />;
 }
diff --git a/packages/exchange-backoffice-ui/src/handlers/forms.ts b/packages/exchange-backoffice-ui/src/handlers/forms.ts
index 1d6a7daa4..a97b8561d 100644
--- a/packages/exchange-backoffice-ui/src/handlers/forms.ts
+++ b/packages/exchange-backoffice-ui/src/handlers/forms.ts
@@ -11,6 +11,8 @@ import { InputFile } from "./InputFile.js";
 import { Caption } from "./Caption.js";
 import { Group } from "./Group.js";
 import { InputSelectOne } from "./InputSelectOne.js";
+import { FormProvider } from "./FormProvider.js";
+import { InputLine } from "./InputLine.js";
 
 export type DoubleColumnForm = DoubleColumnFormSection[];
 
@@ -94,3 +96,14 @@ export function RenderAllFieldsByUiConfig({
     }),
   );
 }
+
+type FormSet<T> = {
+  Provider: typeof FormProvider<T>;
+  InputLine: typeof InputLine<T>;
+};
+export function createNewForm<T>(): FormSet<T> {
+  return {
+    Provider: FormProvider,
+    InputLine: InputLine,
+  };
+}