@authhero/react-admin 0.10.0

package/src/components/logs/LogIcon.tsx

@@ -0,0 +1,32 @@
+import { LogTypes } from "../../lib/logs";
+import DoneIcon from "@mui/icons-material/Done";
+import CloseIcon from "@mui/icons-material/Close";
+import EmailIcon from "@mui/icons-material/Email";
+import ErrorIcon from "@mui/icons-material/Error";
+import QuestionMarkIcon from "@mui/icons-material/QuestionMark";
+
+export function LogIcon({ type: logType }: { type: LogTypes }) {
+  switch (logType) {
+    case LogTypes.SUCCESS_API_OPERATION:
+    case LogTypes.SUCCESS_SILENT_AUTH:
+    case LogTypes.SUCCESS_SIGNUP:
+    case LogTypes.SUCCESS_LOGIN:
+    case LogTypes.SUCCESS_LOGOUT:
+    case LogTypes.SUCCESS_CROSS_ORIGIN_AUTHENTICATION:
+    case LogTypes.SUCCESS_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN:
+      return <DoneIcon />;
+    case LogTypes.FAILED_SILENT_AUTH:
+    case LogTypes.FAILED_SIGNUP:
+    case LogTypes.FAILED_LOGIN_INCORRECT_PASSWORD:
+    case LogTypes.FAILED_LOGIN_INVALID_EMAIL_USERNAME:
+    case LogTypes.FAILED_CROSS_ORIGIN_AUTHENTICATION:
+    case LogTypes.FAILED_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN:
+      return <CloseIcon />;
+    case LogTypes.CODE_LINK_SENT:
+      return <EmailIcon />;
+    case LogTypes.FAILED_LOGIN:
+      return <ErrorIcon />;
+    default:
+      return <QuestionMarkIcon />;
+  }
+}

package/src/components/logs/LogShow.tsx

@@ -0,0 +1,82 @@
+import {
+  Show,
+  FunctionField,
+  SimpleShowLayout,
+  TextField,
+  ReferenceField,
+  useRecordContext,
+} from "react-admin";
+import { LogType, LogIcon } from "../logs";
+import { JsonOutput } from "../common/JsonOutput";
+import { Link } from "react-admin";
+
+const UserIdField = () => {
+  const record = useRecordContext();
+
+  if (!record?.user_id) return <>-</>;
+
+  return <Link to={`/users/${record.user_id}`}>{record.user_id}</Link>;
+};
+
+const IpAddressField = () => {
+  const record = useRecordContext();
+
+  if (!record?.ip) return <>-</>;
+
+  return (
+    <Link
+      to={`/logs?displayedFilters=%7B%22ip%22%3Atrue%7D&filter=%7B%22ip%22%3A%22${encodeURIComponent(record.ip)}%22%7D`}
+    >
+      {record.ip}
+    </Link>
+  );
+};
+
+export function LogShow() {
+  return (
+    <Show>
+      <SimpleShowLayout>
+        <TextField source="id" />
+        <TextField source="tenant_id" />
+        <FunctionField label="User ID" render={() => <UserIdField />} />
+        <TextField source="user_name" />
+        <FunctionField label="IP Address" render={() => <IpAddressField />} />
+        <TextField source="description" />
+        <TextField source="client_id" />
+        <TextField source="client_name" />
+        <TextField source="user_agent" />
+        <TextField source="log_id" />
+        <FunctionField
+          source="details"
+          render={(record: any) => <JsonOutput data={record.details} />}
+        />
+        <FunctionField
+          source="success"
+          render={(record: any) => <LogIcon type={record.type} />}
+        />
+        <FunctionField
+          source="type"
+          render={(record: any) => <LogType type={record.type} />}
+        />
+        <FunctionField
+          source="date"
+          render={(record: any) => (
+            <span>
+              {record.date ? new Date(record.date).toLocaleString() : "-"}
+            </span>
+          )}
+        />
+        <TextField source="auth0_client" />
+        <TextField source="isMobile" />
+        <TextField source="connection" />
+        <TextField source="connection_id" />
+        <TextField source="audience" />
+        <TextField source="scope" />
+        <TextField source="strategy" />
+        <TextField source="strategy_type" />
+        <TextField source="hostname" />
+        <TextField source="session_connection" />
+      </SimpleShowLayout>
+    </Show>
+  );
+}

package/src/components/logs/LogType.tsx

@@ -0,0 +1,38 @@
+import { LogTypes } from "../../lib/logs";
+
+export function LogType({ type: logType }: { type: LogTypes }) {
+  switch (logType) {
+    case LogTypes.SUCCESS_API_OPERATION:
+      return "Success API Operation";
+    case LogTypes.SUCCESS_SILENT_AUTH:
+      return "Success Silent Auth";
+    case LogTypes.FAILED_SILENT_AUTH:
+      return "Failed Silent Auth";
+    case LogTypes.SUCCESS_SIGNUP:
+      return "Success Signup";
+    case LogTypes.FAILED_SIGNUP:
+      return "Failed Signup";
+    case LogTypes.SUCCESS_LOGIN:
+      return "Success Login";
+    case LogTypes.FAILED_LOGIN_INCORRECT_PASSWORD:
+      return "Failed Login Incorrect Password";
+    case LogTypes.FAILED_LOGIN_INVALID_EMAIL_USERNAME:
+      return "Failed Login Invalid Email Username";
+    case LogTypes.SUCCESS_LOGOUT:
+      return "Success Logout";
+    case LogTypes.SUCCESS_CROSS_ORIGIN_AUTHENTICATION:
+      return "Success Cross Origin Authentication";
+    case LogTypes.FAILED_CROSS_ORIGIN_AUTHENTICATION:
+      return "Failed Cross Origin Authentication";
+    case LogTypes.CODE_LINK_SENT:
+      return "Code Link Email Sent";
+    case LogTypes.FAILED_LOGIN:
+      return "Failed Login";
+    case LogTypes.SUCCESS_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN:
+      return "Success Exchange Authorization Code for Access Token";
+    case LogTypes.FAILED_EXCHANGE_AUTHORIZATION_CODE_FOR_ACCESS_TOKEN:
+      return "Failed Exchange Authorization Code for Access Token";
+    default:
+      return `${logType}`;
+  }
+}

package/src/components/logs/index.ts

@@ -0,0 +1,4 @@
+export * from "./list";
+export * from "./LogIcon";
+export * from "./LogType";
+export * from "./LogShow";

package/src/components/logs/list.tsx

@@ -0,0 +1,41 @@
+import {
+  List,
+  Datagrid,
+  TextField,
+  TextInput,
+  FunctionField,
+} from "react-admin";
+import { PostListActions } from "../listActions/PostListActions";
+import { LogType, LogIcon } from "../logs";
+import { DateAgo } from "../common";
+
+export function LogsList() {
+  const postFilters = [
+    <TextInput key="search" label="Search" source="q" alwaysOn />,
+    <TextInput key="ip" label="IP Address" source="ip" />,
+  ];
+
+  return (
+    <List
+      actions={<PostListActions create="false" />}
+      filters={postFilters}
+      sort={{ field: "date", order: "DESC" }}
+    >
+      <Datagrid bulkActionButtons={false} rowClick="show">
+        <FunctionField
+          source="success"
+          render={(record: any) => <LogIcon type={record.type} />}
+        />
+        <FunctionField
+          source="type"
+          render={(record: any) => <LogType type={record.type} />}
+        />
+        <FunctionField
+          source="date"
+          render={(record: any) => <DateAgo date={record.date} />}
+        />
+        <TextField source="description" />
+      </Datagrid>
+    </List>
+  );
+}

package/src/components/organizations/create.tsx

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