Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: settings flow components #208

Closed
wants to merge 112 commits into from
Closed
Changes from 1 commit
Commits
Show all changes
112 commits
Select commit Hold shift + click to select a range
7b61c00
chore(wip): add elements v1 packages
jonas-jonas Jul 19, 2024
26a51ac
chore: port remaining files over
jonas-jonas Jul 30, 2024
b720627
feat: add build system setup
jonas-jonas Jul 30, 2024
200d8bd
chore: move default theme to main package
jonas-jonas Jul 31, 2024
f3e3f67
chore: rename package to @ory/elements-react
jonas-jonas Jul 31, 2024
7452041
chore: format
jonas-jonas Jul 31, 2024
52fe48a
chore: remove client helpers package
jonas-jonas Aug 1, 2024
38f53eb
chore: format
jonas-jonas Aug 1, 2024
6907e2d
chore: upgrade versions
jonas-jonas Aug 2, 2024
dee0015
fix: linting
jonas-jonas Aug 2, 2024
687e20f
chore: add readme
jonas-jonas Aug 2, 2024
3fc44ce
chore: upgrade node version in CI
jonas-jonas Aug 2, 2024
e392ceb
chore: format
jonas-jonas Aug 2, 2024
3c297c0
chore: run chromatic only on PRs
jonas-jonas Aug 2, 2024
c821a4d
chore: export necessary files
jonas-jonas Aug 5, 2024
9e49add
chore: add playwright testing
jonas-jonas Aug 5, 2024
f8b9522
chore: add ci
jonas-jonas Aug 6, 2024
055f47c
chore: fix nrwl/nx-set-shas
jonas-jonas Aug 6, 2024
b9a3848
chore: u
jonas-jonas Aug 6, 2024
e9df65f
fix: command depedency
jonas-jonas Aug 6, 2024
8a0d489
chore: upgrade next js in example
jonas-jonas Aug 6, 2024
e6c1317
fix: commands in example
jonas-jonas Aug 6, 2024
6648498
fix: format
jonas-jonas Aug 6, 2024
042084f
chore: upgrade chromatic
jonas-jonas Aug 6, 2024
546bd1c
chore: install
jonas-jonas Aug 6, 2024
430e0e0
chore: chromatic
jonas-jonas Aug 6, 2024
f673c6a
chore: remove obsolete workfow
jonas-jonas Aug 6, 2024
6a9290b
chore: add main workflow
jonas-jonas Aug 6, 2024
4a67d92
chore: rename
jonas-jonas Aug 6, 2024
e3d9c97
chore: u
jonas-jonas Aug 6, 2024
c4c1d9d
fix: release config
jonas-jonas Aug 7, 2024
4ffc796
chore(release): publish 1.0.0-next.0
jonas-jonas Aug 7, 2024
c970bea
fix: provider logos
jonas-jonas Aug 7, 2024
ebb8763
chore: add dev workflow
jonas-jonas Aug 7, 2024
68c293d
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Aug 7, 2024
39518fe
chore: u
jonas-jonas Aug 7, 2024
d88133a
fix: eslint issues
jonas-jonas Aug 8, 2024
6e6cf8e
fix: depedencies
jonas-jonas Aug 8, 2024
c9056b1
chore: format
jonas-jonas Aug 8, 2024
db5abb2
chore: u
jonas-jonas Aug 8, 2024
8b5e6ee
fix: dts files in dev mode
jonas-jonas Aug 21, 2024
c6595de
chore: remove next js dependency
jonas-jonas Aug 21, 2024
348148f
fix: card header subtitle
jonas-jonas Aug 21, 2024
b77c289
fix: button line-height
jonas-jonas Aug 21, 2024
1043a25
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Aug 21, 2024
5358cb1
chore(release): publish 1.0.0-next.1
jonas-jonas Aug 21, 2024
34ef771
chore: add pre-release commands
jonas-jonas Aug 21, 2024
532280d
fix: use SDK url in footer links
jonas-jonas Aug 22, 2024
22bc4fa
chore(release): publish 1.0.0-next.2
jonas-jonas Aug 22, 2024
6603c10
chore: add updated readme
jonas-jonas Sep 3, 2024
bf7f9ad
fix: submit hidden identifier on second login step
jonas-jonas Sep 3, 2024
70e9fe7
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Sep 3, 2024
c4a5559
chore(release): publish 1.0.0-next.3
jonas-jonas Sep 3, 2024
9addb98
chore: add pre-release script
jonas-jonas Sep 3, 2024
005f1d2
chore: add missing typeVersions declaration to package.json
jonas-jonas Sep 4, 2024
d7cfadb
chore: make onClick on input optional
jonas-jonas Sep 4, 2024
13d3bcb
chore(release): publish 1.0.0-next.4
jonas-jonas Sep 4, 2024
6b1a8fd
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Sep 6, 2024
04110fc
feat: @testing-library/react based tests (#206)
mszekiel Sep 6, 2024
216c304
fix(core): use SDK instead of HTML form submissions
jonas-jonas Sep 9, 2024
5ebfd42
fix(core): use empty strings instead of undefined default values
jonas-jonas Sep 9, 2024
b16c2b5
fix(core): code form submission precendence
jonas-jonas Sep 9, 2024
47d221a
feat(theme): show resend code button on top of code input
jonas-jonas Sep 9, 2024
3a586b6
chore: add config to onSubmit handlers
jonas-jonas Sep 9, 2024
5bf8511
chore: format
jonas-jonas Sep 9, 2024
843cb31
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Sep 12, 2024
4e4cd38
chore: u
jonas-jonas Sep 12, 2024
030eaaa
chore: bundling tsup
mszekiel Sep 13, 2024
f02d2ff
chore: add stories for elements v1 (#210)
jonas-jonas Sep 16, 2024
5e24320
fix(theme)!: scope css classes with .ory-default-theme
jonas-jonas Sep 16, 2024
ec25adc
fix(theme): social sign in button styling
jonas-jonas Sep 16, 2024
3dcba98
chore: treat react-intl as external
jonas-jonas Sep 16, 2024
50730a2
fix(intl): use correct abbreveation for swedish locale
jonas-jonas Sep 16, 2024
2bc740b
chore: enable changelog generation
jonas-jonas Sep 16, 2024
d14ad40
chore: enforce module boundaries
jonas-jonas Sep 17, 2024
be1b630
fix(core): passkey script discovery
jonas-jonas Sep 17, 2024
e473992
chore: 1.0.0-next.5
jonas-jonas Sep 17, 2024
32ff27e
chore(intl): revert default language to english
jonas-jonas Sep 17, 2024
e4311d8
chore: remove git section from nx.json release
jonas-jonas Sep 17, 2024
62bc6f2
fix(intl): export locales object from package root (#213)
jonas-jonas Sep 18, 2024
597c72e
chore: format changelog
jonas-jonas Sep 18, 2024
25eaff0
chore: 1.0.0-next.6
jonas-jonas Sep 18, 2024
4bad2ce
chore: fix story book preview font
jonas-jonas Sep 19, 2024
a914896
fix: registration text in swedish translation
jonas-jonas Sep 22, 2024
a7113d7
chore: pin @ory/client-fetch to 1.15.3
jonas-jonas Sep 23, 2024
fa98d7f
chore: format
jonas-jonas Sep 24, 2024
3aa5c00
fix: show identifier_first node in card header (#215)
jonas-jonas Sep 25, 2024
79212f7
chore: revert snapshot deletion
jonas-jonas Sep 25, 2024
62aaea8
Merge remote-tracking branch 'origin/main' into jonas-jonas/elementsv1
jonas-jonas Sep 27, 2024
151ebaa
feat: add two-step login card (#211)
jonas-jonas Sep 27, 2024
d00cd1f
chore: disable false positive eslint rule
jonas-jonas Sep 27, 2024
1a8620d
chore(release): publish
jonas-jonas Sep 27, 2024
f1b5f61
chore: format
jonas-jonas Sep 27, 2024
ece5b63
fix!: remove ory-default-theme class (#221)
jonas-jonas Oct 7, 2024
c217288
fix: remove capitalize class from messages
jonas-jonas Oct 7, 2024
f0315be
chore(release): publish
jonas-jonas Oct 7, 2024
c93aff2
chore: add initial api extractor report
jonas-jonas Oct 9, 2024
0dcada5
fix: add missing swedish translations (#222)
jonas-jonas Oct 10, 2024
0c6233e
chore: add missing keys to translation files
jonas-jonas Oct 10, 2024
64f1def
chore(release): publish
jonas-jonas Oct 10, 2024
949e51b
fix: add missing translations in all places (#224)
jonas-jonas Oct 14, 2024
9c40a50
chore: format
jonas-jonas Oct 14, 2024
8adfc41
Merge branch 'main' into jonas-jonas/elementsv1
jonas-jonas Oct 14, 2024
3781df9
chore: format
jonas-jonas Oct 14, 2024
11cd0b8
chore(release): publish
jonas-jonas Oct 14, 2024
2d56b78
fix!: improve component naming (#218)
jonas-jonas Oct 14, 2024
eb6c905
refactor: rework intl configuration (#234)
jonas-jonas Oct 15, 2024
9e7d717
feat: settings sections and layout
mszekiel Oct 15, 2024
b7ef4c0
fix: formatting
mszekiel Oct 15, 2024
3ad9508
fix: rebase bugs
mszekiel Oct 15, 2024
34f5466
fix: consistent for internal setting components
mszekiel Oct 15, 2024
01ee9a1
fix: licenses
mszekiel Oct 16, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix!: remove ory-default-theme class (#221)
jonas-jonas authored Oct 7, 2024
commit ece5b631c2e5b969171fc4ca1c3ad5331692f976
63 changes: 5 additions & 58 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

8 changes: 3 additions & 5 deletions packages/elements-react-stories/.storybook/preview.tsx
Original file line number Diff line number Diff line change
@@ -29,11 +29,9 @@ const withI18next: Decorator = (Story, context) => {
const { locale } = context.globals

return (
<div className="ory-default-theme">
<IntlProvider locale={locale} defaultLocale="en">
<Story />
</IntlProvider>
</div>
<IntlProvider locale={locale} defaultLocale="en">
<Story />
</IntlProvider>
)
}

3 changes: 1 addition & 2 deletions packages/elements-react/package.json
Original file line number Diff line number Diff line change
@@ -45,8 +45,7 @@
"esbuild-plugin-svgr": "^2.1.0",
"eslint-plugin-react": "7.37.0",
"postcss": "8.4.47",
"postcss-prefix-selector": "1.16.1",
"tsup": "8.3.0"
"tsup": "8.2.3"
},
"keywords": [
"ory",
6 changes: 1 addition & 5 deletions packages/elements-react/postcss.config.ts
Original file line number Diff line number Diff line change
@@ -2,9 +2,5 @@
// SPDX-License-Identifier: Apache-2.0

module.exports = {
plugins: [
require("tailwindcss")(),
require("autoprefixer")(),
require("postcss-prefix-selector")({ prefix: ".ory-default-theme" }),
],
plugins: [require("tailwindcss")(), require("autoprefixer")()],
}
Original file line number Diff line number Diff line change
@@ -6,8 +6,8 @@
import { DefaultCardLogo } from "./logo"

export function DefaultCard({ children }: OryCardProps) {
return (

Check warning on line 9 in packages/elements-react/src/theme/default/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/index.tsx#L9

Added line #L9 was not covered by tests
<div className="ory-default-theme font-sans">
<div className="font-sans">
<div className="grid grid-cols-1 max-w-sm md:max-w-[480px] md:w-[480px] gap-8 bg-dialog-bg-default px-8 md:px-12 py-12 md:py-14 relative rounded-border-radius-cards border border-dialog-border-default">
{children}
<Badge />

Unchanged files with check annotations Beta

const {
flow: { ui },
config,
} = useOryFlow()

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

Codecov / codecov/patch

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

Added line #L32 was not covered by tests
const choosingMethod = isChoosingMethod(ui.nodes)

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

Codecov / codecov/patch

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

Added line #L34 was not covered by tests
const [selectedGroup, setSelectedGroup] = useState<

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

Codecov / codecov/patch

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

Added line #L36 was not covered by tests
UiNodeGroupEnum | undefined
>()
const Components = useComponents()
const { FormGroup } = useComponents()
const { flowType } = useOryFlow()

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

Codecov / codecov/patch

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

Added lines #L39 - L41 were not covered by tests
const nodeSorter = useNodeSorter()
const sortNodes = (a: UiNode, b: UiNode) => nodeSorter(a, b, { flowType })

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

Codecov / codecov/patch

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

Added lines #L43 - L44 were not covered by tests
const uniqueGroups = useNodesGroups(ui.nodes)

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

Codecov / codecov/patch

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

Added line #L46 was not covered by tests
const options: UiNodeGroupEnum[] = Object.values(UiNodeGroupEnum)

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

Codecov / codecov/patch

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

Added line #L48 was not covered by tests
.filter((group) => uniqueGroups[group]?.length)
.filter(
(group) =>
!(

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

Codecov / codecov/patch

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

Added lines #L51 - L52 were not covered by tests
[
UiNodeGroupEnum.Oidc,
UiNodeGroupEnum.Default,
const hasOIDC = Boolean(uniqueGroups.oidc?.length)
const zeroStepGroups = filterZeroStepGroups(ui.nodes)
const finalNodes = getFinalNodes(uniqueGroups, selectedGroup)

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

Codecov / codecov/patch

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

Added lines #L64 - L65 were not covered by tests
const step = selectedGroup
? ProcessStep.ExecuteAuthMethod
? ProcessStep.ChooseAuthMethod
: ProcessStep.ProvideIdentifier
return (

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

Codecov / codecov/patch

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

Added line #L73 was not covered by tests
<OryCard>
<OryCardHeader />
<OryCardContent>
{step === ProcessStep.ProvideIdentifier &&
zeroStepGroups
.sort(sortNodes)
.map((node, k) => <Node node={node} key={k} />)}

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

Codecov / codecov/patch

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

Added line #L86 was not covered by tests
{step === ProcessStep.ChooseAuthMethod && (
<>
{flowType === FlowType.Login && (
<BackButton href={config.project.login_ui_url} />
)}
{options.map((option) => (
<Components.AuthMethodListItem

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

Codecov / codecov/patch

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

Added lines #L92 - L93 were not covered by tests
key={option}
group={option}
onClick={() => setSelectedGroup(option)}

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

Codecov / codecov/patch

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

Added line #L96 was not covered by tests
/>
))}
</>
)}
{step === ProcessStep.ExecuteAuthMethod && (
<>
<BackButton onClick={() => setSelectedGroup(undefined)} />
{finalNodes.sort(sortNodes).map((node, k) => (
<Node node={node} key={k} />

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

Codecov / codecov/patch

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

Added lines #L103 - L105 were not covered by tests
))}
</>
)}
const BackButton = ({ onClick, href }: BackButtonProps) => {
const {
flow: { ui },
} = useOryFlow()
const Components = useComponents()

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

Codecov / codecov/patch

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

Added lines #L125 - L126 were not covered by tests
const nodeBackButton = ui.nodes.find(
(node) =>

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

Codecov / codecov/patch

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

Added lines #L128 - L129 were not covered by tests
// ("value" in node.attributes &&
// node.attributes.value === "profile:back") ||
"name" in node.attributes &&
)
if (!nodeBackButton) {
return null

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

Codecov / codecov/patch

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

Added line #L138 was not covered by tests
}
return (

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

Codecov / codecov/patch

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

Added line #L141 was not covered by tests
<Components.CurrentIdentifierButton
node={nodeBackButton}
attributes={nodeBackButton.attributes as UiNodeInputAttributes}
export type OryCardHeaderProps = Record<string, never>
export function OryCardHeader() {
const { CardHeader } = useComponents()
return <CardHeader />

Check warning on line 7 in packages/elements-react/src/components/card/header.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/header.tsx#L6-L7

Added lines #L6 - L7 were not covered by tests
}
export type OryCardContentProps = PropsWithChildren
export function OryCardContent({ children }: OryCardContentProps) {
const { CardContent } = useComponents()

Check warning on line 12 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L12

Added line #L12 was not covered by tests
if (children) {
return <CardContent>{children}</CardContent>

Check warning on line 15 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L15

Added line #L15 was not covered by tests
}
return (

Check warning on line 18 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L18

Added line #L18 was not covered by tests
<CardContent>
<OryCardValidationMessages />
<OryForm>
export type OryCardFooterProps = Record<string, never>
export function OryCardFooter() {
const { CardFooter } = useComponents()
return <CardFooter />

Check warning on line 43 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L42-L43

Added lines #L42 - L43 were not covered by tests
}
export type OryCardProps = PropsWithChildren
export function OryCard({ children }: OryCardProps) {
const { Card } = useComponents()

Check warning on line 49 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L49

Added line #L49 was not covered by tests
if (children) {
return <Card>{children}</Card>

Check warning on line 52 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L52

Added line #L52 was not covered by tests
}
return (

Check warning on line 55 in packages/elements-react/src/components/card/index.tsx

Codecov / codecov/patch

packages/elements-react/src/components/card/index.tsx#L55

Added line #L55 was not covered by tests
<Card>
<OryCardHeader />
<OryCardContent />
import { FlowContainer } from "../../util"
export function computeDefaultValues(flowContainer: FlowContainer): FormValues {
return flowContainer.flow.ui.nodes.reduce<FormValues>((acc, node) => {

Check warning on line 9 in packages/elements-react/src/components/form/form-helpers.ts

Codecov / codecov/patch

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

Added line #L9 was not covered by tests
if (isUiNodeInputAttributes(node.attributes)) {
if (node.attributes.name === "method") {
// Do not set the default values for this.
return acc

Check warning on line 13 in packages/elements-react/src/components/form/form-helpers.ts

Codecov / codecov/patch

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

Added line #L13 was not covered by tests
}
acc[node.attributes.name] = node.attributes.value ?? ""
}
return acc

Check warning on line 19 in packages/elements-react/src/components/form/form-helpers.ts

Codecov / codecov/patch

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

Added line #L19 was not covered by tests
}, {})
}
export type OryFormProps = PropsWithChildren
export function OryForm({ children }: OryFormProps) {
const { FormContainer } = useComponents()
const flowContainer = useOryFlow()
const methods = useForm({

Check warning on line 81 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/form.tsx#L79-L81

Added lines #L79 - L81 were not covered by tests
// TODO: Generify this, so we have typesafety in the submit handler.
defaultValues: computeDefaultValues(flowContainer),
})
const intl = useIntl()

Check warning on line 86 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L86 was not covered by tests
const onRedirect: OnRedirectHandler = (url, external) => {

Check warning on line 88 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L88 was not covered by tests
if (external) {
window.location.href = url
return

Check warning on line 91 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/form.tsx#L90-L91

Added lines #L90 - L91 were not covered by tests
}
// TODO(jonas): this should somehow be overridable by the user to allow next js specific redirects, or other frameworks.
window.location.href = url

Check warning on line 95 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L95 was not covered by tests
}
const handleSuccess = (flow: FlowContainer) => {
flowContainer.setFlowContainer(flow)
methods.reset(computeDefaultValues(flow))

Check warning on line 100 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/form.tsx#L98-L100

Added lines #L98 - L100 were not covered by tests
}
const onSubmit: SubmitHandler<FormValues> = async (data) => {

Check warning on line 103 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L103 was not covered by tests
switch (flowContainer.flowType) {
case FlowType.Login: {
const submitData: UpdateLoginFlowBody = {

Check warning on line 106 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L106 was not covered by tests
...(data as unknown as UpdateLoginFlowBody),
}
if (submitData.method === "code" && data.code) {
submitData.resend = ""

Check warning on line 110 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L110 was not covered by tests
}
console.log(submitData)
await onSubmitLogin(flowContainer, {

Check warning on line 113 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/form.tsx#L112-L113

Added lines #L112 - L113 were not covered by tests
onRedirect,
setFlowContainer: handleSuccess,
body: submitData,
})
break

Check warning on line 118 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L118 was not covered by tests
}
case FlowType.Registration: {
const submitData: UpdateRegistrationFlowBody = {

Check warning on line 121 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L121 was not covered by tests
...(data as unknown as UpdateRegistrationFlowBody),
}
if (submitData.method === "code" && submitData.code) {
submitData.resend = ""

Check warning on line 126 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L126 was not covered by tests
}
await onSubmitRegistration(flowContainer, {

Check warning on line 129 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L129 was not covered by tests
onRedirect,
setFlowContainer: handleSuccess,
body: submitData,
})
break

Check warning on line 134 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L134 was not covered by tests
}
case FlowType.Verification:
await onSubmitVerification(flowContainer, {

Check warning on line 137 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L137 was not covered by tests
onRedirect,
setFlowContainer: handleSuccess,
body: data as unknown as UpdateVerificationFlowBody,
})
break

Check warning on line 142 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L142 was not covered by tests
case FlowType.Recovery: {
const submitData: UpdateRecoveryFlowBody = {

Check warning on line 144 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L144 was not covered by tests
...(data as unknown as UpdateRecoveryFlowBody),
}
// TODO: We should probably fix this in Kratos, and give the code priority over the email. However, that would be breaking :(
if (data.code) {
submitData.email = ""

Check warning on line 149 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L149 was not covered by tests
}
await onSubmitRecovery(flowContainer, {

Check warning on line 151 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L151 was not covered by tests
onRedirect,
setFlowContainer: handleSuccess,
body: submitData,
})
break

Check warning on line 156 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L156 was not covered by tests
}
case FlowType.Settings:
await onSubmitSettings(flowContainer, {

Check warning on line 159 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L159 was not covered by tests
onRedirect,
setFlowContainer: handleSuccess,
body: data as unknown as UpdateSettingsFlowBody,
})
break

Check warning on line 164 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L164 was not covered by tests
}
}
const hasMethods =
flowContainer.flow.ui.nodes.filter((node) => {

Check warning on line 169 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L169 was not covered by tests
if (isUiNodeInputAttributes(node.attributes)) {
return node.attributes.name !== "csrf_token"

Check warning on line 171 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L171 was not covered by tests
} else if (isUiNodeAnchorAttributes(node.attributes)) {
return true

Check warning on line 173 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L173 was not covered by tests
} else if (isUiNodeImageAttributes(node.attributes)) {
return true

Check warning on line 175 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L175 was not covered by tests
} else if (isUiNodeScriptAttributes(node.attributes)) {
return true

Check warning on line 177 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L177 was not covered by tests
}
return false

Check warning on line 180 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L180 was not covered by tests
}).length > 0
if (!hasMethods && (flowContainer.flow.ui.messages ?? []).length === 0) {
// This is defined in Ory Kratos as well.
return intl.formatMessage({

Check warning on line 185 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L185 was not covered by tests
id: `identities.messages.${5000002}`,
defaultMessage:
"No authentication methods are available for this request. Please contact the site or app owner.",
})
}
return (

Check warning on line 192 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L192 was not covered by tests
<FormProvider {...methods}>
<FormContainer
action={flowContainer.flow.ui.action}
method={flowContainer.flow.ui.method}
onSubmit={(e) => void methods.handleSubmit(onSubmit)(e)}

Check warning on line 197 in packages/elements-react/src/components/form/form.tsx

Codecov / codecov/patch

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

Added line #L197 was not covered by tests
>
{children ?? (
<>
export function OryFormGroups({ children, groups }: HeadlessGroupProps) {
const {
flow: { ui },
} = useOryFlow()
const nodeSorter = useNodeSorter()
const { flowType } = useOryFlow()
const { FormGroup } = useComponents()
const nodes = ui.nodes
.filter((node) => groups.indexOf(node.group) > -1)
.sort((a, b) => nodeSorter(a, b, { flowType }))

Check warning on line 22 in packages/elements-react/src/components/form/groups.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/groups.tsx#L16-L22

Added lines #L16 - L22 were not covered by tests
return (

Check warning on line 24 in packages/elements-react/src/components/form/groups.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/groups.tsx#L24

Added line #L24 was not covered by tests
<FormGroup>
{children ??
nodes.map((node, k) => {
return <Node node={node} key={k} />

Check warning on line 28 in packages/elements-react/src/components/form/groups.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/groups.tsx#L27-L28

Added lines #L27 - L28 were not covered by tests
})}
</FormGroup>
)
>
export function OryCardValidationMessages({ ...props }: HeadlessMessagesProps) {
const { flow } = useOryFlow()
const messages = flow.ui.messages
const { MessageContainer } = useComponents()

Check warning on line 13 in packages/elements-react/src/components/form/messages.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/messages.tsx#L11-L13

Added lines #L11 - L13 were not covered by tests
if (!messages) {
return null

Check warning on line 16 in packages/elements-react/src/components/form/messages.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/messages.tsx#L16

Added line #L16 was not covered by tests
}
return (

Check warning on line 19 in packages/elements-react/src/components/form/messages.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/messages.tsx#L19

Added line #L19 was not covered by tests
<MessageContainer {...props}>
{messages?.map((message) => (
<HeadlessMessage key={message.id} message={message} />

Check warning on line 22 in packages/elements-react/src/components/form/messages.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/messages.tsx#L21-L22

Added lines #L21 - L22 were not covered by tests
))}
</MessageContainer>
)
}
export function HeadlessMessage({ message }: HeadlessMessageProps) {
const { Message } = useComponents()
return <Message message={message} />

Check warning on line 34 in packages/elements-react/src/components/form/messages.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/messages.tsx#L33-L34

Added lines #L33 - L34 were not covered by tests
}
attributes: UiNodeInputAttributes
onClick?: MouseEventHandler
}): ReactNode => {
const Components = useComponents()
const nodeType = attributes.type

Check warning on line 18 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added lines #L17 - L18 were not covered by tests
const {
onloadTrigger: onloadTrigger,
onclickTrigger,
onload: _ignoredOnload,
//
...attrs
} = attributes

Check warning on line 27 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L27 was not covered by tests
const hasRun = useRef(false)
useEffect(
() => {

Check warning on line 31 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added lines #L29 - L31 were not covered by tests
if (!hasRun.current && onloadTrigger) {
hasRun.current = true
triggerToWindowCall(onloadTrigger)

Check warning on line 34 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added lines #L33 - L34 were not covered by tests
}
},
// TODO(jonas): make sure onloadTrigger is stable
[],
)
const handleClick: MouseEventHandler = () => {

Check warning on line 42 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L42 was not covered by tests
if (onclickTrigger) {
triggerToWindowCall(onclickTrigger)

Check warning on line 44 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L44 was not covered by tests
}
}
case UiNodeInputAttributesTypeEnum.Submit:
case UiNodeInputAttributesTypeEnum.Button:
if (isSocial) {
return <Components.SocialButton attributes={attrs} node={node} />

Check warning on line 60 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L60 was not covered by tests
}
if (isResend) {
return null

Check warning on line 63 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L63 was not covered by tests
}
return (

Check warning on line 66 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L66 was not covered by tests
<Components.Button
attributes={attrs}
node={node}
/>
)
case UiNodeInputAttributesTypeEnum.DatetimeLocal:
throw new Error("Not implemented")

Check warning on line 74 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L74 was not covered by tests
case UiNodeInputAttributesTypeEnum.Checkbox:
return (

Check warning on line 76 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L76 was not covered by tests
<Components.Checkbox
attributes={attrs}
node={node}
/>
)
case UiNodeInputAttributesTypeEnum.Hidden:
return (

Check warning on line 84 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L84 was not covered by tests
<Components.Input
attributes={attrs}
node={node}
)
default:
if (isPinCodeInput) {
return (

Check warning on line 93 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L93 was not covered by tests
<Components.Label attributes={attrs} node={node}>
<Components.PinCodeInput
attributes={attrs}
)
}
return (

Check warning on line 104 in packages/elements-react/src/components/form/nodes/input.tsx

Codecov / codecov/patch

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

Added line #L104 was not covered by tests
<Components.Label attributes={attrs} node={node}>
<Components.Input
attributes={attrs}
const Components = useComponents()
if (isUiNodeImageAttributes(node.attributes)) {
return <Components.Image node={node} attributes={node.attributes} />

Check warning on line 23 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L23

Added line #L23 was not covered by tests
} else if (isUiNodeTextAttributes(node.attributes)) {
const attrs = node.attributes
return <Components.Text attributes={attrs} node={node} />
} else if (isUiNodeInputAttributes(node.attributes)) {
return (

Check warning on line 28 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L28

Added line #L28 was not covered by tests
<NodeInput node={node} attributes={node.attributes} onClick={onClick} />
)
} else if (isUiNodeAnchorAttributes(node.attributes)) {
return <Components.LinkButton attributes={node.attributes} node={node} />

Check warning on line 32 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L32

Added line #L32 was not covered by tests
} else if (isUiNodeScriptAttributes(node.attributes)) {
const {
crossorigin,
referrerpolicy,
node_type: _nodeType,
...attributes
} = node.attributes

Check warning on line 39 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L39

Added line #L39 was not covered by tests
return (

Check warning on line 41 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L41

Added line #L41 was not covered by tests
<script
crossOrigin={
crossorigin as "anonymous" | "use-credentials" | "" | undefined
/>
)
}
return null

Check warning on line 51 in packages/elements-react/src/components/form/nodes/node.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/nodes/node.tsx#L51

Added line #L51 was not covered by tests
}
}: HeadlessSocialButtonsProps) {
const {
flow: { ui },
} = useOryFlow()
const { setValue } = useFormContext()

Check warning on line 29 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L28-L29

Added lines #L28 - L29 were not covered by tests
// Only get the oidc nodes.
const filteredNodes = ui.nodes.filter((node) => node.group === "oidc")

Check warning on line 32 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L32

Added line #L32 was not covered by tests
const { SocialButtonContainer, HorizontalDivider, SocialButton } =
useComponents()

Check warning on line 35 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L35

Added line #L35 was not covered by tests
if (filteredNodes.length === 0) {
return null

Check warning on line 38 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L38

Added line #L38 was not covered by tests
}
// Are there other first-factor nodes available?
const otherNodes = ui.nodes.filter(

Check warning on line 42 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L42

Added line #L42 was not covered by tests
(node) => node.group !== "oidc" && node.group !== "default",
)
return (

Check warning on line 46 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L46

Added line #L46 was not covered by tests
<>
<SocialButtonContainer nodes={filteredNodes}>
{children ??
filteredNodes.map((node, k) => {
return (

Check warning on line 51 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L50-L51

Added lines #L50 - L51 were not covered by tests
<SocialButton
node={node}
key={k}
attributes={node.attributes as UiNodeInputAttributes}
onClick={() => {
setValue(

Check warning on line 57 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L56-L57

Added lines #L56 - L57 were not covered by tests
"provider",
(node.attributes as UiNodeInputAttributes).value,
)
setValue("method", "oidc")

Check warning on line 61 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L61

Added line #L61 was not covered by tests
}}
/>
)
export function OryFormSocialButtonsForm() {
const {
flow: { ui },
} = useOryFlow()

Check warning on line 77 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L77

Added line #L77 was not covered by tests
// Only get the oidc nodes.
const filteredNodes = ui.nodes.filter((node) => node.group === "oidc")

Check warning on line 80 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L80

Added line #L80 was not covered by tests
if (filteredNodes.length === 0) {
return null

Check warning on line 83 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L83

Added line #L83 was not covered by tests
}
return (

Check warning on line 86 in packages/elements-react/src/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/components/form/social.tsx#L86

Added line #L86 was not covered by tests
<OryForm>
<OryFormSocialButtons />
</OryForm>
export type HorizontalDividerProps = Record<string, never>
export function OryFormGroupDivider() {
const { HorizontalDivider } = useComponents()

Check warning on line 7 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L7

Added line #L7 was not covered by tests
const {
flow: { ui },
} = useOryFlow()

Check warning on line 10 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L10

Added line #L10 was not covered by tests
// Only get the oidc nodes.
const filteredNodes = ui.nodes.filter((node) => node.group === "oidc")

Check warning on line 13 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L13

Added line #L13 was not covered by tests
// Are there other first-factor nodes available?
const otherNodes = ui.nodes.filter(

Check warning on line 16 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L16

Added line #L16 was not covered by tests
(node) => node.group !== "oidc" && node.group !== "default",
)
if (filteredNodes.length > 0 && otherNodes.length > 0) {
return <HorizontalDivider />

Check warning on line 21 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L21

Added line #L21 was not covered by tests
}
return null

Check warning on line 23 in packages/elements-react/src/components/generic/divider.tsx

Codecov / codecov/patch

packages/elements-react/src/components/generic/divider.tsx#L23

Added line #L23 was not covered by tests
}
const ComponentContext = createContext<ComponentContextValue>({
components: null!, // fine because we throw an error if it's not provided
nodeSorter: () => 0,

Check warning on line 12 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L12

Added line #L12 was not covered by tests
})
export function useComponents() {
const ctx = useContext(ComponentContext)
if (!ctx) {
throw new Error("useComponents must be used within a ComponentProvider")

Check warning on line 18 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L18

Added line #L18 was not covered by tests
}
return ctx.components
}
export function useNodeSorter() {
const ctx = useContext(ComponentContext)

Check warning on line 24 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L24

Added line #L24 was not covered by tests
if (!ctx) {
throw new Error("useComponents must be used within a ComponentProvider")

Check warning on line 26 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L26

Added line #L26 was not covered by tests
}
return ctx.nodeSorter

Check warning on line 28 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L28

Added line #L28 was not covered by tests
}
const defaultGroupOrder = [
"webauthn",
]
function defaultNodeSorter(

Check warning on line 42 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L42

Added line #L42 was not covered by tests
a: UiNode,
b: UiNode,
// ctx: { flowType: string },
const aGroupWeight = defaultGroupOrder.indexOf(a.group) ?? 999
const bGroupWeight = defaultGroupOrder.indexOf(b.group) ?? 999
return aGroupWeight - bGroupWeight

Check warning on line 50 in packages/elements-react/src/context/component.tsx

Codecov / codecov/patch

packages/elements-react/src/context/component.tsx#L50

Added line #L50 was not covered by tests
}
type ComponentProviderProps = {
* @returns The current flow container
*/
export function useOryFlow() {
const ctx = useContext(OryFlowContext)

Check warning on line 16 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L16

Added line #L16 was not covered by tests
if (!ctx) {
throw new Error("useOryFlow must be used within a OryFlowProvider")

Check warning on line 18 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L18

Added line #L18 was not covered by tests
}
return ctx

Check warning on line 21 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L21

Added line #L21 was not covered by tests
}
export type FlowContainerSetter = Dispatch<Partial<FlowContainer>>
children,
...container
}: OryFlowProviderProps) {
const [flowContainer, setFlowContainer] = useState(container)

Check warning on line 39 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L39

Added line #L39 was not covered by tests
return (

Check warning on line 41 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L41

Added line #L41 was not covered by tests
<OryFlowContext.Provider
value={
{
...flowContainer,
setFlowContainer: (updatedContainer) => {
setFlowContainer(
(container) =>
({

Check warning on line 49 in packages/elements-react/src/context/flow-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/flow-context.tsx#L46-L49

Added lines #L46 - L49 were not covered by tests
...container,
...updatedContainer,
}) as FlowContainer,
const intlCtx = useContext(IntlContext)
if (intlCtx) {
return children

Check warning on line 189 in packages/elements-react/src/context/intl-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/intl-context.tsx#L189

Added line #L189 was not covered by tests
}
let translation = locales.en
{...intlProps}
onWarn={() => ({})}
defaultRichTextElements={{
del: (chunks) => <del>{chunks}</del>,

Check warning on line 215 in packages/elements-react/src/context/intl-context.tsx

Codecov / codecov/patch

packages/elements-react/src/context/intl-context.tsx#L215

Added line #L215 was not covered by tests
}}
>
{children}
components: Components,
...props
}: ProviderProps<T>) {
const { locale, defaultLocale, ...oryFlowProps } = props

Check warning on line 25 in packages/elements-react/src/context/provider.tsx

Codecov / codecov/patch

packages/elements-react/src/context/provider.tsx#L25

Added line #L25 was not covered by tests
return (

Check warning on line 27 in packages/elements-react/src/context/provider.tsx

Codecov / codecov/patch

packages/elements-react/src/context/provider.tsx#L27

Added line #L27 was not covered by tests
<IntlProvider locale={locale ?? "en"} defaultLocale={defaultLocale ?? "en"}>
<OryFlowProvider {...oryFlowProps}>
<OryComponentProvider components={Components}>
...renderOptions
}: RenderOptions & { providerProps: ProviderProps<SupportedTranslations> },
) {
return render(ui, {
wrapper: ({ children }) => (
<OryProvider {...providerProps}>{children}</OryProvider>

Check warning on line 48 in packages/elements-react/src/tests/jest/test-utils.tsx

Codecov / codecov/patch

packages/elements-react/src/tests/jest/test-utils.tsx#L46-L48

Added lines #L46 - L48 were not covered by tests
),
...renderOptions,
})
onClick,
group,
}: HeadlessAuthMethodListItemProps) {
const intl = useIntl()

Check warning on line 21 in packages/elements-react/src/theme/default/components/card/auth-methods.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/auth-methods.tsx#L21

Added line #L21 was not covered by tests
const Icon = iconsMap[group] || null
return (

Check warning on line 24 in packages/elements-react/src/theme/default/components/card/auth-methods.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/auth-methods.tsx#L24

Added line #L24 was not covered by tests
<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 "
import OryLogoVertical from "../../assets/ory-badge-vertical.svg"
export function Badge() {
return (

Check warning on line 5 in packages/elements-react/src/theme/default/components/card/badge.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/badge.tsx#L5

Added line #L5 was not covered by tests
<div className="font-bold bg-branding-bg-default absolute max-md:rounded-b-md p-2 max-md:bottom-0 max-md:translate-y-full max-md:left-8 md:right-0 md:translate-x-full md:top-8 md:rounded-r-md">
<OryLogoHorizontal width={22} height={8} className="md:hidden" />
<OryLogoVertical width={8} height={22} className="max-md:hidden" />
import { OryCardContentProps } from "@ory/elements-react"
export function DefaultCardContent({ children }: OryCardContentProps) {
return children

Check warning on line 4 in packages/elements-react/src/theme/default/components/card/content.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/content.tsx#L4

Added line #L4 was not covered by tests
}
}: HeadlessCurrentIdentifierProps) {
const Element = onClick ? "button" : "a"
return (

Check warning on line 12 in packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx#L12

Added line #L12 was not covered by tests
<div>
<Element
className="cursor-pointer py-1.5 px-3 rounded-full border border-button-identifier-border-default bg-button-identifier-bg-default hover:border-button-identifier-border-hover hover:bg-button-identifier-bg-hover transition-colors inline-flex gap-1 items-center"

Check warning on line 6 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L6

Added line #L6 was not covered by tests

Check warning on line 9 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L9

Added line #L9 was not covered by tests

Check warning on line 11 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L11

Added line #L11 was not covered by tests

Check warning on line 13 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L13

Added line #L13 was not covered by tests

Check warning on line 15 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L15

Added line #L15 was not covered by tests

Check warning on line 17 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L17

Added line #L17 was not covered by tests

Check warning on line 21 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L21

Added line #L21 was not covered by tests

Check warning on line 24 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L23-L24

Added lines #L23 - L24 were not covered by tests

Check warning on line 30 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L28-L30

Added lines #L28 - L30 were not covered by tests

Check warning on line 33 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L33

Added line #L33 was not covered by tests

Check warning on line 37 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L36-L37

Added lines #L36 - L37 were not covered by tests

Check warning on line 39 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L39

Added line #L39 was not covered by tests

Check warning on line 42 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L42

Added line #L42 was not covered by tests

Check warning on line 65 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L61-L65

Added lines #L61 - L65 were not covered by tests

Check warning on line 67 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L67

Added line #L67 was not covered by tests

Check warning on line 69 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L69

Added line #L69 was not covered by tests

Check warning on line 89 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L88-L89

Added lines #L88 - L89 were not covered by tests

Check warning on line 93 in packages/elements-react/src/theme/default/components/card/footer.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/footer.tsx#L92-L93

Added lines #L92 - L93 were not covered by tests
import { useComponents, useOryFlow } from "@ory/elements-react"
import { constructCardHeaderText } from "../../utils/constructCardHeader"
function InnerCardHeader({ title, text }: { title: string; text?: string }) {
const { CardLogo } = useComponents()
return (

Check warning on line 6 in packages/elements-react/src/theme/default/components/card/header.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/header.tsx#L4-L6

Added lines #L4 - L6 were not covered by tests
<header className="flex flex-col gap-8 antialiased">
<CardLogo />
<div>
}
export function DefaultCardHeader() {
const context = useOryFlow()
const { title, description } = constructCardHeaderText(

Check warning on line 21 in packages/elements-react/src/theme/default/components/card/header.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/header.tsx#L20-L21

Added lines #L20 - L21 were not covered by tests
context.flow.ui.nodes,
context,
)
return <InnerCardHeader title={title} text={description} />

Check warning on line 26 in packages/elements-react/src/theme/default/components/card/header.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/header.tsx#L26

Added line #L26 was not covered by tests
}
import { useOryFlow } from "@ory/elements-react"
export function DefaultCardLogo() {
const flow = useOryFlow()

Check warning on line 4 in packages/elements-react/src/theme/default/components/card/logo.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/logo.tsx#L4

Added line #L4 was not covered by tests
if (flow.config.logoUrl) {
return <img src={flow.config.logoUrl} width={100} height={36} alt="Logo" />

Check warning on line 7 in packages/elements-react/src/theme/default/components/card/logo.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/logo.tsx#L7

Added line #L7 was not covered by tests
}
return (

Check warning on line 10 in packages/elements-react/src/theme/default/components/card/logo.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/card/logo.tsx#L10

Added line #L10 was not covered by tests
<h1
className={"text-xl font-semibold leading-normal text-dialog-fg-default"}
>
node_type: _ignoredNodeType,
// End of skipped attributes
...rest
} = attributes
const intl = useIntl()
const label = getNodeLabel(node)

Check warning on line 25 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L23-L25

Added lines #L23 - L25 were not covered by tests
const {
formState: { isSubmitting },
setValue,
} = useFormContext()

Check warning on line 29 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L29

Added line #L29 was not covered by tests
const isPrimary =
attributes.name === "method" ||
attributes.name.includes("passkey") ||
attributes.name.includes("webauthn")
return (

Check warning on line 36 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L36

Added line #L36 was not covered by tests
<button
{...rest}
value={value}
name={name}
type={type === "button" ? "button" : "submit"} // TODO
onSubmit={() => {
setValue(name, value)

Check warning on line 43 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L42-L43

Added lines #L42 - L43 were not covered by tests
}}
onClick={(e) => {

Check warning on line 45 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L45

Added line #L45 was not covered by tests
if (onClick) {
onClick(e)

Check warning on line 47 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L47

Added line #L47 was not covered by tests
}
if (type !== "button") {
setValue(name, value)

Check warning on line 51 in packages/elements-react/src/theme/default/components/form/button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/button.tsx#L51

Added line #L51 was not covered by tests
}
}}
className={cn(
import { formatMessage, messageTestId } from "@ory/elements-react"
import { getNodeLabel } from "@ory/client-fetch"
function CheckboxSVG() {
return (

Check warning on line 11 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L10-L11

Added lines #L10 - L11 were not covered by tests
<svg
className="absolute w-4 h-4 hidden peer-checked:block"
xmlns="http://www.w3.org/2000/svg"
onclick: _onclick,
// End of skipped attributes
...attributes
} = initialAttributes

Check warning on line 46 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L46

Added line #L46 was not covered by tests
const intl = useIntl()
const label = getNodeLabel(node)
const [checked, setChecked] = useState(Boolean(value))
const { register } = useForm()

Check warning on line 51 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L48-L51

Added lines #L48 - L51 were not covered by tests
return (

Check warning on line 53 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L53

Added line #L53 was not covered by tests
<div
className="flex antialiased gap-3 self-stretch item-start"
onClick={() => {
setChecked(!checked)

Check warning on line 57 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L56-L57

Added lines #L56 - L57 were not covered by tests
}}
>
<div className="flex h-5 items-center">
<label className="text-sm font-normal leading-normal text-forms-fg-default">
{label && formatMessage(label, intl)}
</label>
{node.messages.map((message) => (
<span

Check warning on line 82 in packages/elements-react/src/theme/default/components/form/checkbox.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/checkbox.tsx#L81-L82

Added lines #L81 - L82 were not covered by tests
key={message.id}
className="text-sm text-red-900 mt-1"
{...messageTestId(message)}
export function DefaultGroupContainer({
children,
}: HeadlessGroupContainerProps) {
return <div className="grid grid-cols-1 gap-6">{children}</div>

Check warning on line 6 in packages/elements-react/src/theme/default/components/form/group-container.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/group-container.tsx#L6

Added line #L6 was not covered by tests
}
export function DefaultHorizontalDivider() {
return <hr className="border-dialog-border-default" />

Check warning on line 2 in packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/horizontal-divider.tsx#L2

Added line #L2 was not covered by tests
}
export function DefaultImage({ attributes }: HeadlessImageProps) {
// const intl = useIntl()
return (

Check warning on line 5 in packages/elements-react/src/theme/default/components/form/image.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/image.tsx#L5

Added line #L5 was not covered by tests
<figure>
<img {...attributes} />
</figure>
action,
method,
}: PropsWithChildren<HeadlessFormProps>) {
return (

Check warning on line 12 in packages/elements-react/src/theme/default/components/form/index.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/index.tsx#L12

Added line #L12 was not covered by tests
<form
onSubmit={onSubmit}
noValidate
export function DefaultMessageContainer({ children }: PropsWithChildren) {
if (!children || (Array.isArray(children) && children.length === 0)) {
return null

Check warning on line 27 in packages/elements-react/src/theme/default/components/form/index.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/index.tsx#L27

Added line #L27 was not covered by tests
}
return <section className="text-left">{children}</section>

Check warning on line 30 in packages/elements-react/src/theme/default/components/form/index.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/index.tsx#L30

Added line #L30 was not covered by tests
}
export function DefaultMessage({ message }: HeadlessMessageProps) {
return (

Check warning on line 34 in packages/elements-react/src/theme/default/components/form/index.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/index.tsx#L34

Added line #L34 was not covered by tests
<span
className={cn("text-sm mt-1 leading-normal", {
"text-forms-fg-error": message.type === "error",
attributes,
onClick,
}: HeadlessInputProps) => {
const label = getNodeLabel(node)
const { register } = useFormContext()
const { value, autocomplete, name, maxlength, ...rest } = attributes

Check warning on line 12 in packages/elements-react/src/theme/default/components/form/input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/input.tsx#L10-L12

Added lines #L10 - L12 were not covered by tests
return (

Check warning on line 14 in packages/elements-react/src/theme/default/components/form/input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/input.tsx#L14

Added line #L14 was not covered by tests
<input
{...rest}
onClick={onClick}
attributes,
...rest
}: HeadlessLabelProps) {
const intl = useIntl()
const label = getNodeLabel(node)
const { config, flowType } = useOryFlow()

Check warning on line 16 in packages/elements-react/src/theme/default/components/form/label.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/label.tsx#L14-L16

Added lines #L14 - L16 were not covered by tests
const isPassword = attributes.type === "password"

Check warning on line 18 in packages/elements-react/src/theme/default/components/form/label.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/label.tsx#L18

Added line #L18 was not covered by tests
const isCode = attributes.name === "code"

Check warning on line 20 in packages/elements-react/src/theme/default/components/form/label.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/label.tsx#L20

Added line #L20 was not covered by tests
return (

Check warning on line 22 in packages/elements-react/src/theme/default/components/form/label.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/label.tsx#L22

Added line #L22 was not covered by tests
<span className="flex flex-col antialiased gap-1">
{label && (
<span className="inline-flex justify-between">
</span>
)}
{children}
{node.messages.map((message) => (
<span

Check warning on line 59 in packages/elements-react/src/theme/default/components/form/label.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/label.tsx#L58-L59

Added lines #L58 - L59 were not covered by tests
key={message.id}
className={cn("text-sm leading-normal capitalize", {
"text-forms-fg-error": message.type === "error",

Check warning on line 14 in packages/elements-react/src/theme/default/components/form/link-button.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/link-button.tsx#L11-L14

Added lines #L11 - L14 were not covered by tests
import { HeadlessInputProps } from "@ory/elements-react"
export const DefaultPinCodeInput = ({ attributes }: HeadlessInputProps) => {
const { setValue, watch } = useFormContext()
const { maxlength, name } = attributes

Check warning on line 8 in packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx#L7-L8

Added lines #L7 - L8 were not covered by tests
const elements = maxlength ?? 6
const handleInputChange = (v: string) => {
setValue(name, v)

Check warning on line 12 in packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx#L11-L12

Added lines #L11 - L12 were not covered by tests
}
const value = watch(name)

Check warning on line 15 in packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx#L15

Added line #L15 was not covered by tests
return (

Check warning on line 17 in packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx#L17

Added line #L17 was not covered by tests
<div
className={`grid grid-flow-col grid-cols-${maxlength} gap-3 auto-cols-fr rtl:space-x-reverse`}
>
value={value}
>
<InputOTPGroup className="w-full space-x-2 justify-between">
{[...Array(elements)].map((_, index) => (
<InputOTPSlot

Check warning on line 29 in packages/elements-react/src/theme/default/components/form/pin-code-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/pin-code-input.tsx#L28-L29

Added lines #L28 - L29 were not covered by tests
index={index}
key={index}
className="text-center px-1.5 py-2.5 h-10 w-11 md:w-14 md:h-12 border border-radius border-solid rounded-border-radius-forms border-forms-border-default bg-forms-bg-default"
const InputOTP = React.forwardRef<
React.ElementRef<typeof OTPInput>,
React.ComponentPropsWithoutRef<typeof OTPInput>
>(({ className, containerClassName, ...props }, ref) => (
<OTPInput

Check warning on line 12 in packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx#L11-L12

Added lines #L11 - L12 were not covered by tests
ref={ref}
containerClassName={cn(
"flex items-center gap-2 has-[:disabled]:opacity-50",
const InputOTPGroup = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div">
>(({ className, ...props }, ref) => (
<div ref={ref} className={cn("flex items-center", className)} {...props} />

Check warning on line 28 in packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx#L27-L28

Added lines #L27 - L28 were not covered by tests
))
InputOTPGroup.displayName = "InputOTPGroup"
const InputOTPSlot = React.forwardRef<
React.ElementRef<"div">,
React.ComponentPropsWithoutRef<"div"> & { index: number }
>(({ index, className, ...props }, ref) => {
const inputOTPContext = React.useContext(OTPInputContext)
const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]

Check warning on line 37 in packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx#L35-L37

Added lines #L35 - L37 were not covered by tests
return (

Check warning on line 39 in packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/shadcn/otp-input.tsx#L39

Added line #L39 was not covered by tests
<div
ref={ref}
className={cn(
import logos from "../../provider-logos"
import { cn } from "../../utils/cn"
function extractProvider(context: object | undefined): string | undefined {

Check warning on line 9 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L9

Added line #L9 was not covered by tests
if (
context &&
typeof context === "object" &&
"provider" in context &&
typeof context.provider === "string"
) {
return context.provider

Check warning on line 16 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L16

Added line #L16 was not covered by tests
}
return undefined

Check warning on line 18 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L18

Added line #L18 was not covered by tests
}
export function DefaultButtonSocial({
type: _ignoredType,
name: _ignoredName,
...props
} = attributes

Check warning on line 31 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L31

Added line #L31 was not covered by tests
const {
flow: { ui },
} = useOryFlow()

Check warning on line 34 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L34

Added line #L34 was not covered by tests
const oidcNodeCount =
ui.nodes.filter((node) => node.group === "oidc").length ?? 0
const Logo = logos[attributes.value]

Check warning on line 39 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L39

Added line #L39 was not covered by tests
const showLabel = oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0
const provider = extractProvider(node.meta.label?.context) ?? ""
return (

Check warning on line 45 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L45

Added line #L45 was not covered by tests
<button
className={cn(
"gap-3 ring-1 ring-forms-border-default bg-button-secondary-bg-default hover:bg-button-secondary-bg-hover transition-colors rounded flex items-center justify-center py-2.5 px-4 md:py-4",
children,
nodes,
}: HeadlessSocialButtonContainerProps) {
return (

Check warning on line 83 in packages/elements-react/src/theme/default/components/form/social.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/social.tsx#L83

Added line #L83 was not covered by tests
<div
className={cn("grid gap-3", {
// needed because tailwind is not compiling dynamic classes
import { cn } from "../../utils/cn"
export function Spinner({ className }: { className?: string }) {
return (

Check warning on line 4 in packages/elements-react/src/theme/default/components/form/spinner.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/components/form/spinner.tsx#L4

Added line #L4 was not covered by tests
<svg
aria-hidden="true"
role="status"
children,
components: flowOverrideComponents,
}: PropsWithChildren<LoginFlowContextProps>) {
const components = {

Check warning on line 24 in packages/elements-react/src/theme/default/flows/login.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/login.tsx#L24

Added line #L24 was not covered by tests
...OryDefaultComponents,
...flowOverrideComponents,
}
return (

Check warning on line 28 in packages/elements-react/src/theme/default/flows/login.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/login.tsx#L28

Added line #L28 was not covered by tests
<OryProvider
config={config}
flow={flow}
children,
components: flowOverrideComponents,
}: PropsWithChildren<RecoveryFlowContextProps>) {
const components = {

Check warning on line 24 in packages/elements-react/src/theme/default/flows/recovery.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/recovery.tsx#L24

Added line #L24 was not covered by tests
...OryDefaultComponents,
...flowOverrideComponents,
}
return (

Check warning on line 28 in packages/elements-react/src/theme/default/flows/recovery.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/recovery.tsx#L28

Added line #L28 was not covered by tests
<OryProvider
config={config}
flow={flow}
components: flowOverrideComponents,
config,
}: PropsWithChildren<RegistrationFlowContextProps>) {
const components = {

Check warning on line 24 in packages/elements-react/src/theme/default/flows/registration.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/registration.tsx#L24

Added line #L24 was not covered by tests
...OryDefaultComponents,
...flowOverrideComponents,
}
return (

Check warning on line 28 in packages/elements-react/src/theme/default/flows/registration.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/registration.tsx#L28

Added line #L28 was not covered by tests
<OryProvider
config={config}
flow={flow}
children,
components: flowOverrideComponents,
}: PropsWithChildren<SettingsFlowContextProps>) {
const components = {

Check warning on line 24 in packages/elements-react/src/theme/default/flows/settings.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/settings.tsx#L24

Added line #L24 was not covered by tests
...OryDefaultComponents,
...flowOverrideComponents,
}
return (

Check warning on line 28 in packages/elements-react/src/theme/default/flows/settings.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/settings.tsx#L28

Added line #L28 was not covered by tests
<OryProvider
config={config}
flow={flow}
children,
components: flowOverrideComponents,
}: PropsWithChildren<VerificationFlowContextProps>) {
const components = {

Check warning on line 24 in packages/elements-react/src/theme/default/flows/verification.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/verification.tsx#L24

Added line #L24 was not covered by tests
...OryDefaultComponents,
...flowOverrideComponents,
}
return (

Check warning on line 28 in packages/elements-react/src/theme/default/flows/verification.tsx

Codecov / codecov/patch

packages/elements-react/src/theme/default/flows/verification.tsx#L28

Added line #L28 was not covered by tests
<OryProvider
config={config}
flow={flow}
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))

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

Codecov / codecov/patch

packages/elements-react/src/theme/default/utils/cn.ts#L8

Added line #L8 was not covered by tests
}
}
// TODO: This should not happen, as the switch is exhaustive, but typescript doesn't think so
return {

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

Codecov / codecov/patch

packages/elements-react/src/theme/default/utils/constructCardHeader.ts#L135

Added line #L135 was not covered by tests
title: "Error",
description: "An error occurred",
}
sdkUrl: string,
opts: Partial<ConfigurationParameters> = {},
) {
const config = new Configuration({

Check warning on line 14 in packages/elements-react/src/util/client.ts

Codecov / codecov/patch

packages/elements-react/src/util/client.ts#L14

Added line #L14 was not covered by tests
...opts,
basePath: sdkUrl,
headers: {
...opts.headers,
},
})
return new FrontendApi(config)

Check warning on line 22 in packages/elements-react/src/util/client.ts

Codecov / codecov/patch

packages/elements-react/src/util/client.ts#L22

Added line #L22 was not covered by tests
}
export function formatMessage(uiText: UiText | undefined, intl: IntlShape) {
if (!uiText) {
return ""

Check warning on line 9 in packages/elements-react/src/util/i18n/index.ts

Codecov / codecov/patch

packages/elements-react/src/util/i18n/index.ts#L9

Added line #L9 was not covered by tests
}
return uiTextToFormattedMessage(uiText, intl)
}
// context might provide an array of objects instead of a single object
// for example when looking up a recovery code
if (Array.isArray(value)) {
return {

Check warning on line 65 in packages/elements-react/src/util/i18n/index.ts

Codecov / codecov/patch

packages/elements-react/src/util/i18n/index.ts#L65

Added line #L65 was not covered by tests
...accumulator,
[key]: value,
[key + "_list"]: intl.formatList<string>(value),
}
} else if (key.endsWith("_unix")) {
if (typeof value === "number") {
return {

Check warning on line 72 in packages/elements-react/src/util/i18n/index.ts

Codecov / codecov/patch

packages/elements-react/src/util/i18n/index.ts#L72

Added line #L72 was not covered by tests
...accumulator,
[key]: intl.formatDate(new Date(value * 1000)),
[key + "_since"]: intl.formatDateTimeRange(
}: OnSubmitHandlerProps<UpdateLoginFlowBody>,
) {
if (!config.sdk.url) {
throw new Error(

Check warning on line 33 in packages/elements-react/src/util/onSubmitLogin.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitLogin.ts#L33

Added line #L33 was not covered by tests
`Please supply your Ory Network SDK url to the Ory Elements configuration.`,
)
}
flow: flow.id,
updateLoginFlowBody: body,
})
.then(() => {

Check warning on line 43 in packages/elements-react/src/util/onSubmitLogin.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitLogin.ts#L43

Added line #L43 was not covered by tests
// Workaround
window.location.href =

Check warning on line 45 in packages/elements-react/src/util/onSubmitLogin.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitLogin.ts#L45

Added line #L45 was not covered by tests
flow.return_to ?? config.sdk.url + "/self-service/login/browser"
})
.catch(
handleFlowError({
onRestartFlow: () => {
onRedirect(loginUrl(config), true)

Check warning on line 51 in packages/elements-react/src/util/onSubmitLogin.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitLogin.ts#L50-L51

Added lines #L50 - L51 were not covered by tests
},
onValidationError: (body: LoginFlow) => {
setFlowContainer({

Check warning on line 54 in packages/elements-react/src/util/onSubmitLogin.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitLogin.ts#L53-L54

Added lines #L53 - L54 were not covered by tests
flow: body,
flowType: FlowType.Login,
config,
}: OnSubmitHandlerProps<UpdateRecoveryFlowBody>,
) {
if (!config.sdk.url) {
throw new Error(

Check warning on line 34 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L34

Added line #L34 was not covered by tests
`Please supply your Ory Network SDK url to the Ory Elements configuration.`,
)
}
flow: flow.id,
updateRecoveryFlowBody: body,
})
.then(async (res) => {
const flow = await res.value()

Check warning on line 45 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L44-L45

Added lines #L44 - L45 were not covered by tests
const didContinueWith = handleContinueWith(flow.continue_with, {

Check warning on line 47 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L47

Added line #L47 was not covered by tests
onRedirect,
})
if (didContinueWith) {
return

Check warning on line 52 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L52

Added line #L52 was not covered by tests
}
setFlowContainer({

Check warning on line 55 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L55

Added line #L55 was not covered by tests
flow,
flowType: FlowType.Recovery,
config,
})
.catch(
handleFlowError({
onRestartFlow: () => {
onRedirect(recoveryUrl(config), true)

Check warning on line 64 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L63-L64

Added lines #L63 - L64 were not covered by tests
},
onValidationError: (body: RecoveryFlow) => {
setFlowContainer({

Check warning on line 67 in packages/elements-react/src/util/onSubmitRecovery.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRecovery.ts#L66-L67

Added lines #L66 - L67 were not covered by tests
flow: body,
flowType: FlowType.Recovery,
config,
}: OnSubmitHandlerProps<UpdateRegistrationFlowBody>,
) {
if (!config.sdk.url) {
throw new Error(

Check warning on line 34 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L34

Added line #L34 was not covered by tests
`Please supply your Ory Network SDK url to the Ory Elements configuration.`,
)
}
const client = frontendClient(config.sdk.url, config.sdk.options ?? {})
await client

Check warning on line 40 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L40

Added line #L40 was not covered by tests
.updateRegistrationFlowRaw({
flow: flow.id,
updateRegistrationFlowBody: body,
})
.then(async (res) => {
const body = await res.value()

Check warning on line 46 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L45-L46

Added lines #L45 - L46 were not covered by tests
const didContinueWith = handleContinueWith(body.continue_with, {

Check warning on line 48 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L48

Added line #L48 was not covered by tests
onRedirect,
})
if (didContinueWith) {
return

Check warning on line 53 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L53

Added line #L53 was not covered by tests
}
// We did not receive a valid continue_with, but the state flow is still a success. In this case we re-initialize
// the registration flow which will redirect the user to the default url.
onRedirect(registrationUrl(config), true)

Check warning on line 58 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L58

Added line #L58 was not covered by tests
})
.catch(
handleFlowError({
onRestartFlow: () => {
onRedirect(registrationUrl(config), true)

Check warning on line 63 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L62-L63

Added lines #L62 - L63 were not covered by tests
},
onValidationError: (body: RegistrationFlow) => {
setFlowContainer({

Check warning on line 66 in packages/elements-react/src/util/onSubmitRegistration.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitRegistration.ts#L65-L66

Added lines #L65 - L66 were not covered by tests
flow: body,
flowType: FlowType.Registration,
config,
}: OnSubmitHandlerProps<UpdateSettingsFlowBody>,
) {
if (!config.sdk.url) {
throw new Error(

Check warning on line 34 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L34

Added line #L34 was not covered by tests
`Please supply your Ory Network SDK url to the Ory Elements configuration.`,
)
}
const client = frontendClient(config.sdk.url, config.sdk.options ?? {})
await client

Check warning on line 40 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L40

Added line #L40 was not covered by tests
.updateSettingsFlowRaw({
flow: flow.id,
updateSettingsFlowBody: body,
})
.then(async (res) => {
const body = await res.value()

Check warning on line 46 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L45-L46

Added lines #L45 - L46 were not covered by tests
const didContinueWith = handleContinueWith(body.continue_with, {

Check warning on line 48 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L48

Added line #L48 was not covered by tests
onRedirect,
})
if (didContinueWith) {
return

Check warning on line 53 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L53

Added line #L53 was not covered by tests
}
// We did not receive a valid continue_with, but the state flow is still a success. In this case we re-initialize
// the settings flow which will redirect the user to the default url.
onRedirect(settingsUrl(config), true)

Check warning on line 58 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L58

Added line #L58 was not covered by tests
})
.catch(
handleFlowError({
onRestartFlow: () => {
onRedirect(settingsUrl(config), true)

Check warning on line 63 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L62-L63

Added lines #L62 - L63 were not covered by tests
},
onValidationError: (body: SettingsFlow) => {
setFlowContainer({

Check warning on line 66 in packages/elements-react/src/util/onSubmitSettings.ts

Codecov / codecov/patch

packages/elements-react/src/util/onSubmitSettings.ts#L65-L66

Added lines #L65 - L66 were not covered by tests
flow: body,
flowType: FlowType.Settings,
config,