mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-15 20:17:22 +00:00
Enhance authentication and authorization components
- Refactored `AppAuth` to introduce `getGuardContextSchema` for improved user context handling. - Updated `Authenticator` to utilize `pickKeys` for user data extraction in JWT generation. - Enhanced `Guard` class to improve permission checks and error handling. - Modified `SystemController` to return context schema alongside permissions in API responses. - Added new `permissions` method in `SystemApi` for fetching permissions. - Improved UI components with additional props and tooltip support for better user experience.
This commit is contained in:
@@ -65,7 +65,7 @@
|
|||||||
"hono": "4.8.3",
|
"hono": "4.8.3",
|
||||||
"json-schema-library": "10.0.0-rc7",
|
"json-schema-library": "10.0.0-rc7",
|
||||||
"json-schema-to-ts": "^3.1.1",
|
"json-schema-to-ts": "^3.1.1",
|
||||||
"jsonv-ts": "0.8.6",
|
"jsonv-ts": "0.9.1",
|
||||||
"kysely": "0.27.6",
|
"kysely": "0.27.6",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"oauth4webapi": "^2.11.1",
|
"oauth4webapi": "^2.11.1",
|
||||||
|
|||||||
@@ -2,7 +2,7 @@ import type { DB, PrimaryFieldType } from "bknd";
|
|||||||
import * as AuthPermissions from "auth/auth-permissions";
|
import * as AuthPermissions from "auth/auth-permissions";
|
||||||
import type { AuthStrategy } from "auth/authenticate/strategies/Strategy";
|
import type { AuthStrategy } from "auth/authenticate/strategies/Strategy";
|
||||||
import type { PasswordStrategy } from "auth/authenticate/strategies/PasswordStrategy";
|
import type { PasswordStrategy } from "auth/authenticate/strategies/PasswordStrategy";
|
||||||
import { $console, secureRandomString, transformObject, pick } from "bknd/utils";
|
import { $console, secureRandomString, transformObject, pickKeys } from "bknd/utils";
|
||||||
import type { Entity, EntityManager } from "data/entities";
|
import type { Entity, EntityManager } from "data/entities";
|
||||||
import { em, entity, enumm, type FieldSchema } from "data/prototype";
|
import { em, entity, enumm, type FieldSchema } from "data/prototype";
|
||||||
import { Module } from "modules/Module";
|
import { Module } from "modules/Module";
|
||||||
@@ -113,6 +113,19 @@ export class AppAuth extends Module<AppAuthSchema> {
|
|||||||
return authConfigSchema;
|
return authConfigSchema;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
getGuardContextSchema() {
|
||||||
|
const userschema = this.getUsersEntity().toSchema() as any;
|
||||||
|
return {
|
||||||
|
type: "object",
|
||||||
|
properties: {
|
||||||
|
user: {
|
||||||
|
type: "object",
|
||||||
|
properties: pickKeys(userschema.properties, this.config.jwt.fields as any),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
get authenticator(): Authenticator {
|
get authenticator(): Authenticator {
|
||||||
this.throwIfNotBuilt();
|
this.throwIfNotBuilt();
|
||||||
return this._authenticator!;
|
return this._authenticator!;
|
||||||
|
|||||||
@@ -6,10 +6,8 @@ import { deleteCookie, getSignedCookie, setSignedCookie } from "hono/cookie";
|
|||||||
import { sign, verify } from "hono/jwt";
|
import { sign, verify } from "hono/jwt";
|
||||||
import { type CookieOptions, serializeSigned } from "hono/utils/cookie";
|
import { type CookieOptions, serializeSigned } from "hono/utils/cookie";
|
||||||
import type { ServerEnv } from "modules/Controller";
|
import type { ServerEnv } from "modules/Controller";
|
||||||
import { pick } from "lodash-es";
|
|
||||||
import { InvalidConditionsException } from "auth/errors";
|
import { InvalidConditionsException } from "auth/errors";
|
||||||
import { s, parse, secret, runtimeSupports, truncate, $console } from "bknd/utils";
|
import { s, parse, secret, runtimeSupports, truncate, $console, pickKeys } from "bknd/utils";
|
||||||
import { $object } from "modules/mcp";
|
|
||||||
import type { AuthStrategy } from "./strategies/Strategy";
|
import type { AuthStrategy } from "./strategies/Strategy";
|
||||||
|
|
||||||
type Input = any; // workaround
|
type Input = any; // workaround
|
||||||
@@ -229,7 +227,7 @@ export class Authenticator<
|
|||||||
|
|
||||||
// @todo: add jwt tests
|
// @todo: add jwt tests
|
||||||
async jwt(_user: SafeUser | ProfileExchange): Promise<string> {
|
async jwt(_user: SafeUser | ProfileExchange): Promise<string> {
|
||||||
const user = pick(_user, this.config.jwt.fields);
|
const user = pickKeys(_user, this.config.jwt.fields as any);
|
||||||
|
|
||||||
const payload: JWTPayload = {
|
const payload: JWTPayload = {
|
||||||
...user,
|
...user,
|
||||||
@@ -255,7 +253,7 @@ export class Authenticator<
|
|||||||
}
|
}
|
||||||
|
|
||||||
async safeAuthResponse(_user: User): Promise<AuthResponse> {
|
async safeAuthResponse(_user: User): Promise<AuthResponse> {
|
||||||
const user = pick(_user, this.config.jwt.fields) as SafeUser;
|
const user = pickKeys(_user, this.config.jwt.fields as any) as SafeUser;
|
||||||
return {
|
return {
|
||||||
user,
|
user,
|
||||||
token: await this.jwt(user),
|
token: await this.jwt(user),
|
||||||
|
|||||||
@@ -125,7 +125,7 @@ export class Guard {
|
|||||||
return this.config?.enabled === true;
|
return this.config?.enabled === true;
|
||||||
}
|
}
|
||||||
|
|
||||||
private collect(permission: Permission, c: GuardContext, context: any) {
|
private collect(permission: Permission, c: GuardContext | undefined, context: any) {
|
||||||
const user = c && "get" in c ? c.get("auth")?.user : c;
|
const user = c && "get" in c ? c.get("auth")?.user : c;
|
||||||
const ctx = {
|
const ctx = {
|
||||||
...((context ?? {}) as any),
|
...((context ?? {}) as any),
|
||||||
@@ -181,15 +181,15 @@ export class Guard {
|
|||||||
}
|
}
|
||||||
|
|
||||||
if (!role) {
|
if (!role) {
|
||||||
$console.debug("guard: user has no role, denying");
|
|
||||||
throw new GuardPermissionsException(permission, undefined, "User has no role");
|
throw new GuardPermissionsException(permission, undefined, "User has no role");
|
||||||
} else if (role.implicit_allow === true) {
|
|
||||||
$console.debug(`guard: role "${role.name}" has implicit allow, allowing`);
|
|
||||||
return;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
if (!rolePermission) {
|
if (!rolePermission) {
|
||||||
$console.debug("guard: rolePermission not found, denying");
|
if (role.implicit_allow === true) {
|
||||||
|
$console.debug(`guard: role "${role.name}" has implicit allow, allowing`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
throw new GuardPermissionsException(
|
throw new GuardPermissionsException(
|
||||||
permission,
|
permission,
|
||||||
undefined,
|
undefined,
|
||||||
|
|||||||
@@ -137,6 +137,6 @@ export class ModuleHelper {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const user = await auth.authenticator?.resolveAuthFromRequest(c.raw as any);
|
const user = await auth.authenticator?.resolveAuthFromRequest(c.raw as any);
|
||||||
this.ctx.guard.granted(permission, { user }, context as any);
|
this.ctx.guard.granted(permission, user as any, context as any);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,6 +1,7 @@
|
|||||||
import type { ConfigUpdateResponse } from "modules/server/SystemController";
|
import type { ConfigUpdateResponse } from "modules/server/SystemController";
|
||||||
import { ModuleApi } from "./ModuleApi";
|
import { ModuleApi } from "./ModuleApi";
|
||||||
import type { ModuleConfigs, ModuleKey, ModuleSchemas } from "./ModuleManager";
|
import type { ModuleConfigs, ModuleKey, ModuleSchemas } from "./ModuleManager";
|
||||||
|
import type { TPermission } from "auth/authorize/Permission";
|
||||||
|
|
||||||
export type ApiSchemaResponse = {
|
export type ApiSchemaResponse = {
|
||||||
version: number;
|
version: number;
|
||||||
@@ -54,4 +55,8 @@ export class SystemApi extends ModuleApi<any> {
|
|||||||
removeConfig<Module extends ModuleKey>(module: Module, path: string) {
|
removeConfig<Module extends ModuleKey>(module: Module, path: string) {
|
||||||
return this.delete<ConfigUpdateResponse>(["config", "remove", module, path]);
|
return this.delete<ConfigUpdateResponse>(["config", "remove", module, path]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
permissions() {
|
||||||
|
return this.get<{ permissions: TPermission[]; context: object }>("permissions");
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -69,10 +69,13 @@ export class SystemController extends Controller {
|
|||||||
if (!config.mcp.enabled) {
|
if (!config.mcp.enabled) {
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
const { permission } = this.middlewares;
|
||||||
|
|
||||||
this.registerMcp();
|
this.registerMcp();
|
||||||
|
|
||||||
app.server.use(
|
app.server.all(
|
||||||
|
config.mcp.path,
|
||||||
|
permission(SystemPermissions.mcp, {}),
|
||||||
mcpMiddleware({
|
mcpMiddleware({
|
||||||
setup: async () => {
|
setup: async () => {
|
||||||
if (!this._mcpServer) {
|
if (!this._mcpServer) {
|
||||||
@@ -110,7 +113,6 @@ export class SystemController extends Controller {
|
|||||||
explainEndpoint: true,
|
explainEndpoint: true,
|
||||||
},
|
},
|
||||||
endpoint: {
|
endpoint: {
|
||||||
path: config.mcp.path as any,
|
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
_init: isNode() ? { duplex: "half" } : {},
|
_init: isNode() ? { duplex: "half" } : {},
|
||||||
},
|
},
|
||||||
@@ -415,7 +417,6 @@ export class SystemController extends Controller {
|
|||||||
schema,
|
schema,
|
||||||
config: config ? this.app.toJSON(secrets) : undefined,
|
config: config ? this.app.toJSON(secrets) : undefined,
|
||||||
permissions: this.app.modules.ctx().guard.getPermissions(),
|
permissions: this.app.modules.ctx().guard.getPermissions(),
|
||||||
//permissions: this.app.modules.ctx().guard.getPermissionNames(),
|
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
@@ -428,7 +429,7 @@ export class SystemController extends Controller {
|
|||||||
}),
|
}),
|
||||||
(c) => {
|
(c) => {
|
||||||
const permissions = this.app.modules.ctx().guard.getPermissions();
|
const permissions = this.app.modules.ctx().guard.getPermissions();
|
||||||
return c.json({ permissions });
|
return c.json({ permissions, context: this.app.module.auth.getGuardContextSchema() });
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
|
|||||||
@@ -1,6 +1,6 @@
|
|||||||
import type { Api } from "Api";
|
import type { Api } from "Api";
|
||||||
import { FetchPromise, type ModuleApi, type ResponseObject } from "modules/ModuleApi";
|
import { FetchPromise, type ModuleApi, type ResponseObject } from "modules/ModuleApi";
|
||||||
import useSWR, { type SWRConfiguration, useSWRConfig } from "swr";
|
import useSWR, { type SWRConfiguration, useSWRConfig, type Middleware, type SWRHook } from "swr";
|
||||||
import useSWRInfinite from "swr/infinite";
|
import useSWRInfinite from "swr/infinite";
|
||||||
import { useApi } from "ui/client";
|
import { useApi } from "ui/client";
|
||||||
import { useState } from "react";
|
import { useState } from "react";
|
||||||
@@ -89,3 +89,25 @@ export const useInvalidate = (options?: { exact?: boolean }) => {
|
|||||||
return mutate((k) => typeof k === "string" && k.startsWith(key));
|
return mutate((k) => typeof k === "string" && k.startsWith(key));
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mountOnceCache = new Map<string, any>();
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Simple middleware to only load on first mount.
|
||||||
|
*/
|
||||||
|
export const mountOnce: Middleware = (useSWRNext: SWRHook) => (key, fetcher, config) => {
|
||||||
|
if (typeof key === "string") {
|
||||||
|
if (mountOnceCache.has(key)) {
|
||||||
|
return useSWRNext(key, fetcher, {
|
||||||
|
...config,
|
||||||
|
revalidateOnMount: false,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
const swr = useSWRNext(key, fetcher, config);
|
||||||
|
if (swr.data) {
|
||||||
|
mountOnceCache.set(key, true);
|
||||||
|
}
|
||||||
|
return swr;
|
||||||
|
}
|
||||||
|
return useSWRNext(key, fetcher, config);
|
||||||
|
};
|
||||||
|
|||||||
@@ -5,13 +5,15 @@ import { twMerge } from "tailwind-merge";
|
|||||||
import { Link } from "ui/components/wouter/Link";
|
import { Link } from "ui/components/wouter/Link";
|
||||||
|
|
||||||
const sizes = {
|
const sizes = {
|
||||||
|
smaller: "px-1.5 py-1 rounded-md gap-1 !text-xs",
|
||||||
small: "px-2 py-1.5 rounded-md gap-1 text-sm",
|
small: "px-2 py-1.5 rounded-md gap-1 text-sm",
|
||||||
default: "px-3 py-2.5 rounded-md gap-1.5",
|
default: "px-3 py-2.5 rounded-md gap-1.5",
|
||||||
large: "px-4 py-3 rounded-md gap-2.5 text-lg",
|
large: "px-4 py-3 rounded-md gap-2.5 text-lg",
|
||||||
};
|
};
|
||||||
|
|
||||||
const iconSizes = {
|
const iconSizes = {
|
||||||
small: 12,
|
smaller: 12,
|
||||||
|
small: 14,
|
||||||
default: 16,
|
default: 16,
|
||||||
large: 20,
|
large: 20,
|
||||||
};
|
};
|
||||||
|
|||||||
73
app/src/ui/components/code/CodePreview.tsx
Normal file
73
app/src/ui/components/code/CodePreview.tsx
Normal file
@@ -0,0 +1,73 @@
|
|||||||
|
import { useEffect, useState } from "react";
|
||||||
|
import { useTheme } from "ui/client/use-theme";
|
||||||
|
import { cn } from "ui/lib/utils";
|
||||||
|
|
||||||
|
export type CodePreviewProps = {
|
||||||
|
code: string;
|
||||||
|
className?: string;
|
||||||
|
lang?: string;
|
||||||
|
theme?: string;
|
||||||
|
enabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const CodePreview = ({
|
||||||
|
code,
|
||||||
|
className,
|
||||||
|
lang = "typescript",
|
||||||
|
theme: _theme,
|
||||||
|
enabled = true,
|
||||||
|
}: CodePreviewProps) => {
|
||||||
|
const [highlightedHtml, setHighlightedHtml] = useState<string | null>(null);
|
||||||
|
const $theme = useTheme();
|
||||||
|
const theme = (_theme ?? $theme.theme === "dark") ? "github-dark" : "github-light";
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
if (!enabled) return;
|
||||||
|
|
||||||
|
let cancelled = false;
|
||||||
|
setHighlightedHtml(null);
|
||||||
|
|
||||||
|
async function highlightCode() {
|
||||||
|
try {
|
||||||
|
// Dynamically import Shiki from CDN
|
||||||
|
// @ts-expect-error - Dynamic CDN import
|
||||||
|
const { codeToHtml } = await import("https://esm.sh/shiki@3.13.0");
|
||||||
|
|
||||||
|
if (cancelled) return;
|
||||||
|
|
||||||
|
const html = await codeToHtml(code, {
|
||||||
|
lang,
|
||||||
|
theme,
|
||||||
|
structure: "inline",
|
||||||
|
});
|
||||||
|
|
||||||
|
if (cancelled) return;
|
||||||
|
|
||||||
|
setHighlightedHtml(html);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Failed to load Shiki:", error);
|
||||||
|
// Fallback to plain text if Shiki fails to load
|
||||||
|
if (!cancelled) {
|
||||||
|
setHighlightedHtml(code);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
highlightCode();
|
||||||
|
|
||||||
|
return () => {
|
||||||
|
cancelled = true;
|
||||||
|
};
|
||||||
|
}, [code, enabled]);
|
||||||
|
|
||||||
|
if (!highlightedHtml) {
|
||||||
|
return <pre className={cn("select-text cursor-text", className)}>{code}</pre>;
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<pre
|
||||||
|
className={cn("select-text cursor-text", className)}
|
||||||
|
dangerouslySetInnerHTML={{ __html: highlightedHtml }}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
};
|
||||||
@@ -1,4 +1,4 @@
|
|||||||
import { IconBug } from "@tabler/icons-react";
|
import { IconBug, IconInfoCircle } from "@tabler/icons-react";
|
||||||
import type { JsonSchema } from "json-schema-library";
|
import type { JsonSchema } from "json-schema-library";
|
||||||
import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
|
import { Children, type ReactElement, type ReactNode, cloneElement, isValidElement } from "react";
|
||||||
import { IconButton } from "ui/components/buttons/IconButton";
|
import { IconButton } from "ui/components/buttons/IconButton";
|
||||||
@@ -12,6 +12,7 @@ import {
|
|||||||
import { Popover } from "ui/components/overlay/Popover";
|
import { Popover } from "ui/components/overlay/Popover";
|
||||||
import { getLabel } from "./utils";
|
import { getLabel } from "./utils";
|
||||||
import { twMerge } from "tailwind-merge";
|
import { twMerge } from "tailwind-merge";
|
||||||
|
import { Tooltip } from "@mantine/core";
|
||||||
|
|
||||||
export type FieldwrapperProps = {
|
export type FieldwrapperProps = {
|
||||||
name: string;
|
name: string;
|
||||||
@@ -24,7 +25,7 @@ export type FieldwrapperProps = {
|
|||||||
children: ReactElement | ReactNode;
|
children: ReactElement | ReactNode;
|
||||||
errorPlacement?: "top" | "bottom";
|
errorPlacement?: "top" | "bottom";
|
||||||
description?: string;
|
description?: string;
|
||||||
descriptionPlacement?: "top" | "bottom";
|
descriptionPlacement?: "top" | "bottom" | "label";
|
||||||
fieldId?: string;
|
fieldId?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
};
|
};
|
||||||
@@ -53,11 +54,17 @@ export function FieldWrapper({
|
|||||||
<Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
|
<Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
|
||||||
);
|
);
|
||||||
|
|
||||||
const Description = description && (
|
const Description = description ? (
|
||||||
<Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
|
["top", "bottom"].includes(descriptionPlacement) ? (
|
||||||
{description}
|
<Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
|
||||||
</Formy.Help>
|
{description}
|
||||||
);
|
</Formy.Help>
|
||||||
|
) : (
|
||||||
|
<Tooltip label={description}>
|
||||||
|
<IconInfoCircle className="size-4 opacity-50" />
|
||||||
|
</Tooltip>
|
||||||
|
)
|
||||||
|
) : null;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Formy.Group
|
<Formy.Group
|
||||||
@@ -72,9 +79,10 @@ export function FieldWrapper({
|
|||||||
<Formy.Label
|
<Formy.Label
|
||||||
as={wrapper === "fieldset" ? "legend" : "label"}
|
as={wrapper === "fieldset" ? "legend" : "label"}
|
||||||
htmlFor={fieldId}
|
htmlFor={fieldId}
|
||||||
className="self-start"
|
className="self-start flex flex-row gap-1 items-center"
|
||||||
>
|
>
|
||||||
{label} {required && <span className="font-medium opacity-30">*</span>}
|
{label} {required && <span className="font-medium opacity-30">*</span>}
|
||||||
|
{descriptionPlacement === "label" && Description}
|
||||||
</Formy.Label>
|
</Formy.Label>
|
||||||
)}
|
)}
|
||||||
{descriptionPlacement === "top" && Description}
|
{descriptionPlacement === "top" && Description}
|
||||||
|
|||||||
@@ -7,34 +7,36 @@ import { useNavigate } from "ui/lib/routes";
|
|||||||
import { isDebug } from "core/env";
|
import { isDebug } from "core/env";
|
||||||
import { Dropdown } from "ui/components/overlay/Dropdown";
|
import { Dropdown } from "ui/components/overlay/Dropdown";
|
||||||
import { IconButton } from "ui/components/buttons/IconButton";
|
import { IconButton } from "ui/components/buttons/IconButton";
|
||||||
import { TbAdjustments, TbDots, TbFilter, TbTrash } from "react-icons/tb";
|
import { TbAdjustments, TbDots, TbFilter, TbTrash, TbInfoCircle, TbCodeDots } from "react-icons/tb";
|
||||||
import { Button } from "ui/components/buttons/Button";
|
import { Button } from "ui/components/buttons/Button";
|
||||||
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
|
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
|
||||||
import { routes } from "ui/lib/routes";
|
import { routes } from "ui/lib/routes";
|
||||||
import * as AppShell from "ui/layouts/AppShell/AppShell";
|
import * as AppShell from "ui/layouts/AppShell/AppShell";
|
||||||
import * as Formy from "ui/components/form/Formy";
|
import * as Formy from "ui/components/form/Formy";
|
||||||
|
import { ucFirst, s, transformObject, isObject } from "bknd/utils";
|
||||||
import { ucFirst, type s } from "bknd/utils";
|
|
||||||
import type { ModuleSchemas } from "bknd";
|
import type { ModuleSchemas } from "bknd";
|
||||||
import {
|
import {
|
||||||
ArrayField,
|
|
||||||
CustomField,
|
CustomField,
|
||||||
Field,
|
Field,
|
||||||
FieldWrapper,
|
FieldWrapper,
|
||||||
Form,
|
Form,
|
||||||
FormContextOverride,
|
FormContextOverride,
|
||||||
FormDebug,
|
FormDebug,
|
||||||
ObjectField,
|
ObjectJsonField,
|
||||||
Subscribe,
|
Subscribe,
|
||||||
useDerivedFieldContext,
|
useDerivedFieldContext,
|
||||||
useFormContext,
|
useFormContext,
|
||||||
|
useFormError,
|
||||||
useFormValue,
|
useFormValue,
|
||||||
} from "ui/components/form/json-schema-form";
|
} from "ui/components/form/json-schema-form";
|
||||||
import type { TPermission } from "auth/authorize/Permission";
|
import type { TPermission } from "auth/authorize/Permission";
|
||||||
import type { RoleSchema } from "auth/authorize/Role";
|
import type { RoleSchema } from "auth/authorize/Role";
|
||||||
import { Indicator, SegmentedControl, Tooltip } from "@mantine/core";
|
import { SegmentedControl, Tooltip } from "@mantine/core";
|
||||||
|
import { Popover } from "ui/components/overlay/Popover";
|
||||||
import { cn } from "ui/lib/utils";
|
import { cn } from "ui/lib/utils";
|
||||||
import type { PolicySchema } from "auth/authorize/Policy";
|
import { JsonViewer } from "ui/components/code/JsonViewer";
|
||||||
|
import { mountOnce, useApiQuery } from "ui/client";
|
||||||
|
import { CodePreview } from "ui/components/code/CodePreview";
|
||||||
|
|
||||||
export function AuthRolesEdit(props) {
|
export function AuthRolesEdit(props) {
|
||||||
useBrowserTitle(["Auth", "Roles", props.params.role]);
|
useBrowserTitle(["Auth", "Roles", props.params.role]);
|
||||||
@@ -67,7 +69,7 @@ const formConfig = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
function AuthRolesEditInternal({ params }) {
|
function AuthRolesEditInternal({ params }: { params: { role: string } }) {
|
||||||
const [navigate] = useNavigate();
|
const [navigate] = useNavigate();
|
||||||
const { config, schema: authSchema, actions } = useBkndAuth();
|
const { config, schema: authSchema, actions } = useBkndAuth();
|
||||||
const roleName = params.role;
|
const roleName = params.role;
|
||||||
@@ -225,11 +227,10 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
|
|||||||
if (!Array.isArray(v)) return undefined;
|
if (!Array.isArray(v)) return undefined;
|
||||||
return v.find((v) => v && v.permission === permission.name);
|
return v.find((v) => v && v.permission === permission.name);
|
||||||
});
|
});
|
||||||
const { setValue, deleteValue } = useFormContext();
|
const { setValue } = useFormContext();
|
||||||
const [open, setOpen] = useState(false);
|
const [open, setOpen] = useState(false);
|
||||||
const data = value as PermissionData | undefined;
|
const data = value as PermissionData | undefined;
|
||||||
const policiesCount = data?.policies?.length ?? 0;
|
const policiesCount = data?.policies?.length ?? 0;
|
||||||
const hasContext = !!permission.context;
|
|
||||||
|
|
||||||
async function handleSwitch() {
|
async function handleSwitch() {
|
||||||
if (data) {
|
if (data) {
|
||||||
@@ -270,9 +271,9 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
|
|||||||
<IconButton
|
<IconButton
|
||||||
size="md"
|
size="md"
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
disabled={!data || !hasContext}
|
disabled={!data}
|
||||||
Icon={TbAdjustments}
|
Icon={TbAdjustments}
|
||||||
className={cn("disabled:opacity-20", !hasContext && "!opacity-0")}
|
className={cn("disabled:opacity-20")}
|
||||||
onClick={() => setOpen((o) => !o)}
|
onClick={() => setOpen((o) => !o)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
@@ -282,14 +283,6 @@ const Permission = ({ permission, index }: { permission: TPermission; index?: nu
|
|||||||
{open && (
|
{open && (
|
||||||
<div className="px-3.5 py-3.5">
|
<div className="px-3.5 py-3.5">
|
||||||
<Policies path={`permissions.${index}.policies`} permission={permission} />
|
<Policies path={`permissions.${index}.policies`} permission={permission} />
|
||||||
{/* <ArrayField
|
|
||||||
path={`permissions.${index}.policies`}
|
|
||||||
labelAdd="Add Policy"
|
|
||||||
wrapperProps={{
|
|
||||||
label: false,
|
|
||||||
wrapper: "group",
|
|
||||||
}}
|
|
||||||
/> */}
|
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@@ -337,19 +330,68 @@ const Policies = ({ path, permission }: { path: string; permission: TPermission
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const mergeSchemas = (...schemas: object[]) => {
|
||||||
|
const schema = s.allOf(schemas.filter(Boolean).map(s.fromSchema));
|
||||||
|
return s.toTypes(schema, "Context");
|
||||||
|
};
|
||||||
|
|
||||||
|
function replaceEntitiesEnum(schema: Record<string, any>, entities: string[]) {
|
||||||
|
if (!isObject(schema) || !Array.isArray(entities) || entities.length === 0) return schema;
|
||||||
|
return transformObject(schema, (sub, name) => {
|
||||||
|
if (name === "properties") {
|
||||||
|
return transformObject(sub as Record<string, any>, (propConfig, propKey) => {
|
||||||
|
if (propKey === "entity" && propConfig.type === "string") {
|
||||||
|
return {
|
||||||
|
...propConfig,
|
||||||
|
enum: entities,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return propConfig;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return sub;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
const Policy = ({
|
const Policy = ({
|
||||||
permission,
|
permission,
|
||||||
}: {
|
}: {
|
||||||
permission: TPermission;
|
permission: TPermission;
|
||||||
}) => {
|
}) => {
|
||||||
const { value } = useFormValue("");
|
const { value } = useFormValue("");
|
||||||
|
const $bknd = useBknd();
|
||||||
|
const $permissions = useApiQuery((api) => api.system.permissions(), {
|
||||||
|
use: [mountOnce],
|
||||||
|
});
|
||||||
|
const entities = Object.keys($bknd.config.data.entities ?? {});
|
||||||
|
const ctx = $permissions.data
|
||||||
|
? mergeSchemas(
|
||||||
|
$permissions.data.context,
|
||||||
|
replaceEntitiesEnum(permission.context ?? null, entities),
|
||||||
|
)
|
||||||
|
: undefined;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-2">
|
||||||
<Field name="description" />
|
<Field name="description" />
|
||||||
<ObjectField path="condition" wrapperProps={{ wrapper: "group" }} />
|
|
||||||
|
<CustomFieldWrapper
|
||||||
|
name="condition"
|
||||||
|
label="Condition"
|
||||||
|
description="The condition that must be met for the policy to be applied."
|
||||||
|
schema={ctx}
|
||||||
|
>
|
||||||
|
<ObjectJsonField path="condition" />
|
||||||
|
</CustomFieldWrapper>
|
||||||
|
|
||||||
<CustomField path="effect">
|
<CustomField path="effect">
|
||||||
{({ value, setValue }) => (
|
{({ value, setValue }) => (
|
||||||
<FieldWrapper name="effect" label="Effect">
|
<FieldWrapper
|
||||||
|
name="effect"
|
||||||
|
label="Effect"
|
||||||
|
descriptionPlacement="label"
|
||||||
|
description="The effect of the policy to take effect on met condition."
|
||||||
|
>
|
||||||
<SegmentedControl
|
<SegmentedControl
|
||||||
className="border border-muted"
|
className="border border-muted"
|
||||||
defaultValue={value}
|
defaultValue={value}
|
||||||
@@ -368,8 +410,72 @@ const Policy = ({
|
|||||||
</CustomField>
|
</CustomField>
|
||||||
|
|
||||||
{value?.effect === "filter" && (
|
{value?.effect === "filter" && (
|
||||||
<ObjectField path="filter" wrapperProps={{ wrapper: "group" }} />
|
<CustomFieldWrapper
|
||||||
|
name="filter"
|
||||||
|
label="Filter"
|
||||||
|
description="Filter to apply to all queries on met condition."
|
||||||
|
schema={ctx}
|
||||||
|
>
|
||||||
|
<ObjectJsonField path="filter" />
|
||||||
|
</CustomFieldWrapper>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const CustomFieldWrapper = ({ children, name, label, description, schema }: any) => {
|
||||||
|
const errors = useFormError(name, { strict: true });
|
||||||
|
const Errors = errors.length > 0 && (
|
||||||
|
<Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
|
||||||
|
);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Formy.Group as="div">
|
||||||
|
<Formy.Label
|
||||||
|
as="label"
|
||||||
|
htmlFor={name}
|
||||||
|
className="flex flex-row gap-1 justify-between items-center"
|
||||||
|
>
|
||||||
|
<div className="flex flex-row gap-1 items-center">
|
||||||
|
{label}
|
||||||
|
{description && (
|
||||||
|
<Tooltip label={description}>
|
||||||
|
<TbInfoCircle className="size-4 opacity-50" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{schema && (
|
||||||
|
<div>
|
||||||
|
<Popover
|
||||||
|
overlayProps={{
|
||||||
|
className: "max-w-none",
|
||||||
|
}}
|
||||||
|
position="bottom-end"
|
||||||
|
target={() =>
|
||||||
|
typeof schema === "object" ? (
|
||||||
|
<JsonViewer
|
||||||
|
className="w-auto max-w-120 bg-background pr-3 text-sm"
|
||||||
|
json={schema}
|
||||||
|
expand={5}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
<CodePreview
|
||||||
|
code={schema}
|
||||||
|
lang="typescript"
|
||||||
|
className="w-auto max-w-120 bg-background p-3 text-sm"
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<Button variant="ghost" size="smaller" IconLeft={TbCodeDots}>
|
||||||
|
Context
|
||||||
|
</Button>
|
||||||
|
</Popover>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</Formy.Label>
|
||||||
|
{children}
|
||||||
|
{Errors}
|
||||||
|
</Formy.Group>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|||||||
@@ -39,7 +39,7 @@ export default function ToolsMcp() {
|
|||||||
<div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
|
<div className="hidden md:flex flex-row gap-2 items-center bg-primary/5 rounded-full px-3 pr-3.5 py-2">
|
||||||
<TbWorld />
|
<TbWorld />
|
||||||
<div className="min-w-0 flex-1">
|
<div className="min-w-0 flex-1">
|
||||||
<span className="block truncate text-sm font-mono leading-none">
|
<span className="block truncate text-sm font-mono leading-none select-text">
|
||||||
{window.location.origin + mcpPath}
|
{window.location.origin + mcpPath}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@@ -12,6 +12,7 @@ import * as Formy from "ui/components/form/Formy";
|
|||||||
import { appShellStore } from "ui/store";
|
import { appShellStore } from "ui/store";
|
||||||
import { Icon } from "ui/components/display/Icon";
|
import { Icon } from "ui/components/display/Icon";
|
||||||
import { useMcpClient } from "./hooks/use-mcp-client";
|
import { useMcpClient } from "./hooks/use-mcp-client";
|
||||||
|
import { Tooltip } from "@mantine/core";
|
||||||
|
|
||||||
export function Sidebar({ open, toggle }) {
|
export function Sidebar({ open, toggle }) {
|
||||||
const client = useMcpClient();
|
const client = useMcpClient();
|
||||||
@@ -48,7 +49,11 @@ export function Sidebar({ open, toggle }) {
|
|||||||
toggle={toggle}
|
toggle={toggle}
|
||||||
renderHeaderRight={() => (
|
renderHeaderRight={() => (
|
||||||
<div className="flex flex-row gap-2 items-center">
|
<div className="flex flex-row gap-2 items-center">
|
||||||
{error && <Icon.Err title={error} className="size-5 pointer-events-auto" />}
|
{error && (
|
||||||
|
<Tooltip label={error}>
|
||||||
|
<Icon.Err className="size-5 pointer-events-auto" />
|
||||||
|
</Tooltip>
|
||||||
|
)}
|
||||||
<span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
|
<span className="flex-inline bg-primary/10 px-2 py-1.5 rounded-xl text-sm font-mono leading-none">
|
||||||
{tools.length}
|
{tools.length}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
8
bun.lock
8
bun.lock
@@ -35,7 +35,7 @@
|
|||||||
"hono": "4.8.3",
|
"hono": "4.8.3",
|
||||||
"json-schema-library": "10.0.0-rc7",
|
"json-schema-library": "10.0.0-rc7",
|
||||||
"json-schema-to-ts": "^3.1.1",
|
"json-schema-to-ts": "^3.1.1",
|
||||||
"jsonv-ts": "0.8.6",
|
"jsonv-ts": "0.9.1",
|
||||||
"kysely": "0.27.6",
|
"kysely": "0.27.6",
|
||||||
"lodash-es": "^4.17.21",
|
"lodash-es": "^4.17.21",
|
||||||
"oauth4webapi": "^2.11.1",
|
"oauth4webapi": "^2.11.1",
|
||||||
@@ -1243,7 +1243,7 @@
|
|||||||
|
|
||||||
"@types/babel__traverse": ["@types/babel__traverse@7.20.6", "", { "dependencies": { "@babel/types": "^7.20.7" } }, "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg=="],
|
"@types/babel__traverse": ["@types/babel__traverse@7.20.6", "", { "dependencies": { "@babel/types": "^7.20.7" } }, "sha512-r1bzfrm0tomOI8g1SzvCaQHo6Lcv6zu0EA+W2kHrt8dyrHQxGzBBL4kdkzIS+jBMV+EYcMAEAqXqYaLJq5rOZg=="],
|
||||||
|
|
||||||
"@types/bun": ["@types/bun@1.3.0", "", { "dependencies": { "bun-types": "1.3.0" } }, "sha512-+lAGCYjXjip2qY375xX/scJeVRmZ5cY0wyHYyCYxNcdEXrQ4AOe3gACgd4iQ8ksOslJtW4VNxBJ8llUwc3a6AA=="],
|
"@types/bun": ["@types/bun@1.3.1", "", { "dependencies": { "bun-types": "1.3.1" } }, "sha512-4jNMk2/K9YJtfqwoAa28c8wK+T7nvJFOjxI4h/7sORWcypRNxBpr+TPNaCfVWq70tLCJsqoFwcf0oI0JU/fvMQ=="],
|
||||||
|
|
||||||
"@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
|
"@types/cookie": ["@types/cookie@0.6.0", "", {}, "sha512-4Kh9a6B2bQciAhf7FSuMRRkUWecJgJu9nPnx3yzpsfXX/c50REIqpHY4C82bXP90qrLtXtkDxTZosYO3UpOwlA=="],
|
||||||
|
|
||||||
@@ -2529,7 +2529,7 @@
|
|||||||
|
|
||||||
"jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="],
|
"jsonpointer": ["jsonpointer@5.0.1", "", {}, "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="],
|
||||||
|
|
||||||
"jsonv-ts": ["jsonv-ts@0.8.6", "", { "optionalDependencies": { "hono": "*" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-z5jJ017LFOvAFFVodAIiCY024yW72RWc/K0Sct+OtuiLN+lKy+g0pI0jaz5JmuXaMIePc6HyopeeYHi8ffbYhw=="],
|
"jsonv-ts": ["jsonv-ts@0.9.1", "", { "optionalDependencies": { "hono": "*" }, "peerDependencies": { "typescript": "^5.0.0" } }, "sha512-sQZn7kdSMK9m3hLWvTLyNk2zCUmte2lVWIcK02633EwMosk/VAdRgpMyfMDMV6/ZzSMI0/SwevkUbkxdGQrWtg=="],
|
||||||
|
|
||||||
"jsonwebtoken": ["jsonwebtoken@9.0.2", "", { "dependencies": { "jws": "^3.2.2", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ=="],
|
"jsonwebtoken": ["jsonwebtoken@9.0.2", "", { "dependencies": { "jws": "^3.2.2", "lodash.includes": "^4.3.0", "lodash.isboolean": "^3.0.3", "lodash.isinteger": "^4.0.4", "lodash.isnumber": "^3.0.3", "lodash.isplainobject": "^4.0.6", "lodash.isstring": "^4.0.1", "lodash.once": "^4.0.0", "ms": "^2.1.1", "semver": "^7.5.4" } }, "sha512-PRp66vJ865SSqOlgqS8hujT5U4AOgMfhrwYIuIhfKaoSCZcirrmASQr8CX7cUg+RMih+hgznrjp99o+W4pJLHQ=="],
|
||||||
|
|
||||||
@@ -4095,7 +4095,7 @@
|
|||||||
|
|
||||||
"@testing-library/jest-dom/chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="],
|
"@testing-library/jest-dom/chalk": ["chalk@3.0.0", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg=="],
|
||||||
|
|
||||||
"@types/bun/bun-types": ["bun-types@1.3.0", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-u8X0thhx+yJ0KmkxuEo9HAtdfgCBaM/aI9K90VQcQioAmkVp3SG3FkwWGibUFz3WdXAdcsqOcbU40lK7tbHdkQ=="],
|
"@types/bun/bun-types": ["bun-types@1.3.1", "", { "dependencies": { "@types/node": "*" }, "peerDependencies": { "@types/react": "^19" } }, "sha512-NMrcy7smratanWJ2mMXdpatalovtxVggkj11bScuWuiOoXTiKIu2eVS1/7qbyI/4yHedtsn175n4Sm4JcdHLXw=="],
|
||||||
|
|
||||||
"@typescript-eslint/experimental-utils/eslint-utils": ["eslint-utils@2.1.0", "", { "dependencies": { "eslint-visitor-keys": "^1.1.0" } }, "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg=="],
|
"@typescript-eslint/experimental-utils/eslint-utils": ["eslint-utils@2.1.0", "", { "dependencies": { "eslint-visitor-keys": "^1.1.0" } }, "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg=="],
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user