| 1 | "use client"; |
| 2 | |
| 3 | import type { |
| 4 | AdditionalField as AdditionalFieldConfig, |
| 5 | AdditionalFieldFormValue, |
| 6 | } from "@better-auth-ui/core"; |
| 7 | import type { ComponentType |
| 8 | |
| 9 | export type AdditionalFieldProps |
| 10 | name: string |
| 11 | field: AdditionalFieldConfig |
| 12 | value: AdditionalFieldFormValue |
| 13 | onBlur: () |
| 14 | onChange: (value |
| 15 | isInvalid?: boolean |
| 16 | errors?: unknown |
| 17 | isPending?: boolean |
| 18 | optionalLabel?: string |
| 19 | }; |
| 20 | |
| 21 | /** Renders an additional user field through the renderer its plugin registers; `username` is the only one configured. */ |
| 22 | export function AdditionalField(props |
| 23 | const { field, |
| 24 | if (!field.render |
| 25 | throw new Error( |
| 26 | `Additional field "${name}" has no renderer; register one in its auth plugin.` |
| 27 | ); |
| 28 | } |
| 29 | const FieldRenderer = |
| 30 | const label = |
| 31 | optionalLabel && !field |
| 32 | <> |
| 33 | {field.label} |
| 34 | {optionalLabel} |
| 35 | </> |
| 36 | ) : ( |
| 37 | field.label |
| 38 | ); |
| 39 | |
| 40 | return <FieldRenderer { |
| 41 | } |