Enhance Guard and Form components with improved error handling and debugging

- Added debug logging in the `Guard` class to track policy evaluations and conditions.
- Updated error logging in the `Form` component to provide more context on invalid submissions.
- Introduced state management for form errors in the `AuthRolesEdit` component, displaying alerts for invalid data submissions.

app/src/auth/authorize/Guard.ts

@@ -203,14 +203,17 @@ export class Guard {
          // set the default effect of the role permission
          let allowed = rolePermission.effect === "allow";
          for (const policy of rolePermission.policies) {
+            $console.debug("guard: checking policy", { policy: policy.toJSON(), ctx });
             // skip filter policies
             if (policy.content.effect === "filter") continue;
 
             // if condition is met, check the effect
             const meets = policy.meetsCondition(ctx);
             if (meets) {
+               $console.debug("guard: policy meets condition");
                // if deny, then break early
                if (policy.content.effect === "deny") {
+                  $console.debug("guard: policy is deny, setting allowed to false");
                   allowed = false;
                   break;
 
@@ -218,6 +221,8 @@ export class Guard {
                } else if (policy.content.effect === "allow") {
                   allowed = true;
                }
+            } else {
+               $console.debug("guard: policy does not meet condition");
             }
          }
 

app/src/ui/components/form/json-schema-form/Form.tsx

@@ -130,7 +130,7 @@ export function Form<
             if (errors.length === 0) {
                await onSubmit(data as Data);
             } else {
-               console.log("invalid", errors);
+               console.error("form: invalid", { data, errors });
                onInvalidSubmit?.(errors, data);
             }
          } catch (e) {

app/src/ui/routes/auth/auth.roles.edit.$role.tsx

@@ -37,6 +37,8 @@ import { cn } from "ui/lib/utils";
 import { JsonViewer } from "ui/components/code/JsonViewer";
 import { mountOnce, useApiQuery } from "ui/client";
 import { CodePreview } from "ui/components/code/CodePreview";
+import type { JsonError } from "json-schema-library";
+import { Alert } from "ui/components/display/Alert";
 
 export function AuthRolesEdit(props) {
    useBrowserTitle(["Auth", "Roles", props.params.role]);
@@ -72,6 +74,7 @@ const formConfig = {
 function AuthRolesEditInternal({ params }: { params: { role: string } }) {
    const [navigate] = useNavigate();
    const { config, schema: authSchema, actions } = useBkndAuth();
+   const [error, setError] = useState<JsonError[]>();
    const roleName = params.role;
    const role = config.roles?.[roleName];
    const { readonly, permissions } = useBknd();
@@ -91,6 +94,7 @@ function AuthRolesEditInternal({ params }: { params: { role: string } }) {
       }
    }
    async function handleUpdate(data: any) {
+      setError(undefined);
       await actions.roles.patch(roleName, data);
    }
 
@@ -102,10 +106,13 @@ function AuthRolesEditInternal({ params }: { params: { role: string } }) {
          beforeSubmit={(data) => {
             return {
                ...data,
-               permissions: [...Object.values(data.permissions)],
+               permissions: [...Object.values(data.permissions).filter(Boolean)],
             };
          }}
          onSubmit={handleUpdate}
+         onInvalidSubmit={(errors) => {
+            setError(errors);
+         }}
       >
          <AppShell.SectionHeader
             right={
@@ -160,6 +167,7 @@ function AuthRolesEditInternal({ params }: { params: { role: string } }) {
             />
          </AppShell.SectionHeader>
          <AppShell.Scrollable>
+            {error && <Alert.Exception message={"Invalid form data"} />}
             <div className="flex flex-col flex-grow px-5 py-5 gap-8">
                <div className="flex flex-col gap-2">
                   <Permissions />