From 77d74fa6cc04fe81ee9ec1c2b23852803343f8ce Mon Sep 17 00:00:00 2001 From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com> Date: Fri, 15 Sep 2023 14:33:54 +0200 Subject: [PATCH] feat: show registration with code in storybook & cleanup component (#142) * feat: show registration with code in storybook * chore: cleanup auth code section logic and tests --- .../ory/sections/auth-code-section.spec.tsx | 74 ++++++++ .../ory/sections/auth-code-section.tsx | 7 +- src/stories/Ory/Auth.stories.tsx | 8 + src/stories/Ory/register-flow-code.json | 178 ++++++++++++++++++ 4 files changed, 264 insertions(+), 3 deletions(-) create mode 100644 src/stories/Ory/register-flow-code.json diff --git a/src/react-components/ory/sections/auth-code-section.spec.tsx b/src/react-components/ory/sections/auth-code-section.spec.tsx index 5e90c4cef..20ce378c6 100644 --- a/src/react-components/ory/sections/auth-code-section.spec.tsx +++ b/src/react-components/ory/sections/auth-code-section.spec.tsx @@ -104,3 +104,77 @@ test("shouldn't render anything with no code group", async ({ mount }) => { await expect(container.locator("input[name=identifier]")).not.toBeVisible() }) + +test("should render traits on default group", async ({ mount }) => { + const container = await mount( + , + ) + + await expect(container.locator("input[name='traits.email']")).toBeVisible() + await expect(container.locator("input[name='traits.name']")).toBeVisible() + await expect(container.locator("button[name=method]")).toBeVisible() +}) diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx index 33bfc6aaf..2d29db2cb 100644 --- a/src/react-components/ory/sections/auth-code-section.tsx +++ b/src/react-components/ory/sections/auth-code-section.tsx @@ -18,7 +18,8 @@ export const AuthCodeSection = ({ filter={{ nodes: nodes, groups: "code", - excludeAttributes: ["submit", "hidden"], + withoutDefaultAttributes: true, + excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields }} /> @@ -28,8 +29,8 @@ export const AuthCodeSection = ({ filter={{ nodes: nodes, groups: "code", - withoutDefaultGroup: true, - attributes: ["submit", "hidden"], + withoutDefaultAttributes: true, + attributes: ["button", "submit"], }} /> diff --git a/src/stories/Ory/Auth.stories.tsx b/src/stories/Ory/Auth.stories.tsx index 0e1185028..93343fd6e 100644 --- a/src/stories/Ory/Auth.stories.tsx +++ b/src/stories/Ory/Auth.stories.tsx @@ -13,6 +13,7 @@ import loginFlowRefresh from "./login-flow-refresh.json" import loginFlow from "./login-flow.json" import loginFlowCodeOne from "./login-flow-code-1.json" import loginFlowCodeTwo from "./login-flow-code-2.json" + import loginFlowHydra from "./login-flow-hydra.json" import loginFlowError from "./login-flow-error.json" @@ -20,6 +21,7 @@ import loginFlowUiError from "./login-flow-ui-error.json" import registrationFlowWebAuthn from "./register-flow-webauthn.json" import registrationFlow from "./register-flow.json" +import registrationFlowCode from "./register-flow-code.json" import recoveryFlow from "./recovery-flow.json" @@ -206,6 +208,12 @@ RecoveryAuthCardWithoutAdditionalProps.args = { flowType: "recovery", } +export const RegistrationAuthCardFlowCode = Template.bind({}) +RegistrationAuthCardFlowCode.args = { + flow: registrationFlowCode as RegistrationFlow, + flowType: "registration", +} + export const VerificationAuthCard = Template.bind({}) VerificationAuthCard.args = { diff --git a/src/stories/Ory/register-flow-code.json b/src/stories/Ory/register-flow-code.json new file mode 100644 index 000000000..19ede25af --- /dev/null +++ b/src/stories/Ory/register-flow-code.json @@ -0,0 +1,178 @@ +{ + "id": "4028e642-a1a2-4ab7-b8b8-0b8683216f16", + "type": "browser", + "expires_at": "2023-09-15T06:51:15.085031Z", + "issued_at": "2023-09-15T06:21:15.085031Z", + "request_url": "https://example.com/self-service/registration/browser?return_to=", + "ui": { + "action": "https://example.com/self-service/registration?flow=4028e642-a1a2-4ab7-b8b8-0b8683216f16", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "traits.email", + "type": "email", + "required": true, + "autocomplete": "email", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "E-Mail", + "type": "info", + "context": { + "title": "E-Mail" + } + } + } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "AYWGaOmwWvetqDidhkfq2nJxD9IFITJ4Czi6MPbRLO5LCNKhJpvX8TF5XsF2L7Sk0YNhAbPYFCiwPbdL8P3lxw==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register_displayname", + "type": "text", + "value": "", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050013, + "text": "Name of the security key", + "type": "info" + } + } + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register", + "type": "hidden", + "value": "", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"Test\",\"id\":\"example.com\"},\"user\":{\"name\":\"Test\",\"displayName\":\"Test\",\"id\":\"rhD-u3guQBaDPkwrIbBISQ\"},\"challenge\":\"PwDL5hQ-H9fsxdurVLe5gisJ8-\",\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"timeout\":300000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040004, + "text": "Sign up with security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://example.com/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-RI23aG5lwYTo7zknGdc++eHUMimUWhkyFzrGid6HkVSdUSjdESPtM3KufXGq/lo4Ut0jI9mDiZeT8tHoSvaHvg==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "94a13785-1ae3-4560-8a87-09d24f7b36bb", + "node_type": "script" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "code", + "attributes": { + "name": "method", + "type": "submit", + "value": "code", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040006, + "text": "Sign up with code", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "password", + "type": "password", + "required": true, + "autocomplete": "new-password", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070001, + "text": "Password", + "type": "info" + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "method", + "type": "submit", + "value": "password", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040001, + "text": "Sign up", + "type": "info" + } + } + } + ] + }, + "state": "choose_method" +}