added auth strategies form + add ability to disable strategies

app/src/ui/components/display/Icon.tsx

@@ -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
+};

app/src/ui/components/form/Formy/components.tsx

@@ -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>
    );
 });

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

@@ -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 (

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

@@ -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;

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

@@ -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(

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

@@ -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][];