feat: settings sections and layout

packages/elements-react/package.json

@@ -28,7 +28,8 @@
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@ory/client-fetch": "^1.15.4",
+    "@ory/client-fetch": "1.15.4",
+    "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "input-otp": "1.2.4",
     "lodash.merge": "4.6.2",
@@ -44,8 +45,9 @@
     "@hookform/devtools": "^4.3.1",
     "@svgr/plugin-svgo": "^8.1.0",
     "@types/lodash.merge": "4.6.9",
-    "esbuild-plugin-svgr": "^2.1.0",
     "eslint-plugin-react": "7.37.0",
+    "@svgr/plugin-jsx": "^8.1.0",
+    "esbuild-plugin-svgr": "2.1.0",
     "postcss": "8.4.47",
     "tsup": "8.2.3"
   },
@@ -71,4 +73,4 @@
   "publishConfig": {
     "access": "public"
   }
-}
+}

packages/elements-react/postcss.config.ts

@@ -2,5 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 
 module.exports = {
-  plugins: [require("tailwindcss")(), require("autoprefixer")()],
+  plugins: [
+    require("tailwindcss")(),
+    require("autoprefixer")(),
+    // require("postcss-prefix-selector")({ prefix: ".ory-default-theme" }),
+  ],
 }

packages/elements-react/src/components/card/card-two-step.tsx

@@ -48,7 +48,7 @@ export function OryTwoStepCard() {
   const uniqueGroups = useNodesGroups(ui.nodes)
 
   const options: UiNodeGroupEnum[] = Object.values(UiNodeGroupEnum)
-    .filter((group) => uniqueGroups[group]?.length)
+    .filter((group) => uniqueGroups.groups[group]?.length)
     .filter(
       (group) =>
         !(
@@ -61,10 +61,10 @@ export function OryTwoStepCard() {
         ).includes(group),
     )
 
-  const hasOidc = Boolean(uniqueGroups.oidc?.length)
+  const hasOidc = Boolean(uniqueGroups.groups[UiNodeGroupEnum.Oidc]?.length)
 
   const zeroStepGroups = filterZeroStepGroups(ui.nodes)
-  const finalNodes = getFinalNodes(uniqueGroups, selectedGroup)
+  const finalNodes = getFinalNodes(uniqueGroups.groups, selectedGroup)
 
   const step = selectedGroup
     ? ProcessStep.ExecuteAuthMethod

packages/elements-react/src/components/form/form-helpers.ts

@@ -1,14 +1,11 @@
 // Copyright © 2024 Ory Corp
 // SPDX-License-Identifier: Apache-2.0
 
-import { isUiNodeInputAttributes } from "@ory/client-fetch"
+import { isUiNodeInputAttributes, UiNode } from "@ory/client-fetch"
 import { FormValues } from "../../types"
-import { OryFlowContainer } from "../../util"
 
-export function computeDefaultValues(
-  flowContainer: OryFlowContainer,
-): FormValues {
-  return flowContainer.flow.ui.nodes.reduce<FormValues>((acc, node) => {
+export function computeDefaultValues(nodes: UiNode[]): FormValues {
+  return nodes.reduce<FormValues>((acc, node) => {
     if (isUiNodeInputAttributes(node.attributes)) {
       if (node.attributes.name === "method") {
         // Do not set the default values for this.

packages/elements-react/src/components/form/form.tsx

@@ -2,6 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import {
+  UiNode,
+  UiNodeGroupEnum,
   UpdateLoginFlowBody,
   UpdateRecoveryFlowBody,
   UpdateRegistrationFlowBody,
@@ -24,6 +26,7 @@ import {
   OryNodeTextProps,
   OryCurrentIdentifierProps,
   OryCardLogoProps,
+  OryFormSectionContentProps,
 } from "../../types"
 import { OryCardDividerProps } from "../generic/divider"
 import { OryFormGroupProps, OryFormGroups } from "./groups"
@@ -51,6 +54,14 @@ import { onSubmitRegistration } from "../../util/onSubmitRegistration"
 import { onSubmitVerification } from "../../util/onSubmitVerification"
 import { onSubmitRecovery } from "../../util/onSubmitRecovery"
 import { onSubmitSettings } from "../../util/onSubmitSettings"
+import { OryFormSectionProps } from "./section"
+import {
+  OrySettingsOidcProps,
+  OrySettingsPasskeyProps,
+  OrySettingsRecoveryCodesProps,
+  OrySettingsTotpProps,
+  OrySettingsWebauthnProps,
+} from "../settings"
 
 /**
  * A record of all the components that are used in the OryForm component.
@@ -170,6 +181,26 @@ export type OryFlowComponents = {
      */
     Content: ComponentType<OryMessageContentProps>
   }
+  Settings: {
+    /**
+     * The SettingsSection component is rendered around each section of the settings.
+     */
+    Section: ComponentType<OryFormSectionProps>
+    /**
+     * The SettingsSectionContent component is rendered around the content of each section of the settings.
+     */
+    SectionContent: ComponentType<OryFormSectionContentProps>
+    /**
+     * The SettingsSectionFooter component is rendered around the footer of each section of the settings.
+     */
+    SectionFooter: ComponentType<OryFormSectionContentProps>
+
+    Oidc: ComponentType<OrySettingsOidcProps>
+    Webauthn: ComponentType<OrySettingsWebauthnProps>
+    Passkey: ComponentType<OrySettingsPasskeyProps>
+    Totp: ComponentType<OrySettingsTotpProps>
+    RecoveryCodes: ComponentType<OrySettingsRecoveryCodesProps>
+  }
 }
 
 type DeepPartialTwoLevels<T> = {
@@ -178,14 +209,23 @@ type DeepPartialTwoLevels<T> = {
 
 export type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>
 
-export type OryFormProps = PropsWithChildren
+export type OryFormProps = PropsWithChildren<{
+  nodes?: UiNode[]
+}>
 
-export function OryForm({ children }: OryFormProps) {
+export function OryForm({ children, nodes }: OryFormProps) {
   const { Form } = useComponents()
   const flowContainer = useOryFlow()
+
+  const defaultNodes = nodes
+    ? flowContainer.flow.ui.nodes
+        .filter((node) => node.group === UiNodeGroupEnum.Default)
+        .concat(nodes)
+    : flowContainer.flow.ui.nodes
+
   const methods = useForm({
     // TODO: Generify this, so we have typesafety in the submit handler.
-    defaultValues: computeDefaultValues(flowContainer),
+    defaultValues: computeDefaultValues(defaultNodes),
   })
 
   const intl = useIntl()
@@ -202,7 +242,7 @@ export function OryForm({ children }: OryFormProps) {
 
   const handleSuccess = (flow: OryFlowContainer) => {
     flowContainer.setFlowContainer(flow)
-    methods.reset(computeDefaultValues(flow))
+    methods.reset(computeDefaultValues(flow.flow.ui.nodes))
   }
 
   const onSubmit: SubmitHandler<FormValues> = async (data) => {
@@ -214,7 +254,7 @@ export function OryForm({ children }: OryFormProps) {
         if (submitData.method === "code" && data.code) {
           submitData.resend = ""
         }
-        console.log(submitData)
+
         await onSubmitLogin(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,
@@ -260,13 +300,42 @@ export function OryForm({ children }: OryFormProps) {
         })
         break
       }
-      case FlowType.Settings:
+      case FlowType.Settings: {
+        const submitData: UpdateSettingsFlowBody = {
+          ...(data as unknown as UpdateSettingsFlowBody),
+        }
+
+        if ("totp_unlink" in submitData) {
+          submitData.method = "totp"
+        }
+
+        if (
+          "lookup_secret_confirm" in submitData ||
+          "lookup_secret_reveal" in submitData ||
+          "lookup_secret_regenerate" in submitData
+        ) {
+          submitData.method = "lookup_secret"
+        }
+
+        if ("link" in submitData || "unlink" in submitData) {
+          submitData.method = "oidc"
+        }
+
+        if ("webauthn_remove" in submitData) {
+          submitData.method = "webauthn"
+        }
+
+        if ("passkey_remove" in submitData) {
+          submitData.method = "passkey"
+        }
+
         await onSubmitSettings(flowContainer, {
           onRedirect,
           setFlowContainer: handleSuccess,
-          body: data as unknown as UpdateSettingsFlowBody,
+          body: submitData,
         })
         break
+      }
     }
   }
 

packages/elements-react/src/components/form/nodes/input.tsx

@@ -9,6 +9,7 @@ import {
   UiNodeInputAttributesTypeEnum,
 } from "@ory/client-fetch"
 import { MouseEventHandler, ReactNode, useEffect, useRef } from "react"
+import { useFormContext } from "react-hook-form"
 
 export const NodeInput = ({
   node,
@@ -18,6 +19,8 @@ export const NodeInput = ({
   onClick?: MouseEventHandler
 }): ReactNode => {
   const { Node } = useComponents()
+  const { setValue } = useFormContext()
+
   const nodeType = attributes.type
   const {
     onloadTrigger: onloadTrigger,
@@ -29,9 +32,16 @@ export const NodeInput = ({
     ...attrs
   } = attributes
 
+  const setFormValue = () => {
+    if (attrs.value) {
+      setValue(attrs.name, attrs.value)
+    }
+  }
+
   const hasRun = useRef(false)
   useEffect(
     () => {
+      setFormValue()
       if (!hasRun.current && onloadTrigger) {
         hasRun.current = true
         triggerToWindowCall(onloadTrigger)
@@ -43,6 +53,7 @@ export const NodeInput = ({
   )
 
   const handleClick: MouseEventHandler = () => {
+    setFormValue()
     if (onclickTrigger) {
       triggerToWindowCall(onclickTrigger)
     }

packages/elements-react/src/components/form/section.tsx

@@ -0,0 +1,18 @@
+import { PropsWithChildren } from "react"
+import { useComponents } from "../../context/component"
+import { OryForm } from "./form"
+import { UiNode } from "@ory/client-fetch"
+
+export type OryFormSectionProps = PropsWithChildren<{
+  nodes?: UiNode[]
+}>
+
+export function OryFormSection({ children, nodes }: OryFormSectionProps) {
+  const {} = useComponents()
+
+  return (
+    <OryForm nodes={nodes}>
+      <FormSection>{children}</FormSection>
+    </OryForm>
+  )
+}

packages/elements-react/src/components/index.ts

@@ -4,3 +4,4 @@
 export * from "./card"
 export * from "./form"
 export * from "./generic"
+export * from "./settings"

packages/elements-react/src/components/settings/index.tsx

@@ -0,0 +1,35 @@
+import { UiNode } from "@ory/client-fetch"
+
+export * from "./settings-card"
+
+export type OrySettingsRecoveryCodesProps = {
+  codes: string[]
+  regnerateButton?: UiNode
+  revealButton?: UiNode
+}
+
+export type OrySettingsTotpProps =
+  | {
+      totpImage: UiNode
+      totpSecret: UiNode
+      totpInput: UiNode
+    }
+  | {
+      totpUnlink: UiNode
+    }
+
+export type OrySettingsOidcProps = {
+  linkButtons: UiNode[]
+  unlinkButtons: UiNode[]
+}
+
+export type OrySettingsWebauthnProps = {
+  nameInput: UiNode
+  triggerButton: UiNode & { onClick: () => void }
+  removeButtons: UiNode[]
+}
+
+export type OrySettingsPasskeyProps = {
+  triggerButton: UiNode & { onClick: () => void }
+  removeButtons: UiNode[]
+}

packages/elements-react/src/components/settings/oidc-settings.tsx

@@ -0,0 +1,42 @@
+import { UiNode } from "@ory/client-fetch"
+import { useComponents } from "../../context"
+import { useIntl } from "react-intl"
+
+const getLinkButtons = (nodes: UiNode[]): UiNode[] =>
+  nodes.filter(
+    (node) => "name" in node.attributes && node.attributes.name === "link",
+  )
+
+const getUnlinkButtons = (nodes: UiNode[]): UiNode[] =>
+  nodes.filter(
+    (node) => "name" in node.attributes && node.attributes.name === "unlink",
+  )
+
+export interface HeadlessSettingsOidcProps {
+  nodes: UiNode[]
+}
+
+export function OrySettingsOidc({ nodes }: HeadlessSettingsOidcProps) {
+  const { Settings } = useComponents()
+  const intl = useIntl()
+
+  const linkButtons = getLinkButtons(nodes)
+  const unlinkButtons = getUnlinkButtons(nodes)
+
+  return (
+    <>
+      <Settings.SectionContent
+        title={intl.formatMessage({ id: "settings.oidc.title" })}
+        description={intl.formatMessage({ id: "settings.oidc.description" })}
+      >
+        <Settings.Oidc
+          linkButtons={linkButtons}
+          unlinkButtons={unlinkButtons}
+        />
+      </Settings.SectionContent>
+      <Settings.SectionFooter>
+        <span>{intl.formatMessage({ id: "settings.oidc.info" })}</span>
+      </Settings.SectionFooter>
+    </>
+  )
+}