added new settings UI for auth

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

@@ -3,20 +3,16 @@ import type { ChangeEvent, ComponentPropsWithoutRef } from "react";
 import * as Formy from "ui/components/form/Formy";
 import { useEvent } from "ui/hooks/use-event";
 import { ArrayField } from "./ArrayField";
-import { FieldWrapper } from "./FieldWrapper";
+import { FieldWrapper, type FieldwrapperProps } from "./FieldWrapper";
 import { useDerivedFieldContext, useFormValue } from "./Form";
 import { ObjectField } from "./ObjectField";
 import { coerce, isType, isTypeSchema } from "./utils";
 
 export type FieldProps = {
-   name: string;
-   schema?: JsonSchema;
    onChange?: (e: ChangeEvent<any>) => void;
-   label?: string | false;
-   hidden?: boolean;
-};
+} & Omit<FieldwrapperProps, "children">;
 
-export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }: FieldProps) => {
+export const Field = ({ name, schema: _schema, onChange, ...props }: FieldProps) => {
    const { path, setValue, required, ...ctx } = useDerivedFieldContext(name, _schema);
    const schema = _schema ?? ctx.schema;
    if (!isTypeSchema(schema))
@@ -46,7 +42,7 @@ export const Field = ({ name, schema: _schema, onChange, label: _label, hidden }
    });
 
    return (
-      <FieldWrapper name={name} label={_label} required={required} schema={schema} hidden={hidden}>
+      <FieldWrapper name={name} required={required} schema={schema} {...props}>
          <FieldComponent
             schema={schema}
             name={name}

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

@@ -22,6 +22,8 @@ export type FieldwrapperProps = {
    hidden?: boolean;
    children: ReactElement | ReactNode;
    errorPlacement?: "top" | "bottom";
+   description?: string;
+   descriptionPlacement?: "top" | "bottom";
 };
 
 export function FieldWrapper({
@@ -32,18 +34,26 @@ export function FieldWrapper({
    wrapper,
    hidden,
    errorPlacement = "bottom",
-   children
+   descriptionPlacement = "bottom",
+   children,
+   ...props
 }: FieldwrapperProps) {
    const errors = useFormError(name, { strict: true });
    const examples = schema?.examples || [];
    const examplesId = `${name}-examples`;
-   const description = schema?.description;
+   const description = props?.description ?? schema?.description;
    const label = typeof _label !== "undefined" ? _label : schema ? getLabel(name, schema) : name;
 
    const Errors = errors.length > 0 && (
       <Formy.ErrorMessage>{errors.map((e) => e.message).join(", ")}</Formy.ErrorMessage>
    );
 
+   const Description = description && (
+      <Formy.Help className={descriptionPlacement === "top" ? "-mt-1 mb-1" : "mb-2"}>
+         {description}
+      </Formy.Help>
+   );
+
    return (
       <Formy.Group
          error={errors.length > 0}
@@ -62,6 +72,7 @@ export function FieldWrapper({
                {label} {required && <span className="font-medium opacity-30">*</span>}
             </Formy.Label>
          )}
+         {descriptionPlacement === "top" && Description}
 
          <div className="flex flex-row gap-2">
             <div className="flex flex-1 flex-col gap-3">
@@ -80,7 +91,7 @@ export function FieldWrapper({
                )}
             </div>
          </div>
-         {description && <Formy.Help>{description}</Formy.Help>}
+         {descriptionPlacement === "bottom" && Description}
          {errorPlacement === "bottom" && Errors}
       </Formy.Group>
    );

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

@@ -324,9 +324,6 @@ export function useDerivedFieldContext<Data = any, Reduced = undefined>(
             const prefixedName = prefixPath(path, root);
             const prefixedPointer = pathToPointer(prefixedName);
             const value = getPath(state.data, prefixedName);
-            /*const errors = state.errors.filter((error) =>
-               error.data.pointer.startsWith(prefixedPointer)
-            );*/
             const fieldSchema =
                pointer === "#/"
                   ? (schema as LibJsonSchema)