From 7fa78d276069fc9c0c4d473428493c26632fdea0 Mon Sep 17 00:00:00 2001 From: aeneasr <3372410+aeneasr@users.noreply.github.com> Date: Fri, 20 Dec 2024 14:08:40 +0100 Subject: [PATCH] chore: synchronize workspaces --- .../card/current-identifier-button.tsx | 17 ++++---- .../theme/default/components/card/footer.tsx | 23 +++------- .../theme/default/components/form/label.tsx | 11 +---- .../src/theme/default/utils/url.ts | 42 +++++++++++++++++++ .../elements-react/src/util/onSubmitLogin.ts | 3 +- 5 files changed, 61 insertions(+), 35 deletions(-) create mode 100644 packages/elements-react/src/theme/default/utils/url.ts diff --git a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx index f44ffc16..6fcf44b2 100644 --- a/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx +++ b/packages/elements-react/src/theme/default/components/card/current-identifier-button.tsx @@ -5,14 +5,11 @@ import { FlowType, UiNode } from "@ory/client-fetch" import { useOryFlow } from "@ory/elements-react" import IconArrowLeft from "../../assets/icons/arrow-left.svg" import { omit } from "../../utils/attributes" +import { restartFlowUrl } from "../../utils/url" export function DefaultCurrentIdentifierButton() { - const { - flow: { ui }, - flowType, - config, - formState, - } = useOryFlow() + const { flow, flowType, config, formState } = useOryFlow() + const ui = flow.ui if (formState.current === "provide_identifier") { return null @@ -26,7 +23,12 @@ export function DefaultCurrentIdentifierButton() { ) { return null } - const initFlowUrl = `${config.sdk.url}/self-service/${flowType}/browser` + + const initFlowUrl = restartFlowUrl( + flow, + `${config.sdk.url}/self-service/${flowType}/browser`, + ) + const attributes = omit(nodeBackButton.attributes, [ "autocomplete", "node_type", @@ -38,6 +40,7 @@ export function DefaultCurrentIdentifierButton() { {...attributes} href={initFlowUrl} title={`Adjust ${nodeBackButton?.attributes.value}`} + data-testid={"ory/ui/login/link/restart"} > {intl.formatMessage({ @@ -61,7 +54,7 @@ function LoginCardFooter() { })}{" "} {intl.formatMessage({ @@ -101,12 +94,6 @@ function RegistrationCardFooter() { } } - let loginLink = `${config.sdk.url}/self-service/login/browser` - const returnTo = getReturnToQueryParam(flow) - if (returnTo) { - loginLink += `?return_to=${returnTo}` - } - return ( {formState.current === "method_active" ? ( @@ -132,7 +119,7 @@ function RegistrationCardFooter() { })}{" "} {intl.formatMessage({ diff --git a/packages/elements-react/src/theme/default/components/form/label.tsx b/packages/elements-react/src/theme/default/components/form/label.tsx index 8236252b..8b55446f 100644 --- a/packages/elements-react/src/theme/default/components/form/label.tsx +++ b/packages/elements-react/src/theme/default/components/form/label.tsx @@ -17,6 +17,7 @@ import { import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" import { getReturnToQueryParam } from "../card/footer" +import { initFlowUrl } from "../../utils/url" function findResendNode(nodes: UiNode[]) { return nodes.find( @@ -51,14 +52,6 @@ export function DefaultLabel({ const fieldError = formState.errors[attributes.name] - const recoveryUrl = config.project.recovery_ui_url - - let recoveryLink = `${config.sdk.url}/self-service/registration/browser` - const returnTo = getReturnToQueryParam(flow) - if (returnTo) { - recoveryLink += `?return_to=${returnTo}` - } - return (
{label && ( @@ -77,7 +70,7 @@ export function DefaultLabel({ flowType === FlowType.Login && ( // TODO: make it possible to override with a custom component {intl.formatMessage({ diff --git a/packages/elements-react/src/theme/default/utils/url.ts b/packages/elements-react/src/theme/default/utils/url.ts new file mode 100644 index 00000000..d2d63514 --- /dev/null +++ b/packages/elements-react/src/theme/default/utils/url.ts @@ -0,0 +1,42 @@ +export function restartFlowUrl( + flow: { request_url?: string; return_to?: string }, + fallback: string, +) { + return flow.request_url || appendReturnTo(fallback, flow.return_to) +} + +export function initFlowUrl( + sdkUrl: string, + flowType: string, + flow: { + return_to?: string + }, +) { + const result = `${sdkUrl}/self-service/${flowType}/browser` + const qs = new URLSearchParams() + + if (flow.return_to) { + qs.set("return_to", flow.return_to) + } else if (typeof window !== "undefined") { + const searchParams = new URLSearchParams(window.location.search) + if (searchParams.has("return_to")) { + qs.set("return_to", searchParams.get("return_to") || "") + } + } + + if (qs.toString().length === 0) { + return result + } + + return result + "?" + qs.toString() +} + +function appendReturnTo(url: string, returnTo?: string) { + if (!returnTo) { + return url + } + + const urlObj = new URL(url) + urlObj.searchParams.set("return_to", returnTo) + return urlObj.toString() +} diff --git a/packages/elements-react/src/util/onSubmitLogin.ts b/packages/elements-react/src/util/onSubmitLogin.ts index 52543b1e..3f97fc48 100644 --- a/packages/elements-react/src/util/onSubmitLogin.ts +++ b/packages/elements-react/src/util/onSubmitLogin.ts @@ -41,7 +41,8 @@ export async function onSubmitLogin( updateLoginFlowBody: body, }) .then(() => { - // Workaround + // TODO Remove this workaround. If the return_to value is missing we redirect to the browser endpoint which will redirect us + // TODO to the default_redirect_url. Ideally, this value comes from the project config. window.location.href = // eslint-disable-next-line promise/always-return flow.return_to ?? config.sdk.url + "/self-service/login/browser"