@authhero/react-admin 0.10.0

package/src/components/clients/index.ts

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

package/src/components/clients/list.tsx

@@ -0,0 +1,37 @@
+import {
+  List,
+  Datagrid,
+  TextField,
+  DateField,
+  FunctionField,
+} from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function ClientList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="id" />
+        <TextField source="name" />
+        <FunctionField
+          label="Login"
+          render={(record: any) => (
+            <a
+              href={`${
+                import.meta.env.VITE_SIMPLE_REST_URL
+              }/authorize?client_id=${record.id}&redirect_uri=${
+                import.meta.env.VITE_SIMPLE_REST_URL
+              }/u/info&scope=profile%20email%20openid&state=1234&response_type=code`}
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Login
+            </a>
+          )}
+        />
+        <DateField source="created_at" showTime={true} />
+        <DateField source="updated_at" showTime={true} />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/common/DateAgo.tsx

@@ -0,0 +1,6 @@
+import { formatDistance } from "date-fns";
+
+export function DateAgo({ date }: { date?: string }) {
+  if (!date) return "N/A";
+  return `${formatDistance(new Date(date), new Date())} ago`;
+}

package/src/components/common/JsonOutput.tsx

@@ -0,0 +1,26 @@
+import { Box } from "@mui/material";
+import { useTheme } from "@mui/material/styles";
+
+export function JsonOutput({ data }: { data: any }) {
+  const theme = useTheme();
+  const isDark = theme.palette.mode === "dark";
+
+  return (
+    <Box
+      component="pre"
+      sx={{
+        backgroundColor: isDark ? theme.palette.background.paper : "#f5f5f5",
+        color: theme.palette.text.primary,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: "4px",
+        padding: 2,
+        overflow: "auto",
+        fontSize: "0.9rem",
+        fontFamily: "monospace",
+        margin: 0,
+      }}
+    >
+      {JSON.stringify(data, null, 2)}
+    </Box>
+  );
+}

package/src/components/common/index.ts

@@ -0,0 +1 @@
+export * from "./DateAgo";

package/src/components/connections/create.tsx

@@ -0,0 +1,35 @@
+import {
+  Create,
+  SelectInput,
+  SimpleForm,
+  TextInput,
+  required,
+} from "react-admin";
+
+export function ConnectionCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="name" validate={[required()]} />
+        <SelectInput
+          source="strategy"
+          label="Strategy"
+          choices={[
+            { id: "email", name: "Email" },
+            { id: "google-oauth2", name: "Google" },
+            { id: "facebook", name: "Facebook" },
+            { id: "apple", name: "Apple" },
+            { id: "github", name: "GitHub" },
+            { id: "microsoft", name: "Microsoft" },
+            { id: "vipps", name: "Vipps" },
+            { id: "oauth2", name: "OAuth2" },
+            { id: "oidc", name: "OpenID Connect" },
+            { id: "Username-Password-Authentication", name: "Password" },
+            { id: "sms", name: "SMS" },
+            { id: "samlp", name: "SAML" },
+          ]}
+        />
+      </SimpleForm>
+    </Create>
+  );
+}

package/src/components/connections/edit.tsx

@@ -0,0 +1,212 @@
+import {
+  ArrayInput,
+  BooleanInput,
+  ChipField,
+  Edit,
+  FunctionField,
+  NumberInput,
+  ReferenceManyField,
+  SelectInput,
+  SimpleFormIterator,
+  SimpleShowLayout,
+  SingleFieldList,
+  TabbedForm,
+  TextField,
+  TextInput,
+  useRecordContext,
+} from "react-admin";
+import { JsonOutput } from "../common/JsonOutput";
+
+export function ConnectionEdit(props: any) {
+  return (
+    <Edit {...props}>
+      <ConnectionTabbedFrom />
+    </Edit>
+  );
+}
+
+function ConnectionTabbedFrom() {
+  const record = useRecordContext();
+
+  return (
+    <Edit>
+      <SimpleShowLayout>
+        <TextField source="name" />
+        <TextField source="id" />
+      </SimpleShowLayout>
+      <TabbedForm>
+        <TabbedForm.Tab label="details">
+          <TextInput source="id" label="Client ID" style={{ width: "800px" }} />
+          <TextInput disabled source="strategy" />
+          <TextInput source="options.client_id" label="Client Id" />
+          <TextInput
+            source="options.client_secret"
+            label="Client Secret"
+            style={{ width: "800px" }}
+          />
+
+          {record?.strategy === "apple" && (
+            <>
+              <TextInput source="options.kid" label="Key ID" />
+              <TextInput source="options.team_id" label="Team ID" />
+              <TextInput source="options.realms" label="Realms" />
+              <TextInput source="options.app_secret" label="App Secret" />
+              <TextInput source="options.scope" fullWidth />
+            </>
+          )}
+
+          {record?.strategy === "github" && (
+            <>
+              <TextInput
+                source="options.scope"
+                label="Scope"
+                placeholder="user:email"
+                helperText="Space-separated scopes (e.g., user:email read:user)"
+                fullWidth
+              />
+            </>
+          )}
+
+          {record?.strategy === "microsoft" && (
+            <>
+              <TextInput
+                source="options.realms"
+                label="Tenant ID"
+                placeholder="common"
+                helperText="Use 'common', 'organizations', 'consumers', or your tenant ID"
+              />
+              <TextInput
+                source="options.scope"
+                label="Scope"
+                placeholder="openid profile email"
+                helperText="Space-separated scopes"
+                fullWidth
+              />
+            </>
+          )}
+
+          {["oauth2", "oidc"].includes(record?.strategy) && (
+            <>
+              <TextInput
+                source="display_name"
+                label="Display Name"
+                fullWidth
+              />
+              <SelectInput
+                source="response_type"
+                label="Response Type"
+                choices={[
+                  { id: "code", name: "Code" },
+                  { id: "code id_token", name: "Code ID-token" },
+                ]}
+              />
+              <SelectInput
+                source="response_mode"
+                label="Response Mode"
+                choices={[
+                  { id: "query", name: "Query" },
+                  { id: "fragment", name: "Fragment" },
+                  { id: "web_message", name: "Web Message" },
+                  { id: "form_post", name: "Form Post" },
+                ]}
+              />
+              <TextInput source="options.scope" fullWidth />
+              <TextInput
+                source="options.authorization_endpoint"
+                label="Authorization Endpoint"
+                fullWidth
+              />
+              <TextInput
+                source="options.userinfo_endpoint"
+                label="Userinfo Endpoint"
+                fullWidth
+              />
+              <TextInput
+                source="options.token_endpoint"
+                label="Token Endpoint"
+                fullWidth
+              />
+              <TextInput source="options.icon_url" label="Icon URL" fullWidth />
+            </>
+          )}
+
+          {record?.strategy === "sms" && (
+            <>
+              <TextInput
+                source="options.twilio_sid"
+                label="Twillio Account ID"
+              />
+              <TextInput source="options.twilio_token" label="Twilio Token" />
+              <TextInput source="options.from" label="From" />
+            </>
+          )}
+
+          {record?.strategy === "Username-Password-Authentication" && (
+            <>
+              <SelectInput
+                source="options.passwordPolicy"
+                label="Password Policy"
+                choices={[
+                  { id: "none", name: "None" },
+                  { id: "low", name: "Low" },
+                  { id: "fair", name: "Fair" },
+                  { id: "good", name: "Good" },
+                  { id: "excellent", name: "Excellent" },
+                  { id: null, name: "Null" },
+                ]}
+              />
+              <NumberInput
+                source="options.password_complexity_options.min_length"
+                label="Minimum Password Length"
+              />
+              <BooleanInput
+                source="options.password_history.enable"
+                label="Enable Password History"
+              />
+              <NumberInput
+                source="options.password_history.size"
+                label="Password History Size"
+              />
+              <BooleanInput
+                source="options.password_no_personal_info.enable"
+                label="Enable No Personal Info in Passwords"
+              />
+              <BooleanInput
+                source="options.password_dictionary.enable"
+                label="Enable Password Dictionary"
+              />
+              <ArrayInput
+                source="options.password_dictionary.dictionary"
+                label="Custom Password Dictionary"
+              >
+                <SimpleFormIterator>
+                  <TextInput
+                    source=""
+                    label="Dictionary Entry"
+                    validate={(value) =>
+                      value && value.length > 50
+                        ? "Entry must be 50 characters or less"
+                        : undefined
+                    }
+                  />
+                </SimpleFormIterator>
+              </ArrayInput>
+            </>
+          )}
+
+          <ReferenceManyField reference="clients" target="id">
+            <SingleFieldList>
+              <ChipField source="name" size="small" />
+            </SingleFieldList>
+          </ReferenceManyField>
+        </TabbedForm.Tab>
+        <TabbedForm.Tab label="Raw JSON">
+          <FunctionField
+            source="date"
+            render={(record: any) => <JsonOutput data={record} />}
+          />
+        </TabbedForm.Tab>
+      </TabbedForm>
+    </Edit>
+  );
+}

package/src/components/connections/index.ts

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

package/src/components/connections/list.tsx

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

package/src/components/custom-domains/create.tsx

@@ -0,0 +1,26 @@
+import {
+  Create,
+  SimpleForm,
+  TextInput,
+  SelectInput,
+  required,
+} from "react-admin";
+
+export function DomainCreate() {
+  return (
+    <Create>
+      <SimpleForm>
+        <TextInput source="domain" validate={[required()]} />
+        <SelectInput
+          source="type"
+          validate={[required()]}
+          defaultValue="auth0_managed_certs"
+          choices={[
+            { id: "auth0_managed_certs", name: "Auth0 Managed Certificates" },
+            { id: "self_managed_certs", name: "Self Managed Certificates" },
+          ]}
+        />
+      </SimpleForm>
+    </Create>
+  );
+}

package/src/components/custom-domains/edit.tsx

@@ -0,0 +1,101 @@
+import {
+  ArrayField,
+  DateField,
+  Datagrid,
+  Edit,
+  FieldTitle,
+  Labeled,
+  SelectInput,
+  SimpleForm,
+  TextField,
+  TextInput,
+  useRecordContext,
+} from "react-admin";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import HourglassEmptyIcon from "@mui/icons-material/HourglassEmpty";
+import { Typography, Box } from "@mui/material";
+
+const StatusField = () => {
+  const record = useRecordContext();
+  if (!record) return null;
+
+  const isActive = record.status === "active";
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        alignItems: "center",
+        color: isActive ? "success.main" : "warning.main",
+      }}
+    >
+      {isActive ? (
+        <CheckCircleIcon sx={{ mr: 1 }} fontSize="small" />
+      ) : (
+        <HourglassEmptyIcon sx={{ mr: 1 }} fontSize="small" />
+      )}
+      <Typography
+        component="span"
+        variant="body2"
+        sx={{
+          fontWeight: "medium",
+          textTransform: "capitalize",
+        }}
+      >
+        {record.status}
+      </Typography>
+    </Box>
+  );
+};
+
+export function DomainEdit() {
+  return (
+    <Edit>
+      <SimpleForm>
+        <TextInput source="domain" />
+        <Labeled label="Status">
+          <StatusField />
+        </Labeled>
+        <SelectInput
+          source="email_service"
+          choices={[
+            { id: "mailchannels", name: "Mailchannels" },
+            { id: "mailgun", name: "Mailgun" },
+          ]}
+        />
+        <TextInput
+          label="PEM Private Key"
+          source="dkim_private_key"
+          style={{ width: "800px" }}
+          multiline={true}
+        />
+        <TextInput
+          label="PEM Public Key"
+          source="dkim_public_key"
+          style={{ width: "800px" }}
+          multiline={true}
+        />
+        <TextInput
+          label="Api Key"
+          source="email_api_key"
+          style={{ width: "800px" }}
+        />
+        <Labeled label="Verification Methods">
+          <ArrayField source="verification.methods">
+            <Datagrid bulkActionButtons={false}>
+              <TextField source="name" />
+              <TextField source="record" style={{ fontFamily: "monospace" }} />
+              <TextField source="domain" />
+            </Datagrid>
+          </ArrayField>
+        </Labeled>
+        <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/custom-domains/index.ts

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

package/src/components/custom-domains/list.tsx

@@ -0,0 +1,16 @@
+import { List, Datagrid, TextField, BooleanField } from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+
+export function DomainList() {
+  return (
+    <List actions={<PostListActions />}>
+      <Datagrid rowClick="edit" bulkActionButtons={false}>
+        <TextField source="custom_domain_id" label="ID" />
+        <TextField source="domain" />
+        <TextField source="status" />
+        <BooleanField source="primary" />
+        <TextField source="type" />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/flows/create.tsx

@@ -0,0 +1,30 @@
+import { Create, TextInput, required, SimpleForm } from "react-admin";
+import { Box, Typography } from "@mui/material";
+
+export const FlowCreate = () => {
+  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">
+            Actions can be added after creating the flow.
+          </Typography>
+          <Typography variant="body2" sx={{ mt: 1 }}>
+            Flows define sequences of actions to execute, such as verifying
+            emails or updating user data.
+          </Typography>
+        </Box>
+      </SimpleForm>
+    </Create>
+  );
+};