fix: oidc linking & unlinking form properties (#260)

ory · Nov 5, 2024 · 2a6999f · 2a6999f
1 parent 6cb5150
commit 2a6999f
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 4 deletions.
diff --git 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
@@ -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
@@ -7,13 +7,15 @@ 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,
   unlinkButtons,
 }: OrySettingsOidcProps) {
   const hasLinkButtons = linkButtons.length > 0
   const hasUnlinkButtons = unlinkButtons.length > 0
+  const { setValue } = useFormContext()
 
   return (
     <div className="flex flex-col gap-8">
@@ -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 (
           <div key={attrs.value} className="flex justify-between">
@@ -47,7 +53,14 @@ export function DefaultSettingsOidc({
                 {provider}
               </p>
             </div>
-            <button {...attrs} type="submit">
+            <button
+              {...attrs}
+              type="submit"
+              onClick={() => {
+                setValue("unlink", attrs.value)
+                setValue("method", "oidc")
+              }}
+            >
               <Trash className="cursor-pointer text-links-link-mute-default hover:text-links-link-mute-hover" />
             </button>
           </div>