fix: when auth is disabled, the users entity doesn't exist

app/src/ui/routes/auth/_auth.root.tsx

@@ -33,16 +33,22 @@ export function AuthRoot({ children }) {
                      <AppShell.SidebarLink
                         as={Link}
                         href={app.getAbsolutePath("/data/" + routes.data.entity.list(users_entity))}
+                        disabled={!config.auth.enabled}
                      >
                         Users
                      </AppShell.SidebarLink>
-                     <AppShell.SidebarLink as={Link} href={routes.auth.roles.list()}>
+                     <AppShell.SidebarLink
+                        as={Link}
+                        href={routes.auth.roles.list()}
+                        disabled={!config.auth.enabled}
+                     >
                         Roles & Permissions
                      </AppShell.SidebarLink>
                      <AppShell.SidebarLink as={Link} href={routes.auth.strategies()} disabled>
                         Strategies
                      </AppShell.SidebarLink>
-                     <AppShell.SidebarLink as={Link} href={routes.auth.settings()}>
+                     {/*<AppShell.SidebarLink as={Link} href={routes.auth.settings()}>*/}
+                     <AppShell.SidebarLink as={Link} href={app.getSettingsPath(["auth"])}>
                         Settings
                      </AppShell.SidebarLink>
                   </nav>

app/src/ui/routes/auth/auth.index.tsx

@@ -1,4 +1,6 @@
 import { useBknd, useClient } from "ui/client";
+import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
+import { Alert } from "ui/components/display/Alert";
 import { routes } from "ui/lib/routes";
 import {
    Button,
@@ -10,15 +12,13 @@ import * as AppShell from "../../layouts/AppShell/AppShell";
 
 export function AuthIndex() {
    const client = useClient();
-   const { app, config } = useBknd();
-   const users_entity = config.auth.entity_name;
+   const { app } = useBknd();
+   const {
+      config: { roles, strategies, entity_name, enabled }
+   } = useBkndAuth();
+   const users_entity = entity_name;
    const query = client.query().data.entity("users").count();
    const usersTotal = query.data?.body.count ?? 0;
-   const {
-      config: {
-         auth: { roles, strategies }
-      }
-   } = useBknd();
    const rolesTotal = Object.keys(roles ?? {}).length ?? 0;
    const strategiesTotal = Object.keys(strategies ?? {}).length ?? 0;
 
@@ -30,11 +30,16 @@ export function AuthIndex() {
       <>
          <AppShell.SectionHeader>Overview</AppShell.SectionHeader>
          <AppShell.Scrollable>
+            <Alert.Warning
+               visible={!enabled}
+               title="Auth not enabled"
+               message="To use authentication features, please enable it in the settings."
+            />
             <div className="flex flex-col flex-grow p-3 gap-3">
                <div className="grid xs:grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-5">
                   <KpiCard
                      title="Users registered"
-                     value={usersTotal}
+                     value={!enabled ? 0 : usersTotal}
                      actions={[
                         {
                            label: "View all",
@@ -45,7 +50,7 @@ export function AuthIndex() {
                   />
                   <KpiCard
                      title="Roles"
-                     value={rolesTotal}
+                     value={!enabled ? 0 : rolesTotal}
                      actions={[
                         { label: "View all", href: rolesLink },
                         { label: "Add new", variant: "default", href: rolesLink }
@@ -53,7 +58,7 @@ export function AuthIndex() {
                   />
                   <KpiCard
                      title="Strategies enabled"
-                     value={strategiesTotal}
+                     value={!enabled ? 0 : strategiesTotal}
                      actions={[
                         { label: "View all", href: strategiesLink },
                         { label: "Add new", variant: "default", href: strategiesLink }

app/src/ui/routes/auth/auth.roles.tsx

@@ -1,12 +1,7 @@
-import { Modal, TextInput } from "@mantine/core";
-import { useDisclosure, useFocusTrap } from "@mantine/hooks";
 import { StringIdentifier, transformObject, ucFirstAllSnakeToPascalWithSpaces } from "core/utils";
-import { useRef } from "react";
 import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
-import { JsonSchemaForm } from "ui/components/form/json-schema/JsonSchemaForm";
+import { Alert } from "ui/components/display/Alert";
 import { bkndModals } from "ui/modals";
-import { SchemaFormModal } from "ui/modals/debug/SchemaFormModal";
-import { useBknd } from "../../client/BkndProvider";
 import { Button } from "../../components/buttons/Button";
 import { CellValue, DataTable } from "../../components/table/DataTable";
 import * as AppShell from "../../layouts/AppShell/AppShell";
@@ -14,9 +9,6 @@ import { routes, useNavigate } from "../../lib/routes";
 
 export function AuthRolesList() {
    const [navigate] = useNavigate();
-   const [modalOpen, modalHandler] = useDisclosure(false);
-   const focusRef = useFocusTrap();
-   const inputRef = useRef<HTMLInputElement>(null);
    const { config, actions } = useBkndAuth();
 
    const data = Object.values(
@@ -64,27 +56,6 @@ export function AuthRolesList() {
 
    return (
       <>
-         {/*<Modal
-            ref={focusRef}
-            opened={modalOpen}
-            onClose={modalHandler.close}
-            title={"New Role"}
-            classNames={{
-               root: "bknd-admin",
-               header: "!bg-primary/5 border-b border-b-muted !py-3 px-5 !h-auto !min-h-px",
-               content: "rounded-lg select-none",
-               title: "font-bold !text-md",
-               body: "pt-3 pb-3 px-3 gap-4 flex flex-col"
-            }}
-         >
-            <TextInput ref={inputRef} data-autofocus size="md" placeholder="Enter role name" />
-            <div className="flex flex-row justify-end gap-2">
-               <Button onClick={() => modalHandler.close()}>Cancel</Button>
-               <Button variant="primary" onClick={handleClickAdd}>
-                  Create
-               </Button>
-            </div>
-         </Modal>*/}
          <AppShell.SectionHeader
             right={
                <Button variant="primary" onClick={openCreateModal}>
@@ -95,6 +66,11 @@ export function AuthRolesList() {
             Roles & Permissions
          </AppShell.SectionHeader>
          <AppShell.Scrollable>
+            <Alert.Warning
+               visible={!config.enabled}
+               title="Auth not enabled"
+               message="To use authentication features, please enable it in the settings."
+            />
             <div className="flex flex-col flex-grow p-3 gap-3">
                <DataTable
                   data={data}

app/src/ui/routes/auth/auth.settings.tsx

@@ -1,13 +1,28 @@
 import { cloneDeep, omit } from "lodash-es";
+import { useEffect, useRef } from "react";
 import { useBknd } from "ui/client";
+import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
+import { useBkndData } from "ui/client/schema/data/use-bknd-data";
 import { Button } from "ui/components/buttons/Button";
-import { JsonSchemaForm } from "ui/components/form/json-schema/JsonSchemaForm";
+import { Alert } from "ui/components/display/Alert";
+import {
+   JsonSchemaForm,
+   type JsonSchemaFormRef
+} from "ui/components/form/json-schema/JsonSchemaForm";
 import * as AppShell from "ui/layouts/AppShell/AppShell";
+import { useNavigate } from "ui/lib/routes";
 import { extractSchema } from "../settings/utils/schema";
 
+// @todo: improve the inline editing expierence, for now redirect to settings
 export function AuthSettingsList() {
-   useBknd({ withSecrets: true });
-   return <AuthSettingsListInternal />;
+   const { app } = useBknd();
+   const [navigate] = useNavigate();
+   useEffect(() => {
+      navigate(app.getSettingsPath(["auth"]));
+   }, []);
+
+   /*useBknd({ withSecrets: true });
+   return <AuthSettingsListInternal />;*/
 }
 
 const uiSchema = {
@@ -21,9 +36,11 @@ const uiSchema = {
 };
 
 function AuthSettingsListInternal() {
-   const s = useBknd();
-   const config = s.config.auth;
-   const schema = cloneDeep(omit(s.schema.auth, ["title"]));
+   const $auth = useBkndAuth();
+   const { entities } = useBkndData();
+   const formRef = useRef<JsonSchemaFormRef>(null);
+   const config = $auth.config;
+   const schema = cloneDeep(omit($auth.schema, ["title"]));
    const [generalSchema, generalConfig, extracted] = extractSchema(schema as any, config, [
       "jwt",
       "roles",
@@ -32,7 +49,6 @@ function AuthSettingsListInternal() {
    ]);
    try {
       const user_entity = config.entity_name ?? "users";
-      const entities = s.config.data.entities ?? {};
       const user_fields = Object.entries(entities[user_entity]?.fields ?? {})
          .map(([name, field]) => (!field.config?.virtual ? name : undefined))
          .filter(Boolean);
@@ -42,18 +58,34 @@ function AuthSettingsListInternal() {
          extracted.jwt.schema.properties.fields.items.enum = user_fields;
          extracted.jwt.schema.properties.fields.uniqueItems = true;
          uiSchema.jwt.fields["ui:widget"] = "checkboxes";
+      } else {
+         uiSchema.jwt.fields["ui:widget"] = "hidden";
       }
    } catch (e) {
       console.error(e);
    }
-   console.log({ generalSchema, generalConfig, extracted });
+
+   async function handleSubmit() {
+      console.log(formRef.current?.validateForm(), formRef.current?.formData());
+   }
 
    return (
       <>
-         <AppShell.SectionHeader right={<Button variant="primary">Update</Button>}>
+         <AppShell.SectionHeader
+            right={
+               <Button variant="primary" onClick={handleSubmit}>
+                  Update
+               </Button>
+            }
+         >
             Settings
          </AppShell.SectionHeader>
          <AppShell.Scrollable>
+            <Alert.Warning
+               visible={!config.enabled}
+               title="Auth not enabled"
+               message="Enable it by toggling the switch below. Please also make sure set a secure secret to sign JWT tokens."
+            />
             <div className="flex flex-col flex-grow px-5 py-4 gap-8">
                <div>
                   <JsonSchemaForm
@@ -65,6 +97,7 @@ function AuthSettingsListInternal() {
                <div className="flex flex-col gap-3">
                   <h3 className="font-bold">JWT Settings</h3>
                   <JsonSchemaForm
+                     ref={formRef}
                      schema={extracted.jwt.schema}
                      uiSchema={uiSchema.jwt}
                      className="legacy hide-required-mark fieldset-alternative mute-root"