introduced auth strategy actions to allow user creation in UI

app/src/ui/modals/debug/SchemaFormModal.tsx

@@ -7,21 +7,31 @@ import {
 } from "ui/components/form/json-schema";
 
 import type { ContextModalProps } from "@mantine/modals";
+import { Alert } from "ui/components/display/Alert";
 
 type Props = JsonSchemaFormProps & {
-   onSubmit?: (data: any) => void | Promise<void>;
+   autoCloseAfterSubmit?: boolean;
+   onSubmit?: (
+      data: any,
+      context: {
+         close: () => void;
+      }
+   ) => void | Promise<void>;
 };
 
 export function SchemaFormModal({
    context,
    id,
-   innerProps: { schema, uiSchema, onSubmit }
+   innerProps: { schema, uiSchema, onSubmit, autoCloseAfterSubmit }
 }: ContextModalProps<Props>) {
    const [valid, setValid] = useState(false);
    const formRef = useRef<JsonSchemaFormRef>(null);
+   const [submitting, setSubmitting] = useState(false);
+   const was_submitted = useRef(false);
+   const [error, setError] = useState<string>();
 
-   function handleChange(data) {
-      const valid = formRef.current?.validateForm() ?? false;
+   function handleChange(data, isValid) {
+      const valid = isValid();
       console.log("Data changed", data, valid);
       setValid(valid);
    }
@@ -30,29 +40,45 @@ export function SchemaFormModal({
       context.closeModal(id);
    }
 
-   async function handleClickAdd() {
-      await onSubmit?.(formRef.current?.formData());
-      handleClose();
+   async function handleSubmit() {
+      was_submitted.current = true;
+      if (!formRef.current?.validateForm()) {
+         return;
+      }
+
+      setSubmitting(true);
+      await onSubmit?.(formRef.current?.formData(), {
+         close: handleClose,
+         setError
+      });
+      setSubmitting(false);
+
+      if (autoCloseAfterSubmit !== false) {
+         handleClose();
+      }
    }
 
    return (
-      <div className="pt-3 pb-3 px-3 gap-4 flex flex-col">
-         <JsonSchemaForm
-            tagName="form"
-            ref={formRef}
-            schema={schema}
-            uiSchema={uiSchema}
-            className="legacy hide-required-mark fieldset-alternative mute-root"
-            onChange={handleChange}
-            onSubmit={handleClickAdd}
-         />
-         <div className="flex flex-row justify-end gap-2">
-            <Button onClick={handleClose}>Cancel</Button>
-            <Button variant="primary" onClick={handleClickAdd} disabled={!valid}>
-               Create
-            </Button>
+      <>
+         {error && <Alert.Exception message={error} />}
+         <div className="pt-3 pb-3 px-3 gap-4 flex flex-col">
+            <JsonSchemaForm
+               tagName="form"
+               ref={formRef}
+               schema={schema}
+               uiSchema={uiSchema}
+               className="legacy hide-required-mark fieldset-alternative mute-root"
+               onChange={handleChange}
+               onSubmit={handleSubmit}
+            />
+            <div className="flex flex-row justify-end gap-2">
+               <Button onClick={handleClose}>Cancel</Button>
+               <Button variant="primary" onClick={handleSubmit} disabled={!valid || submitting}>
+                  Create
+               </Button>
+            </div>
          </div>
-      </div>
+      </>
    );
 }
 
@@ -63,7 +89,7 @@ SchemaFormModal.modalProps = {
       root: "bknd-admin",
       header: "!bg-primary/5 border-b border-b-muted !py-3 px-5 !h-auto !min-h-px",
       content: "rounded-lg select-none",
-      title: "font-bold !text-md",
+      title: "!font-bold !text-md",
       body: "!p-0"
    }
 };