Skip to content

Commit

Permalink
fix: additionalProps should be conditional on the UserAuthCard (#138
Browse files Browse the repository at this point in the history 
)

* fix: hide signup url when `undefined`

* fix: include flow id in uri query params

* chore: make `additionalProps` optional and add tests

---------

Co-authored-by: Alano Terblanche <[email protected]>
  • Loading branch information
@francesconi @Benehiko
francesconi and Benehiko authored Sep 13, 2023
1 parent b0affee commit 3eb3abe
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 43 deletions.
2 changes: 1 addition & 1 deletion examples/react-spa/src/Login.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ export const Login = (): JSX.Element => {
// flow contains the form fields and csrf token
.then(({ data: flow }) => {
// Update URI query params to include flow id
setSearchParams({})
setSearchParams({ ["flow"]: flow.id })
// Set the flow data
setFlow(flow)
})
Expand Down
78 changes: 78 additions & 0 deletions src/react-components/ory/user-auth-card.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -142,6 +142,10 @@ test("ory auth card verification flow", async ({ mount }) => {

await expect(component).toContainText("Verification")
await expect(component.locator('a[href="/signup"]')).toBeVisible()

await expect(component).toContainText("Don't have an account?", {
ignoreCase: true,
})
})

test("ory auth card recovery flow", async ({ mount }) => {
Expand Down Expand Up @@ -239,3 +243,77 @@ test("ory auth card login with code", async ({ mount }) => {
"Sign in with code",
)
})

test("ory auth card login should work without additionalProps", async ({
mount,
}) => {
const component = await mount(
<UserAuthCard flowType="login" flow={loginCodeFixture} />,
)

const loginComponent = new AuthPage(loginCodeFixture.ui.nodes, component)
await loginComponent.expectTraitFields()

await expect(component).toContainText("Sign in", { ignoreCase: true })
await expect(component).not.toContainText("Don't have an account?", {
ignoreCase: true,
})
})

test("ory auth card registration should work without additionalProps", async ({
mount,
}) => {
const component = await mount(
<UserAuthCard flowType="registration" flow={registrationCodeFixture} />,
)

const registrationComponent = new AuthPage(
registrationCodeFixture.ui.nodes,
component,
)
await registrationComponent.expectTraitFields()

await expect(component).toContainText("Sign up", { ignoreCase: true })
await expect(component).not.toContainText("Already have an account?", {
ignoreCase: true,
})
})

test("ory auth card recovery should work without additionalProps", async ({
mount,
}) => {
const component = await mount(
<UserAuthCard flowType="recovery" flow={recoveryFixture} />,
)

const recoveryComponent = new AuthPage(recoveryFixture.ui.nodes, component)
await recoveryComponent.expectTraitFields()

await expect(component).toContainText("Recover your account", {
ignoreCase: true,
})
await expect(component).not.toContainText("Already have an account?", {
ignoreCase: true,
})
})

test("ory auth card verification should work without additionalProps", async ({
mount,
}) => {
const component = await mount(
<UserAuthCard flowType="verification" flow={verificationFixture} />,
)

const verificationComponent = new AuthPage(
verificationFixture.ui.nodes,
component,
)
await verificationComponent.expectTraitFields()

await expect(component).toContainText("Verify your account", {
ignoreCase: true,
})
await expect(component).not.toContainText("Don't have an account?", {
ignoreCase: true,
})
})
87 changes: 46 additions & 41 deletions src/react-components/ory/user-auth-card.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,6 @@ import { MessageSection, MessageSectionProps } from "./helpers/common"
import { NodeMessages } from "./helpers/error-messages"
import { FilterFlowNodes } from "./helpers/filter-flow-nodes"
import { useScriptNodes } from "./helpers/node-script"
import { SelfServiceFlow } from "./helpers/types"
import {
UserAuthForm,
UserAuthFormAdditionalProps,
Expand Down Expand Up @@ -76,22 +75,22 @@ export type UserAuthCardProps = {
| {
flow: LoginFlow
flowType: "login"
additionalProps: LoginSectionAdditionalProps
additionalProps?: LoginSectionAdditionalProps
}
| {
flow: RegistrationFlow
flowType: "registration"
additionalProps: RegistrationSectionAdditionalProps
additionalProps?: RegistrationSectionAdditionalProps
}
| {
flow: RecoveryFlow
flowType: "recovery"
additionalProps: RecoverySectionAdditionalProps
additionalProps?: RecoverySectionAdditionalProps
}
| {
flow: VerificationFlow
flowType: "verification"
additionalProps: VerificationSectionAdditionalProps
additionalProps?: VerificationSectionAdditionalProps
}
)

Expand Down Expand Up @@ -315,7 +314,7 @@ export const UserAuthCard = ({
...additionalProps,
})

if (isLoggedIn(flow)) {
if (isLoggedIn(flow) && additionalProps?.logoutURL) {
message = {
text: intl.formatMessage({
id: "login.logout-label",
Expand All @@ -325,10 +324,10 @@ export const UserAuthCard = ({
id: "login.logout-button",
defaultMessage: "Logout",
}),
url: additionalProps.logoutURL,
dataTestId: "logout-link",
url: additionalProps.logoutURL,
}
} else if (additionalProps.signupURL) {
} else if (additionalProps?.signupURL) {
message = {
text: intl.formatMessage({
id: "login.registration-label",
Expand All @@ -350,52 +349,58 @@ export const UserAuthCard = ({
$flow = RegistrationSection({
nodes: flow.ui.nodes,
})
message = {
text: intl.formatMessage({
id: "registration.login-label",
defaultMessage: "Already have an account?",
}),
url: additionalProps.loginURL,
buttonText: intl.formatMessage({
id: "registration.login-button",
defaultMessage: "Sign in",
}),
dataTestId: "cta-link",
if (additionalProps?.loginURL) {
message = {
text: intl.formatMessage({
id: "registration.login-label",
defaultMessage: "Already have an account?",
}),
url: additionalProps.loginURL,
buttonText: intl.formatMessage({
id: "registration.login-button",
defaultMessage: "Sign in",
}),
dataTestId: "cta-link",
}
}
break
// both verification and recovery use the same flow.
case "recovery":
$flow = LinkSection({
nodes: flow.ui.nodes,
})
message = {
text: intl.formatMessage({
id: "recovery.login-label",
defaultMessage: "Remember your credentials?",
}),
buttonText: intl.formatMessage({
id: "recovery.login-button",
defaultMessage: "Sign in",
}),
url: additionalProps.loginURL,
dataTestId: "cta-link",
if (additionalProps?.loginURL) {
message = {
text: intl.formatMessage({
id: "recovery.login-label",
defaultMessage: "Remember your credentials?",
}),
buttonText: intl.formatMessage({
id: "recovery.login-button",
defaultMessage: "Sign in",
}),
url: additionalProps.loginURL,
dataTestId: "cta-link",
}
}
break
case "verification":
$flow = LinkSection({
nodes: flow.ui.nodes,
})
message = {
text: intl.formatMessage({
id: "verification.registration-label",
defaultMessage: "Don't have an account?",
}),
buttonText: intl.formatMessage({
id: "verification.registration-button",
defaultMessage: "Sign up",
}),
url: additionalProps.signupURL,
dataTestId: "cta-link",
if (additionalProps?.signupURL) {
message = {
text: intl.formatMessage({
id: "verification.registration-label",
defaultMessage: "Don't have an account?",
}),
buttonText: intl.formatMessage({
id: "verification.registration-button",
defaultMessage: "Sign up",
}),
url: additionalProps.signupURL,
dataTestId: "cta-link",
}
}
break
default:
Expand Down
27 changes: 26 additions & 1 deletion src/stories/Ory/Auth.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -154,6 +154,13 @@ LoginAuthCardWithCodeSubmit.args = {
},
}

export const LoginAuthCardWithoutAdditionalProps = Template.bind({})

LoginAuthCardWithoutAdditionalProps.args = {
flow: loginFlow as LoginFlow,
flowType: "login",
}

export const RegistrationAuthCard = Template.bind({})

RegistrationAuthCard.args = {
Expand All @@ -168,7 +175,6 @@ RegistrationAuthCard.args = {
export const RegistrationAuthCardWebAuthn = Template.bind({})

RegistrationAuthCardWebAuthn.args = {
title: "Create an account for Acme",
flow: registrationFlowWebAuthn as RegistrationFlow,
flowType: "registration",
includeScripts: true,
Expand All @@ -177,6 +183,12 @@ RegistrationAuthCardWebAuthn.args = {
},
}

export const RegistrationAuthCardWithoutAdditionalProps = Template.bind({})
RegistrationAuthCardWithoutAdditionalProps.args = {
flow: registrationFlow as RegistrationFlow,
flowType: "registration",
}

export const RecoveryAuthCard = Template.bind({})

RecoveryAuthCard.args = {
Expand All @@ -188,6 +200,12 @@ RecoveryAuthCard.args = {
},
}

export const RecoveryAuthCardWithoutAdditionalProps = Template.bind({})
RecoveryAuthCardWithoutAdditionalProps.args = {
flow: recoveryFlow as RecoveryFlow,
flowType: "recovery",
}

export const VerificationAuthCard = Template.bind({})

VerificationAuthCard.args = {
Expand All @@ -207,3 +225,10 @@ VerificationSubmittedAuthCard.args = {
signupURL: "https://acme.com/login",
},
}

export const VerificationAuthCardWithoutAdditionalProps = Template.bind({})

VerificationAuthCardWithoutAdditionalProps.args = {
flow: verificationFlow as VerificationFlow,
flowType: "verification",
}

0 comments on commit 3eb3abe

Please sign in to comment.