mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-17 12:56:05 +00:00
added auth strategies form + add ability to disable strategies
This commit is contained in:
dswbx
@@ -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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user