@authhero/react-admin 0.10.0

package/src/components/branding/edit.tsx

@@ -0,0 +1,149 @@
+import {
+  DateField,
+  Edit,
+  FieldTitle,
+  Labeled,
+  TextInput,
+  TabbedForm,
+} from "react-admin";
+import { ColorInput } from "react-admin-color-picker";
+import { useInput, useRecordContext } from "react-admin";
+import { useState, useEffect } from "react";
+import { ThemesTab } from "./ThemesTab";
+
+function PageBackgroundInput(props) {
+  const { field } = useInput(props);
+  const record = useRecordContext();
+  const value = field.value ?? record?.colors?.page_background;
+  const [mode, setMode] = useState(
+    typeof value === "string" || !value ? "color" : "gradient",
+  );
+  const [color, setColor] = useState(typeof value === "string" ? value : "");
+  const [gradient, setGradient] = useState(
+    typeof value === "object" && value
+      ? {
+          type: value.type || "linear-gradient",
+          start: value.start || "",
+          end: value.end || "",
+          angle_deg: value.angle_deg || 0,
+        }
+      : { type: "linear-gradient", start: "", end: "", angle_deg: 0 },
+  );
+
+  useEffect(() => {
+    if (mode === "color") {
+      field.onChange(color);
+    } else {
+      field.onChange(gradient);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [mode, color, gradient]);
+
+  // ColorInput is uncontrolled, so we use a key to force remount on value change
+  return (
+    <div style={{ marginBottom: 16 }}>
+      <label style={{ fontWeight: 500 }}>Page Background</label>
+      <div style={{ margin: "8px 0" }}>
+        <select
+          value={mode}
+          onChange={(e) => setMode(e.target.value)}
+          style={{ marginBottom: 8 }}
+        >
+          <option value="color">Solid Color</option>
+          <option value="gradient">Gradient</option>
+        </select>
+      </div>
+      {mode === "color" ? (
+        <>
+          <ColorInput
+            key={color}
+            source={props.source}
+            label="Solid Color"
+            // No value prop, uncontrolled
+          />
+          <TextInput
+            source="_page_background_color_helper"
+            style={{ display: "none" }}
+            value={color}
+            onChange={(e) => setColor(e.target.value)}
+          />
+        </>
+      ) : (
+        <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
+          <TextInput
+            source="colors.page_background.type"
+            label="Type"
+            value={gradient.type}
+            onChange={(e) =>
+              setGradient((g) => ({ ...g, type: e.target.value }))
+            }
+          />
+          <ColorInput
+            key={gradient.start}
+            source="colors.page_background.start"
+            label="Start Color"
+          />
+          <TextInput
+            source="_page_background_start_helper"
+            style={{ display: "none" }}
+            value={gradient.start}
+            onChange={(e) =>
+              setGradient((g) => ({ ...g, start: e.target.value }))
+            }
+          />
+          <ColorInput
+            key={gradient.end}
+            source="colors.page_background.end"
+            label="End Color"
+          />
+          <TextInput
+            source="_page_background_end_helper"
+            style={{ display: "none" }}
+            value={gradient.end}
+            onChange={(e) =>
+              setGradient((g) => ({ ...g, end: e.target.value }))
+            }
+          />
+          <TextInput
+            source="colors.page_background.angle_deg"
+            label="Angle (deg)"
+            type="number"
+            value={gradient.angle_deg}
+            onChange={(e) =>
+              setGradient((g) => ({ ...g, angle_deg: Number(e.target.value) }))
+            }
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+export function BrandingEdit() {
+  return (
+    <Edit>
+      <TabbedForm>
+        <TabbedForm.Tab label="Info">
+          <TextInput source="id" />
+          <TextInput source="name" />
+          <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>
+        </TabbedForm.Tab>
+        <TabbedForm.Tab label="Style">
+          <ColorInput source="colors.primary" label="Primary Color" />
+          <PageBackgroundInput source="colors.page_background" />
+          <TextInput source="favicon_url" label="Favicon URL" />
+          <TextInput source="logo_url" label="Logo URL" />
+          <TextInput source="font.url" label="Font URL" />
+        </TabbedForm.Tab>
+        <TabbedForm.Tab label="Themes">
+          <ThemesTab />
+        </TabbedForm.Tab>
+      </TabbedForm>
+    </Edit>
+  );
+}

package/src/components/branding/hooks/useThemesData.ts

@@ -0,0 +1,123 @@
+import { useState, useEffect } from "react";
+import { useDataProvider, useNotify } from "react-admin";
+
+export interface ThemeData {
+  displayName: string;
+  colors: {
+    primary_button?: string;
+    primary_button_label?: string;
+    secondary_button_border?: string;
+    secondary_button_label?: string;
+    base_focus_color?: string;
+    base_hover_color?: string;
+    body_text?: string;
+    captcha_widget_theme?: string;
+    error?: string;
+    header?: string;
+    icons?: string;
+    input_background?: string;
+    input_border?: string;
+    input_filled_text?: string;
+    input_labels_placeholders?: string;
+    links_focused_components?: string;
+    success?: string;
+    widget_background?: string;
+    widget_border?: string;
+  };
+  borders: {
+    button_border_radius?: number;
+    button_border_weight?: number;
+    buttons_style?: string;
+    input_border_radius?: number;
+    input_border_weight?: number;
+    inputs_style?: string;
+    show_widget_shadow?: boolean;
+    widget_border_weight?: number;
+    widget_corner_radius?: number;
+  };
+  fonts: {
+    font_url?: string;
+    reference_text_size?: number;
+    body_text?: { bold?: boolean; size?: number };
+    buttons_text?: { bold?: boolean; size?: number };
+    input_labels?: { bold?: boolean; size?: number };
+    links?: { bold?: boolean; size?: number };
+    links_style?: string;
+    subtitle?: { bold?: boolean; size?: number };
+    title?: { bold?: boolean; size?: number };
+  };
+  page_background: {
+    background_color?: string;
+    background_image_url?: string;
+    page_layout?: string;
+  };
+  widget: {
+    header_text_alignment?: string;
+    logo_height?: number;
+    logo_position?: string;
+    logo_url?: string;
+    social_buttons_layout?: string;
+  };
+}
+
+export function useThemesData() {
+  const [themeData, setThemeData] = useState<ThemeData | null>(null);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+  const dataProvider = useDataProvider();
+  const notify = useNotify();
+
+  const fetchThemes = async () => {
+    try {
+      setLoading(true);
+      const response = await dataProvider.getOne("branding/themes/default", {
+        id: "default",
+      });
+      setThemeData(response.data);
+      setError(null);
+    } catch (err) {
+      console.error("Failed to fetch themes:", err);
+      setError("Failed to fetch themes");
+      // Initialize with empty structure if fetch fails
+      setThemeData({
+        displayName: "",
+        colors: {},
+        borders: {},
+        fonts: {},
+        page_background: {},
+        widget: {},
+      });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const updateThemes = async (data: Partial<ThemeData>) => {
+    try {
+      const response = await dataProvider.update("branding/themes/default", {
+        id: "default",
+        data,
+        previousData: themeData,
+      });
+      setThemeData(response.data);
+      notify("Theme updated successfully", { type: "success" });
+      return response.data;
+    } catch (err) {
+      console.error("Failed to update themes:", err);
+      notify("Failed to update theme", { type: "error" });
+      throw err;
+    }
+  };
+
+  useEffect(() => {
+    fetchThemes();
+  }, []);
+
+  return {
+    themeData,
+    loading,
+    error,
+    updateThemes,
+    refetch: fetchThemes,
+  };
+}

package/src/components/branding/index.ts

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

package/src/components/branding/list.tsx

@@ -0,0 +1,12 @@
+import { useEffect } from "react";
+import { useRedirect, useBasename } from "react-admin";
+
+export function BrandingList() {
+  const redirect = useRedirect();
+  const basename = useBasename();
+  useEffect(() => {
+    // For singleton resources, redirect to edit with "branding" as the ID
+    redirect(`${basename}/branding/branding`);
+  }, [redirect, basename]);
+  return null;
+}

package/src/components/clients/create.tsx

@@ -0,0 +1,12 @@
+import { Create, SimpleForm, TextInput, required } from "react-admin";
+
+export function ClientCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <TextInput source="client_id" validate={[required()]} />
+      </SimpleForm>
+    </Create>
+  );
+}