Skip to content

Commit

Permalink
fix: short-circuit code login on two step card
Browse files Browse the repository at this point in the history
  • Loading branch information
jonas-jonas committed Oct 23, 2024
1 parent 56cc1b7 commit 37a9bd8
Show file tree
Hide file tree
Showing 6 changed files with 68 additions and 19 deletions.
10 changes: 7 additions & 3 deletions packages/elements-react/api-report/elements-react.api.json
Original file line number Diff line number Diff line change
Expand Up @@ -1662,7 +1662,7 @@
"excerptTokens": [
{
"kind": "Content",
"text": "declare function OryForm({ children }: "
"text": "declare function OryForm({ children, onAfterSubmit }: "
},
{
"kind": "Reference",
Expand Down Expand Up @@ -1696,7 +1696,7 @@
"overloadIndex": 1,
"parameters": [
{
"parameterName": "{ children }",
"parameterName": "{ children, onAfterSubmit }",
"parameterTypeTokenRange": {
"startIndex": 1,
"endIndex": 2
Expand Down Expand Up @@ -1989,6 +1989,10 @@
"text": "PropsWithChildren",
"canonicalReference": "@types/react!React.PropsWithChildren:type"
},
{
"kind": "Content",
"text": "<{\n onAfterSubmit?: (method: string | number | boolean | undefined) => void;\n}>"
},
{
"kind": "Content",
"text": ";"
Expand All @@ -1999,7 +2003,7 @@
"name": "OryFormProps",
"typeTokenRange": {
"startIndex": 1,
"endIndex": 2
"endIndex": 3
}
},
{
Expand Down
6 changes: 4 additions & 2 deletions packages/elements-react/api-report/elements-react.api.md
Original file line number Diff line number Diff line change
Expand Up @@ -191,7 +191,7 @@ export type OryFlowComponents = {
export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer;

// @public (undocumented)
export function OryForm({ children }: OryFormProps): string | react_jsx_runtime.JSX.Element;
export function OryForm({ children, onAfterSubmit }: OryFormProps): string | react_jsx_runtime.JSX.Element;

// @public
export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null;
Expand Down Expand Up @@ -221,7 +221,9 @@ export type OryFormOidcRootProps = PropsWithChildren<{
}>;

// @public (undocumented)
export type OryFormProps = PropsWithChildren;
export type OryFormProps = PropsWithChildren<{
onAfterSubmit?: (method: string | number | boolean | undefined) => void;
}>;

// @public (undocumented)
export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & {
Expand Down
52 changes: 42 additions & 10 deletions packages/elements-react/src/components/card/card-two-step.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,21 @@ import {
UiNodeInputAttributes,
} from "@ory/client-fetch"
import { useState } from "react"
import { useFormContext } from "react-hook-form"
import { OryCard, OryCardContent, OryCardFooter } from "."
import { useComponents, useNodeSorter, useOryFlow } from "../../context"
import { useNodesGroups } from "../../util/ui"
import { OryForm } from "../form/form"
import { OryCardValidationMessages } from "../form/messages"
import { Node } from "../form/nodes/node"
import { OryFormSocialButtonsForm } from "../form/social"
import { OryCardHeader } from "./header"
import {
filterZeroStepGroups,
getFinalNodes,
isChoosingMethod,
} from "./card-two-step.utils"
import { OryCardHeader } from "./header"
import { isGroupImmediateSubmit } from "../../theme/default/utils/form"

enum ProcessStep {
ProvideIdentifier,
Expand All @@ -39,7 +41,7 @@ export function OryTwoStepCard() {
const [selectedGroup, setSelectedGroup] = useState<
UiNodeGroupEnum | undefined
>()
const { Form, Card } = useComponents()
const { Form } = useComponents()

Check warning on line 44 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L44 was not covered by tests
const { flowType } = useOryFlow()

const nodeSorter = useNodeSorter()
Expand Down Expand Up @@ -80,7 +82,13 @@ export function OryTwoStepCard() {
{step === ProcessStep.ProvideIdentifier && hasOidc && (
<OryFormSocialButtonsForm />
)}
<OryForm>
<OryForm
onAfterSubmit={(method) =>

Check warning on line 86 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L86 was not covered by tests
isGroupImmediateSubmit(method + "")
? setSelectedGroup(method as UiNodeGroupEnum)
: undefined
}
>
<Form.Group>
{step === ProcessStep.ProvideIdentifier &&
zeroStepGroups
Expand All @@ -91,13 +99,10 @@ export function OryTwoStepCard() {
{flowType === FlowType.Login && (
<BackButton href={config.project.login_ui_url} />
)}
{options.map((option) => (
<Card.AuthMethodListItem
key={option}
group={option}
onClick={() => setSelectedGroup(option)}
/>
))}
<AuthMethodList
options={options}
setSelectedGroup={setSelectedGroup}
/>
</>
)}
{step === ProcessStep.ExecuteAuthMethod && (
Expand All @@ -116,6 +121,33 @@ export function OryTwoStepCard() {
)
}

type AuthMethodListProps = {
options: UiNodeGroupEnum[]
setSelectedGroup: (group: UiNodeGroupEnum) => void
}

function AuthMethodList({ options, setSelectedGroup }: AuthMethodListProps) {
const { Card } = useComponents()
const { setValue } = useFormContext()

Check warning on line 131 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added lines #L129 - L131 were not covered by tests

const handleClick = (group: UiNodeGroupEnum) => {

Check warning on line 133 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L133 was not covered by tests
if (isGroupImmediateSubmit(group)) {
// If the method is "immediate submit" (e.g. the method's submit button should be triggered immediately)
// then the methid needs to be added to the form data.
setValue("method", group)

Check warning on line 137 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L137 was not covered by tests
} else {
setSelectedGroup(group)

Check warning on line 139 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L139 was not covered by tests
}
}
return options.map((option) => (
<Card.AuthMethodListItem

Check warning on line 143 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added lines #L142 - L143 were not covered by tests
key={option}
group={option}
onClick={() => handleClick(option)}

Check warning on line 146 in packages/elements-react/src/components/card/card-two-step.tsx

View check run for this annotation

Codecov / codecov/patch

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

Added line #L146 was not covered by tests
/>
))
}

type BackButtonProps = {
onClick?: () => void
href?: string
Expand Down
7 changes: 5 additions & 2 deletions packages/elements-react/src/components/form/form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -182,9 +182,11 @@ type DeepPartialTwoLevels<T> = {

export type OryFlowComponentOverrides = DeepPartialTwoLevels<OryFlowComponents>

export type OryFormProps = PropsWithChildren
export type OryFormProps = PropsWithChildren<{
onAfterSubmit?: (method: string | number | boolean | undefined) => void
}>

export function OryForm({ children }: OryFormProps) {
export function OryForm({ children, onAfterSubmit }: OryFormProps) {
const { Form } = useComponents()
const flowContainer = useOryFlow()
const methods = useForm({
Expand Down Expand Up @@ -272,6 +274,7 @@ export function OryForm({ children }: OryFormProps) {
})
break
}
onAfterSubmit?.(data.method)
}

const hasMethods =
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,11 @@

import { useIntl } from "react-intl"
import { OryCardAuthMethodListItemProps } from "@ory/elements-react"

import code from "../../assets/icons/code.svg"
import passkey from "../../assets/icons/passkey.svg"
import password from "../../assets/icons/password.svg"
import webauthn from "../../assets/icons/webauthn.svg"
import { isGroupImmediateSubmit } from "../../utils/form"

const iconsMap: Record<string, typeof code> = {
code,
Expand All @@ -27,8 +27,9 @@ export function DefaultAuthMethodListItem({
return (
<div className="w-full hover:bg-forms-bg-hover px-2 py-1 rounded">
<button
className="flex text-left py-2 gap-3 cursor-pointer "
className="flex text-left py-2 gap-3 cursor-pointer"
onClick={onClick}
type={isGroupImmediateSubmit(group) ? "submit" : "button"}
>
<div className={"flex-none w-4 h-4 mt-[2px]"}>
{Icon && <Icon size={20} className="text-forms-fg-default" />}
Expand Down
7 changes: 7 additions & 0 deletions packages/elements-react/src/theme/default/utils/form.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
// Copyright © 2024 Ory Corp
// SPDX-License-Identifier: Apache-2.0

export function isGroupImmediateSubmit(group: string) {
// TODO: Other methods might also benefit from this.
return group === "code"

Check warning on line 6 in packages/elements-react/src/theme/default/utils/form.ts

View check run for this annotation

Codecov / codecov/patch

packages/elements-react/src/theme/default/utils/form.ts#L6

Added line #L6 was not covered by tests
}

0 comments on commit 37a9bd8

Please sign in to comment.