shishantbiswas/bknd
1
0
Fork 0
mirror of https://github.com/shishantbiswas/bknd.git synced 2026-03-16 04:27:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

added auth strategies form + add ability to disable strategies

Browse Source
This commit is contained in:
dswbx
2025-02-26 14:53:32 +01:00
parent d4a6a9326f
commit 2a9c1be151
18 changed files with 391 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
app/src/auth/AppAuth.ts
View File

@@ -56,7 +56,6 @@ export class AppAuth extends Module<typeof authConfigSchema> {
// register roles
const roles = transformObject(this.config.roles ?? {}, (role, name) => {
//console.log("role", role, name);
return Role.create({ name, ...role });
});
this.ctx.guard.setRoles(Object.values(roles));
@@ -88,6 +87,11 @@ export class AppAuth extends Module<typeof authConfigSchema> {
this.ctx.guard.registerPermissions(Object.values(AuthPermissions));
}
isStrategyEnabled(strategy: Strategy | string) {
const name = typeof strategy === "string" ? strategy : strategy.getName();
return this.config.strategies?.[name]?.enabled ?? false;
}
get controller(): AuthController {
if (!this.isBuilt()) {
throw new Error("Can't access controller, AppAuth not built yet");
@@ -115,12 +119,6 @@ export class AppAuth extends Module<typeof authConfigSchema> {
identifier: string,
profile: ProfileExchange
): Promise<any> {
/*console.log("***** AppAuth:resolveUser", {
action,
strategy: strategy.getName(),
identifier,
profile
});*/
if (!this.config.allow_register && action === "register") {
throw new Exception("Registration is not allowed", 403);
}
@@ -141,21 +139,10 @@ export class AppAuth extends Module<typeof authConfigSchema> {
}
private filterUserData(user: any) {
/*console.log(
"--filterUserData",
user,
this.config.jwt.fields,
pick(user, this.config.jwt.fields)
);*/
return pick(user, this.config.jwt.fields);
}
private async login(strategy: Strategy, identifier: string, profile: ProfileExchange) {
/*console.log("--- trying to login", {
strategy: strategy.getName(),
identifier,
profile
});*/
if (!("email" in profile)) {
throw new Exception("Profile must have email");
}
@@ -172,18 +159,14 @@ export class AppAuth extends Module<typeof authConfigSchema> {
if (!result.data) {
throw new Exception("User not found", 404);
}
//console.log("---login data", result.data, result);
// compare strategy and identifier
//console.log("strategy comparison", result.data.strategy, strategy.getName());
if (result.data.strategy !== strategy.getName()) {
//console.log("!!! User registered with different strategy");
throw new Exception("User registered with different strategy");
}
//console.log("identifier comparison", result.data.strategy_value, identifier);
if (result.data.strategy_value !== identifier) {
//console.log("!!! Invalid credentials");
throw new Exception("Invalid credentials");
}
@@ -285,6 +268,7 @@ export class AppAuth extends Module<typeof authConfigSchema> {
} catch (e) {}
try {
// also keep disabled strategies as a choice
const strategies = Object.keys(this.config.strategies ?? {});
this.replaceEntityField(users, "strategy", enumm({ enum: strategies }));
} catch (e) {}
@@ -315,9 +299,16 @@ export class AppAuth extends Module<typeof authConfigSchema> {
return this.configDefault;
}
const strategies = this.authenticator.getStrategies();
return {
...this.config,
...this.authenticator.toJSON(secrets)
...this.authenticator.toJSON(secrets),
strategies: transformObject(strategies, (strategy) => ({
enabled: this.isStrategyEnabled(strategy),
type: strategy.getType(),
config: strategy.toJSON(secrets)
}))
};
}
}

36
app/src/auth/api/AuthController.ts
View File

@@ -1,5 +1,6 @@
import { type AppAuth, AuthPermissions, type SafeUser, type Strategy } from "auth";
import { TypeInvalidError, parse } from "core/utils";
import { tbValidator as tb } from "core";
import { Type, TypeInvalidError, parse, transformObject } from "core/utils";
import { DataPermissions } from "data";
import type { Hono } from "hono";
import { Controller } from "modules/Controller";
@@ -12,6 +13,10 @@ export type AuthActionResponse = {
errors?: any;
};
const booleanLike = Type.Transform(Type.String())
.Decode((v) => v === "1")
.Encode((v) => (v ? "1" : "0"));
export class AuthController extends Controller {
constructor(private auth: AppAuth) {
super();
@@ -31,6 +36,9 @@ export class AuthController extends Controller {
}
private registerStrategyActions(strategy: Strategy, mainHono: Hono<ServerEnv>) {
if (!this.auth.isStrategyEnabled(strategy)) {
return;
}
const actions = strategy.getActions?.();
if (!actions) {
return;
@@ -98,7 +106,8 @@ export class AuthController extends Controller {
const strategies = this.auth.authenticator.getStrategies();
for (const [name, strategy] of Object.entries(strategies)) {
//console.log("registering", name, "at", `/${name}`);
if (!this.auth.isStrategyEnabled(strategy)) continue;
hono.route(`/${name}`, strategy.getController(this.auth.authenticator));
this.registerStrategyActions(strategy, hono);
}
@@ -127,10 +136,25 @@ export class AuthController extends Controller {
return c.redirect("/");
});
hono.get("/strategies", async (c) => {
const { strategies, basepath } = this.auth.toJSON(false);
return c.json({ strategies, basepath });
});
hono.get(
"/strategies",
tb("query", Type.Object({ include_disabled: Type.Optional(booleanLike) })),
async (c) => {
const { include_disabled } = c.req.valid("query");
const { strategies, basepath } = this.auth.toJSON(false);
if (!include_disabled) {
return c.json({
strategies: transformObject(strategies ?? {}, (strategy, name) => {
return this.auth.isStrategyEnabled(name) ? strategy : undefined;
}),
basepath
});
}
return c.json({ strategies, basepath });
}
);
return hono.all("*", (c) => c.notFound());
}

2
app/src/auth/auth-schema.ts
View File

@@ -21,6 +21,7 @@ export const STRATEGIES = Strategies;
const strategiesSchemaObject = objectTransform(STRATEGIES, (strategy, name) => {
return Type.Object(
{
enabled: Type.Optional(Type.Boolean({ default: true })),
type: Type.Const(name, { default: name, readOnly: true }),
config: strategy.schema
},
@@ -61,6 +62,7 @@ export const authConfigSchema = Type.Object(
default: {
password: {
type: "password",
enabled: true,
config: {
hashing: "sha256"
}

3
app/src/auth/authenticate/Authenticator.ts
View File

@@ -342,8 +342,7 @@ export class Authenticator<Strategies extends Record<string, Strategy> = Record<
toJSON(secrets?: boolean) {
return {
...this.config,
jwt: secrets ? this.config.jwt : undefined,
strategies: transformObject(this.getStrategies(), (s) => s.toJSON(secrets))
jwt: secrets ? this.config.jwt : undefined
};
}
}

5
app/src/auth/authenticate/strategies/PasswordStrategy.ts
View File

@@ -147,9 +147,6 @@ export class PasswordStrategy implements Strategy {
}
toJSON(secrets?: boolean) {
return {
type: this.getType(),
config: secrets ? this.options : undefined
};
return secrets ? this.options : undefined;
}
}

7
app/src/auth/authenticate/strategies/oauth/OAuthStrategy.ts
View File

@@ -476,11 +476,8 @@ export class OAuthStrategy implements Strategy {
const config = secrets ? this.config : filterKeys(this.config, ["secret", "client_id"]);
return {
type: this.getType(),
config: {
type: this.getIssuerConfig().type,
...config
}
type: this.getIssuerConfig().type,
...config
};
}
}

6
app/src/ui/client/schema/auth/use-bknd-auth.ts
View File

@@ -8,7 +8,11 @@ export function useBkndAuth() {
config: {
set: async (data: Partial<AppAuthSchema>) => {
console.log("--set", data);
return await bkndActions.set("auth", data, true);
if (await bkndActions.set("auth", data, true)) {
await bkndActions.reload();
return true;
}
return false;
}
},
roles: {

18
app/src/ui/components/display/Icon.tsx Normal file
View File

@@ -0,0 +1,18 @@
import { TbAlertCircle } from "react-icons/tb";
import { twMerge } from "tailwind-merge";
export type IconProps = {
className?: string;
title?: string;
};
const Warning = ({ className, ...props }: IconProps) => (
<TbAlertCircle
{...props}
className={twMerge("dark:text-amber-300 text-amber-700 cursor-help", className)}
/>
);
export const Icon = {
Warning
};

30
app/src/ui/components/form/Formy/components.tsx
View File

@@ -1,3 +1,4 @@
import clsx from "clsx";
import { getBrowser } from "core/utils";
import type { Field } from "data";
import { Switch as RadixSwitch } from "radix-ui";
@@ -177,6 +178,21 @@ export const BooleanInput = forwardRef<HTMLInputElement, React.ComponentProps<"i
);
export type SwitchValue = boolean | 1 | 0 | "true" | "false" | "on" | "off";
const SwitchSizes = {
xs: {
root: "h-5 w-8",
thumb: "data-[state=checked]:left-[calc(100%-1rem)]"
},
sm: {
root: "h-6 w-10",
thumb: "data-[state=checked]:left-[calc(100%-1.25rem)]"
},
md: {
root: "h-7 w-12",
thumb: "data-[state=checked]:left-[calc(100%-1.5rem)]"
}
};
export const Switch = forwardRef<
HTMLButtonElement,
Pick<
@@ -184,14 +200,19 @@ export const Switch = forwardRef<
"name" | "required" | "disabled" | "checked" | "defaultChecked" | "id" | "type"
> & {
value?: SwitchValue;
size?: keyof typeof SwitchSizes;
onChange?: (e: { target: { value: boolean } }) => void;
onCheckedChange?: (checked: boolean) => void;
}
>(({ type, required, ...props }, ref) => {
return (
<RadixSwitch.Root
className="relative h-7 w-12 cursor-pointer rounded-full bg-muted border-2 border-transparent outline-none data-[state=checked]:bg-primary/75 appearance-none transition-colors hover:bg-muted/80"
className={clsx(
"relative cursor-pointer rounded-full bg-muted border-2 border-transparent outline-none ring-1 dark:ring-primary/10 ring-primary/20 data-[state=checked]:ring-primary/60 data-[state=checked]:bg-primary/60 appearance-none transition-colors hover:bg-muted/80",
SwitchSizes[props.size ?? "md"].root
)}
onCheckedChange={(bool) => {
console.log("setting", bool);
props.onChange?.({ target: { value: bool } });
}}
{...(props as any)}
@@ -204,7 +225,12 @@ export const Switch = forwardRef<
}
ref={ref}
>
<RadixSwitch.Thumb className="absolute top-0 left-0 h-full aspect-square rounded-full bg-background transition-[left,right] duration-100 border border-muted data-[state=checked]:left-[calc(100%-1.5rem)]" />
<RadixSwitch.Thumb
className={clsx(
"absolute top-0 left-0 h-full aspect-square rounded-full bg-primary/30 data-[state=checked]:bg-background transition-[left,right] duration-100 border border-muted",
SwitchSizes[props.size ?? "md"].thumb
)}
/>
</RadixSwitch.Root>
);
});

5
app/src/ui/components/form/json-schema-form/Field.tsx
View File

@@ -30,8 +30,9 @@ const fieldErrorBoundary =
</Pre>
);
const FieldImpl = ({ name, onChange, placeholder, ...props }: FieldProps) => {
const { path, setValue, required, schema, ...ctx } = useDerivedFieldContext(name);
const FieldImpl = ({ name, onChange, placeholder, required: _required, ...props }: FieldProps) => {
const { path, setValue, schema, ...ctx } = useDerivedFieldContext(name);
const required = typeof _required === "boolean" ? _required : ctx.required;
//console.log("Field", { name, path, schema });
if (!isTypeSchema(schema))
return (

2
app/src/ui/components/form/json-schema-form/FieldWrapper.tsx
View File

@@ -14,7 +14,7 @@ import { getLabel } from "./utils";
export type FieldwrapperProps = {
name: string;
label?: string | false;
label?: string | ReactNode | false;
required?: boolean;
schema?: JsonSchema;
debug?: object | boolean;

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

@@ -35,7 +35,7 @@ import {
prefixPointer
} from "./utils";
type JSONSchema = Exclude<$JSONSchema, boolean>;
export type JSONSchema = Exclude<$JSONSchema, boolean>;
type FormState<Data = any> = {
dirty: boolean;
submitting: boolean;
@@ -238,6 +238,7 @@ export function FormContextOverride({
...overrides,
...additional
};
console.log("context", context);
return <FormContext.Provider value={context}>{children}</FormContext.Provider>;
}
@@ -287,10 +288,11 @@ export function useFormError(name: string, opt?: { strict?: boolean; debug?: boo
}
export function useFormStateSelector<Data = any, Reduced = Data>(
selector: (state: FormState<Data>) => Reduced
selector: (state: FormState<Data>) => Reduced,
deps: any[] = []
): Reduced {
const { _formStateAtom } = useFormContext();
const selected = selectAtom(_formStateAtom, useCallback(selector, []), isEqual);
const selected = selectAtom(_formStateAtom, useCallback(selector, deps), isEqual);
return useAtom(selected)[0];
}
@@ -306,14 +308,16 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
path: string;
},
Reduced
>
>,
_schema?: JSONSchema
): FormContext<Data> & {
value: Reduced;
pointer: string;
required: boolean;
path: string;
} {
const { _formStateAtom, root, lib, schema, ...ctx } = useFormContext();
const { _formStateAtom, root, lib, ...ctx } = useFormContext();
const schema = _schema ?? ctx.schema;
const selected = selectAtom(
_formStateAtom,
useCallback(

5
app/src/ui/components/form/json-schema-form/ObjectField.tsx
View File

@@ -1,9 +1,8 @@
import type { JSONSchema } from "json-schema-to-ts";
import { isTypeSchema } from "ui/components/form/json-schema-form/utils";
import { AnyOfField } from "./AnyOfField";
import { Field } from "./Field";
import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
import { useDerivedFieldContext } from "./Form";
import { type JSONSchema, useDerivedFieldContext } from "./Form";
export type ObjectFieldProps = {
path?: string;
@@ -12,7 +11,7 @@ export type ObjectFieldProps = {
};
export const ObjectField = ({ path = "", label: _label, wrapperProps = {} }: ObjectFieldProps) => {
const { schema } = useDerivedFieldContext(path);
const { schema, ...ctx } = useDerivedFieldContext(path);
if (!isTypeSchema(schema)) return `ObjectField "${path}": no schema`;
const properties = Object.entries(schema.properties ?? {}) as [string, JSONSchema][];

6
app/src/ui/lib/mantine/theme.ts
View File

@@ -8,6 +8,7 @@ import {
SegmentedControl,
Select,
Switch,
Tabs,
TagsInput,
TextInput,
Textarea,
@@ -104,6 +105,11 @@ export function createMantineTheme(scheme: "light" | "dark"): {
overlay: "!backdrop-blur-sm"
})
}),
Tabs: Tabs.extend({
classNames: (theme, props) => ({
tab: "data-[active=true]:border-primary"
})
}),
Menu: Menu.extend({
defaultProps: {
offset: 2

2
app/src/ui/routes/auth/_auth.root.tsx
View File

@@ -44,7 +44,7 @@ export function AuthRoot({ children }) {
>
Roles & Permissions
</AppShell.SidebarLink>
<AppShell.SidebarLink as={Link} href={routes.auth.strategies()} disabled>
<AppShell.SidebarLink as={Link} href={routes.auth.strategies()}>
Strategies
</AppShell.SidebarLink>
<AppShell.SidebarLink as={Link} href={routes.auth.settings()}>

53
app/src/ui/routes/auth/auth.settings.tsx
View File

@@ -1,10 +1,18 @@
import clsx from "clsx";
import { TbChevronDown, TbChevronUp } from "react-icons/tb";
import { isDebug } from "core";
import { TbAlertCircle, TbChevronDown, TbChevronUp } from "react-icons/tb";
import { useBknd } from "ui/client/BkndProvider";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { Button } from "ui/components/buttons/Button";
import { Icon } from "ui/components/display/Icon";
import { Message } from "ui/components/display/Message";
import { Field, type FieldProps, Form, Subscribe } from "ui/components/form/json-schema-form";
import {
Field,
type FieldProps,
Form,
FormDebug,
Subscribe
} from "ui/components/form/json-schema-form";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "ui/layouts/AppShell/AppShell";
import { Breadcrumbs2 } from "ui/layouts/AppShell/Breadcrumbs2";
@@ -40,12 +48,13 @@ export function AuthSettings(props) {
const formConfig = {
ignoreKeys: ["roles", "strategies"],
options: { keepEmpty: true }
options: { keepEmpty: true, debug: isDebug() }
};
function AuthSettingsInternal() {
const { config, schema: _schema, actions } = useBkndAuth();
const schema = JSON.parse(JSON.stringify(_schema));
const hasRoles = Object.keys(config.roles ?? {}).length > 0;
schema.properties.jwt.required = ["alg"];
@@ -64,7 +73,7 @@ function AuthSettingsInternal() {
>
{({ dirty, errors, submitting }) => (
<AppShell.SectionHeader
className="pl-3"
className="pl-4"
right={
<Button
variant="primary"
@@ -75,28 +84,32 @@ function AuthSettingsInternal() {
</Button>
}
>
<div className="flex flex-row gap-4 items-center">
<Breadcrumbs2
path={[{ label: "Auth", href: "/" }, { label: "Settings" }]}
backTo="/"
/>
</div>
Settings
</AppShell.SectionHeader>
)}
</Subscribe>
<AppShell.Scrollable>
<Section className="pt-4">
<AuthField
name="enabled"
label="Authentication Enabled"
description="Only after enabling authentication, all settings below will take effect."
descriptionPlacement="top"
/>
<div className="flex flex-col gap-6 relative">
<Section className="pt-4 pl-0 pb-0">
<div className="pl-4">
<AuthField
name="enabled"
label="Authentication Enabled"
description="Only after enabling authentication, all settings below will take effect."
descriptionPlacement="top"
/>
</div>
<div className="flex flex-col gap-6 relative pl-4 pb-2">
<Overlay />
<AuthField
name="guard.enabled"
label="Guard Enabled"
label={
<div className="flex flex-row gap-2 items-center">
<span>Guard Enabled</span>
{!hasRoles && (
<Icon.Warning title="No roles defined. Enabling the guard will block all requests." />
)}
</div>
}
description="When enabled, enforces permissions on all routes. Make sure to create roles first."
descriptionPlacement="top"
/>
@@ -139,7 +152,7 @@ function AuthSettingsInternal() {
<ToggleAdvanced which="cookie" />
</Section>
</div>
{/* <FormDebug /> */}
<FormDebug />
</AppShell.Scrollable>
</Form>
);

268
app/src/ui/routes/auth/auth.strategies.tsx
View File

@@ -1,55 +1,247 @@
import { cloneDeep, omit } from "lodash-es";
import { isDebug } from "core";
import { autoFormatString } from "core/utils";
import { type ChangeEvent, useState } from "react";
import {
TbAt,
TbBrandAppleFilled,
TbBrandDiscordFilled,
TbBrandFacebookFilled,
TbBrandGithubFilled,
TbBrandGoogleFilled,
TbBrandInstagram,
TbBrandOauth,
TbBrandX,
TbSettings
} from "react-icons/tb";
import { twMerge } from "tailwind-merge";
import { useBknd } from "ui/client/bknd";
import { useBkndAuth } from "ui/client/schema/auth/use-bknd-auth";
import { Button } from "ui/components/buttons/Button";
import { IconButton } from "ui/components/buttons/IconButton";
import { Message } from "ui/components/display/Message";
import {
Field,
Form,
FormContextOverride,
FormDebug,
ObjectField,
Subscribe,
useDerivedFieldContext,
useFormError,
useFormValue
} from "ui/components/form/json-schema-form";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
import * as AppShell from "../../layouts/AppShell/AppShell";
export function AuthStrategiesList() {
useBknd({ withSecrets: true });
return <AuthStrategiesListInternal />;
export function AuthStrategiesList(props) {
useBrowserTitle(["Auth", "Strategies"]);
const { hasSecrets } = useBknd({ withSecrets: true });
if (!hasSecrets) {
return <Message.MissingPermission what="Auth Strategies" />;
}
return <AuthStrategiesListInternal {...props} />;
}
const uiSchema = {
jwt: {
fields: {
"ui:options": {
orderable: false
}
}
}
const formOptions = {
keepEmpty: true,
debug: isDebug()
};
function AuthStrategiesListInternal() {
const s = useBknd();
const config = s.config.auth.strategies;
const schema = cloneDeep(omit(s.schema.auth.properties.strategies, ["title"]));
const $auth = useBkndAuth();
const config = $auth.config.strategies;
const schema = $auth.schema.properties.strategies;
const schemas = Object.fromEntries(
// @ts-ignore
$auth.schema.properties.strategies.additionalProperties.anyOf.map((s) => [
s.properties.type.const,
s
])
);
console.log("strategies", { config, schema });
async function handleSubmit(data: any) {
console.log("submit", { strategies: data });
await $auth.actions.config.set({ strategies: data });
}
return (
<>
<AppShell.SectionHeader right={<Button variant="primary">Update</Button>}>
Strategies
</AppShell.SectionHeader>
<Form schema={schema} initialValues={config} onSubmit={handleSubmit} options={formOptions}>
<Subscribe
selector={(state) => ({
dirty: state.dirty,
errors: state.errors.length > 0,
submitting: state.submitting
})}
>
{({ dirty, errors, submitting }) => (
<AppShell.SectionHeader
className="pl-4"
right={
<Button
variant="primary"
type="submit"
disabled={!dirty || errors || submitting}
>
Update
</Button>
}
>
Strategies
</AppShell.SectionHeader>
)}
</Subscribe>
<AppShell.Scrollable>
strat
{/*<div className="flex flex-col flex-grow px-5 py-4 gap-8">
<div>
<JsonSchemaForm
schema={generalSchema}
className="legacy hide-required-mark fieldset-alternative mute-root"
/>
<div className="flex flex-col p-4 gap-4">
<p className="opacity-70">
Allow users to sign in or sign up using different strategies.
</p>
<div className="flex flex-col gap-2 max-w-4xl">
<Strategy type="password" name="password" />
<Strategy type="oauth" name="google" />
<Strategy type="oauth" name="github" />
<Strategy type="oauth" name="facebook" unavailable />
<Strategy type="oauth" name="x" unavailable />
<Strategy type="oauth" name="instagram" unavailable />
<Strategy type="oauth" name="apple" unavailable />
<Strategy type="oauth" name="discord" unavailable />
</div>
<div className="flex flex-col gap-3">
<h3 className="font-bold">JWT Settings</h3>
<JsonSchemaForm
schema={extracted.jwt.schema}
uiSchema={uiSchema.jwt}
className="legacy hide-required-mark fieldset-alternative mute-root"
/>
</div>
</div>*/}
</div>
<FormDebug />
</AppShell.Scrollable>
</>
</Form>
);
}
type StrategyProps = {
type: "password" | "oauth" | "custom_oauth";
name: string;
unavailable?: boolean;
};
const Strategy = ({ type, name, unavailable }: StrategyProps) => {
const errors = useFormError(name, { strict: true });
const $auth = useBkndAuth();
const schemas = Object.fromEntries(
// @ts-ignore
$auth.schema.properties.strategies.additionalProperties.anyOf.map((s) => [
s.properties.type.const,
s
])
);
const schema = schemas[type];
const [open, setOpen] = useState(false);
if (!schema) return null;
return (
<FormContextOverride schema={schema} prefix={name}>
<div
className={twMerge(
"flex flex-col border border-muted rounded bg-background",
unavailable && "opacity-20 pointer-events-none cursor-not-allowed",
errors.length > 0 && "border-red-500"
)}
>
<div className="flex flex-row justify-between p-3 gap-3 items-center">
<div className="flex flex-row items-center p-2 bg-primary/5 rounded">
<StrategyIcon type={type} provider={name} />
</div>
<div className="font-mono flex-grow flex flex-row gap-3">
<span className="leading-none">{autoFormatString(name)}</span>
</div>
<div className="flex flex-row gap-4 items-center">
<StrategyToggle />
<IconButton
Icon={TbSettings}
size="lg"
iconProps={{ strokeWidth: 1.5 }}
variant={open ? "primary" : "ghost"}
onClick={() => setOpen((o) => !o)}
/>
</div>
</div>
{open && (
<div
className={twMerge(
"flex flex-col border-t border-t-muted px-4 pt-3 pb-4 bg-lightest/50 gap-4"
)}
>
<StrategyForm type={type} />
</div>
)}
</div>
</FormContextOverride>
);
};
const StrategyToggle = () => {
const ctx = useDerivedFieldContext("");
const { value } = useFormValue("");
function handleToggleChange(e: ChangeEvent<HTMLInputElement>) {
const checked = e.target.value;
const value_keys = Object.keys(value ?? {});
const can_remove =
value_keys.length === 0 || (value_keys.length === 1 && value_keys[0] === "enabled");
if (!checked && can_remove) {
ctx.deleteValue(ctx.path);
} else {
ctx.setValue([ctx.path, "enabled"].join("."), checked);
}
}
return <Field name="enabled" label={false} required onChange={handleToggleChange} />;
};
const StrategyIcon = ({ type, provider }: { type: StrategyProps["type"]; provider?: string }) => {
if (type === "password") {
return <TbAt className="size-5" />;
}
if (provider && provider in OAUTH_BRANDS) {
const BrandIcon = OAUTH_BRANDS[provider];
return <BrandIcon className="size-5" />;
}
return <TbBrandOauth className="size-5" />;
};
const OAUTH_BRANDS = {
google: TbBrandGoogleFilled,
github: TbBrandGithubFilled,
facebook: TbBrandFacebookFilled,
x: TbBrandX,
instagram: TbBrandInstagram,
apple: TbBrandAppleFilled,
discord: TbBrandDiscordFilled
};
const StrategyForm = ({ type }: Pick<StrategyProps, "type">) => {
let Component = () => <ObjectField path="" wrapperProps={{ wrapper: "group", label: false }} />;
switch (type) {
case "password":
Component = StrategyPasswordForm;
break;
case "oauth":
Component = StrategyOAuthForm;
break;
}
return <Component />;
};
const StrategyPasswordForm = () => {
return <ObjectField path="config" wrapperProps={{ wrapper: "group", label: false }} />;
};
const StrategyOAuthForm = () => {
return (
<>
<Field name="config.client.client_id" required />
<Field name="config.client.client_secret" required />
</>
);
};

6
app/src/ui/routes/media/_media.root.tsx
View File

@@ -2,6 +2,7 @@ import { IconAlertHexagon } from "@tabler/icons-react";
import { TbSettings } from "react-icons/tb";
import { useBknd } from "ui/client/BkndProvider";
import { IconButton } from "ui/components/buttons/IconButton";
import { Icon } from "ui/components/display/Icon";
import { Link } from "ui/components/wouter/Link";
import { Media } from "ui/elements";
import { useBrowserTitle } from "ui/hooks/use-browser-title";
@@ -32,7 +33,10 @@ export function MediaRoot({ children }) {
href={"/"}
className="flex flex-row justify-between"
>
Main Bucket {mediaDisabled && <IconAlertHexagon className="size-5" />}
Main Bucket{" "}
{mediaDisabled && (
<Icon.Warning title="Media not enabled." className="size-5" />
)}
</AppShell.SidebarLink>
<AppShell.SidebarLink as={Link} href={"/settings"}>
Settings