@authhero/react-admin 0.10.0

package/src/components/forms/RichTextEditor.tsx

@@ -0,0 +1,145 @@
+import React from "react";
+import { useEditor, EditorContent } from "@tiptap/react";
+import StarterKit from "@tiptap/starter-kit";
+import Link from "@tiptap/extension-link";
+import Underline from "@tiptap/extension-underline";
+import { Box, IconButton, Divider } from "@mui/material";
+import FormatBoldIcon from "@mui/icons-material/FormatBold";
+import FormatItalicIcon from "@mui/icons-material/FormatItalic";
+import FormatUnderlinedIcon from "@mui/icons-material/FormatUnderlined";
+import LinkIcon from "@mui/icons-material/Link";
+import FormatListBulletedIcon from "@mui/icons-material/FormatListBulleted";
+import FormatListNumberedIcon from "@mui/icons-material/FormatListNumbered";
+
+interface RichTextEditorProps {
+  value: string;
+  onChange: (value: string) => void;
+}
+
+const RichTextEditor: React.FC<RichTextEditorProps> = ({ value, onChange }) => {
+  const editor = useEditor({
+    extensions: [
+      StarterKit,
+      Underline,
+      Link.configure({
+        openOnClick: false,
+      }),
+    ],
+    content: value,
+    onUpdate: ({ editor }) => {
+      onChange(editor.getHTML());
+    },
+  });
+
+  if (!editor) {
+    return null;
+  }
+
+  const handleLinkClick = () => {
+    const previousUrl = editor.getAttributes("link").href;
+    const url = window.prompt("URL", previousUrl);
+
+    if (url === null) {
+      return;
+    }
+
+    if (url === "") {
+      editor.chain().focus().extendMarkRange("link").unsetLink().run();
+      return;
+    }
+
+    editor.chain().focus().extendMarkRange("link").setLink({ href: url }).run();
+  };
+
+  return (
+    <Box
+      sx={{
+        border: "1px solid",
+        borderColor: "divider",
+        borderRadius: 1,
+        overflow: "hidden",
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          gap: 0.5,
+          p: 0.5,
+          borderBottom: "1px solid",
+          borderColor: "divider",
+          bgcolor: "action.hover",
+        }}
+      >
+        <IconButton
+          size="small"
+          onClick={() => editor.chain().focus().toggleBold().run()}
+          color={editor.isActive("bold") ? "primary" : "default"}
+        >
+          <FormatBoldIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => editor.chain().focus().toggleItalic().run()}
+          color={editor.isActive("italic") ? "primary" : "default"}
+        >
+          <FormatItalicIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => editor.chain().focus().toggleUnderline().run()}
+          color={editor.isActive("underline") ? "primary" : "default"}
+        >
+          <FormatUnderlinedIcon fontSize="small" />
+        </IconButton>
+        <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+        <IconButton
+          size="small"
+          onClick={handleLinkClick}
+          color={editor.isActive("link") ? "primary" : "default"}
+        >
+          <LinkIcon fontSize="small" />
+        </IconButton>
+        <Divider orientation="vertical" flexItem sx={{ mx: 0.5 }} />
+        <IconButton
+          size="small"
+          onClick={() => editor.chain().focus().toggleBulletList().run()}
+          color={editor.isActive("bulletList") ? "primary" : "default"}
+        >
+          <FormatListBulletedIcon fontSize="small" />
+        </IconButton>
+        <IconButton
+          size="small"
+          onClick={() => editor.chain().focus().toggleOrderedList().run()}
+          color={editor.isActive("orderedList") ? "primary" : "default"}
+        >
+          <FormatListNumberedIcon fontSize="small" />
+        </IconButton>
+      </Box>
+      <Box
+        sx={{
+          p: 1,
+          minHeight: 150,
+          "& .ProseMirror": {
+            outline: "none",
+            minHeight: 150,
+            "& p": {
+              margin: 0,
+            },
+            "& ul, & ol": {
+              paddingLeft: 2,
+            },
+            "& a": {
+              color: "primary.main",
+              textDecoration: "underline",
+            },
+          },
+        }}
+      >
+        <EditorContent editor={editor} />
+      </Box>
+    </Box>
+  );
+};
+
+export default RichTextEditor;

package/src/components/forms/create.tsx

@@ -0,0 +1,30 @@
+import { Create, TextInput, required, SimpleForm } from "react-admin";
+import { Box, Typography } from "@mui/material";
+
+export const FormCreate = () => {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} fullWidth />
+
+        <Box
+          sx={{
+            mt: 3,
+            p: 2,
+            bgcolor: "#f5f5f5",
+            borderRadius: 1,
+            color: "text.secondary",
+          }}
+        >
+          <Typography variant="body1">
+            The flow diagram will be available after creating the form.
+          </Typography>
+          <Typography variant="body2" sx={{ mt: 1 }}>
+            You can add nodes and connections to build your form flow in the
+            edit view.
+          </Typography>
+        </Box>
+      </SimpleForm>
+    </Create>
+  );
+};

package/src/components/forms/edit.tsx

@@ -0,0 +1,256 @@
+import {
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  TextInput,
+  required,
+  useRecordContext,
+  TabbedForm,
+  FormTab,
+  useUpdate,
+  useNotify,
+  useRefresh,
+  useGetList,
+} from "react-admin";
+import FlowEditor, { FlowNodeData, StartNode, EndingNode } from "./FlowEditor";
+import { ReactFlowProvider } from "@xyflow/react";
+import { Box, Typography, useTheme } from "@mui/material";
+import * as React from "react";
+import { useSaveContext } from "react-admin";
+
+// A component to render the flow diagram
+const FlowDiagram = () => {
+  const record = useRecordContext();
+  const [update] = useUpdate();
+  const notify = useNotify();
+  const refresh = useRefresh();
+
+  // Fetch flows for dropdown selection
+  const { data: flows } = useGetList("flows", {
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: "name", order: "ASC" },
+  });
+
+  // Allow rendering if there is a start or ending node, even if nodes is missing or empty
+  if (!record || (!record.nodes && !record.start && !record.ending)) {
+    return <div>No flow data available</div>;
+  }
+
+  // Handle node updates from the FlowEditor
+  const handleNodeUpdate = (
+    nodeId: string,
+    updates: Partial<FlowNodeData> | Partial<StartNode> | Partial<EndingNode>,
+  ) => {
+    let updatedRecord = { ...record };
+
+    if (nodeId === "start") {
+      // Update the start node
+      updatedRecord.start = { ...record.start, ...updates };
+    } else if (nodeId === "end") {
+      // Update the ending node
+      updatedRecord.ending = { ...record.ending, ...updates };
+    } else {
+      // Check if this is a new node (has 'type' property in updates indicating full node data)
+      const isNewNode =
+        "type" in updates && (updates as FlowNodeData).type !== undefined;
+
+      if (isNewNode) {
+        // Adding a new node
+        const newNode = { id: nodeId, ...updates } as FlowNodeData;
+        updatedRecord.nodes = [...(record.nodes || []), newNode];
+      } else {
+        // Update an existing node
+        const nodeIndex = (record.nodes || []).findIndex(
+          (n: FlowNodeData) => n.id === nodeId,
+        );
+        if (nodeIndex >= 0) {
+          const existingNode = record.nodes[nodeIndex];
+          updatedRecord.nodes = [...record.nodes];
+          updatedRecord.nodes[nodeIndex] = {
+            ...existingNode,
+            ...updates,
+            config: {
+              ...existingNode.config,
+              ...(updates as Partial<FlowNodeData>).config,
+            },
+          };
+        }
+      }
+    }
+
+    // Save the updated record
+    update(
+      "forms",
+      { id: record.id, data: updatedRecord, previousData: record },
+      {
+        onSuccess: () => {
+          notify("Flow updated successfully", { type: "success" });
+          refresh();
+        },
+        onError: (error: any) => {
+          notify(`Error updating flow: ${error.message}`, { type: "error" });
+        },
+      },
+    );
+  };
+
+  return (
+    <Box
+      sx={{
+        height: "700px",
+        width: "100%",
+        border: "1px solid #e0e0e0",
+        borderRadius: "4px",
+        bgcolor: "#fcfcfc",
+      }}
+    >
+      <ReactFlowProvider>
+        <FlowEditor
+          nodes={record.nodes || []}
+          start={record.start}
+          ending={record.ending}
+          flows={flows?.map((f) => ({ id: f.id, name: f.name })) || []}
+          onNodeUpdate={handleNodeUpdate}
+        />
+      </ReactFlowProvider>
+    </Box>
+  );
+};
+
+// A component to display raw JSON
+const RawJsonEditor = () => {
+  const record = useRecordContext();
+  const saveContext = useSaveContext();
+  const theme = useTheme();
+  const [jsonValue, setJsonValue] = React.useState(() =>
+    record ? JSON.stringify(record, null, 2) : "",
+  );
+  const [error, setError] = React.useState<string | null>(null);
+  const [success, setSuccess] = React.useState(false);
+
+  // Sync jsonValue with record when it changes (e.g., after flow diagram updates)
+  React.useEffect(() => {
+    if (record) {
+      setJsonValue(JSON.stringify(record, null, 2));
+      setError(null);
+      setSuccess(false);
+    }
+  }, [record]);
+
+  if (!record) {
+    return <div>No form data available</div>;
+  }
+
+  // Handle JSON edit
+  const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    const value = e.target.value;
+    setJsonValue(value);
+    setSuccess(false);
+    try {
+      JSON.parse(value);
+      setError(null);
+    } catch (err: any) {
+      setError(err.message || "Invalid JSON");
+    }
+  };
+
+  // Save JSON to record
+  const handleSave = () => {
+    try {
+      const parsed = JSON.parse(jsonValue);
+      setError(null);
+      if (saveContext && typeof saveContext.save === "function") {
+        saveContext.save(parsed);
+        setSuccess(true);
+      }
+    } catch (err: any) {
+      setError(err.message || "Invalid JSON");
+      setSuccess(false);
+    }
+  };
+
+  // Theme-aware colors
+  const isDark = theme.palette.mode === "dark";
+  const textareaBg = isDark ? theme.palette.background.paper : "#f5f5f5";
+  const textareaBorder = isDark ? theme.palette.divider : "#e0e0e0";
+  const textareaColor = isDark ? theme.palette.text.primary : "inherit";
+
+  return (
+    <Box sx={{ mt: 2 }}>
+      <Typography variant="subtitle2" sx={{ mb: 1 }}>
+        Raw JSON representation of the form data:
+      </Typography>
+      <Box
+        component="textarea"
+        value={jsonValue}
+        onChange={handleChange}
+        sx={{
+          backgroundColor: textareaBg,
+          border: `1px solid ${textareaBorder}`,
+          borderRadius: "4px",
+          color: textareaColor,
+          padding: 2,
+          maxHeight: "600px",
+          minHeight: "300px",
+          width: "100%",
+          overflow: "auto",
+          fontSize: "0.9rem",
+          fontFamily: "monospace",
+          resize: "vertical",
+        }}
+      />
+      <Box sx={{ mt: 1, display: "flex", gap: 2, alignItems: "center" }}>
+        <button
+          onClick={handleSave}
+          disabled={!!error || !saveContext?.save}
+          style={{
+            padding: "6px 16px",
+            borderRadius: 4,
+            border: `1px solid ${theme.palette.primary.main}`,
+            background: theme.palette.primary.main,
+            color: theme.palette.primary.contrastText,
+            cursor: error ? "not-allowed" : "pointer",
+          }}
+        >
+          Save JSON
+        </button>
+        {success && <Typography color="success.main">Saved!</Typography>}
+      </Box>
+      {error && (
+        <Typography color="error" sx={{ mt: 1 }}>
+          Invalid JSON: {error}
+        </Typography>
+      )}
+    </Box>
+  );
+};
+
+export const FormEdit = () => {
+  return (
+    <Edit>
+      <TabbedForm>
+        <FormTab label="Basic Information">
+          <TextInput source="id" disabled fullWidth />
+          <TextInput source="name" validate={[required()]} fullWidth />
+          <Labeled label={<FieldTitle source="created_at" />}>
+            <DateField source="created_at" showTime={true} />
+          </Labeled>
+          <Labeled label={<FieldTitle source="updated_at" />}>
+            <DateField source="updated_at" showTime={true} />
+          </Labeled>
+        </FormTab>
+
+        <FormTab label="Flow Diagram">
+          <FlowDiagram />
+        </FormTab>
+
+        <FormTab label="Raw">
+          <Box sx={{ width: "100%" }}>
+            <RawJsonEditor />
+          </Box>
+        </FormTab>
+      </TabbedForm>
+    </Edit>
+  );
+};

package/src/components/forms/index.ts

@@ -0,0 +1,3 @@
+export { FormCreate } from "./create.tsx";
+export { FormsList } from "./list.tsx";
+export { FormEdit } from "./edit.tsx";

package/src/components/forms/list.tsx

@@ -0,0 +1,16 @@
+import { List, Datagrid, TextField, DateField } from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export const FormsList = () => {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="name" />
+        <TextField source="type" />
+        <DateField source="created_at" showTime={true} />
+        <DateField source="updated_at" showTime={true} />
+      </Datagrid>
+    </List>
+  );
+};

package/src/components/hooks/create.tsx

@@ -0,0 +1,96 @@
+import {
+  BooleanInput,
+  Create,
+  NumberInput,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+  required,
+  useGetList,
+  FormDataConsumer,
+} from "react-admin";
+
+export function HooksCreate() {
+  // Fetch forms for the current tenant
+  const { data: forms, isLoading: formsLoading } = useGetList("forms", {
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: "name", order: "ASC" },
+  });
+
+  // Choices for the type selector
+  const typeChoices = [
+    { id: "webhook", name: "Webhook" },
+    { id: "form", name: "Form" },
+  ];
+
+  return (
+    <Create>
+      <SimpleForm>
+        <SelectInput
+          source="type"
+          label="Type"
+          choices={typeChoices}
+          validate={[required()]}
+        />
+        <FormDataConsumer>
+          {({ formData }) => {
+            if (formData.type === "webhook") {
+              return (
+                <TextInput
+                  source="url"
+                  validate={[required()]}
+                  label="Webhook URL"
+                  fullWidth
+                />
+              );
+            }
+            if (formData.type === "form") {
+              return (
+                <SelectInput
+                  source="form_id"
+                  label="Form"
+                  choices={
+                    formsLoading
+                      ? []
+                      : (forms || []).map((form) => ({
+                          id: form.id,
+                          name: form.name,
+                        }))
+                  }
+                  validate={[required()]}
+                  fullWidth
+                />
+              );
+            }
+            return null;
+          }}
+        </FormDataConsumer>
+        <SelectInput
+          source="trigger_id"
+          choices={[
+            {
+              id: "validate-registration-username",
+              name: "Validate Registration Username",
+            },
+            { id: "pre-user-registration", name: "Pre User Registration" },
+            { id: "post-user-registration", name: "Post User Registration" },
+            { id: "post-user-login", name: "Post User Login" },
+            { id: "pre-user-update", name: "Pre User Update" },
+            { id: "pre-user-deletion", name: "Pre User Deletion" },
+            { id: "post-user-deletion", name: "Post User Deletion" },
+          ]}
+          required
+        />
+        <BooleanInput source="enabled" />
+        <BooleanInput
+          source="synchronous"
+          helperText="The event waits for the webhook to complete and can be canceled"
+        />
+        <NumberInput
+          source="priority"
+          helperText="A hook with higher priority will be executed first"
+        />
+      </SimpleForm>
+    </Create>
+  );
+}

package/src/components/hooks/edit.tsx

@@ -0,0 +1,114 @@
+import {
+  BooleanInput,
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  NumberInput,
+  regex,
+  required,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+  useGetList,
+  FormDataConsumer,
+  useRecordContext,
+} from "react-admin";
+import { Typography } from "@mui/material";
+
+export function HookEdit() {
+  // Fetch forms for the current tenant
+  const { data: forms, isLoading: formsLoading } = useGetList("forms", {
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: "name", order: "ASC" },
+  });
+  const record = useRecordContext();
+
+  // Determine type from record or formData
+  const getType = (formData: any) => {
+    if (formData?.url) return "webhook";
+    if (formData?.form_id) return "form";
+    return undefined;
+  };
+
+  return (
+    <Edit>
+      <SimpleForm>
+        <FormDataConsumer>
+          {({ formData }) => {
+            const type = getType(formData ?? record);
+            return (
+              <>
+                <Typography variant="subtitle1" sx={{ mb: 2 }}>
+                  {type === "webhook"
+                    ? "Webhook"
+                    : type === "form"
+                      ? "Form hook"
+                      : ""}
+                </Typography>
+                {type === "webhook" && (
+                  <TextInput
+                    source="url"
+                    validate={[
+                      required(),
+                      regex(/^https?:\/\/.*/, "Must be a valid HTTP/HTTPS URL"),
+                    ]}
+                    label="Webhook URL"
+                    fullWidth
+                    helperText="The webhook endpoint URL that will be called"
+                  />
+                )}
+                {type === "form" && (
+                  <SelectInput
+                    source="form_id"
+                    label="Form"
+                    choices={
+                      formsLoading
+                        ? []
+                        : (forms || []).map((form) => ({
+                            id: form.id,
+                            name: form.name,
+                          }))
+                    }
+                    validate={[required()]}
+                    fullWidth
+                  />
+                )}
+              </>
+            );
+          }}
+        </FormDataConsumer>
+        <SelectInput
+          source="trigger_id"
+          choices={[
+            { id: "pre-user-registration", name: "Pre User Registration" },
+            { id: "post-user-registration", name: "Post User Registration" },
+            { id: "post-user-login", name: "Post User Login" },
+            {
+              id: "validate-registration-username",
+              name: "Validate Registration Username",
+            },
+            { id: "pre-user-deletion", name: "Pre User Deletion" },
+            { id: "post-user-deletion", name: "Post User Deletion" },
+          ]}
+          required
+        />
+        <BooleanInput source="enabled" />
+        <BooleanInput
+          source="synchronous"
+          helperText="The event waits for the webhook to complete and can be canceled"
+        />
+        <NumberInput
+          source="priority"
+          helperText="A hook with higher priority will be executed first"
+        />
+        <Labeled label={<FieldTitle source="created_at" />}>
+          <DateField source="created_at" showTime={true} />
+        </Labeled>
+        <Labeled label={<FieldTitle source="updated_at" />}>
+          <DateField source="updated_at" showTime={true} />
+        </Labeled>
+      </SimpleForm>
+    </Edit>
+  );
+}

package/src/components/hooks/index.ts

@@ -0,0 +1,3 @@
+export * from "./create";
+export * from "./list";
+export * from "./edit";

package/src/components/hooks/list.tsx

@@ -0,0 +1,17 @@
+import { List, Datagrid, TextField, BooleanField } from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function HookList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="trigger_id" />
+        <TextField source="url" />
+        <TextField source="form_id" label="Form" />
+        <BooleanField source="enabled" />
+        <BooleanField source="synchronous" />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/listActions/PostListActions.tsx

@@ -0,0 +1,10 @@
+import { CreateButton, ExportButton, TopToolbar } from "react-admin";
+
+export function PostListActions() {
+  return (
+    <TopToolbar>
+      <CreateButton />
+      <ExportButton />
+    </TopToolbar>
+  );
+}