From 7c32444b3f5f5a6cc70beaac1ddee01577800c12 Mon Sep 17 00:00:00 2001 From: Alano Terblanche <18033717+Benehiko@users.noreply.github.com> Date: Fri, 15 Sep 2023 08:57:02 +0200 Subject: [PATCH] feat: show registration with code in storybook --- src/stories/Ory/Auth.stories.tsx | 8 ++ src/stories/Ory/register-flow-code.json | 178 ++++++++++++++++++++++++ 2 files changed, 186 insertions(+) create mode 100644 src/stories/Ory/register-flow-code.json 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" +}