diff --git a/packages/elements-react/src/components/form/form-helpers.ts b/packages/elements-react/src/components/form/form-helpers.ts index d1de64be..e98065d5 100644 --- a/packages/elements-react/src/components/form/form-helpers.ts +++ b/packages/elements-react/src/components/form/form-helpers.ts @@ -11,6 +11,10 @@ export function computeDefaultValues(nodes: UiNode[]): FormValues { // Do not set the default values for this. return acc } + if (node.attributes.type === "submit") { + // Submit buttons are not supposed to be part of the form until the user submits it. + return acc + } acc[node.attributes.name] = node.attributes.value ?? "" } diff --git a/packages/elements-react/src/theme/default/components/form/input.tsx b/packages/elements-react/src/theme/default/components/form/input.tsx index 01d71f00..5204670a 100644 --- a/packages/elements-react/src/theme/default/components/form/input.tsx +++ b/packages/elements-react/src/theme/default/components/form/input.tsx @@ -1,13 +1,15 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { getNodeLabel } from "@ory/client-fetch" +import { FlowType, getNodeLabel } from "@ory/client-fetch" import { OryNodeInputProps, uiTextToFormattedMessage, + useOryFlow, } from "@ory/elements-react" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" +import { cn } from "../../utils/cn" export const DefaultInput = ({ node, @@ -18,6 +20,7 @@ export const DefaultInput = ({ const { register } = useFormContext() const { value, autocomplete, name, maxlength, ...rest } = attributes const intl = useIntl() + const { flowType } = useOryFlow() const formattedLabel = label ? intl.formatMessage( @@ -38,7 +41,12 @@ export const DefaultInput = ({ maxLength={maxlength} autoComplete={autocomplete} placeholder={formattedLabel} - className="antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border px-3 py-2.5 md:px-4 md:py-4 border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm" + className={cn( + "antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm", + "px-3 py-2.5", + // The settings flow input fields are supposed to be dense, so we don't need the extra padding we want on the user flows. + flowType === FlowType.Settings ? "max-w-[488px]" : "md:px-4 md:py-4", + )} {...register(name, { value })} /> ) diff --git a/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx index 724ec2bd..2be9dc77 100644 --- a/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx +++ b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx @@ -7,6 +7,7 @@ import { UiNodeInputAttributes } from "@ory/client-fetch" import { DefaultHorizontalDivider } from "../form/horizontal-divider" import logos from "../../provider-logos" import Trash from "../../assets/icons/trash.svg" +import { useFormContext } from "react-hook-form" export function DefaultSettingsOidc({ linkButtons, @@ -14,6 +15,7 @@ export function DefaultSettingsOidc({ }: OrySettingsOidcProps) { const hasLinkButtons = linkButtons.length > 0 const hasUnlinkButtons = unlinkButtons.length > 0 + const { setValue } = useFormContext() return (
@@ -28,6 +30,10 @@ export function DefaultSettingsOidc({ key={attrs.value} node={button} attributes={attrs} + onClick={() => { + setValue("link", attrs.value) + setValue("method", "oidc") + }} /> ) })} @@ -37,7 +43,7 @@ export function DefaultSettingsOidc({ {unlinkButtons.map((button) => { const attrs = button.attributes as UiNodeInputAttributes const provider = extractProvider(button.meta.label?.context) ?? "" - const Logo = logos[attrs.value] + const Logo = attrs.value in logos ? logos[attrs.value] : logos.generic return (
@@ -47,7 +53,14 @@ export function DefaultSettingsOidc({ {provider}

-