@authhero/react-admin 0.10.0

package/src/components/themes/edit.tsx

@@ -0,0 +1,200 @@
+import {
+  Edit,
+  TextInput,
+  NumberInput,
+  BooleanInput,
+  SelectInput,
+  SimpleForm,
+} from "react-admin";
+import { ColorInput } from "react-admin-color-picker";
+
+export function ThemesEdit() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="displayName" label="Display Name" />
+
+        {/* Colors Section */}
+        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Colors</h3>
+        <ColorInput source="colors.primary_button" label="Primary Button" />
+        <ColorInput
+          source="colors.primary_button_label"
+          label="Primary Button Label"
+        />
+        <ColorInput
+          source="colors.secondary_button_border"
+          label="Secondary Button Border"
+        />
+        <ColorInput
+          source="colors.secondary_button_label"
+          label="Secondary Button Label"
+        />
+        <ColorInput source="colors.base_focus_color" label="Base Focus Color" />
+        <ColorInput source="colors.base_hover_color" label="Base Hover Color" />
+        <ColorInput source="colors.body_text" label="Body Text" />
+        <SelectInput
+          source="colors.captcha_widget_theme"
+          label="Captcha Widget Theme"
+          choices={[{ id: "auto", name: "Auto" }]}
+        />
+        <ColorInput source="colors.error" label="Error" />
+        <ColorInput source="colors.header" label="Header" />
+        <ColorInput source="colors.icons" label="Icons" />
+        <ColorInput source="colors.input_background" label="Input Background" />
+        <ColorInput source="colors.input_border" label="Input Border" />
+        <ColorInput
+          source="colors.input_filled_text"
+          label="Input Filled Text"
+        />
+        <ColorInput
+          source="colors.input_labels_placeholders"
+          label="Input Labels/Placeholders"
+        />
+        <ColorInput
+          source="colors.links_focused_components"
+          label="Links/Focused Components"
+        />
+        <ColorInput source="colors.success" label="Success" />
+        <ColorInput
+          source="colors.widget_background"
+          label="Widget Background"
+        />
+        <ColorInput source="colors.widget_border" label="Widget Border" />
+
+        {/* Borders Section */}
+        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Borders</h3>
+        <NumberInput
+          source="borders.button_border_radius"
+          label="Button Border Radius"
+        />
+        <NumberInput
+          source="borders.button_border_weight"
+          label="Button Border Weight"
+        />
+        <SelectInput
+          source="borders.buttons_style"
+          label="Buttons Style"
+          choices={[
+            { id: "pill", name: "Pill" },
+            { id: "rounded", name: "Rounded" },
+            { id: "sharp", name: "Sharp" },
+          ]}
+        />
+        <NumberInput
+          source="borders.input_border_radius"
+          label="Input Border Radius"
+        />
+        <NumberInput
+          source="borders.input_border_weight"
+          label="Input Border Weight"
+        />
+        <SelectInput
+          source="borders.inputs_style"
+          label="Inputs Style"
+          choices={[
+            { id: "pill", name: "Pill" },
+            { id: "rounded", name: "Rounded" },
+            { id: "sharp", name: "Sharp" },
+          ]}
+        />
+        <BooleanInput
+          source="borders.show_widget_shadow"
+          label="Show Widget Shadow"
+        />
+        <NumberInput
+          source="borders.widget_border_weight"
+          label="Widget Border Weight"
+        />
+        <NumberInput
+          source="borders.widget_corner_radius"
+          label="Widget Corner Radius"
+        />
+
+        {/* Fonts Section */}
+        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Fonts</h3>
+        <TextInput source="fonts.font_url" label="Font URL" fullWidth />
+        <NumberInput
+          source="fonts.reference_text_size"
+          label="Reference Text Size"
+        />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Body Text</h4>
+        <BooleanInput source="fonts.body_text.bold" label="Bold" />
+        <NumberInput source="fonts.body_text.size" label="Size" />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Button Text</h4>
+        <BooleanInput source="fonts.buttons_text.bold" label="Bold" />
+        <NumberInput source="fonts.buttons_text.size" label="Size" />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Input Labels</h4>
+        <BooleanInput source="fonts.input_labels.bold" label="Bold" />
+        <NumberInput source="fonts.input_labels.size" label="Size" />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Links</h4>
+        <BooleanInput source="fonts.links.bold" label="Bold" />
+        <NumberInput source="fonts.links.size" label="Size" />
+        <SelectInput
+          source="fonts.links_style"
+          label="Links Style"
+          choices={[
+            { id: "normal", name: "Normal" },
+            { id: "underlined", name: "Underlined" },
+          ]}
+        />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Subtitle</h4>
+        <BooleanInput source="fonts.subtitle.bold" label="Bold" />
+        <NumberInput source="fonts.subtitle.size" label="Size" />
+
+        <h4 style={{ marginTop: 16, marginBottom: 8 }}>Title</h4>
+        <BooleanInput source="fonts.title.bold" label="Bold" />
+        <NumberInput source="fonts.title.size" label="Size" />
+
+        {/* Page Background Section */}
+        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Page Background</h3>
+        <ColorInput
+          source="page_background.background_color"
+          label="Background Color"
+        />
+        <TextInput
+          source="page_background.background_image_url"
+          label="Background Image URL"
+          fullWidth
+        />
+        <SelectInput
+          source="page_background.page_layout"
+          label="Page Layout"
+          choices={[{ id: "center", name: "Center" }]}
+        />
+
+        {/* Widget Section */}
+        <h3 style={{ marginTop: 24, marginBottom: 16 }}>Widget</h3>
+        <SelectInput
+          source="widget.header_text_alignment"
+          label="Header Text Alignment"
+          choices={[{ id: "center", name: "Center" }]}
+        />
+        <NumberInput source="widget.logo_height" label="Logo Height" />
+        <SelectInput
+          source="widget.logo_position"
+          label="Logo Position"
+          choices={[
+            { id: "center", name: "Center" },
+            { id: "left", name: "Left" },
+            { id: "none", name: "None" },
+            { id: "right", name: "Right" },
+          ]}
+        />
+        <TextInput source="widget.logo_url" label="Logo URL" fullWidth />
+        <SelectInput
+          source="widget.social_buttons_layout"
+          label="Social Buttons Layout"
+          choices={[
+            { id: "bottom", name: "Bottom" },
+            { id: "top", name: "Top" },
+          ]}
+        />
+      </SimpleForm>
+    </Edit>
+  );
+}

package/src/components/themes/index.ts

@@ -0,0 +1,2 @@
+export { ThemesEdit } from "./edit";
+export { ThemesList } from "./list";

package/src/components/themes/list.tsx

@@ -0,0 +1,12 @@
+import { List, Datagrid, TextField } from "react-admin";
+
+export function ThemesList() {
+  return (
+    <List>
+      <Datagrid>
+        <TextField source="displayName" />
+        <TextField source="themeId" />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/users/create.tsx

@@ -0,0 +1,144 @@
+import {
+  Create,
+  SimpleForm,
+  TextInput,
+  required,
+  SelectInput,
+  useGetList,
+  FormDataConsumer,
+} from "react-admin";
+import { useState } from "react";
+
+export function UserCreate() {
+  const [_, setSelectedConnection] = useState(null);
+
+  // Fetch available connections for the tenant
+  const { data: connections, isLoading } = useGetList("connections", {
+    pagination: { page: 1, perPage: 100 },
+    sort: { field: "name", order: "ASC" },
+  });
+
+  const transform = (data) => {
+    // Set the provider based on the connection if available
+    if (data.connection) {
+      const connectionData = connections?.find(
+        (c) => c.name === data.connection,
+      );
+      if (connectionData) {
+        // For Username-Password-Authentication connections, the provider should be "auth2"
+        if (connectionData.strategy === "Username-Password-Authentication") {
+          data.provider = "auth2";
+        } else {
+          data.provider = connectionData.strategy || "database";
+        }
+      }
+    }
+    return data;
+  };
+
+  return (
+    <Create transform={transform}>
+      <SimpleForm>
+        <SelectInput
+          source="connection"
+          label="Connection Provider"
+          choices={
+            isLoading
+              ? []
+              : connections?.map((connection) => ({
+                  id: connection.name,
+                  name: connection.name,
+                  // Store connection strategy for reference
+                  _strategy: connection.strategy,
+                }))
+          }
+          validate={[required()]}
+          onChange={(e) => {
+            const selectedConnectionData = connections?.find(
+              (c) => c.name === e.target.value,
+            );
+            setSelectedConnection(selectedConnectionData);
+          }}
+        />
+
+        <FormDataConsumer>
+          {({ formData }) => {
+            const connectionValue = formData.connection;
+            const connectionData = connections?.find(
+              (c) => c.name === connectionValue,
+            );
+
+            if (!connectionData) {
+              // If no connection is selected yet, show both fields
+              return (
+                <>
+                  <TextInput source="email" type="email" />
+                  <TextInput source="phone_number" />
+                </>
+              );
+            }
+
+            // Show email input for email-based connections
+            if (
+              connectionData.strategy === "email" ||
+              connectionData.strategy === "auth2" ||
+              connectionData.strategy === "Username-Password-Authentication"
+            ) {
+              // For password connections, also show password field
+              if (
+                connectionData.strategy === "Username-Password-Authentication"
+              ) {
+                return (
+                  <>
+                    <TextInput
+                      source="email"
+                      type="email"
+                      validate={[required()]}
+                    />
+                    <TextInput
+                      source="password"
+                      type="password"
+                      validate={[required()]}
+                      helperText="Password for the user account"
+                    />
+                  </>
+                );
+              }
+              return (
+                <TextInput
+                  source="email"
+                  type="email"
+                  validate={[required()]}
+                />
+              );
+            }
+
+            // Show phone input for SMS-based connections
+            if (connectionData.strategy === "sms") {
+              return (
+                <TextInput
+                  source="phone_number"
+                  validate={[required()]}
+                  helperText="Enter the phone number with country code e.g., +1234567890"
+                />
+              );
+            }
+
+            // Default case - show both fields but make neither required
+            return (
+              <>
+                <TextInput source="email" type="email" />
+                <TextInput source="phone_number" />
+              </>
+            );
+          }}
+        </FormDataConsumer>
+
+        <TextInput source="name" />
+        <TextInput source="given_name" />
+        <TextInput source="family_name" />
+        <TextInput source="picture" />
+      </SimpleForm>
+    </Create>
+  );
+}