From cca1a27199da8cd13d05e1876e7fa597dc0d4d67 Mon Sep 17 00:00:00 2001 From: Jonas Hungershausen Date: Tue, 29 Oct 2024 15:03:53 +0100 Subject: [PATCH] feat: add settings flow components (#238) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Miłosz <12242002+mszekiel@users.noreply.github.com> --- .gitattributes | 1 + jest.config.ts | 2 +- package-lock.json | 22 + .../.storybook/preview.tsx | 1 - .../login/1fa/all-methods/initial-form.json | 38 +- .../login/1fa/all-methods/missing-email.json | 38 +- .../1fa/all-methods/wrong-credentials.json | 38 +- .../login/1fa/code/code-input.json | 50 +- .../login/1fa/code/initial-form.json | 53 +- .../login/1fa/code/invalid-account.json | 53 +- .../login/1fa/code/missing-email.json | 53 +- .../login/1fa/code/wrong-credentials.json | 36 +- .../login/1fa/none/initial-form.json | 16 +- .../login/1fa/oidc/initial-form.json | 102 ++- .../login/1fa/password/initial-form.json | 12 +- .../login/1fa/password/missing-email.json | 12 +- .../login/1fa/password/wrong-credentials.json | 12 +- .../login/1fa/webauthn/initial-form.json | 18 +- .../login/1fa/webauthn/invalid-account.json | 18 +- .../login/1fa/webauthn/show-trigger.json | 26 +- .../recovery/disabled/initial-form.json | 2 +- .../recovery/none/initial-form.json | 2 +- .../one-step/all-methods/initial-form.json | 30 +- .../one-step/all-methods/missing-fields.json | 30 +- .../one-step/disabled/initial-form.json | 2 +- .../one-step/none/initial-form.json | 10 +- .../one-step/oidc/initial-form.json | 338 ++++++++++ .../one-step/passkey/initial-form.json | 18 +- .../one-step/password/initial-form.json | 12 +- .../one-step/password/missing-fields.json | 12 +- .../one-step/webauthn/initial-form.json | 20 +- .../two-step/all-methods/enter-password.json | 30 +- .../two-step/all-methods/initial-form.json | 18 +- .../two-step/all-methods/missing-fields.json | 18 +- .../password-validation-error.json | 30 +- .../two-step/password/enter-password.json | 18 +- .../two-step/password/initial-form.json | 12 +- .../two-step/password/missing-fields.json | 12 +- .../password/password-validation-error.json | 18 +- .../settings/all-methods/change-password.json | 381 +++++++++++ .../settings/all-methods/change-trait.json | 377 +++++++++++ .../settings/all-methods/initial-form.json | 368 +++++++++++ .../settings/oidc/with-provider.json | 230 +++++++ .../settings/passkey/initial-form.json | 256 ++++++++ .../settings/webauthn/initial-form.json | 263 ++++++++ .../verification/disabled/initial-form.json | 2 +- .../verification/none/initial-form.json | 2 +- .../components/settings/all.stories.ts | 46 ++ .../components/settings/oidc.stories.ts | 28 + .../components/settings/passkey.stories.ts | 28 + .../components/settings/webauthn.stories.ts | 28 + .../api-report/elements-react-theme.api.md | 1 + .../api-report/elements-react.api.json | 593 +++++++++++++++++- .../api-report/elements-react.api.md | 76 ++- packages/elements-react/jest.config.ts | 7 +- packages/elements-react/package.json | 1 + packages/elements-react/project.json | 9 + .../src/components/card/card-two-step.tsx | 6 +- .../src/components/form/form-helpers.ts | 9 +- .../src/components/form/form.tsx | 96 ++- .../src/components/form/index.ts | 1 + .../form/nodes/__tests__/node.spec.tsx | 5 +- .../src/components/form/nodes/input.tsx | 11 + .../src/components/form/section.tsx | 21 + .../elements-react/src/components/index.ts | 1 + .../src/components/settings/index.tsx | 38 ++ .../src/components/settings/oidc-settings.tsx | 45 ++ .../components/settings/passkey-settings.tsx | 91 +++ .../settings/recovery-codes-settings.tsx | 81 +++ .../src/components/settings/settings-card.tsx | 124 ++++ .../src/components/settings/totp-settings.tsx | 82 +++ .../components/settings/webauthn-settings.tsx | 104 +++ .../elements-react/src/context/component.tsx | 42 +- packages/elements-react/src/locales/de.json | 64 +- packages/elements-react/src/locales/en.json | 28 +- packages/elements-react/src/locales/es.json | 38 +- packages/elements-react/src/locales/fr.json | 38 +- packages/elements-react/src/locales/nl.json | 38 +- packages/elements-react/src/locales/pl.json | 38 +- packages/elements-react/src/locales/pt.json | 38 +- packages/elements-react/src/locales/sv.json | 38 +- .../src/tests/jest/test-utils.tsx | 53 +- .../theme/default/assets/icons/download.svg | 5 + .../src/theme/default/assets/icons/eye.svg | 8 + .../src/theme/default/assets/icons/key.svg | 5 + .../src/theme/default/assets/icons/qrcode.svg | 5 + .../theme/default/assets/icons/refresh.svg | 5 + .../src/theme/default/assets/icons/trash.svg | 5 + .../src/theme/default/assets/icons/unlink.svg | 5 + .../theme/default/components/card/index.tsx | 2 +- .../theme/default/components/card/logo.tsx | 4 +- .../default/components/default-components.tsx | 19 + .../theme/default/components/form/button.tsx | 86 ++- .../default/components/form/checkbox.tsx | 1 + .../theme/default/components/form/index.tsx | 18 +- .../theme/default/components/form/input.tsx | 2 +- .../theme/default/components/form/section.tsx | 46 ++ .../theme/default/components/form/social.tsx | 14 +- .../theme/default/components/form/spinner.tsx | 2 +- .../components/settings/settings-oidc.tsx | 58 ++ .../components/settings/settings-passkey.tsx | 75 +++ .../settings/settings-recovery-codes.tsx | 80 +++ .../components/settings/settings-top.tsx | 103 +++ .../components/settings/settings-webauthn.tsx | 89 +++ .../components/ui/checkbox-label.spec.tsx | 17 +- .../src/theme/default/flows/settings.tsx | 4 +- .../src/theme/default/icons/code.svg | 3 - .../src/theme/default/icons/passkey.svg | 3 - .../src/theme/default/icons/password.svg | 3 - .../src/theme/default/icons/webauthn.svg | 3 - .../constructCardHeader.spec.tsx.snap | 56 +- packages/elements-react/src/types.ts | 12 +- .../src/util/i18n/__tests__/index.spec.tsx | 7 +- .../util/i18n/__tests__/translations.spec.ts | 15 +- .../elements-react/src/util/onSubmitLogin.ts | 2 +- .../src/util/ui/__test__/ui.spec.ts | 14 +- packages/elements-react/src/util/ui/index.ts | 21 +- packages/elements-react/tailwind.config.ts | 7 +- packages/elements-react/tsconfig.json | 10 +- 119 files changed, 5276 insertions(+), 597 deletions(-) create mode 100644 .gitattributes create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/oidc/initial-form.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-password.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-trait.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/initial-form.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/oidc/with-provider.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/passkey/initial-form.json create mode 100644 packages/elements-react-stories/src/elements-react/.stub-responses/settings/webauthn/initial-form.json create mode 100644 packages/elements-react-stories/src/elements-react/components/settings/all.stories.ts create mode 100644 packages/elements-react-stories/src/elements-react/components/settings/oidc.stories.ts create mode 100644 packages/elements-react-stories/src/elements-react/components/settings/passkey.stories.ts create mode 100644 packages/elements-react-stories/src/elements-react/components/settings/webauthn.stories.ts create mode 100644 packages/elements-react/src/components/form/section.tsx create mode 100644 packages/elements-react/src/components/settings/index.tsx create mode 100644 packages/elements-react/src/components/settings/oidc-settings.tsx create mode 100644 packages/elements-react/src/components/settings/passkey-settings.tsx create mode 100644 packages/elements-react/src/components/settings/recovery-codes-settings.tsx create mode 100644 packages/elements-react/src/components/settings/settings-card.tsx create mode 100644 packages/elements-react/src/components/settings/totp-settings.tsx create mode 100644 packages/elements-react/src/components/settings/webauthn-settings.tsx create mode 100644 packages/elements-react/src/theme/default/assets/icons/download.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/eye.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/key.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/qrcode.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/refresh.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/trash.svg create mode 100644 packages/elements-react/src/theme/default/assets/icons/unlink.svg create mode 100644 packages/elements-react/src/theme/default/components/form/section.tsx create mode 100644 packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx create mode 100644 packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx create mode 100644 packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx create mode 100644 packages/elements-react/src/theme/default/components/settings/settings-top.tsx create mode 100644 packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx delete mode 100644 packages/elements-react/src/theme/default/icons/code.svg delete mode 100644 packages/elements-react/src/theme/default/icons/passkey.svg delete mode 100644 packages/elements-react/src/theme/default/icons/password.svg delete mode 100644 packages/elements-react/src/theme/default/icons/webauthn.svg diff --git a/.gitattributes b/.gitattributes new file mode 100644 index 000000000..0db59b463 --- /dev/null +++ b/.gitattributes @@ -0,0 +1 @@ +packages/elements-react-stories/src/elements-react/.stub-responses/**/*.json linguist-generated=true diff --git a/jest.config.ts b/jest.config.ts index 2aa703eae..70b854c38 100644 --- a/jest.config.ts +++ b/jest.config.ts @@ -1,7 +1,7 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { getJestProjects, getJestProjectsAsync } from "@nx/jest" +import { getJestProjects } from "@nx/jest" export default { projects: getJestProjects(), diff --git a/package-lock.json b/package-lock.json index 5eb729e65..162641aa5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -15374,6 +15374,27 @@ "dev": true, "license": "MIT" }, + "node_modules/class-variance-authority": { + "version": "0.7.0", + "resolved": "https://registry.npmjs.org/class-variance-authority/-/class-variance-authority-0.7.0.tgz", + "integrity": "sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==", + "license": "Apache-2.0", + "dependencies": { + "clsx": "2.0.0" + }, + "funding": { + "url": "https://joebell.co.uk" + } + }, + "node_modules/class-variance-authority/node_modules/clsx": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz", + "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==", + "license": "MIT", + "engines": { + "node": ">=6" + } + }, "node_modules/classnames": { "version": "2.3.2", "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", @@ -32989,6 +33010,7 @@ "dependencies": { "@ory/client-fetch": "1.15.6", "@radix-ui/react-dropdown-menu": "2.1.2", + "class-variance-authority": "0.7.0", "clsx": "2.1.1", "input-otp": "1.2.4", "lodash.merge": "4.6.2", diff --git a/packages/elements-react-stories/.storybook/preview.tsx b/packages/elements-react-stories/.storybook/preview.tsx index 9716dd109..ed3c18ce8 100644 --- a/packages/elements-react-stories/.storybook/preview.tsx +++ b/packages/elements-react-stories/.storybook/preview.tsx @@ -31,7 +31,6 @@ const preview: Preview = { const withI18next: Decorator = (Story, context) => { const { locale } = context.globals - // TODO: this needs a refactor, because it doesn't pass the locale to the Ory Provider at the moment. return ( ) diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json index e71a97837..e92d88853 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json @@ -1,12 +1,12 @@ { - "id": "7829da21-301f-420d-b91d-28eb63dc132b", + "id": "9af3e83e-23c1-41bd-9149-be39ea7c8048", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:44.135905709Z", - "issued_at": "2024-04-25T12:57:44.135905709Z", - "request_url": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:38.857268593Z", + "issued_at": "2024-10-29T09:45:38.857268593Z", + "request_url": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login?flow=7829da21-301f-420d-b91d-28eb63dc132b", + "action": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login?flow=9af3e83e-23c1-41bd-9149-be39ea7c8048", "method": "POST", "nodes": [ { @@ -26,7 +26,8 @@ "text": "Sign in with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -48,7 +49,8 @@ "text": "Sign in with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -59,7 +61,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "Tw5uN5cojB6RRxpH4O/CsKi7sfcTD/SuGZasUYq1SjOND6q5jAeKO1fjzO/1i73gTsUBZ+hxG00g5I073WPzpg==", + "value": "UpTfUf6a4w2CEUtZR/XLbglQeIWvznS5QdPSKX9WzjJItMMhoXxVRWEfNZ+QxkWFZgm2D0UQCg4wWgROuBHqlQ==", "required": true, "disabled": false, "node_type": "input" @@ -95,14 +97,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "e5274198-d8bc-4622-9cba-0d721930cfb7", + "nonce": "37c7008f-98d4-402d-a319-cf4d0f60e10c", "node_type": "script" }, "messages": [], @@ -122,7 +124,7 @@ "meta": { "label": { "id": 1010008, - "text": "Use security key", + "text": "Sign in with hardware key", "type": "info" } } @@ -157,6 +159,8 @@ "name": "passkey_login", "type": "hidden", "disabled": false, + "onload": "window.oryPasskeyLoginAutocompleteInit()", + "onloadTrigger": "oryPasskeyLoginAutocompleteInit", "node_type": "input" }, "messages": [], @@ -168,7 +172,7 @@ "attributes": { "name": "passkey_challenge", "type": "hidden", - "value": "{\"publicKey\":{\"challenge\":\"rlZe03JabwF9e5YamwdVljjh8-tbtC9NSS9YjB7layk\",\"timeout\":300000,\"rpId\":\"friendly-franklin-hcfczr99ek.projects.oryapis\",\"userVerification\":\"preferred\"}}", + "value": "{\"publicKey\":{\"challenge\":\"j-AcTnYzHZCKq--PnEMGz72K0nh3BqH2emzwFOj-Dyw\",\"timeout\":300000,\"rpId\":\"dreamy-wiles-28csoig0cg.projects.oryapis\",\"userVerification\":\"preferred\"}}", "disabled": false, "node_type": "input" }, @@ -189,7 +193,7 @@ "meta": { "label": { "id": 1010015, - "text": "Sign in with code", + "text": "Send sign in code", "type": "info" } } @@ -227,16 +231,16 @@ "messages": [], "meta": { "label": { - "id": 1010001, - "text": "Sign in", + "id": 1010022, + "text": "Sign in with password", "type": "info" } } } ] }, - "created_at": "2024-04-25T12:57:44.140779Z", - "updated_at": "2024-04-25T12:57:44.140779Z", + "created_at": "2024-10-29T09:45:38.863683Z", + "updated_at": "2024-10-29T09:45:38.863683Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/missing-email.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/missing-email.json index dfc0a0cf1..0f2f3d543 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/missing-email.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/missing-email.json @@ -1,12 +1,12 @@ { - "id": "7829da21-301f-420d-b91d-28eb63dc132b", + "id": "9af3e83e-23c1-41bd-9149-be39ea7c8048", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:44.135905Z", - "issued_at": "2024-04-25T12:57:44.135905Z", - "request_url": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:38.857268Z", + "issued_at": "2024-10-29T09:45:38.857268Z", + "request_url": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login?flow=7829da21-301f-420d-b91d-28eb63dc132b", + "action": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login?flow=9af3e83e-23c1-41bd-9149-be39ea7c8048", "method": "POST", "nodes": [ { @@ -26,7 +26,8 @@ "text": "Sign in with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -48,7 +49,8 @@ "text": "Sign in with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -59,7 +61,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "3Qz2WjGZ65Vt3YTotnO9NIImqRVnMqZ/2oVugdA5Vy8fDTLUKrbtsKt5UkCjF8JkZFgZhZxMSZzj90/rh+/uug==", + "value": "+sHB0SRt37Hgp5uHUklnNED5kJykBbt0NxZ5OAUNlYDg4d2he4tp+QOp5UGFeunfL6BeFk7bxcNGn69fwkqxJw==", "required": true, "disabled": false, "node_type": "input" @@ -104,14 +106,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "e5274198-d8bc-4622-9cba-0d721930cfb7", + "nonce": "37c7008f-98d4-402d-a319-cf4d0f60e10c", "node_type": "script" }, "messages": [], @@ -131,7 +133,7 @@ "meta": { "label": { "id": 1010008, - "text": "Use security key", + "text": "Sign in with hardware key", "type": "info" } } @@ -166,6 +168,8 @@ "name": "passkey_login", "type": "hidden", "disabled": false, + "onload": "window.oryPasskeyLoginAutocompleteInit()", + "onloadTrigger": "oryPasskeyLoginAutocompleteInit", "node_type": "input" }, "messages": [], @@ -177,7 +181,7 @@ "attributes": { "name": "passkey_challenge", "type": "hidden", - "value": "{\"publicKey\":{\"challenge\":\"rlZe03JabwF9e5YamwdVljjh8-tbtC9NSS9YjB7layk\",\"timeout\":300000,\"rpId\":\"friendly-franklin-hcfczr99ek.projects.oryapis\",\"userVerification\":\"preferred\"}}", + "value": "{\"publicKey\":{\"challenge\":\"j-AcTnYzHZCKq--PnEMGz72K0nh3BqH2emzwFOj-Dyw\",\"timeout\":300000,\"rpId\":\"dreamy-wiles-28csoig0cg.projects.oryapis\",\"userVerification\":\"preferred\"}}", "disabled": false, "node_type": "input" }, @@ -198,7 +202,7 @@ "meta": { "label": { "id": 1010015, - "text": "Sign in with code", + "text": "Send sign in code", "type": "info" } } @@ -245,16 +249,16 @@ "messages": [], "meta": { "label": { - "id": 1010001, - "text": "Sign in", + "id": 1010022, + "text": "Sign in with password", "type": "info" } } } ] }, - "created_at": "2024-04-25T12:57:44.140779Z", - "updated_at": "2024-04-25T12:57:44.140779Z", + "created_at": "2024-10-29T09:45:38.863683Z", + "updated_at": "2024-10-29T09:45:38.863683Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/wrong-credentials.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/wrong-credentials.json index 9736dfbfe..b3e25e435 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/wrong-credentials.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/wrong-credentials.json @@ -1,12 +1,12 @@ { - "id": "7829da21-301f-420d-b91d-28eb63dc132b", + "id": "9af3e83e-23c1-41bd-9149-be39ea7c8048", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:44.135905Z", - "issued_at": "2024-04-25T12:57:44.135905Z", - "request_url": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:38.857268Z", + "issued_at": "2024-10-29T09:45:38.857268Z", + "request_url": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/self-service/login?flow=7829da21-301f-420d-b91d-28eb63dc132b", + "action": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/self-service/login?flow=9af3e83e-23c1-41bd-9149-be39ea7c8048", "method": "POST", "nodes": [ { @@ -26,7 +26,8 @@ "text": "Sign in with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -48,7 +49,8 @@ "text": "Sign in with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -59,7 +61,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "NQhqo0GMPYDefJCT1Fye+FlvOEdEnJ+XO70/ujPAr/v3Ca4tWqM7pRjYRjvBOOGovxGI17/icHQCzx7QZBYWbg==", + "value": "VO8v40NNSxQFr3T/hqQGdaVNPO5o2EZFNXoDeCDwfCxOzzOTHKv9XOahCjlRl4ieyhTyZIIGOPJE89Uf57dYiw==", "required": true, "disabled": false, "node_type": "input" @@ -95,14 +97,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://friendly-franklin-hcfczr99ek.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://dreamy-wiles-28csoig0cg.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "e5274198-d8bc-4622-9cba-0d721930cfb7", + "nonce": "37c7008f-98d4-402d-a319-cf4d0f60e10c", "node_type": "script" }, "messages": [], @@ -122,7 +124,7 @@ "meta": { "label": { "id": 1010008, - "text": "Use security key", + "text": "Sign in with hardware key", "type": "info" } } @@ -157,6 +159,8 @@ "name": "passkey_login", "type": "hidden", "disabled": false, + "onload": "window.oryPasskeyLoginAutocompleteInit()", + "onloadTrigger": "oryPasskeyLoginAutocompleteInit", "node_type": "input" }, "messages": [], @@ -168,7 +172,7 @@ "attributes": { "name": "passkey_challenge", "type": "hidden", - "value": "{\"publicKey\":{\"challenge\":\"rlZe03JabwF9e5YamwdVljjh8-tbtC9NSS9YjB7layk\",\"timeout\":300000,\"rpId\":\"friendly-franklin-hcfczr99ek.projects.oryapis\",\"userVerification\":\"preferred\"}}", + "value": "{\"publicKey\":{\"challenge\":\"j-AcTnYzHZCKq--PnEMGz72K0nh3BqH2emzwFOj-Dyw\",\"timeout\":300000,\"rpId\":\"dreamy-wiles-28csoig0cg.projects.oryapis\",\"userVerification\":\"preferred\"}}", "disabled": false, "node_type": "input" }, @@ -189,7 +193,7 @@ "meta": { "label": { "id": 1010015, - "text": "Sign in with code", + "text": "Send sign in code", "type": "info" } } @@ -227,8 +231,8 @@ "messages": [], "meta": { "label": { - "id": 1010001, - "text": "Sign in", + "id": 1010022, + "text": "Sign in with password", "type": "info" } } @@ -242,8 +246,8 @@ } ] }, - "created_at": "2024-04-25T12:57:44.140779Z", - "updated_at": "2024-04-25T12:57:44.140779Z", + "created_at": "2024-10-29T09:45:38.863683Z", + "updated_at": "2024-10-29T09:45:38.863683Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/code-input.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/code-input.json index b8f4c12eb..35311df26 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/code-input.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/code-input.json @@ -1,36 +1,22 @@ { - "id": "08afa882-d36a-473a-9faf-77dc25763b01", + "id": "1c2b44ff-d5eb-4508-8671-9942fcf9c2fd", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:42.792898Z", - "issued_at": "2024-04-25T12:57:42.792898Z", - "request_url": "https://naughty-torvalds-10x7h3fzj6.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:35.875715Z", + "issued_at": "2024-10-29T09:45:35.875715Z", + "request_url": "https://ecstatic-ganguly-vkw4on0o7a.projects.oryapis:8080/self-service/login/browser", "active": "code", "ui": { - "action": "https://naughty-torvalds-10x7h3fzj6.projects.oryapis:8080/self-service/login?flow=08afa882-d36a-473a-9faf-77dc25763b01", + "action": "https://ecstatic-ganguly-vkw4on0o7a.projects.oryapis:8080/self-service/login?flow=1c2b44ff-d5eb-4508-8671-9942fcf9c2fd", "method": "POST", "nodes": [ - { - "type": "input", - "group": "default", - "attributes": { - "name": "csrf_token", - "type": "hidden", - "value": "h41boJQiZLBAvjdVt1cCJAfFOFvJpWaFhInQHEy4wITCIL4a0DXVRWHIv+PMJH20wRxlf+6iZ5USog7I/3/6LA==", - "required": true, - "disabled": false, - "node_type": "input" - }, - "messages": [], - "meta": {} - }, { "type": "input", "group": "default", "attributes": { "name": "identifier", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.1tnn3qyzbqf0.dnspguo1be@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.yrtjdvzksr0.y9ns4uih47d@ory.dev", "required": true, "disabled": false, "node_type": "input" @@ -92,8 +78,8 @@ "messages": [], "meta": { "label": { - "id": 1070005, - "text": "Submit", + "id": 1070009, + "text": "Continue", "type": "info" } } @@ -116,18 +102,32 @@ "type": "info" } } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "HDU1ID5ZR7f5ITbHX/14LOkQF0+J+SwKp1kQ8b4uT9gq/tIGK1CfG4obszCxazcvXLgg62UNdSUdd8dqpXZjIQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} } ], "messages": [ { "id": 1010014, - "text": "An email containing a code has been sent to the email address you provided. If you have not received an email, check the spelling of the address and retry the login.", + "text": "A code has been sent to the address you provided. If you have not received an message, check the spelling of the address and retry the login.", "type": "info" } ] }, - "created_at": "2024-04-25T12:57:42.795925Z", - "updated_at": "2024-04-25T12:57:42.795925Z", + "created_at": "2024-10-29T09:45:35.88133Z", + "updated_at": "2024-10-29T09:45:35.88133Z", "refresh": false, "requested_aal": "aal1", "state": "sent_email", diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/initial-form.json index 06d27bf2f..9fa34fc5d 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/initial-form.json @@ -1,11 +1,11 @@ { - "id": "4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "id": "783105b8-5b0a-4732-8f92-5989d917e376", "type": "browser", - "expires_at": "2024-04-25T13:57:41.091806347Z", - "issued_at": "2024-04-25T12:57:41.091806347Z", - "request_url": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:32.482860006Z", + "issued_at": "2024-10-29T09:45:32.482860006Z", + "request_url": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration?flow=4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "action": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration?flow=783105b8-5b0a-4732-8f92-5989d917e376", "method": "POST", "nodes": [ { @@ -100,7 +100,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "3eRMUWBruxCwAtoGq1MJ6TnRo9LaKTOoC2DRaptT5aFVnH+RALhgewlHQJ5e1ebT8K1tAcwUlTmdnBsV0vUySA==", + "value": "fomYlWXtSkWySNLcV7oM2Jy0VOJsqb7PABomnyf9fh9b6AWaFkPyzbmyxlfQ5NImcV3yDJ9i791vgD0qyrEXjw==", "required": true, "disabled": false, "node_type": "input" @@ -122,7 +122,46 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up 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" } } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/invalid-account.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/invalid-account.json index b2e9f269a..cd1269c0f 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/invalid-account.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/invalid-account.json @@ -1,11 +1,11 @@ { - "id": "4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "id": "783105b8-5b0a-4732-8f92-5989d917e376", "type": "browser", - "expires_at": "2024-04-25T13:57:41.091806Z", - "issued_at": "2024-04-25T12:57:41.091806Z", - "request_url": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:32.48286Z", + "issued_at": "2024-10-29T09:45:32.48286Z", + "request_url": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration?flow=4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "action": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration?flow=783105b8-5b0a-4732-8f92-5989d917e376", "method": "POST", "nodes": [ { @@ -109,7 +109,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "leK4uZHjUXV5Ji6xI7LAcaxiNU6V3GUe56puCqu2jL0dmot58TCKHsBjtCnWNC9LZR77nYPhw49xVqR14hBbVA==", + "value": "QMtHdp4ao3kaFfe55NKzn1UESb+rQgj3y9G7hvrf5pdlqtp57bQb8RHv4zJjjG1huO3vUViJWeWkS6AzF5OPBw==", "required": true, "disabled": false, "node_type": "input" @@ -131,7 +131,46 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up 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" } } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/missing-email.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/missing-email.json index d807f3bfc..ce53b8e77 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/missing-email.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/missing-email.json @@ -1,11 +1,11 @@ { - "id": "4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "id": "783105b8-5b0a-4732-8f92-5989d917e376", "type": "browser", - "expires_at": "2024-04-25T13:57:41.091806Z", - "issued_at": "2024-04-25T12:57:41.091806Z", - "request_url": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:32.48286Z", + "issued_at": "2024-10-29T09:45:32.48286Z", + "request_url": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://epic-shaw-qkjg2xuv0p.projects.oryapis:8080/self-service/registration?flow=4ea204bf-e9df-459c-b0c7-1045b9fd13b7", + "action": "https://romantic-lamarr-es6gnhvtw7.projects.oryapis:8080/self-service/registration?flow=783105b8-5b0a-4732-8f92-5989d917e376", "method": "POST", "nodes": [ { @@ -109,7 +109,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "rg8TTRRG4Q85IsRp6zcKNw3yNKwyEBQ9+Q1XerxMP8YmdyCNdJU6ZIBnXvEeseUNxI76fyQtsqxv8Z0F9eroLw==", + "value": "M/LWhsf7pzwRF9sGLg+ftyShkOucmbhTYINGDSMnGLAWk0uJtFUftBrtz42pUUFJyUg2BW9S6UEPGV24zmtxIA==", "required": true, "disabled": false, "node_type": "input" @@ -131,7 +131,46 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up 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" } } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/wrong-credentials.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/wrong-credentials.json index 93e90a6d8..38e7cbca6 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/wrong-credentials.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/code/wrong-credentials.json @@ -1,13 +1,13 @@ { - "id": "08afa882-d36a-473a-9faf-77dc25763b01", + "id": "1c2b44ff-d5eb-4508-8671-9942fcf9c2fd", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:42.792898Z", - "issued_at": "2024-04-25T12:57:42.792898Z", - "request_url": "https://naughty-torvalds-10x7h3fzj6.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:35.875715Z", + "issued_at": "2024-10-29T09:45:35.875715Z", + "request_url": "https://ecstatic-ganguly-vkw4on0o7a.projects.oryapis:8080/self-service/login/browser", "active": "code", "ui": { - "action": "https://naughty-torvalds-10x7h3fzj6.projects.oryapis:8080/self-service/login?flow=08afa882-d36a-473a-9faf-77dc25763b01", + "action": "https://ecstatic-ganguly-vkw4on0o7a.projects.oryapis:8080/self-service/login?flow=1c2b44ff-d5eb-4508-8671-9942fcf9c2fd", "method": "POST", "nodes": [ { @@ -16,7 +16,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "+dCJMSODJwlah6qTfDYcGw08/2MW/NBQmvlYF7hHvN68fWyLZ5SW/HvxIiUHRWOLy+WiRzH70UAM0obDC4CGdg==", + "value": "W2APHF12KV7QFwvCUXp1X3iOuDYSHqviyCquwNiYCJVtq+g6SH/x8qMtjjW/7DpczSaPkv7q8s1yBHlbw8AkbA==", "required": true, "disabled": false, "node_type": "input" @@ -29,23 +29,13 @@ "group": "default", "attributes": { "name": "identifier", - "type": "text", - "value": "dev+orycye2eda2f162daf6142dd0.1tnn3qyzbqf0.dnspguo1be@ory.dev", - "required": true, + "type": "hidden", + "value": "dev+orycye2eda2f162daf6142dd0.yrtjdvzksr0.y9ns4uih47d@ory.dev", "disabled": false, "node_type": "input" }, "messages": [], - "meta": { - "label": { - "id": 1070002, - "text": "E-Mail", - "type": "info", - "context": { - "title": "E-Mail" - } - } - } + "meta": {} }, { "type": "input", @@ -111,8 +101,8 @@ "messages": [], "meta": { "label": { - "id": 1070005, - "text": "Submit", + "id": 1070009, + "text": "Continue", "type": "info" } } @@ -126,8 +116,8 @@ } ] }, - "created_at": "2024-04-25T12:57:42.795925Z", - "updated_at": "2024-04-25T12:57:42.795925Z", + "created_at": "2024-10-29T09:45:35.88133Z", + "updated_at": "2024-10-29T09:45:35.88133Z", "refresh": false, "requested_aal": "aal1", "state": "sent_email" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/none/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/none/initial-form.json index 5aa1544e8..b1ccc2200 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/none/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/none/initial-form.json @@ -1,12 +1,12 @@ { - "id": "b54c4772-5d84-4d13-a23d-5f194b17037f", + "id": "35f2df88-8442-428c-887a-16b894afbcc8", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:42.231302375Z", - "issued_at": "2024-04-25T12:57:42.231302375Z", - "request_url": "https://xenodochial-haslett-czoqm7lclx.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:37.2137798Z", + "issued_at": "2024-10-29T09:45:37.2137798Z", + "request_url": "https://lucid-mayer-fnz4cfjy9n.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://xenodochial-haslett-czoqm7lclx.projects.oryapis:8080/self-service/login?flow=b54c4772-5d84-4d13-a23d-5f194b17037f", + "action": "https://lucid-mayer-fnz4cfjy9n.projects.oryapis:8080/self-service/login?flow=35f2df88-8442-428c-887a-16b894afbcc8", "method": "POST", "nodes": [ { @@ -15,7 +15,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "v4czjv6RgQq1hMh3rYpZSuIqT5u3rIIk6gwoTZbb2zpkbeujbezdvSvRUNoqik5Aakj1kzWVkhbMUjFH71H6Lg==", + "value": "q8qopE25+AzZleVcq18dhrm8HOnpITEP5FwosXaf61DvvT2/Qe1DJrFybDjSQB3QQZP4+YI/ZYDunHsxj4j5nQ==", "required": true, "disabled": false, "node_type": "input" @@ -25,8 +25,8 @@ } ] }, - "created_at": "2024-04-25T12:57:42.232968Z", - "updated_at": "2024-04-25T12:57:42.232968Z", + "created_at": "2024-10-29T09:45:37.21759Z", + "updated_at": "2024-10-29T09:45:37.21759Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/oidc/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/oidc/initial-form.json index aee95e164..ccbedd829 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/oidc/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/oidc/initial-form.json @@ -1,12 +1,12 @@ { - "id": "5ca844df-133e-42b4-bc7f-9b477161a247", + "id": "1f745189-9900-4837-8dfd-8ffed03b205d", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:53.109598338Z", - "issued_at": "2024-04-25T12:57:53.109598338Z", - "request_url": "https://wonderful-sinoussi-ugrt93yg5l.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:52.166247501Z", + "issued_at": "2024-10-29T09:45:52.166247501Z", + "request_url": "https://sad-brown-097vtt9h1o.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://wonderful-sinoussi-ugrt93yg5l.projects.oryapis:8080/self-service/login?flow=5ca844df-133e-42b4-bc7f-9b477161a247", + "action": "https://sad-brown-097vtt9h1o.projects.oryapis:8080/self-service/login?flow=1f745189-9900-4837-8dfd-8ffed03b205d", "method": "POST", "nodes": [ { @@ -26,7 +26,8 @@ "text": "Sign in with x", "type": "info", "context": { - "provider": "x" + "provider": "x", + "provider_id": "X" } } } @@ -48,7 +49,8 @@ "text": "Sign in with Apple", "type": "info", "context": { - "provider": "Apple" + "provider": "Apple", + "provider_id": "apple" } } } @@ -70,7 +72,8 @@ "text": "Sign in with auth0", "type": "info", "context": { - "provider": "auth0" + "provider": "auth0", + "provider_id": "auth0" } } } @@ -92,7 +95,8 @@ "text": "Sign in with FooBarLogo", "type": "info", "context": { - "provider": "FooBarLogo" + "provider": "FooBarLogo", + "provider_id": "generic" } } } @@ -114,7 +118,8 @@ "text": "Sign in with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -136,7 +141,8 @@ "text": "Sign in with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -158,7 +164,8 @@ "text": "Sign in with LinkedIn", "type": "info", "context": { - "provider": "LinkedIn" + "provider": "LinkedIn", + "provider_id": "linkedin" } } } @@ -180,7 +187,8 @@ "text": "Sign in with Microsoft", "type": "info", "context": { - "provider": "Microsoft" + "provider": "Microsoft", + "provider_id": "microsoft" } } } @@ -191,18 +199,80 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "P0T3qSYbAiRNjwCZpYPXJrIGSF/lBTyPl3aZte4rVGNcvbMn2fBIPeRjWOnlYGhYpvh63GQqKFsFISguyCuyZg==", + "value": "K0E5HJdhmB41FQ2aVnp7UigvzIgePyw1otXksbN5mvjxJwyxd4GUbB8/m0susKPW3qRb97lfofm2r34hV5jKHg==", "required": true, "disabled": false, "node_type": "input" }, "messages": [], "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "identifier", + "type": "text", + "value": "", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "E-Mail", + "type": "info", + "context": { + "title": "E-Mail" + } + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "password", + "type": "password", + "required": true, + "autocomplete": "current-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": 1010022, + "text": "Sign in with password", + "type": "info" + } + } } ] }, - "created_at": "2024-04-25T12:57:53.111622Z", - "updated_at": "2024-04-25T12:57:53.111622Z", + "created_at": "2024-10-29T09:45:52.176289Z", + "updated_at": "2024-10-29T09:45:52.176289Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/initial-form.json index 23790d6c0..fe8acf731 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/initial-form.json @@ -1,11 +1,11 @@ { - "id": "c16b58c8-32ae-4264-a63f-f606f1c932be", + "id": "78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "type": "browser", - "expires_at": "2024-04-25T13:57:45.945407627Z", - "issued_at": "2024-04-25T12:57:45.945407627Z", - "request_url": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:42.780134678Z", + "issued_at": "2024-10-29T09:45:42.780134678Z", + "request_url": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration?flow=c16b58c8-32ae-4264-a63f-f606f1c932be", + "action": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration?flow=78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "V/81R7TAlrCsiHs7d/NRRenJKP2HrNSte2nr9LzpoERAPLizujkBVtQYNcccHQ0XTJcR/YqECJ6ct1CuDsAkug==", + "value": "jqF9x5lfM3JLsNcb5HWSRRm8xBLk9EQ/R6ozZJTLYhwLbjsg4kPzy2TTKlOxwPdXkYMuoYXW7/zjzh9H8Sg7zg==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/missing-email.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/missing-email.json index fea917f37..d1c2bea5c 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/missing-email.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/missing-email.json @@ -1,11 +1,11 @@ { - "id": "c16b58c8-32ae-4264-a63f-f606f1c932be", + "id": "78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "type": "browser", - "expires_at": "2024-04-25T13:57:45.945407Z", - "issued_at": "2024-04-25T12:57:45.945407Z", - "request_url": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:42.780134Z", + "issued_at": "2024-10-29T09:45:42.780134Z", + "request_url": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration?flow=c16b58c8-32ae-4264-a63f-f606f1c932be", + "action": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration?flow=78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "jsoDS+rlz77GccEQzyMxaGeY+HBvQ2nY67lDXbetYqGZCY6/5BxYWL7hj+ykzW06wsbBcGJrtesMZ/gHBYTmXw==", + "value": "/6H3gkLHBCEsjqgFWAxXWCq5aV1sE5gy7HjLWUZMbH16brFlOdvEmAPtVU0NuTJKooaD7g0xM/FIHOd6I681rw==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/wrong-credentials.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/wrong-credentials.json index e33243404..9e7620e60 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/wrong-credentials.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/password/wrong-credentials.json @@ -1,11 +1,11 @@ { - "id": "c16b58c8-32ae-4264-a63f-f606f1c932be", + "id": "78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "type": "browser", - "expires_at": "2024-04-25T13:57:45.945407Z", - "issued_at": "2024-04-25T12:57:45.945407Z", - "request_url": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:42.780134Z", + "issued_at": "2024-10-29T09:45:42.780134Z", + "request_url": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://modest-mclean-7sb33o1yb7.projects.oryapis:8080/self-service/registration?flow=c16b58c8-32ae-4264-a63f-f606f1c932be", + "action": "https://keen-bartik-cvzpttoe79.projects.oryapis:8080/self-service/registration?flow=78253dca-fd68-4e9f-9a39-3ebc5bbf2fda", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "gO4f7rmf48YGLQg9i/8zcEsxWu5R9QyIxPX495TAg6mXLZIat2Z0IH69RsHgEW8i7m9j7lzd0LsjK0OtJukHVw==", + "value": "qZWOK4pg46gRau/4n2wUB8cxFZIHelRpgAeUToi4FY4sWsjM8XwjET4JErDK2XEVTw7/IWZY/6okY7ht7VtMXA==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/initial-form.json index ed4723003..eaf563666 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/initial-form.json @@ -1,12 +1,12 @@ { - "id": "c716b2bc-62dd-4393-9fce-bcad08576dca", + "id": "fe189118-902c-4f78-a742-342356f2a3ec", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:49.507108Z", - "issued_at": "2024-04-25T12:57:49.507108Z", - "request_url": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login/browser?aal=&refresh=&return_to=&organization=&via=", + "expires_at": "2024-10-29T10:45:48.76084Z", + "issued_at": "2024-10-29T09:45:48.76084Z", + "request_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login/browser?aal=&refresh=&return_to=&organization=&via=", "ui": { - "action": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login?flow=c716b2bc-62dd-4393-9fce-bcad08576dca", + "action": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login?flow=fe189118-902c-4f78-a742-342356f2a3ec", "method": "POST", "nodes": [ { @@ -15,7 +15,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "Ds5dxpAU/2Sj0WBWFa5uFzz2/P4ruVFGSnUr0V4JhAxGiSezSRztQFlFxqCrPxTeTXpwlrX/Fabe7clrVpX/Sg==", + "value": "gmsCHEYS8hdrurAvYH54e3R4YvFXZHN0z84nmCAo7d9umiMNbTqUiGgIMWN3X1GAUfG1uZc3KrPayx9NmdsNjg==", "required": true, "disabled": false, "node_type": "input" @@ -61,15 +61,15 @@ "meta": { "label": { "id": 1010008, - "text": "Use security key", + "text": "Sign in with hardware key", "type": "info" } } } ] }, - "created_at": "2024-04-25T12:57:49.509163Z", - "updated_at": "2024-04-25T12:57:49.509163Z", + "created_at": "2024-10-29T09:45:48.763474Z", + "updated_at": "2024-10-29T09:45:48.763474Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/invalid-account.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/invalid-account.json index 52aa71884..1aaf46b65 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/invalid-account.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/invalid-account.json @@ -1,12 +1,12 @@ { - "id": "9af3b6eb-fd8d-46b6-9c7e-b7efbdd0be15", + "id": "e0e1fbff-1f67-4f43-b686-e2e13f20c31d", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:49.825551Z", - "issued_at": "2024-04-25T12:57:49.825551Z", - "request_url": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login/browser", + "expires_at": "2024-10-29T10:45:49.216119Z", + "issued_at": "2024-10-29T09:45:49.216119Z", + "request_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login/browser", "ui": { - "action": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login?flow=9af3b6eb-fd8d-46b6-9c7e-b7efbdd0be15", + "action": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login?flow=e0e1fbff-1f67-4f43-b686-e2e13f20c31d", "method": "POST", "nodes": [ { @@ -15,7 +15,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "fC6Gp46FHFeT9cBjEc0aYgKYsLmGbgglFvgKo0xAPVZDsPflvAhT7/cqLDGCVCVuYSxyIrNN9HscEH8ckT2g3w==", + "value": "XbAsvaU+Bxq08xhkISVldUEYq1JQJ0+wzZ/nGKgGcdABa2Sn+lCE99Eze934G3ei2fHlt5dD9jroN2WCr5zHRg==", "required": true, "disabled": false, "node_type": "input" @@ -61,7 +61,7 @@ "meta": { "label": { "id": 1010008, - "text": "Use security key", + "text": "Sign in with hardware key", "type": "info" } } @@ -75,8 +75,8 @@ } ] }, - "created_at": "2024-04-25T12:57:49.827733Z", - "updated_at": "2024-04-25T12:57:49.827733Z", + "created_at": "2024-10-29T09:45:49.225749Z", + "updated_at": "2024-10-29T09:45:49.225749Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/show-trigger.json b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/show-trigger.json index 81c26146c..6da4d3a7b 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/show-trigger.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/login/1fa/webauthn/show-trigger.json @@ -1,12 +1,12 @@ { - "id": "c716b2bc-62dd-4393-9fce-bcad08576dca", + "id": "fe189118-902c-4f78-a742-342356f2a3ec", "organization_id": null, "type": "browser", - "expires_at": "2024-04-25T13:57:49.507108Z", - "issued_at": "2024-04-25T12:57:49.507108Z", - "request_url": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login/browser?aal=&refresh=&return_to=&organization=&via=", + "expires_at": "2024-10-29T10:45:48.76084Z", + "issued_at": "2024-10-29T09:45:48.76084Z", + "request_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login/browser?aal=&refresh=&return_to=&organization=&via=", "ui": { - "action": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/login?flow=c716b2bc-62dd-4393-9fce-bcad08576dca", + "action": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/login?flow=fe189118-902c-4f78-a742-342356f2a3ec", "method": "POST", "nodes": [ { @@ -15,7 +15,7 @@ "attributes": { "name": "identifier", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.7qgpxvzmt6p0.3q4d455aixk@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.nqwe2lavry0.f4h5y029idj@ory.dev", "required": true, "disabled": false, "node_type": "input" @@ -29,7 +29,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "nkdSHLqoNEFd+wxC7c4jReQLarLfKAuXJmlPefg0r3bWAChpY6AmZadvqrRTX1mMlYfm2kFuT3ey8a3D8KjUMA==", + "value": "bR+n055e6MR4iRaRuSJ239rLOiMMD6o2yhRwC5aLY1WB7obCtXaOW3s7l92uA18k/0Lta8xc8/HfEUjeL3iDBA==", "required": true, "disabled": false, "node_type": "input" @@ -41,14 +41,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "ba71287b-4d52-4331-81b5-aed55db9940c", + "nonce": "8c70f7a6-efee-4daf-b23b-62b8cbd07d01", "node_type": "script" }, "messages": [], @@ -60,9 +60,9 @@ "attributes": { "name": "webauthn_login_trigger", "type": "button", - "value": "{\"publicKey\":{\"challenge\":\"6OCIMMjwQVslvUHMD5pbAYKajcPxD3ZAa7qpEZwSDUc\",\"timeout\":120000,\"rpId\":\"tender-goodall-7lgc6uyls4.projects.oryapis\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"p9qf476rnA5H4808ZQsAAsgzZ_b_AWJXrTTf9UhtZ3s\"}],\"userVerification\":\"discouraged\"}}", + "value": "{\"publicKey\":{\"challenge\":\"342M-urm4Mf2NR_-18jkvYqwUQBhbKrE1Z8nPfQylSM\",\"timeout\":120000,\"rpId\":\"romantic-tu-rf98ru5rql.projects.oryapis\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"IFIPP9EDx5argEdBKiwqhEBf1rGOqEWLXvTDCTT-EHw\"}],\"userVerification\":\"discouraged\"}}", "disabled": false, - "onclick": "window.oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"6OCIMMjwQVslvUHMD5pbAYKajcPxD3ZAa7qpEZwSDUc\",\"timeout\":120000,\"rpId\":\"tender-goodall-7lgc6uyls4.projects.oryapis\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"p9qf476rnA5H4808ZQsAAsgzZ_b_AWJXrTTf9UhtZ3s\"}],\"userVerification\":\"discouraged\"}})", + "onclick": "window.oryWebAuthnLogin({\"publicKey\":{\"challenge\":\"342M-urm4Mf2NR_-18jkvYqwUQBhbKrE1Z8nPfQylSM\",\"timeout\":120000,\"rpId\":\"romantic-tu-rf98ru5rql.projects.oryapis\",\"allowCredentials\":[{\"type\":\"public-key\",\"id\":\"IFIPP9EDx5argEdBKiwqhEBf1rGOqEWLXvTDCTT-EHw\"}],\"userVerification\":\"discouraged\"}})", "onclickTrigger": "oryWebAuthnLogin", "node_type": "input" }, @@ -97,8 +97,8 @@ } ] }, - "created_at": "2024-04-25T12:57:49.509163Z", - "updated_at": "2024-04-25T12:57:49.509163Z", + "created_at": "2024-10-29T09:45:48.763474Z", + "updated_at": "2024-10-29T09:45:48.763474Z", "refresh": false, "requested_aal": "aal1", "state": "choose_method" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/disabled/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/disabled/initial-form.json index 7fffe90f2..8b68b74f7 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/disabled/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/disabled/initial-form.json @@ -2,7 +2,7 @@ "error": { "code": 400, "status": "Bad Request", - "request": "8ebcc658-21e1-992d-ac51-354b11b371a0", + "request": "852a098a-1b86-9a46-8a78-4fb4d09a1d55", "reason": "Recovery is not allowed because it was disabled.", "message": "The request was malformed or contained invalid parameters" } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/none/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/none/initial-form.json index 565d180b4..7e6314465 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/none/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/recovery/none/initial-form.json @@ -2,7 +2,7 @@ "error": { "code": 400, "status": "Bad Request", - "request": "3e38385d-71ad-9060-af56-ecd6a0604033", + "request": "11ce69d3-6dc5-93a9-a901-0ba798c02a4e", "reason": "You attempted recovery using code, which is not enabled or does not exist. An administrator needs to enable this recovery method.", "message": "The request was malformed or contained invalid parameters" } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/initial-form.json index 292473449..8403009df 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/initial-form.json @@ -1,11 +1,11 @@ { - "id": "e77d5b46-4a0a-44a6-8617-358b938c738c", + "id": "b9fe1e9e-21a7-48a9-8f5d-20efd3423647", "type": "browser", - "expires_at": "2024-04-25T13:57:44.061863834Z", - "issued_at": "2024-04-25T12:57:44.061863834Z", - "request_url": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:38.835312759Z", + "issued_at": "2024-10-29T09:45:38.835312759Z", + "request_url": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/self-service/registration?flow=e77d5b46-4a0a-44a6-8617-358b938c738c", + "action": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/self-service/registration?flow=b9fe1e9e-21a7-48a9-8f5d-20efd3423647", "method": "POST", "nodes": [ { @@ -25,7 +25,8 @@ "text": "Sign up with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -47,7 +48,8 @@ "text": "Sign up with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -144,7 +146,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "y9DQSyOkAf3Xu16zG/sDymJcdUXde5L68HdhM/PO501RIIa88Ocs2UPg30W6hJBS+t42V1JkBPozHqmfV1ufKQ==", + "value": "x1UHcIMSLGxaB2CtwVgRvevcZwZvc8j3TjJkZpWkE2aK0VPIQAlysdsSSg4qxR+SSsn/Gvqv5Uwbxw2oNj8+nA==", "required": true, "disabled": false, "node_type": "input" @@ -190,9 +192,9 @@ "attributes": { "name": "webauthn_register_trigger", "type": "button", - "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"wTu-l2zfSxawqGhq-OIweg\"},\"challenge\":\"wa7lu1Tl9o89azAmc-1GSceEtIHRjrWP5tXwbie2ZKA\",\"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\"}}}", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"XeqrF9GfSbS58TKtzAh2zg\"},\"challenge\":\"74bigZU3_ltbQ9-ET16iGRQ-qRyRB2ViUshbXrwO8T0\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", "disabled": false, - "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"wTu-l2zfSxawqGhq-OIweg\"},\"challenge\":\"wa7lu1Tl9o89azAmc-1GSceEtIHRjrWP5tXwbie2ZKA\",\"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\"}}})", + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"XeqrF9GfSbS58TKtzAh2zg\"},\"challenge\":\"74bigZU3_ltbQ9-ET16iGRQ-qRyRB2ViUshbXrwO8T0\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", "onclickTrigger": "oryWebAuthnRegistration", "node_type": "input" }, @@ -209,14 +211,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "2c12bcb3-c232-4253-a491-f597ed5ae6c4", + "nonce": "d884dc30-5685-4946-ad4d-b43f0cbc640c", "node_type": "script" }, "messages": [], @@ -260,7 +262,7 @@ "attributes": { "name": "passkey_create_data", "type": "hidden", - "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"TEVTc1lOQ0VGeXFkVk95eFdsQkVNVXFZcEtYYWNTS2hVdWFPemt3QmVOVDJ5QVd0eXBkTjE5ZmxkRml4VFVLYw\"},\"challenge\":\"Oma849QLA4bki66gGpd0S50T6ChsmmeU9zqE9e5XLF4\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", + "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"aVgzMlFQekY3RlQxdWxSdmNESFp3Z1ZobW5iOTlBZVl3MEI2RHRqaDJZaWFjMTQ0bG9SSFRqQVROckhPSGlsUQ\"},\"challenge\":\"2kj8SlMR3pebjCL90xCVyrFMqsrDBD1G2JVnL8BrJZs\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", "disabled": false, "node_type": "input" }, @@ -281,7 +283,7 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up code", "type": "info" } } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/missing-fields.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/missing-fields.json index 021169cd2..3d3d6c1fe 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/missing-fields.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/all-methods/missing-fields.json @@ -1,11 +1,11 @@ { - "id": "e77d5b46-4a0a-44a6-8617-358b938c738c", + "id": "b9fe1e9e-21a7-48a9-8f5d-20efd3423647", "type": "browser", - "expires_at": "2024-04-25T13:57:44.061863Z", - "issued_at": "2024-04-25T12:57:44.061863Z", - "request_url": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:38.835312Z", + "issued_at": "2024-10-29T09:45:38.835312Z", + "request_url": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/self-service/registration?flow=e77d5b46-4a0a-44a6-8617-358b938c738c", + "action": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/self-service/registration?flow=b9fe1e9e-21a7-48a9-8f5d-20efd3423647", "method": "POST", "nodes": [ { @@ -25,7 +25,8 @@ "text": "Sign up with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -47,7 +48,8 @@ "text": "Sign up with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -153,7 +155,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "/IaYRz4TZ9dV9gfiBiCcXTgIQskd87HkCURE+bBTCUtmds6w7VBK88GthhSnXw/FoIoB25LsJ+TKLYxVFMZxLw==", + "value": "n+/j1e1Kaf4DFB8Cx0FqbO2TvRqYHEA/+Kr5rL98B3nSa7dtLlE3I4IBNaEs3GRDTIYlBg3AbYStX5BiHOcqgw==", "required": true, "disabled": false, "node_type": "input" @@ -199,9 +201,9 @@ "attributes": { "name": "webauthn_register_trigger", "type": "button", - "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"wTu-l2zfSxawqGhq-OIweg\"},\"challenge\":\"wa7lu1Tl9o89azAmc-1GSceEtIHRjrWP5tXwbie2ZKA\",\"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\"}}}", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"XeqrF9GfSbS58TKtzAh2zg\"},\"challenge\":\"74bigZU3_ltbQ9-ET16iGRQ-qRyRB2ViUshbXrwO8T0\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", "disabled": false, - "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"wTu-l2zfSxawqGhq-OIweg\"},\"challenge\":\"wa7lu1Tl9o89azAmc-1GSceEtIHRjrWP5tXwbie2ZKA\",\"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\"}}})", + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"XeqrF9GfSbS58TKtzAh2zg\"},\"challenge\":\"74bigZU3_ltbQ9-ET16iGRQ-qRyRB2ViUshbXrwO8T0\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", "onclickTrigger": "oryWebAuthnRegistration", "node_type": "input" }, @@ -218,14 +220,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://busy-northcutt-9c8y6mgw44.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://laughing-easley-g0jaq9kdbx.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "2c12bcb3-c232-4253-a491-f597ed5ae6c4", + "nonce": "d884dc30-5685-4946-ad4d-b43f0cbc640c", "node_type": "script" }, "messages": [], @@ -269,7 +271,7 @@ "attributes": { "name": "passkey_create_data", "type": "hidden", - "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"busy-northcutt-9c8y6mgw44.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-nhs7otCZ3RoXwkDD-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"TEVTc1lOQ0VGeXFkVk95eFdsQkVNVXFZcEtYYWNTS2hVdWFPemt3QmVOVDJ5QVd0eXBkTjE5ZmxkRml4VFVLYw\"},\"challenge\":\"Oma849QLA4bki66gGpd0S50T6ChsmmeU9zqE9e5XLF4\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", + "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"laughing-easley-g0jaq9kdbx.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J9f5VQ2Bb157Oiew-6-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003eone-step\\u003eone step registration\",\"id\":\"aVgzMlFQekY3RlQxdWxSdmNESFp3Z1ZobW5iOTlBZVl3MEI2RHRqaDJZaWFjMTQ0bG9SSFRqQVROckhPSGlsUQ\"},\"challenge\":\"2kj8SlMR3pebjCL90xCVyrFMqsrDBD1G2JVnL8BrJZs\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", "disabled": false, "node_type": "input" }, @@ -290,7 +292,7 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up code", "type": "info" } } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/disabled/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/disabled/initial-form.json index 72fe0fe73..bf75036df 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/disabled/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/disabled/initial-form.json @@ -3,7 +3,7 @@ "id": "self_service_flow_disabled", "code": 400, "status": "Bad Request", - "request": "e3b4d2de-1118-9977-ade1-f0f822b9d617", + "request": "5ffbb32f-cfc8-928b-99e8-90b96ed55a7f", "reason": "Registration is not allowed because it was disabled.", "message": "registration flow disabled" } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/none/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/none/initial-form.json index 9b18934c1..f61efcd1c 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/none/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/none/initial-form.json @@ -1,11 +1,11 @@ { - "id": "6669f65a-0b39-45df-b282-92b112625451", + "id": "5da50e2e-2cac-4c95-80ec-523418a31751", "type": "browser", - "expires_at": "2024-04-25T13:57:42.246461583Z", - "issued_at": "2024-04-25T12:57:42.246461583Z", - "request_url": "https://laughing-chatterjee-9po9989jau.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:38.008022134Z", + "issued_at": "2024-10-29T09:45:38.008022134Z", + "request_url": "https://dazzling-ardinghelli-pkbijj47zr.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://laughing-chatterjee-9po9989jau.projects.oryapis:8080/self-service/registration?flow=6669f65a-0b39-45df-b282-92b112625451", + "action": "https://dazzling-ardinghelli-pkbijj47zr.projects.oryapis:8080/self-service/registration?flow=5da50e2e-2cac-4c95-80ec-523418a31751", "method": "POST", "nodes": null }, diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/oidc/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/oidc/initial-form.json new file mode 100644 index 000000000..72230c517 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/oidc/initial-form.json @@ -0,0 +1,338 @@ +{ + "id": "a954b8ad-a5b1-4425-90f9-ec83712b5d69", + "type": "browser", + "expires_at": "2024-10-29T10:45:52.416224377Z", + "issued_at": "2024-10-29T09:45:52.416224377Z", + "request_url": "https://goofy-ganguly-qodgfqj41p.projects.oryapis:8080/self-service/registration/browser", + "ui": { + "action": "https://goofy-ganguly-qodgfqj41p.projects.oryapis:8080/self-service/registration?flow=a954b8ad-a5b1-4425-90f9-ec83712b5d69", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "X", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with x", + "type": "info", + "context": { + "provider": "x", + "provider_id": "X" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "apple", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with Apple", + "type": "info", + "context": { + "provider": "Apple", + "provider_id": "apple" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "auth0", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with auth0", + "type": "info", + "context": { + "provider": "auth0", + "provider_id": "auth0" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "generic", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with FooBarLogo", + "type": "info", + "context": { + "provider": "FooBarLogo", + "provider_id": "generic" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "github", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with GitHub", + "type": "info", + "context": { + "provider": "GitHub", + "provider_id": "github" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with Google", + "type": "info", + "context": { + "provider": "Google", + "provider_id": "google" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "linkedin", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with LinkedIn", + "type": "info", + "context": { + "provider": "LinkedIn", + "provider_id": "linkedin" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "provider", + "type": "submit", + "value": "microsoft", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1040002, + "text": "Sign up with Microsoft", + "type": "info", + "context": { + "provider": "Microsoft", + "provider_id": "microsoft" + } + } + } + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "il1NWIw7iTHPBVBsbzdfoetbAIx45nlsdJK/OirWaLi0h16E37xNXL2NBZSukVfDFhVfBJmbdyAE+BGPU1IHPA==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "password", + "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": "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": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "password", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "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" + } + } + } + ] + }, + "organization_id": null, + "state": "choose_method" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/passkey/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/passkey/initial-form.json index b540e0753..fc6c6d2dd 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/passkey/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/passkey/initial-form.json @@ -1,11 +1,11 @@ { - "id": "4fae4bc6-ddbe-4c57-bf7f-7f2826b7105c", + "id": "42569a5b-fa0f-441b-8cc0-8a3afcfee560", "type": "browser", - "expires_at": "2024-04-25T13:57:45.330541Z", - "issued_at": "2024-04-25T12:57:45.330541Z", - "request_url": "https://condescending-cray-s5hh1bvf71.projects.oryapis:8080/self-service/registration/browser?", + "expires_at": "2024-10-29T10:45:42.243855Z", + "issued_at": "2024-10-29T09:45:42.243855Z", + "request_url": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/self-service/registration/browser?", "ui": { - "action": "https://condescending-cray-s5hh1bvf71.projects.oryapis:8080/self-service/registration?flow=4fae4bc6-ddbe-4c57-bf7f-7f2826b7105c", + "action": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/self-service/registration?flow=42569a5b-fa0f-441b-8cc0-8a3afcfee560", "method": "POST", "nodes": [ { @@ -100,7 +100,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "bQ11O7Y50FXp8GAAaSfJ6vdT6QjZWo/s7numjfr+vxT8WNMHk0zOHIpXIawhgUSQRopgzAqRv/oal8Qf/6dEeQ==", + "value": "z7MgFz1D5jfZF6RSrGrMo3kHOm5QhzvhT9b35HOgAoG22j4KWCgQJjWr6Oem8fpzIkZwBmJu7Eeg3ClNGKea9Q==", "required": true, "disabled": false, "node_type": "input" @@ -112,14 +112,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://condescending-cray-s5hh1bvf71.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "eeeda931-71de-471e-887c-7d72d3e75c75", + "nonce": "0a98e300-6cbc-4bb5-9328-2a730414b3b8", "node_type": "script" }, "messages": [], @@ -163,7 +163,7 @@ "attributes": { "name": "passkey_create_data", "type": "hidden", - "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-h29fFQ4CeQDF5Ox0-0-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"id\":\"condescending-cray-s5hh1bvf71.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-h29fFQ4CeQDF5Ox0-0-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-h29fFQ4CeQDF5Ox0-0-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"id\":\"dDVJOXZCbFBnRk16OGdnQnNCdmRzT3d0UWMwNm1hQTJTYnNyNVBzbTdIOFdjeDlqSXpqa3pnNjZaREwwQ0ppRA\"},\"challenge\":\"A0_HL1FmDYdxPXUQiDL-333tkx2PlkxFGpCRmMkcrEk\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", + "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-iUgYEBNPNUCsXKUO-5-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"id\":\"jovial-ellis-fr202u7urp.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-iUgYEBNPNUCsXKUO-5-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-iUgYEBNPNUCsXKUO-5-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"id\":\"R3ZOR2R5eTRtSVZYc3cyVEFpcGw3VUFxZ2RFb1VDcmtENmNtTVhLUVpGNlRLNEpBSVNTaElsS1hSUHphWVVIMQ\"},\"challenge\":\"QCIVaNiFqN0VdLk5T9tDkjkdSwFi7YF5dyMjZZBu7qc\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", "disabled": false, "node_type": "input" }, diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/initial-form.json index 951e0ad74..fd87613f8 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/initial-form.json @@ -1,11 +1,11 @@ { - "id": "58c3d7b3-3624-4460-b6ef-468ac3796524", + "id": "c713a293-47c4-4605-8605-40127751083b", "type": "browser", - "expires_at": "2024-04-25T13:57:45.694947043Z", - "issued_at": "2024-04-25T12:57:45.694947043Z", - "request_url": "https://crazy-diffie-sdubdvpai8.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:42.152426303Z", + "issued_at": "2024-10-29T09:45:42.152426303Z", + "request_url": "https://serene-archimedes-edlkt7nkyd.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://crazy-diffie-sdubdvpai8.projects.oryapis:8080/self-service/registration?flow=58c3d7b3-3624-4460-b6ef-468ac3796524", + "action": "https://serene-archimedes-edlkt7nkyd.projects.oryapis:8080/self-service/registration?flow=c713a293-47c4-4605-8605-40127751083b", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "9hPOuJ/AFQWJAn8UeK/RHll5+FbZvUFe3AApFAfqeZ0tp+X6qqov8Gj7C4xlgeRPc0niCwEyNrkhbSFtbb0hzg==", + "value": "y6s8GWDem5uw1EE6kJW14kj+MiQdDtIriC3ALVRTah5YZHF/w7Vtzk0MhrMN9rQDjVkd9FNBAp8r5aySd+9r7w==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/missing-fields.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/missing-fields.json index 9fa0bcb04..39c265581 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/missing-fields.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/password/missing-fields.json @@ -1,11 +1,11 @@ { - "id": "58c3d7b3-3624-4460-b6ef-468ac3796524", + "id": "c713a293-47c4-4605-8605-40127751083b", "type": "browser", - "expires_at": "2024-04-25T13:57:45.694947Z", - "issued_at": "2024-04-25T12:57:45.694947Z", - "request_url": "https://crazy-diffie-sdubdvpai8.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:42.152426Z", + "issued_at": "2024-10-29T09:45:42.152426Z", + "request_url": "https://serene-archimedes-edlkt7nkyd.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://crazy-diffie-sdubdvpai8.projects.oryapis:8080/self-service/registration?flow=58c3d7b3-3624-4460-b6ef-468ac3796524", + "action": "https://serene-archimedes-edlkt7nkyd.projects.oryapis:8080/self-service/registration?flow=c713a293-47c4-4605-8605-40127751083b", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "P+oafood9ivq8q1O56VWAP3jeW2wJMforaifNNe7/4bkXjE8v3fM3gsL2db6i2NR19NjMGirsA9QxZdNveyn1Q==", + "value": "b4t2jzkWsZ67gMxwZ1WDdbblCPkF8Lkryka4hNK8Dpz8RDvpmn1Hy0ZYC/n6NoKUc0InKUu/aZ9pjtQ78QAPbQ==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/webauthn/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/webauthn/initial-form.json index 480a9075a..1af05308f 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/webauthn/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/one-step/webauthn/initial-form.json @@ -1,11 +1,11 @@ { - "id": "9f23226c-5b45-46ee-8c50-41da3643e3a3", + "id": "f1cae1c5-b77d-444a-99da-65af40296baf", "type": "browser", - "expires_at": "2024-04-25T13:57:47.242292Z", - "issued_at": "2024-04-25T12:57:47.242292Z", - "request_url": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/registration/browser?", + "expires_at": "2024-10-29T10:45:46.355386Z", + "issued_at": "2024-10-29T09:45:46.355386Z", + "request_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/registration/browser?", "ui": { - "action": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/self-service/registration?flow=9f23226c-5b45-46ee-8c50-41da3643e3a3", + "action": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/registration?flow=f1cae1c5-b77d-444a-99da-65af40296baf", "method": "POST", "nodes": [ { @@ -100,7 +100,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "tv+uQQ8K9bAXY6OAObIsHy0d8hcGkv789I1fhIQv2EOe1Y21Q5Ey8A0uc3pWNaE0gRurzLMdJBlyiFXd/ExmMA==", + "value": "Y/Xu30T+fl0y9WgPtVFBgJl20FgPKOGL0PdRtYwrzXgDH90tMgGjBtkD+ucOu3NQere6LwwEcPqGZTlNt8hQ9w==", "required": true, "disabled": false, "node_type": "input" @@ -146,9 +146,9 @@ "attributes": { "name": "webauthn_register_trigger", "type": "button", - "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"tender-goodall-7lgc6uyls4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"PHrCWV6BSKSFwVp7-wrNtw\"},\"challenge\":\"XzuR6zAa6s9W5fnx2X6D37W-rY6Z_-YwlQEggSeJ0uo\",\"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\"}}}", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"romantic-tu-rf98ru5rql.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"pVtWPBf0QI68eZHkr6znbg\"},\"challenge\":\"eJAB1_JKWJoO9hi2NnpGS4MJ_hwwaV8tuIM6TeZCAEY\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", "disabled": false, - "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"tender-goodall-7lgc6uyls4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Asz6zwgGNpFo6ZSv-5-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"PHrCWV6BSKSFwVp7-wrNtw\"},\"challenge\":\"XzuR6zAa6s9W5fnx2X6D37W-rY6Z_-YwlQEggSeJ0uo\",\"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\"}}})", + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"romantic-tu-rf98ru5rql.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"pVtWPBf0QI68eZHkr6znbg\"},\"challenge\":\"eJAB1_JKWJoO9hi2NnpGS4MJ_hwwaV8tuIM6TeZCAEY\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", "onclickTrigger": "oryWebAuthnRegistration", "node_type": "input" }, @@ -165,14 +165,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://tender-goodall-7lgc6uyls4.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "8fa2b5c8-b0a2-4949-88f4-fa4e904b3639", + "nonce": "cb97ee7e-8c82-43a1-897d-32ee254dbfb5", "node_type": "script" }, "messages": [], diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/enter-password.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/enter-password.json index b7e31ba88..132fc2492 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/enter-password.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/enter-password.json @@ -1,11 +1,11 @@ { - "id": "acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "id": "2ee62ed3-9530-431c-b174-3570ed90af3c", "type": "browser", - "expires_at": "2024-04-25T13:57:44.954617Z", - "issued_at": "2024-04-25T12:57:44.954617Z", - "request_url": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:39.474943Z", + "issued_at": "2024-10-29T09:45:39.474943Z", + "request_url": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration?flow=acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "action": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration?flow=2ee62ed3-9530-431c-b174-3570ed90af3c", "method": "POST", "nodes": [ { @@ -46,9 +46,9 @@ "attributes": { "name": "webauthn_register_trigger", "type": "button", - "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"u6rO0P2_QGKJ1vjSa7YwSg\"},\"challenge\":\"FragMLEYDq1k4ndpY9SMfMLcKcdLXyDxAUJav7r4Gvk\",\"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\"}}}", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"bgtAmsoWR2mQGSIUTZwy7A\"},\"challenge\":\"2G9w1gEl_nKKSCmcLuEHdqIhNP7OaXsTEzGK-MFy_v4\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", "disabled": false, - "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"u6rO0P2_QGKJ1vjSa7YwSg\"},\"challenge\":\"FragMLEYDq1k4ndpY9SMfMLcKcdLXyDxAUJav7r4Gvk\",\"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\"}}})", + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"bgtAmsoWR2mQGSIUTZwy7A\"},\"challenge\":\"2G9w1gEl_nKKSCmcLuEHdqIhNP7OaXsTEzGK-MFy_v4\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", "onclickTrigger": "oryWebAuthnRegistration", "node_type": "input" }, @@ -65,14 +65,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "bd8f69f7-78a2-4f65-8067-e8a4c9e76921", + "nonce": "e4568219-574f-4dff-8d2d-4e9bf9bb8a2b", "node_type": "script" }, "messages": [], @@ -116,7 +116,7 @@ "attributes": { "name": "passkey_create_data", "type": "hidden", - "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"SHVYbEdCTTZQSXk5NnpYT2NUanlIUEp1VFp6OVIwY0ZDenNVM25IMnRoTHp5VU9EOUQ1N1Q0S1hEUnBSclMzTg\"},\"challenge\":\"hLCr8M2PTKhNkyuu9M0XvNxvubaNeE-cFsCBmhvKHtY\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", + "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"V1NSSTg0bFR1b05mMzVQSU9SU2dBenFHRnJZd1lXTHVURXlzb1NWWHBZcFBqTks5dXdja3JXRUNabEZESkY3ZQ\"},\"challenge\":\"Lza8qeMURMd7_VlbarfHmA_Rb14SCWMijcF_M2ht99k\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", "disabled": false, "node_type": "input" }, @@ -137,7 +137,7 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up code", "type": "info" } } @@ -185,9 +185,9 @@ "type": "input", "group": "profile", "attributes": { - "name": "method", + "name": "screen", "type": "submit", - "value": "profile:back", + "value": "previous", "disabled": false, "node_type": "input" }, @@ -206,7 +206,7 @@ "attributes": { "name": "traits.email", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.do3uyeuvijl0.hl2x5baxmer@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.1s0bea5cyx5h0.3nwg7tmi5aj@ory.dev", "disabled": false, "node_type": "input" }, @@ -219,7 +219,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "OWM79tWCOVCIU2JRgBxv3hgcosbD1nV8QZYJdELNGekWboryQim9lqdLKLq1P/1z/ETvr2BIw8buPSUnAiyhnw==", + "value": "apZGQQWgrKAECULEOItFA97C5VXffSMxDW0KRTNhbllS7O/rmFW1gabqh0Zl3t8yzVOtS2kv2AR4p1Y9+/P/Jg==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/initial-form.json index 4eeefc065..eebdfe184 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/initial-form.json @@ -1,11 +1,11 @@ { - "id": "acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "id": "2ee62ed3-9530-431c-b174-3570ed90af3c", "type": "browser", - "expires_at": "2024-04-25T13:57:44.954617918Z", - "issued_at": "2024-04-25T12:57:44.954617918Z", - "request_url": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:39.474943093Z", + "issued_at": "2024-10-29T09:45:39.474943093Z", + "request_url": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration?flow=acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "action": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration?flow=2ee62ed3-9530-431c-b174-3570ed90af3c", "method": "POST", "nodes": [ { @@ -25,7 +25,8 @@ "text": "Sign up with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -47,7 +48,8 @@ "text": "Sign up with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -144,7 +146,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "zx9D9JR/SCndA9NjqNUzXUrru1BjDg5t1trh3lSA6B7gEvLwA9TM7/IbmYid9qHwrrP2OcCQuNd5cc2NFGFQaA==", + "value": "QXWBIklgcs/KOac7iEC2erEXNRyqtQIzVXjElaJS3ah5DyiI1JVr7mjaYrnVFSxLooZ9Ahzn+QYgspjtasBM1w==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/missing-fields.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/missing-fields.json index 793295437..d91451fad 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/missing-fields.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/missing-fields.json @@ -1,11 +1,11 @@ { - "id": "acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "id": "2ee62ed3-9530-431c-b174-3570ed90af3c", "type": "browser", - "expires_at": "2024-04-25T13:57:44.954617Z", - "issued_at": "2024-04-25T12:57:44.954617Z", - "request_url": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:39.474943Z", + "issued_at": "2024-10-29T09:45:39.474943Z", + "request_url": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration?flow=acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "action": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration?flow=2ee62ed3-9530-431c-b174-3570ed90af3c", "method": "POST", "nodes": [ { @@ -25,7 +25,8 @@ "text": "Sign up with GitHub", "type": "info", "context": { - "provider": "GitHub" + "provider": "GitHub", + "provider_id": "github" } } } @@ -47,7 +48,8 @@ "text": "Sign up with Google", "type": "info", "context": { - "provider": "Google" + "provider": "Google", + "provider_id": "google" } } } @@ -153,7 +155,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "e4U1OwIME/FCwLYA4M0zM1yJY77BWWarVOrOw7YswetUiIQ/laeXN23Y/OvV7qGeuNEu12LH0BH7QeKQ9s15nQ==", + "value": "4gO0cvwiVVNXxcMWr8xX36zYQIwF8DzAAtZeD3mBiqjaeR3YYddMcvUmBpTymc3uv0kIkrOix/V3HAJ3sRMb1w==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/password-validation-error.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/password-validation-error.json index d31f9c999..ca4decee5 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/password-validation-error.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/all-methods/password-validation-error.json @@ -1,11 +1,11 @@ { - "id": "acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "id": "2ee62ed3-9530-431c-b174-3570ed90af3c", "type": "browser", - "expires_at": "2024-04-25T13:57:44.954617Z", - "issued_at": "2024-04-25T12:57:44.954617Z", - "request_url": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:39.474943Z", + "issued_at": "2024-10-29T09:45:39.474943Z", + "request_url": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/self-service/registration?flow=acd037fe-1b54-4f6a-838b-2e8d1090ba18", + "action": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/self-service/registration?flow=2ee62ed3-9530-431c-b174-3570ed90af3c", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "traits.email", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.do3uyeuvijl0.hl2x5baxmer@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.1s0bea5cyx5h0.3nwg7tmi5aj@ory.dev", "disabled": false, "node_type": "input" }, @@ -27,7 +27,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "v+dEYdTD9ULXBfc7syKyHswOA+tbjtK8/uLMaaMPd5+Q6vVlQ2hxhPgdvdCGASCzKFZOgvgQZAZRSeA64+7P6Q==", + "value": "IFo81liPpoLOkrsz516ROAGRJGldIFkpsrLWG/tUQpoYIJV8xXq/o2xxfrG6CwsJEgBsd+tyohzHeIpjM8bT5Q==", "required": true, "disabled": false, "node_type": "input" @@ -73,9 +73,9 @@ "attributes": { "name": "webauthn_register_trigger", "type": "button", - "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"u6rO0P2_QGKJ1vjSa7YwSg\"},\"challenge\":\"FragMLEYDq1k4ndpY9SMfMLcKcdLXyDxAUJav7r4Gvk\",\"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\"}}}", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"bgtAmsoWR2mQGSIUTZwy7A\"},\"challenge\":\"2G9w1gEl_nKKSCmcLuEHdqIhNP7OaXsTEzGK-MFy_v4\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", "disabled": false, - "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"u6rO0P2_QGKJ1vjSa7YwSg\"},\"challenge\":\"FragMLEYDq1k4ndpY9SMfMLcKcdLXyDxAUJav7r4Gvk\",\"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\"}}})", + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"bgtAmsoWR2mQGSIUTZwy7A\"},\"challenge\":\"2G9w1gEl_nKKSCmcLuEHdqIhNP7OaXsTEzGK-MFy_v4\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", "onclickTrigger": "oryWebAuthnRegistration", "node_type": "input" }, @@ -92,14 +92,14 @@ "type": "script", "group": "webauthn", "attributes": { - "src": "https://elegant-heyrovsky-l4oclz98k5.projects.oryapis:8080/.well-known/ory/webauthn.js", + "src": "https://inspiring-buck-m6ru2ompf4.projects.oryapis:8080/.well-known/ory/webauthn.js", "async": true, "referrerpolicy": "no-referrer", "crossorigin": "anonymous", "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", "type": "text/javascript", "id": "webauthn_script", - "nonce": "bd8f69f7-78a2-4f65-8067-e8a4c9e76921", + "nonce": "e4568219-574f-4dff-8d2d-4e9bf9bb8a2b", "node_type": "script" }, "messages": [], @@ -143,7 +143,7 @@ "attributes": { "name": "passkey_create_data", "type": "hidden", - "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"elegant-heyrovsky-l4oclz98k5.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-DYhoDIAEaK7OYjgD-3-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"SHVYbEdCTTZQSXk5NnpYT2NUanlIUEp1VFp6OVIwY0ZDenNVM25IMnRoTHp5VU9EOUQ1N1Q0S1hEUnBSclMzTg\"},\"challenge\":\"hLCr8M2PTKhNkyuu9M0XvNxvubaNeE-cFsCBmhvKHtY\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", + "value": "{\"credentialOptions\":{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"inspiring-buck-m6ru2ompf4.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-J5WorSyxZtiGkdy6-2-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003etwo-step\\u003etwo step registration\",\"id\":\"V1NSSTg0bFR1b05mMzVQSU9SU2dBenFHRnJZd1lXTHVURXlzb1NWWHBZcFBqTks5dXdja3JXRUNabEZESkY3ZQ\"},\"challenge\":\"Lza8qeMURMd7_VlbarfHmA_Rb14SCWMijcF_M2ht99k\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}},\"displayNameFieldName\":\"traits.email\"}", "disabled": false, "node_type": "input" }, @@ -164,7 +164,7 @@ "meta": { "label": { "id": 1040006, - "text": "Sign up with code", + "text": "Send sign up code", "type": "info" } } @@ -222,9 +222,9 @@ "type": "input", "group": "profile", "attributes": { - "name": "method", + "name": "screen", "type": "submit", - "value": "profile:back", + "value": "previous", "disabled": false, "node_type": "input" }, diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/enter-password.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/enter-password.json index af06d462b..4309f7004 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/enter-password.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/enter-password.json @@ -1,11 +1,11 @@ { - "id": "f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "id": "2223b632-5224-45f0-a268-26d8782092eb", "type": "browser", - "expires_at": "2024-04-25T13:57:46.810702Z", - "issued_at": "2024-04-25T12:57:46.810702Z", - "request_url": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:45.283503Z", + "issued_at": "2024-10-29T09:45:45.283503Z", + "request_url": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration?flow=f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "action": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration?flow=2223b632-5224-45f0-a268-26d8782092eb", "method": "POST", "nodes": [ { @@ -51,9 +51,9 @@ "type": "input", "group": "profile", "attributes": { - "name": "method", + "name": "screen", "type": "submit", - "value": "profile:back", + "value": "previous", "disabled": false, "node_type": "input" }, @@ -72,7 +72,7 @@ "attributes": { "name": "traits.email", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.0qty6eaj0j7n0.2sinxvztitg@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.1iw6f08ipeh0.alsa81zs8lj@ory.dev", "disabled": false, "node_type": "input" }, @@ -85,7 +85,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "EQx6mcjY7KbmXcJ6LcGZ3ZCPTPupYNJSiaHUbMC8cj2Q2+a/N8ypHRTyT9vKEbfTzXdgfTTyA9cFg3C3gYR+3w==", + "value": "KOik58l074egcfYz3JWbsWJmtpmbUoTX+Z8+4rjF5MubEOTfbTyj0wEcrmNCOSsMgFrzt42QlMQ8WRUMs+MIQQ==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/initial-form.json index 0256b3ece..2987722e6 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/initial-form.json @@ -1,11 +1,11 @@ { - "id": "f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "id": "2223b632-5224-45f0-a268-26d8782092eb", "type": "browser", - "expires_at": "2024-04-25T13:57:46.810702502Z", - "issued_at": "2024-04-25T12:57:46.810702502Z", - "request_url": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:45.283503179Z", + "issued_at": "2024-10-29T09:45:45.283503179Z", + "request_url": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration?flow=f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "action": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration?flow=2223b632-5224-45f0-a268-26d8782092eb", "method": "POST", "nodes": [ { @@ -100,7 +100,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "JNSZ4VH3GMAyfwMHgdKTDf0R101Sl6CXpxg38M2wUSalAwXHruNde8DQjqZmAr0DoOn7y88FcRIrOpMrjIhdxA==", + "value": "Ixz8JqIffgDP8R2rwTPLSt6yx0bZ/DDgeYS3UpNa5IaQ5LweBlcyVG6cRftfn3v3PI6CaM8+IPO8Qpy8mHwIDA==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/missing-fields.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/missing-fields.json index 58d8d9287..82562591a 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/missing-fields.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/missing-fields.json @@ -1,11 +1,11 @@ { - "id": "f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "id": "2223b632-5224-45f0-a268-26d8782092eb", "type": "browser", - "expires_at": "2024-04-25T13:57:46.810702Z", - "issued_at": "2024-04-25T12:57:46.810702Z", - "request_url": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:45.283503Z", + "issued_at": "2024-10-29T09:45:45.283503Z", + "request_url": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration?flow=f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "action": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration?flow=2223b632-5224-45f0-a268-26d8782092eb", "method": "POST", "nodes": [ { @@ -109,7 +109,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "1Vv2IwgGn/Ofyo2FlvNC1qRO4sztjuzrb0sA5gysSEhUjGoF9xLaSG1lACRxI2zY+bbOSnAcPW7jaaQ9TZREqg==", + "value": "z/kMSPbeDK8RXBjLgKt0EJy5uJpHg0Soa5WkvD2xrYF8AUxwUpZA+7AxQJseB8StfoX9tFFBVLuuU49SNpdBCw==", "required": true, "disabled": false, "node_type": "input" diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/password-validation-error.json b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/password-validation-error.json index ab25dad5c..f33aee57c 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/password-validation-error.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/registration/two-step/password/password-validation-error.json @@ -1,11 +1,11 @@ { - "id": "f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "id": "2223b632-5224-45f0-a268-26d8782092eb", "type": "browser", - "expires_at": "2024-04-25T13:57:46.810702Z", - "issued_at": "2024-04-25T12:57:46.810702Z", - "request_url": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration/browser", + "expires_at": "2024-10-29T10:45:45.283503Z", + "issued_at": "2024-10-29T09:45:45.283503Z", + "request_url": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration/browser", "ui": { - "action": "https://infallible-booth-og2ss3njuz.projects.oryapis:8080/self-service/registration?flow=f0d8f4bd-c3f2-4f24-a92b-baf72aa6099d", + "action": "https://pedantic-spence-hvwjb2by59.projects.oryapis:8080/self-service/registration?flow=2223b632-5224-45f0-a268-26d8782092eb", "method": "POST", "nodes": [ { @@ -14,7 +14,7 @@ "attributes": { "name": "traits.email", "type": "hidden", - "value": "dev+orycye2eda2f162daf6142dd0.0qty6eaj0j7n0.2sinxvztitg@ory.dev", + "value": "dev+orycye2eda2f162daf6142dd0.1iw6f08ipeh0.alsa81zs8lj@ory.dev", "disabled": false, "node_type": "input" }, @@ -27,7 +27,7 @@ "attributes": { "name": "csrf_token", "type": "hidden", - "value": "iQ4ZzEmR2wehg+HMxYL3sR2GEvf1BzN0W8ldqMGKsagI2YXqtoWevFMsbG0iUtm/QH4+cWiV4vHX6/lzgLK9Sg==", + "value": "mjdylNQrcSHcXpJqQccdgZNMAuFyzA6Cr4hBuzix5GspzzKscGM9dX0zyjrfa608cXBHz2QOHpFqTmpVM5cI4Q==", "required": true, "disabled": false, "node_type": "input" @@ -88,9 +88,9 @@ "type": "input", "group": "profile", "attributes": { - "name": "method", + "name": "screen", "type": "submit", - "value": "profile:back", + "value": "previous", "disabled": false, "node_type": "input" }, diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-password.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-password.json new file mode 100644 index 000000000..295e0d9df --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-password.json @@ -0,0 +1,381 @@ +{ + "id": "09710ae0-b006-4366-88c4-59e28b946b50", + "type": "browser", + "expires_at": "2024-10-29T10:45:42.423762Z", + "issued_at": "2024-10-29T09:45:42.423762Z", + "request_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings/browser", + "ui": { + "action": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings?flow=a9ce6d8e-6d1c-412e-9eb0-45d4643a2baa", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.oryPasskeySettingsRegistration()", + "onclickTrigger": "oryPasskeySettingsRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050019, + "text": "Add passkey", + "type": "info" + } + } + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_settings_register", + "type": "hidden", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_create_data", + "type": "hidden", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"displayName\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"id\":\"cEJQbEpwd2RXY0p4VEFEck1pWHduTEU0VXhESmw1NXQwR1R6VzlKNURJNEV1cEtYeWdadWhHSlpLYk94YWhmMQ\"},\"challenge\":\"2na00YX4h51EL4BRm-mS-31wfzobIXZ4QoU7T3hUJyw\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}}", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "jBeiywnDpwdjd10ArcBUgLTUMP+IX7JCtWaF0TmmUkbUMPUB0Yj3G3fLwLrGuxM2tc18yhGFpGPGbz0Jrih8XA==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "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": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "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": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "github", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link GitHub", + "type": "info", + "context": { + "provider": "GitHub" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link Google", + "type": "info", + "context": { + "provider": "Google" + } + } + } + }, + { + "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": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"Ih68d833s0IUzXfR3BHQmqSd9tTW9eO4ntXVmCEQbRw\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", + "disabled": false, + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"Ih68d833s0IUzXfR3BHQmqSd9tTW9eO4ntXVmCEQbRw\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", + "onclickTrigger": "oryWebAuthnRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050012, + "text": "Add security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "442f5b51-be47-49e7-9210-6b8ac6ecef1d", + "node_type": "script" + }, + "messages": [], + "meta": {} + } + ], + "messages": [ + { + "id": 1050001, + "text": "Your changes have been saved!", + "type": "success" + } + ] + }, + "identity": { + "id": "f8dd679c-b327-40bb-b455-9d7130e0b28a", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:40.429334Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "f3ca816d-270a-4e5c-ac68-c013df16753b", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:40.437076Z", + "updated_at": "2024-10-29T09:45:40.437076Z" + } + ], + "recovery_addresses": [ + { + "id": "b6e02654-9356-4fd9-890f-5f05f66de6cd", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:40.549552Z", + "updated_at": "2024-10-29T09:45:40.549552Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:40.432608Z", + "updated_at": "2024-10-29T09:45:43.118922Z", + "organization_id": null + }, + "state": "success", + "continue_with": [ + { + "action": "redirect_browser_to", + "redirect_browser_to": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/ui/settings?flow=09710ae0-b006-4366-88c4-59e28b946b50" + } + ] +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-trait.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-trait.json new file mode 100644 index 000000000..2fc764f8d --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/change-trait.json @@ -0,0 +1,377 @@ +{ + "id": "09710ae0-b006-4366-88c4-59e28b946b50", + "type": "browser", + "expires_at": "2024-10-29T10:45:42.423762Z", + "issued_at": "2024-10-29T09:45:42.423762Z", + "request_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings/browser", + "ui": { + "action": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings?flow=a9ce6d8e-6d1c-412e-9eb0-45d4643a2baa", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.oryPasskeySettingsRegistration()", + "onclickTrigger": "oryPasskeySettingsRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050019, + "text": "Add passkey", + "type": "info" + } + } + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_settings_register", + "type": "hidden", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_create_data", + "type": "hidden", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"displayName\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"id\":\"cEJQbEpwd2RXY0p4VEFEck1pWHduTEU0VXhESmw1NXQwR1R6VzlKNURJNEV1cEtYeWdadWhHSlpLYk94YWhmMQ\"},\"challenge\":\"2na00YX4h51EL4BRm-mS-31wfzobIXZ4QoU7T3hUJyw\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}}", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "1wcDQ3Yl5KufWwo4vLDZCvz/EpACXMG81KxM08rB59ePIFSJrm60t4vnl4LXy568/eZepZuG152npfQLXU/JzQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "no-an-email", + "required": true, + "autocomplete": "email", + "disabled": false, + "node_type": "input" + }, + "messages": [ + { + "id": 4000001, + "text": "\"no-an-email\" is not valid \"email\"", + "type": "error", + "context": { + "reason": "\"no-an-email\" is not valid \"email\"" + } + } + ], + "meta": { + "label": { + "id": 1070002, + "text": "E-Mail", + "type": "info", + "context": { + "title": "E-Mail" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "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": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "github", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link GitHub", + "type": "info", + "context": { + "provider": "GitHub" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link Google", + "type": "info", + "context": { + "provider": "Google" + } + } + } + }, + { + "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": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"Ih68d833s0IUzXfR3BHQmqSd9tTW9eO4ntXVmCEQbRw\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", + "disabled": false, + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"Ih68d833s0IUzXfR3BHQmqSd9tTW9eO4ntXVmCEQbRw\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", + "onclickTrigger": "oryWebAuthnRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050012, + "text": "Add security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "442f5b51-be47-49e7-9210-6b8ac6ecef1d", + "node_type": "script" + }, + "messages": [], + "meta": {} + } + ] + }, + "identity": { + "id": "f8dd679c-b327-40bb-b455-9d7130e0b28a", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:40.429334Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "f3ca816d-270a-4e5c-ac68-c013df16753b", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:40.437076Z", + "updated_at": "2024-10-29T09:45:40.437076Z" + } + ], + "recovery_addresses": [ + { + "id": "b6e02654-9356-4fd9-890f-5f05f66de6cd", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:40.549552Z", + "updated_at": "2024-10-29T09:45:40.549552Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:40.432608Z", + "updated_at": "2024-10-29T09:45:43.118922Z", + "organization_id": null + }, + "state": "success" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/initial-form.json new file mode 100644 index 000000000..381af4237 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/all-methods/initial-form.json @@ -0,0 +1,368 @@ +{ + "id": "09710ae0-b006-4366-88c4-59e28b946b50", + "type": "browser", + "expires_at": "2024-10-29T10:45:42.423762011Z", + "issued_at": "2024-10-29T09:45:42.423762011Z", + "request_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings/browser", + "ui": { + "action": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/self-service/settings?flow=09710ae0-b006-4366-88c4-59e28b946b50", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.oryPasskeySettingsRegistration()", + "onclickTrigger": "oryPasskeySettingsRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050019, + "text": "Add passkey", + "type": "info" + } + } + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_settings_register", + "type": "hidden", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_create_data", + "type": "hidden", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"displayName\":\"dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev\",\"id\":\"UUNCTjhFdEZvUHQ0M0twSGJQdlhaR1A4MkJFd0NNRnU4RlI4MHJwUVAwTGszcmNwdlFiVklsWG1mMHhnM3prag\"},\"challenge\":\"uQHpl4X75XEVT8F6N4dj_tUkjmzi7XHrbCwo7IvOQgM\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}}", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "Sr41jb21Vhj/EhHiIIJvQDtkwPgDtLZC4/gMRN8nGxgSmWJHZf4GBOuujFhL+Sj2On2MzZpuoGOQ8bScSKk1Ag==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "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": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "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": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "github", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link GitHub", + "type": "info", + "context": { + "provider": "GitHub" + } + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "link", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050002, + "text": "Link Google", + "type": "info", + "context": { + "provider": "Google" + } + } + } + }, + { + "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": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"IPDlS7UoWehcxt5CLCHulWO1kOOBkrITtejmNjnni6w\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", + "disabled": false, + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"wizardly-haibt-hgodg3zpxs.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-VmByNytjonwfzxNO-0-tests/elements/everything.ts\\u003eGenerate all method API responses for Ory Elements Storybook\\u003esettings\\u003esettings\",\"id\":\"-N1nnLMnQLu0VZ1xMOCyig\"},\"challenge\":\"IPDlS7UoWehcxt5CLCHulWO1kOOBkrITtejmNjnni6w\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", + "onclickTrigger": "oryWebAuthnRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050012, + "text": "Add security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "f3f60194-c156-4edb-9831-080e9c009d4b", + "node_type": "script" + }, + "messages": [], + "meta": {} + } + ] + }, + "identity": { + "id": "f8dd679c-b327-40bb-b455-9d7130e0b28a", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://wizardly-haibt-hgodg3zpxs.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:40.429334Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "f3ca816d-270a-4e5c-ac68-c013df16753b", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:40.437076Z", + "updated_at": "2024-10-29T09:45:40.437076Z" + } + ], + "recovery_addresses": [ + { + "id": "b6e02654-9356-4fd9-890f-5f05f66de6cd", + "value": "dev+orycye2eda2f162daf6142dd0.h31svd5j2ni0.4w1higf9lng@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:40.549552Z", + "updated_at": "2024-10-29T09:45:40.549552Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:40.432608Z", + "updated_at": "2024-10-29T09:45:40.432608Z", + "organization_id": null + }, + "state": "show_form" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/oidc/with-provider.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/oidc/with-provider.json new file mode 100644 index 000000000..80ba6c65b --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/oidc/with-provider.json @@ -0,0 +1,230 @@ +{ + "id": "f2361720-61f0-4315-bcc6-1913dd8f44bc", + "type": "browser", + "expires_at": "2024-10-29T10:45:51.637991251Z", + "issued_at": "2024-10-29T09:45:51.637991251Z", + "request_url": "https://quirky-merkle-tcxvjqmjco.projects.oryapis:8080/self-service/settings/browser", + "ui": { + "action": "https://quirky-merkle-tcxvjqmjco.projects.oryapis:8080/self-service/settings?flow=f2361720-61f0-4315-bcc6-1913dd8f44bc", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "Witpn2zXPt2CMxsF0YacnyKI9pDWa1sAh8GTt8zqHbgB72wagO8r+0pG+ZYXSW3f5eCLnCNKvw/LKJvbOnLP3w==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "dev+orycye2eda2f162daf6142dd0.nyqqutmteoj0.6s8toz9vk2s@ory.dev", + "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": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "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": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "input", + "group": "oidc", + "attributes": { + "name": "unlink", + "type": "submit", + "value": "google", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050003, + "text": "Unlink Fake Google", + "type": "info", + "context": { + "provider": "Fake Google" + } + } + } + } + ] + }, + "identity": { + "id": "cbedd3df-1b7c-4133-8e7e-ed13262911bc", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://quirky-merkle-tcxvjqmjco.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:47.305042Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.nyqqutmteoj0.6s8toz9vk2s@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "9e274356-438d-422b-86dc-37025d2b9f9d", + "value": "dev+orycye2eda2f162daf6142dd0.nyqqutmteoj0.6s8toz9vk2s@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:47.308158Z", + "updated_at": "2024-10-29T09:45:47.308158Z" + } + ], + "recovery_addresses": [ + { + "id": "928da27f-add2-445e-b61f-9c57783d79cc", + "value": "dev+orycye2eda2f162daf6142dd0.nyqqutmteoj0.6s8toz9vk2s@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:47.414301Z", + "updated_at": "2024-10-29T09:45:47.414301Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:47.306402Z", + "updated_at": "2024-10-29T09:45:50.204408Z", + "organization_id": null + }, + "state": "show_form" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/passkey/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/passkey/initial-form.json new file mode 100644 index 000000000..e93c91424 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/passkey/initial-form.json @@ -0,0 +1,256 @@ +{ + "id": "3746249b-1abf-4b37-80a4-86468a0f570e", + "type": "browser", + "expires_at": "2024-10-29T10:45:45.450619Z", + "issued_at": "2024-10-29T09:45:45.450619Z", + "request_url": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/self-service/settings/browser?return_to=", + "ui": { + "action": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/self-service/settings?flow=3746249b-1abf-4b37-80a4-86468a0f570e", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_register_trigger", + "type": "button", + "value": "", + "disabled": false, + "onclick": "window.oryPasskeySettingsRegistration()", + "onclickTrigger": "oryPasskeySettingsRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050019, + "text": "Add passkey", + "type": "info" + } + } + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_remove", + "type": "submit", + "value": "7b37009edaa82701392d9c978a5f090b40f06bb1c6db3da5bdeba001d02edee5", + "disabled": true, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050020, + "text": "Remove passkey \"unnamed\"", + "type": "info", + "context": { + "added_at": "2024-10-29T09:45:43Z", + "added_at_unix": 1730195143, + "display_name": "unnamed" + } + } + } + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_settings_register", + "type": "hidden", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "passkey", + "attributes": { + "name": "passkey_create_data", + "type": "hidden", + "value": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-iUgYEBNPNUCsXKUO-5-tests/elements/passkey.spec.ts\\u003eGenerate passkey API responses for Ory Elements Storybook\\u003epasskey states\",\"id\":\"jovial-ellis-fr202u7urp.projects.oryapis\"},\"user\":{\"name\":\"dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev\",\"displayName\":\"dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev\",\"id\":\"QWh3cjc2RTRwanhzejZrRUhPeTdOZ1JaZGswYVExc09ycTBNTm14VjhQRXFoOU9CRTZ0QlpFa214VUx5TUFJMQ\"},\"challenge\":\"4KcPlK1h6EhxqYI6Hu_vGbKzMRUlHva9UB8vSLfGx-A\",\"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\":{\"authenticatorAttachment\":\"platform\",\"requireResidentKey\":true,\"userVerification\":\"preferred\"}}}", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "lSS2gw7RYoSyDbOidb0F68kbJglKfFFJJdVX1jK1wprNdegMUoJ4y1+iMuK3LjqQLlgnvuOXeAwn43Us1R0JTA==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev", + "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": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "cbb55ce9-b93c-4ef8-bbe7-55a07001fd08", + "node_type": "script" + }, + "messages": [], + "meta": {} + } + ] + }, + "identity": { + "id": "e92db581-33a0-426e-9310-7948eda0d8ca", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://jovial-ellis-fr202u7urp.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:43.316519Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "6b25e2e6-df9e-419f-8f2e-9e405b46a4f7", + "value": "dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:43.321992Z", + "updated_at": "2024-10-29T09:45:43.321992Z" + } + ], + "recovery_addresses": [ + { + "id": "424648af-419a-444d-8b05-1b525349e9d0", + "value": "dev+orycye2eda2f162daf6142dd0.oz5977f4h40.72i7wc3wobt@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:43.439928Z", + "updated_at": "2024-10-29T09:45:43.439928Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:43.318887Z", + "updated_at": "2024-10-29T09:45:43.318887Z", + "organization_id": null + }, + "state": "show_form" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/settings/webauthn/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/webauthn/initial-form.json new file mode 100644 index 000000000..d6714e794 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/settings/webauthn/initial-form.json @@ -0,0 +1,263 @@ +{ + "id": "60f4e8c2-fbb6-4b8b-b7f4-8c86199b828b", + "type": "browser", + "expires_at": "2024-10-29T10:45:50.970243Z", + "issued_at": "2024-10-29T09:45:50.970243Z", + "request_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/settings/browser?return_to=", + "ui": { + "action": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/self-service/settings?flow=60f4e8c2-fbb6-4b8b-b7f4-8c86199b828b", + "method": "POST", + "nodes": [ + { + "type": "input", + "group": "default", + "attributes": { + "name": "csrf_token", + "type": "hidden", + "value": "0daldcQZtQTCubGym72z4Lu7cLxdrB6fayrZQHBEDy0eLIEhAiDoynbmaqggV5WMtsicFEyzKyriKqgABn6ZsQ==", + "required": true, + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": {} + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.email", + "type": "email", + "value": "dev+orycye2eda2f162daf6142dd0.nqwe2lavry0.f4h5y029idj@ory.dev", + "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": "profile", + "attributes": { + "name": "traits.tos", + "type": "checkbox", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Accept the terms of service", + "type": "info", + "context": { + "title": "Accept the terms of service" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.phone", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Phone Number", + "type": "info", + "context": { + "title": "Phone Number" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "traits.nested.name", + "type": "text", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070002, + "text": "Name", + "type": "info", + "context": { + "title": "Name" + } + } + } + }, + { + "type": "input", + "group": "profile", + "attributes": { + "name": "method", + "type": "submit", + "value": "profile", + "disabled": false, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1070003, + "text": "Save", + "type": "info" + } + } + }, + { + "type": "input", + "group": "webauthn", + "attributes": { + "name": "webauthn_remove", + "type": "submit", + "value": "20520f3fd103c796ab8047412a2c2a84405fd6b18ea8458b5ef4c30934fe107c", + "disabled": true, + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050018, + "text": "Remove security key \"unnamed\"", + "type": "info", + "context": { + "added_at": "2024-10-29T09:45:47Z", + "added_at_unix": 1730195147, + "display_name": "unnamed" + } + } + } + }, + { + "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": "{\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"romantic-tu-rf98ru5rql.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"hQzis_PrSXypRp3ut_GBjA\"},\"challenge\":\"8rDRfhrywkkApRhiRXpxmiuwqMsZObncWX7LdzkXaWY\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}}", + "disabled": false, + "onclick": "window.oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"romantic-tu-rf98ru5rql.projects.oryapis\"},\"user\":{\"name\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"displayName\":\"ory-cy-e2e-da2f162d-af61-42dd-90dc-e3fcfa7c84a0-Inm4ptsTsi1lsamq-2-tests/elements/webauthn.spec.ts\\u003eGenerate webauthn API responses for Ory Elements Storybook\\u003ewebauthn states\",\"id\":\"hQzis_PrSXypRp3ut_GBjA\"},\"challenge\":\"8rDRfhrywkkApRhiRXpxmiuwqMsZObncWX7LdzkXaWY\",\"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\":120000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})", + "onclickTrigger": "oryWebAuthnRegistration", + "node_type": "input" + }, + "messages": [], + "meta": { + "label": { + "id": 1050012, + "text": "Add security key", + "type": "info" + } + } + }, + { + "type": "script", + "group": "webauthn", + "attributes": { + "src": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/.well-known/ory/webauthn.js", + "async": true, + "referrerpolicy": "no-referrer", + "crossorigin": "anonymous", + "integrity": "sha512-MDzBlwh32rr+eus2Yf1BetIj94m+ULLbewYDulbZjczycs81klNed+qQWG2yi2N03KV5uZlRJJtWdV2x9JNHzQ==", + "type": "text/javascript", + "id": "webauthn_script", + "nonce": "b15ab75b-973e-4f2f-a16c-afd3e9219b45", + "node_type": "script" + }, + "messages": [], + "meta": {} + } + ] + }, + "identity": { + "id": "850ce2b3-f3eb-497c-a946-9deeb7f1818c", + "schema_id": "3295c9e92d19a78b10bfa45d7619eedcfb7d7ea4c2e8f163a21613da0ae6d4179f47fb58d1c23060f11126585f380ee9a9ce9a1d451f4b4de9ef33cc93ca763f", + "schema_url": "https://romantic-tu-rf98ru5rql.projects.oryapis:8080/schemas/MzI5NWM5ZTkyZDE5YTc4YjEwYmZhNDVkNzYxOWVlZGNmYjdkN2VhNGMyZThmMTYzYTIxNjEzZGEwYWU2ZDQxNzlmNDdmYjU4ZDFjMjMwNjBmMTExMjY1ODVmMzgwZWU5YTljZTlhMWQ0NTFmNGI0ZGU5ZWYzM2NjOTNjYTc2M2Y", + "state": "active", + "state_changed_at": "2024-10-29T09:45:47.097812Z", + "traits": { + "email": "dev+orycye2eda2f162daf6142dd0.nqwe2lavry0.f4h5y029idj@ory.dev", + "nested": {} + }, + "verifiable_addresses": [ + { + "id": "cacbe442-fb85-4180-aff9-7b36a565bb7c", + "value": "dev+orycye2eda2f162daf6142dd0.nqwe2lavry0.f4h5y029idj@ory.dev", + "verified": false, + "via": "email", + "status": "sent", + "created_at": "2024-10-29T09:45:47.104222Z", + "updated_at": "2024-10-29T09:45:47.104222Z" + } + ], + "recovery_addresses": [ + { + "id": "f3401149-fb92-44d8-90f4-83cf7e2323cd", + "value": "dev+orycye2eda2f162daf6142dd0.nqwe2lavry0.f4h5y029idj@ory.dev", + "via": "email", + "created_at": "2024-10-29T09:45:47.228338Z", + "updated_at": "2024-10-29T09:45:47.228338Z" + } + ], + "metadata_public": null, + "created_at": "2024-10-29T09:45:47.099762Z", + "updated_at": "2024-10-29T09:45:47.099762Z", + "organization_id": null + }, + "state": "show_form" +} diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/verification/disabled/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/verification/disabled/initial-form.json index 089182148..beb03ecd7 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/verification/disabled/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/verification/disabled/initial-form.json @@ -2,7 +2,7 @@ "error": { "code": 400, "status": "Bad Request", - "request": "6c24c164-d09e-94f6-a264-d12b3a0bb7db", + "request": "2c6924c2-58d2-9660-861d-ca7f02405c7a", "reason": "Verification is not allowed because it was disabled.", "message": "The request was malformed or contained invalid parameters" } diff --git a/packages/elements-react-stories/src/elements-react/.stub-responses/verification/none/initial-form.json b/packages/elements-react-stories/src/elements-react/.stub-responses/verification/none/initial-form.json index b16b4afb1..243b80d47 100644 --- a/packages/elements-react-stories/src/elements-react/.stub-responses/verification/none/initial-form.json +++ b/packages/elements-react-stories/src/elements-react/.stub-responses/verification/none/initial-form.json @@ -2,7 +2,7 @@ "error": { "code": 400, "status": "Bad Request", - "request": "6b3e6b07-6554-9618-b4f4-3739b34233eb", + "request": "97508194-d067-969e-80ce-b9d19b88664c", "reason": "The active verification strategy code is not enabled. Please enable it in the configuration.", "message": "The request was malformed or contained invalid parameters" } diff --git a/packages/elements-react-stories/src/elements-react/components/settings/all.stories.ts b/packages/elements-react-stories/src/elements-react/components/settings/all.stories.ts new file mode 100644 index 000000000..95ffd4ee2 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/components/settings/all.stories.ts @@ -0,0 +1,46 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { SettingsFlowFromJSON } from "@ory/client-fetch" +import { Settings } from "@ory/elements-react/theme" +import { Meta, StoryObj } from "@storybook/react" +import { config } from "../../utils" + +const meta = { + title: "Ory Elements/Settings/Methods/Everything", + component: Settings, + parameters: { + layout: "centered", + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const ShowForm: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/all-methods/initial-form.json"), + ), + config, + }, +} + +export const ShowFormChangesSaved: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/all-methods/change-password.json"), + ), + config, + }, +} + +export const ShowFormTraitValidationError: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/all-methods/change-trait.json"), + ), + config, + }, +} diff --git a/packages/elements-react-stories/src/elements-react/components/settings/oidc.stories.ts b/packages/elements-react-stories/src/elements-react/components/settings/oidc.stories.ts new file mode 100644 index 000000000..bc03d35a1 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/components/settings/oidc.stories.ts @@ -0,0 +1,28 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { SettingsFlowFromJSON } from "@ory/client-fetch" +import { Settings } from "@ory/elements-react/theme" +import { Meta, StoryObj } from "@storybook/react" +import { config } from "../../utils" + +const meta = { + title: "Ory Elements/Settings/Methods/OIDC", + component: Settings, + parameters: { + layout: "centered", + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const WithUnlinkProvider: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/oidc/with-provider.json"), + ), + config, + }, +} diff --git a/packages/elements-react-stories/src/elements-react/components/settings/passkey.stories.ts b/packages/elements-react-stories/src/elements-react/components/settings/passkey.stories.ts new file mode 100644 index 000000000..d128c3a13 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/components/settings/passkey.stories.ts @@ -0,0 +1,28 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { SettingsFlowFromJSON } from "@ory/client-fetch" +import { Settings } from "@ory/elements-react/theme" +import { Meta, StoryObj } from "@storybook/react" +import { config } from "../../utils" + +const meta = { + title: "Ory Elements/Settings/Methods/Passkey", + component: Settings, + parameters: { + layout: "centered", + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const ShowForm: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/passkey/initial-form.json"), + ), + config, + }, +} diff --git a/packages/elements-react-stories/src/elements-react/components/settings/webauthn.stories.ts b/packages/elements-react-stories/src/elements-react/components/settings/webauthn.stories.ts new file mode 100644 index 000000000..7b7d57812 --- /dev/null +++ b/packages/elements-react-stories/src/elements-react/components/settings/webauthn.stories.ts @@ -0,0 +1,28 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { SettingsFlowFromJSON } from "@ory/client-fetch" +import { Settings } from "@ory/elements-react/theme" +import { Meta, StoryObj } from "@storybook/react" +import { config } from "../../utils" + +const meta = { + title: "Ory Elements/Settings/Methods/Webauthn", + component: Settings, + parameters: { + layout: "centered", + }, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const ShowForm: Story = { + args: { + flow: SettingsFlowFromJSON( + require("$/.stub-responses/settings/webauthn/initial-form.json"), + ), + config, + }, +} diff --git a/packages/elements-react/api-report/elements-react-theme.api.md b/packages/elements-react/api-report/elements-react-theme.api.md index 8c4d60693..fc7c9fbe9 100644 --- a/packages/elements-react/api-report/elements-react-theme.api.md +++ b/packages/elements-react/api-report/elements-react-theme.api.md @@ -25,6 +25,7 @@ import { UiNodeImageAttributes } from '@ory/client-fetch'; import { UiNodeInputAttributes } from '@ory/client-fetch'; import { UiNodeTextAttributes } from '@ory/client-fetch'; import { UiText } from '@ory/client-fetch'; +import { VariantProps } from 'class-variance-authority'; import { VerificationFlow } from '@ory/client-fetch'; // Warning: (ae-forgotten-export) The symbol "OryCardRootProps" needs to be exported by the entry point index.d.ts diff --git a/packages/elements-react/api-report/elements-react.api.json b/packages/elements-react/api-report/elements-react.api.json index 2e319f1a2..058893fba 100644 --- a/packages/elements-react/api-report/elements-react.api.json +++ b/packages/elements-react/api-report/elements-react.api.json @@ -1467,6 +1467,60 @@ "text": "OryCardAuthMethodListItemProps", "canonicalReference": "@ory/elements-react!OryCardAuthMethodListItemProps:type" }, + { + "kind": "Content", + "text": ">;\n SettingsSection: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OryFormSectionProps", + "canonicalReference": "@ory/elements-react!OryFormSectionProps:type" + }, + { + "kind": "Content", + "text": ">;\n SettingsSectionContent: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OryFormSectionContentProps", + "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type" + }, + { + "kind": "Content", + "text": ">;\n SettingsSectionFooter: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OryFormSectionContentProps", + "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type" + }, { "kind": "Content", "text": ">;\n };\n Form: {\n Root: " @@ -1521,6 +1575,96 @@ "text": "OryFormGroupProps", "canonicalReference": "@ory/elements-react!OryFormGroupProps:type" }, + { + "kind": "Content", + "text": ">;\n OidcSettings: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OrySettingsOidcProps", + "canonicalReference": "@ory/elements-react!OrySettingsOidcProps:type" + }, + { + "kind": "Content", + "text": ">;\n WebauthnSettings: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OrySettingsWebauthnProps", + "canonicalReference": "@ory/elements-react!OrySettingsWebauthnProps:type" + }, + { + "kind": "Content", + "text": ">;\n PasskeySettings: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OrySettingsPasskeyProps", + "canonicalReference": "@ory/elements-react!OrySettingsPasskeyProps:type" + }, + { + "kind": "Content", + "text": ">;\n TotpSettings: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OrySettingsTotpProps", + "canonicalReference": "@ory/elements-react!OrySettingsTotpProps:type" + }, + { + "kind": "Content", + "text": ">;\n RecoveryCodesSettings: " + }, + { + "kind": "Reference", + "text": "ComponentType", + "canonicalReference": "@types/react!React.ComponentType:type" + }, + { + "kind": "Content", + "text": "<" + }, + { + "kind": "Reference", + "text": "OrySettingsRecoveryCodesProps", + "canonicalReference": "@ory/elements-react!OrySettingsRecoveryCodesProps:type" + }, { "kind": "Content", "text": ">;\n };\n Message: {\n Root: " @@ -1589,7 +1733,7 @@ "name": "OryFlowComponents", "typeTokenRange": { "startIndex": 1, - "endIndex": 94 + "endIndex": 126 } }, { @@ -1662,7 +1806,7 @@ "excerptTokens": [ { "kind": "Content", - "text": "declare function OryForm({ children, onAfterSubmit }: " + "text": "declare function OryForm({ children, onAfterSubmit, nodes }: " }, { "kind": "Reference", @@ -1696,7 +1840,7 @@ "overloadIndex": 1, "parameters": [ { - "parameterName": "{ children, onAfterSubmit }", + "parameterName": "{ children, onAfterSubmit, nodes }", "parameterTypeTokenRange": { "startIndex": 1, "endIndex": 2 @@ -1991,7 +2135,16 @@ }, { "kind": "Content", - "text": "<{\n onAfterSubmit?: (method: string | number | boolean | undefined) => void;\n}>" + "text": "<{\n onAfterSubmit?: (method: string | number | boolean | undefined) => void;\n nodes?: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}>" }, { "kind": "Content", @@ -2003,7 +2156,7 @@ "name": "OryFormProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 3 + "endIndex": 5 } }, { @@ -2055,6 +2208,151 @@ "endIndex": 7 } }, + { + "kind": "Function", + "canonicalReference": "@ory/elements-react!OryFormSection:function(1)", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "declare function OryFormSection({ children, nodes }: " + }, + { + "kind": "Reference", + "text": "OryFormSectionProps", + "canonicalReference": "@ory/elements-react!OryFormSectionProps:type" + }, + { + "kind": "Content", + "text": "): " + }, + { + "kind": "Reference", + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 3, + "endIndex": 4 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [ + { + "parameterName": "{ children, nodes }", + "parameterTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "isOptional": false + } + ], + "name": "OryFormSection" + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFormSectionContentProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OryFormSectionContentProps = " + }, + { + "kind": "Reference", + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" + }, + { + "kind": "Content", + "text": "<{\n title?: string;\n description?: string;\n}>" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryFormSectionContentProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 3 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFormSectionFooterProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OryFormSectionFooterProps = " + }, + { + "kind": "Reference", + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryFormSectionFooterProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 2 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OryFormSectionProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OryFormSectionProps = " + }, + { + "kind": "Reference", + "text": "PropsWithChildren", + "canonicalReference": "@types/react!React.PropsWithChildren:type" + }, + { + "kind": "Content", + "text": "<{\n nodes?: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}>" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OryFormSectionProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 5 + } + }, { "kind": "Function", "canonicalReference": "@ory/elements-react!OryFormSocialButtonsForm:function(1)", @@ -2314,7 +2612,12 @@ }, { "kind": "Content", - "text": "<\"button\">, \"children\">" + "text": "<\"button\">, \"children\"> & " + }, + { + "kind": "Reference", + "text": "ButtonVariants", + "canonicalReference": "@ory/elements-react!~ButtonVariants:type" }, { "kind": "Content", @@ -2326,7 +2629,7 @@ "name": "OryNodeButtonProps", "typeTokenRange": { "startIndex": 1, - "endIndex": 10 + "endIndex": 11 } }, { @@ -2703,6 +3006,282 @@ "endIndex": 7 } }, + { + "kind": "Function", + "canonicalReference": "@ory/elements-react!OrySettingsCard:function(1)", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "declare function OrySettingsCard(): " + }, + { + "kind": "Reference", + "text": "react_jsx_runtime.JSX.Element", + "canonicalReference": "@types/react!JSX.Element:interface" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "returnTypeTokenRange": { + "startIndex": 1, + "endIndex": 2 + }, + "releaseTag": "Public", + "overloadIndex": 1, + "parameters": [], + "name": "OrySettingsCard" + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OrySettingsOidcProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OrySettingsOidcProps = " + }, + { + "kind": "Content", + "text": "{\n linkButtons: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n unlinkButtons: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OrySettingsOidcProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OrySettingsPasskeyProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OrySettingsPasskeyProps = " + }, + { + "kind": "Content", + "text": "{\n triggerButton: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": " & {\n onClick: () => void;\n };\n removeButtons: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OrySettingsPasskeyProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OrySettingsRecoveryCodesProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OrySettingsRecoveryCodesProps = " + }, + { + "kind": "Content", + "text": "{\n codes: string[];\n regnerateButton?: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n revealButton?: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OrySettingsRecoveryCodesProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 6 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OrySettingsTotpProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OrySettingsTotpProps = " + }, + { + "kind": "Content", + "text": "{\n totpImage: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n totpSecret: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n totpInput: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n} | {\n totpUnlink: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OrySettingsTotpProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 10 + } + }, + { + "kind": "TypeAlias", + "canonicalReference": "@ory/elements-react!OrySettingsWebauthnProps:type", + "docComment": "", + "excerptTokens": [ + { + "kind": "Content", + "text": "type OrySettingsWebauthnProps = " + }, + { + "kind": "Content", + "text": "{\n nameInput: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": ";\n triggerButton: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": " & {\n onClick: () => void;\n };\n removeButtons: " + }, + { + "kind": "Reference", + "text": "UiNode", + "canonicalReference": "@ory/client-fetch!UiNode:interface" + }, + { + "kind": "Content", + "text": "[];\n}" + }, + { + "kind": "Content", + "text": ";" + } + ], + "fileUrlPath": "dist/index.d.ts", + "releaseTag": "Public", + "name": "OrySettingsWebauthnProps", + "typeTokenRange": { + "startIndex": 1, + "endIndex": 8 + } + }, { "kind": "Function", "canonicalReference": "@ory/elements-react!OryTwoStepCard:function(1)", diff --git a/packages/elements-react/api-report/elements-react.api.md b/packages/elements-react/api-report/elements-react.api.md index 19091e175..e31661abd 100644 --- a/packages/elements-react/api-report/elements-react.api.md +++ b/packages/elements-react/api-report/elements-react.api.md @@ -4,6 +4,7 @@ ```ts +import * as class_variance_authority_types from 'class-variance-authority/types'; import { ComponentPropsWithoutRef } from 'react'; import { ComponentType } from 'react'; import { ConfigurationParameters } from '@ory/client-fetch'; @@ -35,6 +36,7 @@ import { UpdateRecoveryFlowBody } from '@ory/client-fetch'; import { UpdateRegistrationFlowBody } from '@ory/client-fetch'; import { UpdateSettingsFlowBody } from '@ory/client-fetch'; import { UpdateVerificationFlowBody } from '@ory/client-fetch'; +import { VariantProps } from 'class-variance-authority'; import { VerificationFlow } from '@ory/client-fetch'; // Warning: (ae-forgotten-export) The symbol "OryFlow" needs to be exported by the entry point index.d.ts @@ -172,11 +174,19 @@ export type OryFlowComponents = { Logo: ComponentType; Divider: ComponentType; AuthMethodListItem: ComponentType; + SettingsSection: ComponentType; + SettingsSectionContent: ComponentType; + SettingsSectionFooter: ComponentType; }; Form: { Root: ComponentType; OidcRoot: ComponentType; Group: ComponentType; + OidcSettings: ComponentType; + WebauthnSettings: ComponentType; + PasskeySettings: ComponentType; + TotpSettings: ComponentType; + RecoveryCodesSettings: ComponentType; }; Message: { Root: ComponentType; @@ -191,7 +201,7 @@ export type OryFlowComponents = { export type OryFlowContainer = LoginFlowContainer | RegistrationFlowContainer | RecoveryFlowContainer | VerificationFlowContainer | SettingsFlowContainer; // @public (undocumented) -export function OryForm({ children, onAfterSubmit }: OryFormProps): string | react_jsx_runtime.JSX.Element; +export function OryForm({ children, onAfterSubmit, nodes }: OryFormProps): string | react_jsx_runtime.JSX.Element; // @public export function OryFormGroupDivider(): react_jsx_runtime.JSX.Element | null; @@ -223,6 +233,7 @@ export type OryFormOidcRootProps = PropsWithChildren<{ // @public (undocumented) export type OryFormProps = PropsWithChildren<{ onAfterSubmit?: (method: string | number | boolean | undefined) => void; + nodes?: UiNode[]; }>; // @public (undocumented) @@ -230,6 +241,23 @@ export type OryFormRootProps = ComponentPropsWithoutRef<"form"> & { onSubmit: FormEventHandler; }; +// @public (undocumented) +export function OryFormSection({ children, nodes }: OryFormSectionProps): react_jsx_runtime.JSX.Element; + +// @public (undocumented) +export type OryFormSectionContentProps = PropsWithChildren<{ + title?: string; + description?: string; +}>; + +// @public (undocumented) +export type OryFormSectionFooterProps = PropsWithChildren; + +// @public (undocumented) +export type OryFormSectionProps = PropsWithChildren<{ + nodes?: UiNode[]; +}>; + // @public (undocumented) export function OryFormSocialButtonsForm(): react_jsx_runtime.JSX.Element | null; @@ -252,11 +280,13 @@ export type OryNodeAnchorProps = { node: UiNode; } & Omit, "children">; +// Warning: (ae-forgotten-export) The symbol "ButtonVariants" needs to be exported by the entry point index.d.ts +// // @public (undocumented) export type OryNodeButtonProps = { attributes: UiNodeInputAttributes; node: UiNode; -} & Omit, "children">; +} & Omit, "children"> & ButtonVariants; // @public (undocumented) export type OryNodeImageProps = { @@ -301,6 +331,48 @@ export type OryProviderProps = { components: OryFlowComponents; } & OryFlowContainer & PropsWithChildren; +// @public (undocumented) +export function OrySettingsCard(): react_jsx_runtime.JSX.Element; + +// @public (undocumented) +export type OrySettingsOidcProps = { + linkButtons: UiNode[]; + unlinkButtons: UiNode[]; +}; + +// @public (undocumented) +export type OrySettingsPasskeyProps = { + triggerButton: UiNode & { + onClick: () => void; + }; + removeButtons: UiNode[]; +}; + +// @public (undocumented) +export type OrySettingsRecoveryCodesProps = { + codes: string[]; + regnerateButton?: UiNode; + revealButton?: UiNode; +}; + +// @public (undocumented) +export type OrySettingsTotpProps = { + totpImage: UiNode; + totpSecret: UiNode; + totpInput: UiNode; +} | { + totpUnlink: UiNode; +}; + +// @public (undocumented) +export type OrySettingsWebauthnProps = { + nameInput: UiNode; + triggerButton: UiNode & { + onClick: () => void; + }; + removeButtons: UiNode[]; +}; + // @public (undocumented) export function OryTwoStepCard(): react_jsx_runtime.JSX.Element; diff --git a/packages/elements-react/jest.config.ts b/packages/elements-react/jest.config.ts index 2fbac1498..fb30c5cf6 100644 --- a/packages/elements-react/jest.config.ts +++ b/packages/elements-react/jest.config.ts @@ -1,16 +1,17 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -/* eslint-disable */ +import { Config } from "jest" export default { displayName: "@ory/elements-react", preset: "../../jest.preset.js", transform: { - "^.+\\.[tj]sx?$": "ts-jest", + "^.+\\.tsx?$": "ts-jest", ".+\\.(svg|css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "jest-transform-stub", }, moduleFileExtensions: ["ts", "tsx", "js", "jsx"], coverageDirectory: "../../coverage/packages/elements-react", -} + coveragePathIgnorePatterns: ["/node_modules/", "/dist/", ".svg"], +} satisfies Config diff --git a/packages/elements-react/package.json b/packages/elements-react/package.json index e217fbb6c..75149c799 100644 --- a/packages/elements-react/package.json +++ b/packages/elements-react/package.json @@ -30,6 +30,7 @@ "dependencies": { "@ory/client-fetch": "1.15.6", "@radix-ui/react-dropdown-menu": "2.1.2", + "class-variance-authority": "0.7.0", "clsx": "2.1.1", "input-otp": "1.2.4", "lodash.merge": "4.6.2", diff --git a/packages/elements-react/project.json b/packages/elements-react/project.json index 31d2d6b22..4dff61932 100644 --- a/packages/elements-react/project.json +++ b/packages/elements-react/project.json @@ -30,6 +30,15 @@ "coverageReporters": ["text", "cobertura"] } }, + "test-refresh": { + "executor": "@nx/jest:jest", + "options": { + "jestConfig": "packages/elements-react/jest.config.ts", + "coverage": true, + "coverageReporters": ["text", "cobertura"], + "updateSnapshot": true + } + }, "api-extractor": { "executor": "nx:run-commands", "options": { diff --git a/packages/elements-react/src/components/card/card-two-step.tsx b/packages/elements-react/src/components/card/card-two-step.tsx index 434453f91..d6ff41644 100644 --- a/packages/elements-react/src/components/card/card-two-step.tsx +++ b/packages/elements-react/src/components/card/card-two-step.tsx @@ -50,7 +50,7 @@ export function OryTwoStepCard() { const uniqueGroups = useNodesGroups(ui.nodes) const options: UiNodeGroupEnum[] = Object.values(UiNodeGroupEnum) - .filter((group) => uniqueGroups[group]?.length) + .filter((group) => uniqueGroups.groups[group]?.length) .filter( (group) => !( @@ -63,10 +63,10 @@ export function OryTwoStepCard() { ).includes(group), ) - const hasOidc = Boolean(uniqueGroups.oidc?.length) + const hasOidc = Boolean(uniqueGroups.groups[UiNodeGroupEnum.Oidc]?.length) const zeroStepGroups = filterZeroStepGroups(ui.nodes) - const finalNodes = getFinalNodes(uniqueGroups, selectedGroup) + const finalNodes = getFinalNodes(uniqueGroups.groups, selectedGroup) const step = selectedGroup ? ProcessStep.ExecuteAuthMethod diff --git a/packages/elements-react/src/components/form/form-helpers.ts b/packages/elements-react/src/components/form/form-helpers.ts index 388c0e960..d1de64bea 100644 --- a/packages/elements-react/src/components/form/form-helpers.ts +++ b/packages/elements-react/src/components/form/form-helpers.ts @@ -1,14 +1,11 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { isUiNodeInputAttributes } from "@ory/client-fetch" +import { isUiNodeInputAttributes, UiNode } from "@ory/client-fetch" import { FormValues } from "../../types" -import { OryFlowContainer } from "../../util" -export function computeDefaultValues( - flowContainer: OryFlowContainer, -): FormValues { - return flowContainer.flow.ui.nodes.reduce((acc, node) => { +export function computeDefaultValues(nodes: UiNode[]): FormValues { + return nodes.reduce((acc, node) => { if (isUiNodeInputAttributes(node.attributes)) { if (node.attributes.name === "method") { // Do not set the default values for this. diff --git a/packages/elements-react/src/components/form/form.tsx b/packages/elements-react/src/components/form/form.tsx index 2ff964b1d..4e00a8617 100644 --- a/packages/elements-react/src/components/form/form.tsx +++ b/packages/elements-react/src/components/form/form.tsx @@ -2,6 +2,8 @@ // SPDX-License-Identifier: Apache-2.0 import { + UiNode, + UiNodeGroupEnum, UpdateLoginFlowBody, UpdateRecoveryFlowBody, UpdateRegistrationFlowBody, @@ -24,6 +26,7 @@ import { OryNodeTextProps, OryCurrentIdentifierProps, OryCardLogoProps, + OryFormSectionContentProps, } from "../../types" import { OryCardDividerProps } from "../generic/divider" import { OryFormGroupProps, OryFormGroups } from "./groups" @@ -52,6 +55,14 @@ import { onSubmitVerification } from "../../util/onSubmitVerification" import { onSubmitRecovery } from "../../util/onSubmitRecovery" import { onSubmitSettings } from "../../util/onSubmitSettings" import { OryPageHeaderProps } from "../generic" +import { OryFormSectionProps } from "./section" +import { + OrySettingsOidcProps, + OrySettingsPasskeyProps, + OrySettingsRecoveryCodesProps, + OrySettingsTotpProps, + OrySettingsWebauthnProps, +} from "../settings" /** * A record of all the components that are used in the OryForm component. @@ -136,6 +147,19 @@ export type OryFlowComponents = { * This is only used, if login is configured to use identifier_first authentication. */ AuthMethodListItem: ComponentType + + /** + * The SettingsSection component is rendered around each section of the settings. + */ + SettingsSection: ComponentType + /** + * The SettingsSectionContent component is rendered around the content of each section of the settings. + */ + SettingsSectionContent: ComponentType + /** + * The SettingsSectionFooter component is rendered around the footer of each section of the settings. + */ + SettingsSectionFooter: ComponentType } Form: { /** @@ -159,6 +183,31 @@ export type OryFlowComponents = { * The FormGroup is rendered around each group of nodes in the UI nodes. */ Group: ComponentType + + /** + * The section on the settings page, rendering the OIDC settings + */ + OidcSettings: ComponentType + + /** + * The section on the settings page, rendering the Webauthn settings + */ + WebauthnSettings: ComponentType + + /** + * The section on the settings page, rendering the Passkey settings + */ + PasskeySettings: ComponentType + + /** + * The section on the settings page, rendering the TOTP settings + */ + TotpSettings: ComponentType + + /** + * The section on the settings page, rendering the recovery code settings + */ + RecoveryCodesSettings: ComponentType } Message: { /** @@ -184,14 +233,22 @@ export type OryFlowComponentOverrides = DeepPartialTwoLevels export type OryFormProps = PropsWithChildren<{ onAfterSubmit?: (method: string | number | boolean | undefined) => void + nodes?: UiNode[] }> -export function OryForm({ children, onAfterSubmit }: OryFormProps) { +export function OryForm({ children, onAfterSubmit, nodes }: OryFormProps) { const { Form } = useComponents() const flowContainer = useOryFlow() + + const defaultNodes = nodes + ? flowContainer.flow.ui.nodes + .filter((node) => node.group === UiNodeGroupEnum.Default) + .concat(nodes) + : flowContainer.flow.ui.nodes + const methods = useForm({ // TODO: Generify this, so we have typesafety in the submit handler. - defaultValues: computeDefaultValues(flowContainer), + defaultValues: computeDefaultValues(defaultNodes), }) const intl = useIntl() @@ -208,7 +265,7 @@ export function OryForm({ children, onAfterSubmit }: OryFormProps) { const handleSuccess = (flow: OryFlowContainer) => { flowContainer.setFlowContainer(flow) - methods.reset(computeDefaultValues(flow)) + methods.reset(computeDefaultValues(flow.flow.ui.nodes)) } const onSubmit: SubmitHandler = async (data) => { @@ -266,13 +323,42 @@ export function OryForm({ children, onAfterSubmit }: OryFormProps) { }) break } - case FlowType.Settings: + case FlowType.Settings: { + const submitData: UpdateSettingsFlowBody = { + ...(data as unknown as UpdateSettingsFlowBody), + } + + if ("totp_unlink" in submitData) { + submitData.method = "totp" + } + + if ( + "lookup_secret_confirm" in submitData || + "lookup_secret_reveal" in submitData || + "lookup_secret_regenerate" in submitData + ) { + submitData.method = "lookup_secret" + } + + if ("link" in submitData || "unlink" in submitData) { + submitData.method = "oidc" + } + + if ("webauthn_remove" in submitData) { + submitData.method = "webauthn" + } + + if ("passkey_remove" in submitData) { + submitData.method = "passkey" + } + await onSubmitSettings(flowContainer, { onRedirect, setFlowContainer: handleSuccess, - body: data as unknown as UpdateSettingsFlowBody, + body: submitData, }) break + } } onAfterSubmit?.(data.method) } diff --git a/packages/elements-react/src/components/form/index.ts b/packages/elements-react/src/components/form/index.ts index 74b2fdb0b..fd6fe2015 100644 --- a/packages/elements-react/src/components/form/index.ts +++ b/packages/elements-react/src/components/form/index.ts @@ -5,3 +5,4 @@ export * from "./form" export * from "./groups" export * from "./messages" export * from "./social" +export * from "./section" diff --git a/packages/elements-react/src/components/form/nodes/__tests__/node.spec.tsx b/packages/elements-react/src/components/form/nodes/__tests__/node.spec.tsx index f906a93fc..4090872e6 100644 --- a/packages/elements-react/src/components/form/nodes/__tests__/node.spec.tsx +++ b/packages/elements-react/src/components/form/nodes/__tests__/node.spec.tsx @@ -1,12 +1,13 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 +import { screen } from "@testing-library/dom" import { IntlProvider } from "../../../../context/intl-context" -import { render, screen } from "../../../../tests/jest/test-utils" +import { renderWithComponents } from "../../../../tests/jest/test-utils" import { Node } from "../node" test("Text nodes are translated to german", () => { - render( + renderWithComponents( { const { Node } = useComponents() + const { setValue } = useFormContext() + const nodeType = attributes.type const { onloadTrigger: onloadTrigger, @@ -29,9 +32,16 @@ export const NodeInput = ({ ...attrs } = attributes + const setFormValue = () => { + if (attrs.value) { + setValue(attrs.name, attrs.value) + } + } + const hasRun = useRef(false) useEffect( () => { + setFormValue() if (!hasRun.current && onloadTrigger) { hasRun.current = true triggerToWindowCall(onloadTrigger) @@ -43,6 +53,7 @@ export const NodeInput = ({ ) const handleClick: MouseEventHandler = () => { + setFormValue() if (onclickTrigger) { triggerToWindowCall(onclickTrigger) } diff --git a/packages/elements-react/src/components/form/section.tsx b/packages/elements-react/src/components/form/section.tsx new file mode 100644 index 000000000..684ee203f --- /dev/null +++ b/packages/elements-react/src/components/form/section.tsx @@ -0,0 +1,21 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { PropsWithChildren } from "react" +import { useComponents } from "../../context/component" +import { OryForm } from "./form" +import { UiNode } from "@ory/client-fetch" + +export type OryFormSectionProps = PropsWithChildren<{ + nodes?: UiNode[] +}> + +export function OryFormSection({ children, nodes }: OryFormSectionProps) { + const { Card } = useComponents() + + return ( + + {children} + + ) +} diff --git a/packages/elements-react/src/components/index.ts b/packages/elements-react/src/components/index.ts index fece21749..c4402c65f 100644 --- a/packages/elements-react/src/components/index.ts +++ b/packages/elements-react/src/components/index.ts @@ -4,3 +4,4 @@ export * from "./card" export * from "./form" export * from "./generic" +export * from "./settings" diff --git a/packages/elements-react/src/components/settings/index.tsx b/packages/elements-react/src/components/settings/index.tsx new file mode 100644 index 000000000..b4289d5c8 --- /dev/null +++ b/packages/elements-react/src/components/settings/index.tsx @@ -0,0 +1,38 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { UiNode } from "@ory/client-fetch" + +export * from "./settings-card" + +export type OrySettingsRecoveryCodesProps = { + codes: string[] + regnerateButton?: UiNode + revealButton?: UiNode +} + +export type OrySettingsTotpProps = + | { + totpImage: UiNode + totpSecret: UiNode + totpInput: UiNode + } + | { + totpUnlink: UiNode + } + +export type OrySettingsOidcProps = { + linkButtons: UiNode[] + unlinkButtons: UiNode[] +} + +export type OrySettingsWebauthnProps = { + nameInput: UiNode + triggerButton: UiNode & { onClick: () => void } + removeButtons: UiNode[] +} + +export type OrySettingsPasskeyProps = { + triggerButton: UiNode & { onClick: () => void } + removeButtons: UiNode[] +} diff --git a/packages/elements-react/src/components/settings/oidc-settings.tsx b/packages/elements-react/src/components/settings/oidc-settings.tsx new file mode 100644 index 000000000..95a1fc483 --- /dev/null +++ b/packages/elements-react/src/components/settings/oidc-settings.tsx @@ -0,0 +1,45 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { UiNode } from "@ory/client-fetch" +import { useComponents } from "../../context" +import { useIntl } from "react-intl" + +const getLinkButtons = (nodes: UiNode[]): UiNode[] => + nodes.filter( + (node) => "name" in node.attributes && node.attributes.name === "link", + ) + +const getUnlinkButtons = (nodes: UiNode[]): UiNode[] => + nodes.filter( + (node) => "name" in node.attributes && node.attributes.name === "unlink", + ) + +export interface HeadlessSettingsOidcProps { + nodes: UiNode[] +} + +export function OrySettingsOidc({ nodes }: HeadlessSettingsOidcProps) { + const { Card, Form } = useComponents() + const intl = useIntl() + + const linkButtons = getLinkButtons(nodes) + const unlinkButtons = getUnlinkButtons(nodes) + + return ( + <> + + + + + {intl.formatMessage({ id: "settings.oidc.info" })} + + + ) +} diff --git a/packages/elements-react/src/components/settings/passkey-settings.tsx b/packages/elements-react/src/components/settings/passkey-settings.tsx new file mode 100644 index 000000000..33edd39cf --- /dev/null +++ b/packages/elements-react/src/components/settings/passkey-settings.tsx @@ -0,0 +1,91 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { + UiNode, + UiNodeAttributes, + UiNodeInputAttributes, +} from "@ory/client-fetch" +import { useComponents, useOryFlow } from "../../context" +import { useIntl } from "react-intl" +import { triggerToWindowCall, useNodesGroups } from "../../util/ui" +import { Node } from "../form/nodes/node" + +const getTriggerNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && + node.attributes.name === "passkey_register_trigger", + ) + +const getSettingsNodes = (nodes: UiNode[]): UiNode[] => + nodes.filter( + (node) => + "name" in node.attributes && + (node.attributes.name === "passkey_settings_register" || + node.attributes.name === "passkey_create_data"), + ) + +const getRemoveNodes = (nodes: UiNode[]): UiNode[] => + nodes.filter( + (node) => + "name" in node.attributes && node.attributes.name === "passkey_remove", + ) + +interface HeadlessSettingsPasskeyProps { + nodes: UiNode[] +} + +export function OrySettingsPasskey({ nodes }: HeadlessSettingsPasskeyProps) { + const { Card, Form } = useComponents() + const intl = useIntl() + const { flow } = useOryFlow() + const { groups } = useNodesGroups(flow.ui.nodes) + + const triggerButton = getTriggerNode(nodes) + const settingsNodes = getSettingsNodes(nodes) + const removeNodes = getRemoveNodes(nodes) + + if (!triggerButton) { + return null + } + + const { + onclick: _onClick, + onclickTrigger, + ...triggerAttributes + } = triggerButton.attributes as UiNodeInputAttributes + + const onTriggerClick = () => { + triggerToWindowCall(onclickTrigger) + } + + return ( + <> + + {groups.default?.map((node, i) => ( + + ))} + {settingsNodes.map((node, i) => ( + + ))} + + + + {intl.formatMessage({ id: "settings.passkey.info" })} + + + ) +} diff --git a/packages/elements-react/src/components/settings/recovery-codes-settings.tsx b/packages/elements-react/src/components/settings/recovery-codes-settings.tsx new file mode 100644 index 000000000..1f16b560e --- /dev/null +++ b/packages/elements-react/src/components/settings/recovery-codes-settings.tsx @@ -0,0 +1,81 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { UiNode, UiNodeTextAttributes } from "@ory/client-fetch" +import { useComponents } from "../../context" +import { useIntl } from "react-intl" +import { Node } from "../form/nodes/node" + +const getRegenerateNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && + node.attributes.name === "lookup_secret_regenerate", + ) + +const getRevealNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && + node.attributes.name === "lookup_secret_reveal", + ) + +const getRecoveryCodes = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "id" in node.attributes && node.attributes.id === "lookup_secret_codes", + ) + +interface HeadlessSettingsRecoveryCodesProps { + nodes: UiNode[] +} + +export function OrySettingsRecoveryCodes({ + nodes, +}: HeadlessSettingsRecoveryCodesProps) { + const { Card, Form } = useComponents() + const intl = useIntl() + + const codesNode = getRecoveryCodes(nodes) + const revealNode = getRevealNode(nodes) + const regenerateNode = getRegenerateNode(nodes) + + const codesContext = + ((codesNode?.attributes as UiNodeTextAttributes)?.text.context as { + secrets?: { text: string }[] + }) ?? {} + const secrets = codesContext.secrets + ? codesContext.secrets.map((i) => i.text) + : [] + + return ( + <> + + + + + {nodes + .filter( + (node) => + "type" in node.attributes && + node.attributes.type === "submit" && + "name" in node.attributes && + node.attributes.name !== "lookup_secret_reveal" && + node.attributes.name !== "lookup_secret_regenerate", + ) + .map((node, k) => ( + + ))} + + + ) +} diff --git a/packages/elements-react/src/components/settings/settings-card.tsx b/packages/elements-react/src/components/settings/settings-card.tsx new file mode 100644 index 000000000..fed50a80e --- /dev/null +++ b/packages/elements-react/src/components/settings/settings-card.tsx @@ -0,0 +1,124 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { UiNode, UiNodeGroupEnum } from "@ory/client-fetch" +import { useIntl } from "react-intl" +import { useComponents, useOryFlow } from "../../context" +import { useNodesGroups } from "../../util/ui" +import { OryCardValidationMessages } from "../form" +import { Node } from "../form/nodes/node" +import { OryFormSection } from "../form/section" +import { OrySettingsOidc } from "./oidc-settings" +import { OrySettingsPasskey } from "./passkey-settings" +import { OrySettingsRecoveryCodes } from "./recovery-codes-settings" +import { OrySettingsTotp } from "./totp-settings" +import { OrySettingsWebauthn } from "./webauthn-settings" + +interface SettingsSectionProps { + group: UiNodeGroupEnum + nodes: UiNode[] +} + +function SettingsSectionContent({ group, nodes }: SettingsSectionProps) { + const { Card } = useComponents() + const intl = useIntl() + const { flow } = useOryFlow() + const uniqueGroups = useNodesGroups(flow.ui.nodes) + + if (group === UiNodeGroupEnum.Totp) { + return ( + + + + ) + } + + if (group === UiNodeGroupEnum.LookupSecret) { + return ( + + + + ) + } + + if (group === UiNodeGroupEnum.Oidc) { + return ( + + + + ) + } + + if (group === UiNodeGroupEnum.Webauthn) { + return ( + + + + ) + } + + if (group === UiNodeGroupEnum.Passkey) { + return ( + + + + ) + } + + return ( + + + {uniqueGroups.groups.default?.map((node, k) => ( + + ))} + {nodes + .filter( + (node) => + "type" in node.attributes && node.attributes.type !== "submit", + ) + .map((node, k) => ( + + ))} + + + {nodes + .filter( + (node) => + "type" in node.attributes && node.attributes.type === "submit", + ) + .map((node, k) => ( + + ))} + + + ) +} + +export function OrySettingsCard() { + const { flow } = useOryFlow() + const uniqueGroups = useNodesGroups(flow.ui.nodes) + + return ( + <> + + {uniqueGroups.entries.map(([group, nodes]) => { + if (group === UiNodeGroupEnum.Default) { + return null + } + + return ( + + ) + })} + + ) +} diff --git a/packages/elements-react/src/components/settings/totp-settings.tsx b/packages/elements-react/src/components/settings/totp-settings.tsx new file mode 100644 index 000000000..f051cb0f2 --- /dev/null +++ b/packages/elements-react/src/components/settings/totp-settings.tsx @@ -0,0 +1,82 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch" +import { useComponents } from "../../context" +import { useIntl } from "react-intl" +import { OrySettingsTotpProps } from "." + +const getQrCodeNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => "id" in node.attributes && node.attributes.id === "totp_qr", + ) + +const getTotpSecretNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "id" in node.attributes && node.attributes.id === "totp_secret_key", + ) + +const getTotpInputNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => "name" in node.attributes && node.attributes.name === "totp_code", + ) + +const getTotpUnlinkInput = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && node.attributes.name === "totp_unlink", + ) + +const getTotpLinkButton = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => "name" in node.attributes && node.attributes.name === "method", + ) + +interface HeadlessSettingsTotpProps { + nodes: UiNode[] +} + +export function OrySettingsTotp({ nodes }: HeadlessSettingsTotpProps) { + const { Card, Form, Node } = useComponents() + const intl = useIntl() + + const totpUnlink = getTotpUnlinkInput(nodes) + const qrNode = getQrCodeNode(nodes) + const secretNode = getTotpSecretNode(nodes) + const totpCodeNode = getTotpInputNode(nodes) + const totpLinkButton = getTotpLinkButton(nodes) + + const props = { + totpImage: qrNode, + totpSecret: secretNode, + totpInput: totpCodeNode, + totpUnlink: totpUnlink, + } as OrySettingsTotpProps + + const content = + + return ( + <> + + {content} + + + + {totpUnlink + ? intl.formatMessage({ id: "settings.totp.info.linked" }) + : intl.formatMessage({ id: "settings.totp.info.not-linked" })} + + {totpLinkButton && ( + + )} + + + ) +} diff --git a/packages/elements-react/src/components/settings/webauthn-settings.tsx b/packages/elements-react/src/components/settings/webauthn-settings.tsx new file mode 100644 index 000000000..d79cc3f19 --- /dev/null +++ b/packages/elements-react/src/components/settings/webauthn-settings.tsx @@ -0,0 +1,104 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { + UiNode, + UiNodeAttributes, + UiNodeInputAttributes, +} from "@ory/client-fetch" +import { useComponents, useOryFlow } from "../../context" +import { useIntl } from "react-intl" +import { triggerToWindowCall, useNodesGroups } from "../../util/ui" +import { Node } from "../form/nodes/node" + +const getInputNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && + node.attributes.name === "webauthn_register_displayname", + ) + +const getTriggerNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && + node.attributes.name === "webauthn_register_trigger", + ) + +const getRemoveButtons = (nodes: UiNode[]): UiNode[] => + nodes.filter( + (node) => + "name" in node.attributes && node.attributes.name === "webauthn_remove", + ) + +const getScriptNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "id" in node.attributes && node.attributes.id === "webauthn_script", + ) + +const getRegisterNode = (nodes: UiNode[]): UiNode | undefined => + nodes.find( + (node) => + "name" in node.attributes && node.attributes.name === "webauthn_register", + ) + +interface HeadlessSettingsWebauthnProps { + nodes: UiNode[] +} + +export function OrySettingsWebauthn({ nodes }: HeadlessSettingsWebauthnProps) { + const { Card, Form } = useComponents() + const intl = useIntl() + const { flow } = useOryFlow() + const { groups } = useNodesGroups(flow.ui.nodes) + + const triggerButton = getTriggerNode(nodes) + const inputNode = getInputNode(nodes) + const removeButtons = getRemoveButtons(nodes) + const scriptNode = getScriptNode(nodes) + const registerNode = getRegisterNode(nodes) + + if (!inputNode || !triggerButton) { + return null + } + + const { + onclick: _onClick, + onclickTrigger, + ...triggerAttributes + } = triggerButton.attributes as UiNodeInputAttributes + + const onTriggerClick = () => { + triggerToWindowCall(onclickTrigger) + } + + return ( + <> + + {groups.default?.map((node, i) => ( + + ))} + {scriptNode && } + {registerNode && } + + + + {intl.formatMessage({ id: "settings.webauthn.info" })} + + + ) +} diff --git a/packages/elements-react/src/context/component.tsx b/packages/elements-react/src/context/component.tsx index 0a2a0fd43..8664ea90e 100644 --- a/packages/elements-react/src/context/component.tsx +++ b/packages/elements-react/src/context/component.tsx @@ -1,18 +1,20 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { UiNode } from "@ory/client-fetch" +import { UiNode, UiNodeGroupEnum } from "@ory/client-fetch" import { PropsWithChildren, createContext, useContext } from "react" import { OryFlowComponents } from "../components" type ComponentContextValue = { components: OryFlowComponents nodeSorter: (a: UiNode, b: UiNode, ctx: { flowType: string }) => number + groupSorter: (a: UiNodeGroupEnum, b: UiNodeGroupEnum) => number } const ComponentContext = createContext({ components: null!, // fine because we throw an error if it's not provided nodeSorter: () => 0, + groupSorter: () => 0, }) export function useComponents() { @@ -26,12 +28,20 @@ export function useComponents() { export function useNodeSorter() { const ctx = useContext(ComponentContext) if (!ctx) { - throw new Error("useComponents must be used within a ComponentProvider") + throw new Error("useNodeSorter must be used within a ComponentProvider") } return ctx.nodeSorter } -const defaultGroupOrder = [ +export function useGroupSorter() { + const ctx = useContext(ComponentContext) + if (!ctx) { + throw new Error("useGroupSorter must be used within a ComponentProvider") + } + return ctx.groupSorter +} + +const defaultNodeOrder = [ "oidc", "identifier_first", "default", @@ -47,8 +57,27 @@ function defaultNodeSorter( b: UiNode, // ctx: { flowType: string }, ): number { - const aGroupWeight = defaultGroupOrder.indexOf(a.group) ?? 999 - const bGroupWeight = defaultGroupOrder.indexOf(b.group) ?? 999 + const aGroupWeight = defaultNodeOrder.indexOf(a.group) ?? 999 + const bGroupWeight = defaultNodeOrder.indexOf(b.group) ?? 999 + + return aGroupWeight - bGroupWeight +} + +const defaultGroupOrder: UiNodeGroupEnum[] = [ + UiNodeGroupEnum.Default, + UiNodeGroupEnum.Profile, + UiNodeGroupEnum.Password, + UiNodeGroupEnum.Oidc, + UiNodeGroupEnum.Code, + UiNodeGroupEnum.LookupSecret, + UiNodeGroupEnum.Passkey, + UiNodeGroupEnum.Webauthn, + UiNodeGroupEnum.Totp, +] + +function defaultGroupSorter(a: UiNodeGroupEnum, b: UiNodeGroupEnum): number { + const aGroupWeight = defaultGroupOrder.indexOf(a) ?? 999 + const bGroupWeight = defaultGroupOrder.indexOf(b) ?? 999 return aGroupWeight - bGroupWeight } @@ -56,18 +85,21 @@ function defaultNodeSorter( type ComponentProviderProps = { components: OryFlowComponents nodeSorter?: (a: UiNode, b: UiNode, ctx: { flowType: string }) => number + groupSorter?: (a: UiNodeGroupEnum, b: UiNodeGroupEnum) => number } export function OryComponentProvider({ children, components, nodeSorter = defaultNodeSorter, + groupSorter = defaultGroupSorter, }: PropsWithChildren) { return ( {children} diff --git a/packages/elements-react/src/locales/de.json b/packages/elements-react/src/locales/de.json index b86ae6108..32147dfda 100644 --- a/packages/elements-react/src/locales/de.json +++ b/packages/elements-react/src/locales/de.json @@ -150,25 +150,6 @@ "registration.login-label": "Sie haben bereits ein Konto?", "registration.subtitle-oauth2": "Zur Authentifizierung bei {clientName}", "registration.title": "Konto registrieren", - "settings.navigation-back-button": "Zurück", - "settings.navigation-backup-codes": "2FA-Backup-Codes", - "settings.navigation-logout": "Abmelden", - "settings.navigation-oidc": "Soziale Medien", - "settings.navigation-password": "Passwort", - "settings.navigation-profile": "Profil", - "settings.navigation-totp": "Zwei-Faktor App", - "settings.navigation-webauthn": "Sicherheitsschlüssel", - "settings.navigation-passkey": "Passkeys", - "settings.subtitle-instructions": "Hier können Sie Einstellungen zu Ihrem Konto vornehmen. Für manche Einstellungen müssen Sie Ihre Identität erneut bestätigen.", - "settings.title": "Kontoeinstellungen", - "settings.title-lookup-secret": "Manage 2FA Backup Recovery Codes", - "settings.title-navigation": "Konto Einstellungen", - "settings.title-oidc": "Anmeldung über soziale Medien", - "settings.title-password": "Passwort ändern", - "settings.title-profile": "Profil Einstellungen", - "settings.title-totp": "Zwei-Faktor TOTP App", - "settings.title-webauthn": "Sicherheitsschlüssel verwalten", - "settings.title-passkey": "Passkeys verwalten", "verification.registration-button": "Registrieren", "verification.registration-label": "Sie haben noch kein Konto?", "verification.title": "Verifizieren Sie ihr Konto", @@ -197,7 +178,7 @@ "identities.messages.1040007": "", "identities.messages.1040008": "", "identities.messages.1040009": "", - "identities.messages.1050019": "", + "identities.messages.1050019": "Passkey hinzufügen", "identities.messages.1050020": "", "identities.messages.4000037": "", "identities.messages.4010009": "", @@ -211,7 +192,6 @@ "card.header.parts.password.registration": "Ihrer {identifierLabel} und einem Passwort", "card.header.parts.webauthn": "ein Sicherheitsschlüssel", "recovery.subtitle": "Geben Sie die mit Ihrem Konto verknüpfte E-Mail-Adresse ein, um einen einmaligen Zugangscode zu erhalten", - "settings.subtitle": "Aktualisieren Sie Ihre Kontoeinstellungen", "verification.subtitle": "Geben Sie die mit Ihrem Konto verknüpfte E-Mail-Adresse ein, um es zu bestätigen", "card.header.description.login": "Melden Sie sich mit {identifierLabel} an", "card.header.description.registration": "Registrieren Sie sich mit {identifierLabel}", @@ -219,5 +199,45 @@ "login.subtitle-refresh": "Bestätigen Sie ihre Identität mit {parts}", "misc.or": "oder", "registration.subtitle": "Registrieren Sie sich mit {parts}", - "forms.label.forgot-password": "Passwort vergessen?" + "forms.label.forgot-password": "Passwort vergessen?", + "settings.title": "Kontoeinstellungen", + "settings.navigation.title": "Kontoeinstellungen", + "settings.subtitle": "Aktualisieren Sie Ihre Kontoeinstellungen", + "settings.navigation-back-button": "Zurück", + "settings.navigation-backup-codes": "2FA-Backup-Codes", + "settings.navigation-logout": "Abmelden", + "settings.navigation-oidc": "Soziale Medien", + "settings.navigation-password": "Passwort", + "settings.navigation-profile": "Profil", + "settings.navigation-totp": "Zwei-Faktor App", + "settings.navigation-webauthn": "Sicherheitsschlüssel", + "settings.navigation-passkey": "Passkeys", + "settings.subtitle-instructions": "Hier können Sie Einstellungen zu Ihrem Konto vornehmen. Für manche Einstellungen müssen Sie Ihre Identität erneut bestätigen.", + "settings.totp.info.linked": "Sie haben derzeit eine Authenticator-App verbunden.", + "settings.totp.info.not-linked": "Um dies zu ermöglichen, scannen Sie den QR-Code mit Ihrem Authenticator und geben Sie den Code ein.", + "settings.totp.title": "Authenticator App", + "settings.totp.description": "Fügen Sie eine TOTP Authenticator App zu Ihrem Konto hinzu, um die Sicherheit Ihres Kontos zu verbessern. Beliebte Authenticator Apps sind LastPass und Google Authenticator.", + "settings.lookup_secret.description": "Verwalten Sie Ihre 2FA-Backup-Wiederherstellungscodes", + "settings.lookup_secret.title": "Wiederherstellungscodes", + "settings.oidc.description": "Verwalten Sie Ihre Einstellungen für die soziale Anmeldung", + "settings.oidc.title": "Soziales Anmelden", + "settings.passkey.description": "Verwalten Sie Ihre Passworteinstellungen", + "settings.passkey.title": "Passkeys verwalten", + "settings.password.description": "Ändern Sie Ihr Passwort", + "settings.password.title": "Passwort ändern", + "settings.profile.description": "Aktualisieren Sie Ihre Profilinformationen", + "settings.profile.title": "Profileinstellungen", + "settings.webauthn.description": "Verwalten Sie Ihre Hardware-Token-Einstellungen", + "settings.webauthn.title": "Hardware-Token verwalten", + "settings.oidc.info": "Verbundene Konten dieser Anbieter können für die Anmeldung bei Ihrem Konto verwendet werden", + "settings.passkey.info": "Verwalten Sie Ihre Passkey-Einstellungen", + "settings.title-lookup-secret": "Verwalten Sie 2FA-Backup-Wiederherstellungscodes", + "settings.title-navigation": "Kontoeinstellungen", + "settings.title-oidc": "Social Sign In", + "settings.title-passkey": "Passkeys verwalten", + "settings.title-password": "Kennwort ändern", + "settings.title-profile": "Profileinstellungen", + "settings.title-totp": "Verwalten Sie die 2FA TOTP Authenticator-App", + "settings.title-webauthn": "Hardware-Token verwalten", + "settings.webauthn.info": "Hardware-Tokens werden für die Zweitfaktor-Authentifizierung oder als Erstfaktor-Authentifizierung mit Passkeys verwendet" } diff --git a/packages/elements-react/src/locales/en.json b/packages/elements-react/src/locales/en.json index 63d2b945f..70c2eec02 100644 --- a/packages/elements-react/src/locales/en.json +++ b/packages/elements-react/src/locales/en.json @@ -51,7 +51,7 @@ "identities.messages.1050005": "Authenticator app QR code", "identities.messages.1050006": "{secret}", "identities.messages.1050007": "Reveal backup recovery codes", - "identities.messages.1050008": "Generate new backup recovery codes", + "identities.messages.1050008": "Enable", "identities.messages.1050009": "{secret}", "identities.messages.1050010": "These are your back up recovery codes. Please keep them in a safe place!", "identities.messages.1050011": "Confirm backup recovery codes", @@ -60,7 +60,7 @@ "identities.messages.1050014": "Secret was used at {used_at, date, long}", "identities.messages.1050015": "{secrets_list}", "identities.messages.1050016": "Disable this method", - "identities.messages.1050017": "This is your authenticator app secret. Use it if you can not scan the QR code.", + "identities.messages.1050017": "Authenticator Secret", "identities.messages.1050018": "Remove security key \"{display_name}\"", "identities.messages.1050019": "Add passkey", "identities.messages.1050020": "Remove passkey \"{display_name}\"", @@ -184,7 +184,6 @@ "settings.navigation-webauthn": "Hardware Tokens", "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Here you can manage settings related to your account. Keep in mind that certain actions require you to re-authenticate.", - "settings.title": "Update your account", "settings.subtitle": "Update your account settings", "settings.title-lookup-secret": "Manage 2FA Backup Recovery Codes", "settings.title-navigation": "Account Settings", @@ -194,6 +193,14 @@ "settings.title-totp": "Manage 2FA TOTP Authenticator App", "settings.title-webauthn": "Manage Hardware Tokens", "settings.title-passkey": "Manage Passkeys", + "settings.title": "Account Settings", + "settings.navigation.title": "Account Settings", + "settings.password.title": "Change Password", + "settings.password.description": "Modify your password", + "settings.profile.title": "Profile Settings", + "settings.profile.description": "Update your profile information", + "settings.webauthn.title": "Manage Hardware Tokens", + "settings.webauthn.description": "Manage your hardware token settings", "verification.registration-button": "Sign up", "verification.registration-label": "Don't have an account?", "verification.title": "Verify your account", @@ -219,5 +226,18 @@ "card.header.description.login": "Sign in with {identifierLabel}", "card.header.description.registration": "Sign up with {identifierLabel}", "misc.or": "or", - "forms.label.forgot-password": "Forgot Password?" + "forms.label.forgot-password": "Forgot Password?", + "settings.totp.title": "Authenticator App", + "settings.totp.description": "Add a TOTP Authenticator App to your account to improve your account security. Popular Authenticator Apps are LastPass and Google Authenticator", + "settings.totp.info.not-linked": "To enable scan the QR code with your authenticator and enter the code.", + "settings.totp.info.linked": "You currently have an authenticator app connected.", + "settings.lookup_secret.title": "Backup Recovery Codes (second factor)", + "settings.lookup_secret.description": "Recovery codes are a secure backup for 2FA, allowing you to regain access to your account if you lose your 2FA device.", + "settings.oidc.title": "Connected accounts", + "settings.oidc.description": "Connect a social login provider with your account.", + "settings.oidc.info": "Connected accounts from these providers can be used to login to your account", + "settings.webauthn.info": "Hardware Tokens are used for second-factor authentication or as first-factor with Passkeys", + "settings.passkey.title": "Manage Passkeys", + "settings.passkey.description": "Manage your passkey settings", + "settings.passkey.info": "Manage your passkey settings" } diff --git a/packages/elements-react/src/locales/es.json b/packages/elements-react/src/locales/es.json index b9459aba8..9e1421bcc 100644 --- a/packages/elements-react/src/locales/es.json +++ b/packages/elements-react/src/locales/es.json @@ -161,14 +161,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Aquí puede gestionar las configuraciones relacionadas con su cuenta. Tenga en cuenta que ciertas acciones requieren que vuelva a autenticarse.", "settings.title": "Configuraciones de la Cuenta", - "settings.title-lookup-secret": "Gestionar Códigos de Recuperación de Respaldo de 2FA", - "settings.title-navigation": "Configuraciones de la Cuenta", - "settings.title-oidc": "Inicio de Sesión Social", - "settings.title-password": "Cambiar Contraseña", - "settings.title-profile": "Configuraciones del Perfil", - "settings.title-totp": "Gestionar Aplicación Autenticadora de 2FA", - "settings.title-webauthn": "Gestionar Tokens de Hardware", - "settings.title-passkey": "Gestionar Passkeys", "verification.registration-button": "Registrarse", "verification.registration-label": "¿No tiene una cuenta?", "verification.title": "Verificar su cuenta", @@ -219,5 +211,33 @@ "recovery.subtitle": "", "registration.subtitle": "", "settings.subtitle": "", - "verification.subtitle": "" + "verification.subtitle": "", + "settings.totp.info.linked": "Actualmente tienes una aplicación de autenticación conectada.", + "settings.totp.info.not-linked": "Para habilitar, escanea el código QR con tu autenticador e ingresa el código.", + "settings.totp.title": "Aplicación Autenticadora", + "settings.totp.description": "Agrega una aplicación de autenticación TOTP a tu cuenta para mejorar la seguridad de tu cuenta. Las aplicaciones de autenticación populares son LastPass y Google Authenticator.", + "settings.lookup_secret.description": "Gestiona tus códigos de recuperación de respaldo 2FA", + "settings.lookup_secret.title": "Códigos de Recuperación", + "settings.navigation.title": "Configuración de la Cuenta", + "settings.oidc.description": "Administra la configuración de tu inicio de sesión social", + "settings.oidc.title": "Inicio de Sesión Social", + "settings.passkey.description": "Administra la configuración de tu clave de acceso", + "settings.passkey.title": "Gestionar Claves de Acceso", + "settings.password.description": "Modifica tu contraseña", + "settings.password.title": "Cambiar Contraseña", + "settings.profile.description": "Actualiza la información de tu perfil", + "settings.profile.title": "Configuración de Perfil", + "settings.webauthn.description": "Administra la configuración de tu token de hardware", + "settings.webauthn.title": "Gestionar Tokens de Hardware", + "settings.oidc.info": "", + "settings.passkey.info": "", + "settings.title-lookup-secret": "", + "settings.title-navigation": "", + "settings.title-oidc": "", + "settings.title-passkey": "", + "settings.title-password": "", + "settings.title-profile": "", + "settings.title-totp": "", + "settings.title-webauthn": "", + "settings.webauthn.info": "" } diff --git a/packages/elements-react/src/locales/fr.json b/packages/elements-react/src/locales/fr.json index 6944df10e..341a9f2ce 100644 --- a/packages/elements-react/src/locales/fr.json +++ b/packages/elements-react/src/locales/fr.json @@ -161,14 +161,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Ici, vous pouvez gérer les paramètres liés à votre compte. Gardez à l'esprit que certaines actions nécessitent une nouvelle authentification.", "settings.title": "Paramètres du compte", - "settings.title-lookup-secret": "Gérer les codes de récupération 2FA", - "settings.title-navigation": "Paramètres du compte", - "settings.title-oidc": "Connexion sociale", - "settings.title-password": "Changer le mot de passe", - "settings.title-profile": "Paramètres de profil", - "settings.title-totp": "Gérer l'application d'authentification TOTP 2FA", - "settings.title-webauthn": "Gérer les tokens matériels", - "settings.title-passkey": "Gérer les Passkeys", "verification.registration-button": "S'inscrire", "verification.registration-label": "Vous n'avez pas de compte ?", "verification.title": "Vérifiez votre compte", @@ -219,5 +211,33 @@ "recovery.subtitle": "", "registration.subtitle": "", "settings.subtitle": "", - "verification.subtitle": "" + "verification.subtitle": "", + "settings.totp.info.linked": "Vous avez actuellement une application d'authentification connectée.", + "settings.totp.info.not-linked": "Pour activer, scannez le QR code avec votre authentificateur et entrez le code.", + "settings.totp.title": "Application d'authentification", + "settings.totp.description": "Ajoutez une application d'authentification TOTP à votre compte pour améliorer la sécurité de votre compte. Les applications d'authentification populaires sont LastPass et Google Authenticator.", + "settings.lookup_secret.description": "", + "settings.lookup_secret.title": "", + "settings.navigation.title": "", + "settings.oidc.description": "", + "settings.oidc.info": "", + "settings.oidc.title": "", + "settings.passkey.description": "", + "settings.passkey.info": "", + "settings.passkey.title": "", + "settings.password.description": "", + "settings.password.title": "", + "settings.profile.description": "", + "settings.profile.title": "", + "settings.title-lookup-secret": "", + "settings.title-navigation": "", + "settings.title-oidc": "", + "settings.title-passkey": "", + "settings.title-password": "", + "settings.title-profile": "", + "settings.title-totp": "", + "settings.title-webauthn": "", + "settings.webauthn.description": "", + "settings.webauthn.info": "", + "settings.webauthn.title": "" } diff --git a/packages/elements-react/src/locales/nl.json b/packages/elements-react/src/locales/nl.json index 5e4d160b4..56608a7f7 100644 --- a/packages/elements-react/src/locales/nl.json +++ b/packages/elements-react/src/locales/nl.json @@ -161,14 +161,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Hier kun je instellingen beheren die verband houden met je account. Houd er rekening mee dat bepaalde acties vereisen dat je opnieuw wordt geauthenticeerd.", "settings.title": "Accountinstellingen", - "settings.title-lookup-secret": "Beheer 2FA Backup Herstelcodes", - "settings.title-navigation": "Accountinstellingen", - "settings.title-oidc": "Sociaal Inloggen", - "settings.title-password": "Wachtwoord wijzigen", - "settings.title-profile": "Profielinstellingen", - "settings.title-totp": "Beheer 2FA TOTP Authenticator App", - "settings.title-webauthn": "Beheer Hardware Tokens", - "settings.title-passkey": "Beheer Passkeys", "verification.registration-button": "Registreren", "verification.registration-label": "Heb je nog geen account?", "verification.title": "Verifieer je account", @@ -219,5 +211,33 @@ "recovery.subtitle": "", "registration.subtitle": "", "settings.subtitle": "", - "verification.subtitle": "" + "verification.subtitle": "", + "settings.totp.info.linked": "U heeft momenteel een authenticator-app verbonden.", + "settings.totp.info.not-linked": "Om te activeren, scan de QR-code met je authenticator en voer de code in.", + "settings.totp.title": "", + "settings.totp.description": "Voeg een TOTP Authenticator App toe aan uw account om de beveiliging van uw account te verbeteren. Populaire Authenticator Apps zijn LastPass en Google Authenticator.", + "settings.lookup_secret.description": "", + "settings.lookup_secret.title": "", + "settings.navigation.title": "", + "settings.oidc.description": "", + "settings.oidc.info": "", + "settings.oidc.title": "", + "settings.passkey.description": "", + "settings.passkey.info": "", + "settings.passkey.title": "", + "settings.password.description": "", + "settings.password.title": "", + "settings.profile.description": "", + "settings.profile.title": "", + "settings.title-lookup-secret": "", + "settings.title-navigation": "", + "settings.title-oidc": "", + "settings.title-passkey": "", + "settings.title-password": "", + "settings.title-profile": "", + "settings.title-totp": "", + "settings.title-webauthn": "", + "settings.webauthn.description": "", + "settings.webauthn.info": "", + "settings.webauthn.title": "" } diff --git a/packages/elements-react/src/locales/pl.json b/packages/elements-react/src/locales/pl.json index 3fa0f6056..be19465a1 100644 --- a/packages/elements-react/src/locales/pl.json +++ b/packages/elements-react/src/locales/pl.json @@ -161,14 +161,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Tutaj możesz zarządzać ustawieniami związanymi z Twoim kontem. Miej na uwadze że niektóre akcje mogą wymagać ponownej uwierzytelnienia.", "settings.title": "Ustawienia Konta", - "settings.title-lookup-secret": "Zarządzaj kodami odzyskiwania 2FA", - "settings.title-navigation": "Ustawienia Konta", - "settings.title-oidc": "Zewnętrzne logowanie", - "settings.title-password": "Zmień Hasło", - "settings.title-profile": "Ustawienia Profilu", - "settings.title-totp": "Zarządzaj aplikacją autentykator 2FA TOTP", - "settings.title-webauthn": "Zarządzaj tokenami sprzętowymi", - "settings.title-passkey": "Zarządzaj Passkeys", "verification.registration-button": "Zarejestruj się", "verification.registration-label": "Nie posiadasz konta?", "verification.title": "Zweryfikuj konto", @@ -219,5 +211,33 @@ "recovery.subtitle": "", "registration.subtitle": "", "settings.subtitle": "", - "verification.subtitle": "" + "verification.subtitle": "", + "settings.totp.info.linked": "Aktualnie masz podłączoną aplikację uwierzytelniającą.", + "settings.totp.info.not-linked": "Aby włączyć, zeskanuj kod QR za pomocą swojego uwierzytelniającego i wprowadź kod.", + "settings.totp.title": "", + "settings.totp.description": "Dodaj aplikację do uwierzytelniania TOTP do swojego konta, aby poprawić bezpieczeństwo swojego konta. Popularne aplikacje uwierzytelniające to LastPass i Google Authenticator.", + "settings.lookup_secret.description": "", + "settings.lookup_secret.title": "", + "settings.navigation.title": "", + "settings.oidc.description": "", + "settings.oidc.info": "", + "settings.oidc.title": "", + "settings.passkey.description": "", + "settings.passkey.info": "", + "settings.passkey.title": "", + "settings.password.description": "", + "settings.password.title": "", + "settings.profile.description": "", + "settings.profile.title": "", + "settings.title-lookup-secret": "", + "settings.title-navigation": "", + "settings.title-oidc": "", + "settings.title-passkey": "", + "settings.title-password": "", + "settings.title-profile": "", + "settings.title-totp": "", + "settings.title-webauthn": "", + "settings.webauthn.description": "", + "settings.webauthn.info": "", + "settings.webauthn.title": "" } diff --git a/packages/elements-react/src/locales/pt.json b/packages/elements-react/src/locales/pt.json index 2646603eb..7ba40d473 100644 --- a/packages/elements-react/src/locales/pt.json +++ b/packages/elements-react/src/locales/pt.json @@ -161,14 +161,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Aqui pode gerar configurações relacionadas com a sua conta. Lembre-se de que certas ações exigem que efetue novamente login.", "settings.title": "Configurações da Conta", - "settings.title-lookup-secret": "Gerar Códigos de Recuperação de Backup de 2FA", - "settings.title-navigation": "Configurações da Conta", - "settings.title-oidc": "login social", - "settings.title-password": "Alterar password", - "settings.title-profile": "Configurações de Perfil", - "settings.title-totp": "Gerar Aplicação Autenticador 2FA", - "settings.title-webauthn": "Gerar Tokens de Hardware", - "settings.title-passkey": "Gerar Passkeys", "verification.registration-button": "Registar", "verification.registration-label": "Não tem uma conta?", "verification.title": "Verifique a sua conta", @@ -219,5 +211,33 @@ "recovery.subtitle": "", "registration.subtitle": "", "settings.subtitle": "", - "verification.subtitle": "" + "verification.subtitle": "", + "settings.totp.info.linked": "Você atualmente tem um aplicativo autenticador conectado.", + "settings.totp.info.not-linked": "Para ativar, escaneie o código QR com seu autenticador e insira o código.", + "settings.totp.title": "", + "settings.totp.description": "Adicione um aplicativo autenticador TOTP à sua conta para melhorar a segurança da sua conta. Aplicativos autenticadores populares são LastPass e Google Authenticator.", + "settings.lookup_secret.description": "", + "settings.lookup_secret.title": "", + "settings.navigation.title": "", + "settings.oidc.description": "", + "settings.oidc.info": "", + "settings.oidc.title": "", + "settings.passkey.description": "", + "settings.passkey.info": "", + "settings.passkey.title": "", + "settings.password.description": "", + "settings.password.title": "", + "settings.profile.description": "", + "settings.profile.title": "", + "settings.title-lookup-secret": "", + "settings.title-navigation": "", + "settings.title-oidc": "", + "settings.title-passkey": "", + "settings.title-password": "", + "settings.title-profile": "", + "settings.title-totp": "", + "settings.title-webauthn": "", + "settings.webauthn.description": "", + "settings.webauthn.info": "", + "settings.webauthn.title": "" } diff --git a/packages/elements-react/src/locales/sv.json b/packages/elements-react/src/locales/sv.json index 175948441..82282e037 100644 --- a/packages/elements-react/src/locales/sv.json +++ b/packages/elements-react/src/locales/sv.json @@ -179,14 +179,6 @@ "settings.navigation-passkey": "Passkeys", "settings.subtitle-instructions": "Här kan du hantera inställningar relaterade till ditt konto. Tänk på att vissa åtgärder kräver att du autentiseras på nytt.", "settings.title": "Kontoinställningar", - "settings.title-lookup-secret": "Hantera 2FA backup-återställningskoder", - "settings.title-navigation": "Kontoinställningar", - "settings.title-oidc": "Social Inloggning", - "settings.title-password": "Byt lösenord", - "settings.title-profile": "Profilinställningar", - "settings.title-totp": "Hantera 2FA TOTP Autentiserings App", - "settings.title-webauthn": "Hantera Hårdvaru Tokens", - "settings.title-passkey": "Hantera Passkeys", "verification.registration-button": "Skapa konto", "verification.registration-label": "Har du inget konto?", "verification.title": "Verifiera ditt konto", @@ -219,5 +211,33 @@ "recovery.subtitle": "Ange e-postadressen kopplad till ditt konto för att få en engångskod för åtkomst", "registration.subtitle": "Registrera dig med {parts}", "settings.subtitle": "Uppdatera dina kontoinställningar", - "verification.subtitle": "Ange e-postadressen kopplad till ditt konto för att verifiera det" + "verification.subtitle": "Ange e-postadressen kopplad till ditt konto för att verifiera det", + "settings.totp.info.linked": "Du har för närvarande en autentiseringsapp kopplad.", + "settings.totp.info.not-linked": "För att aktivera, skanna QR-koden med din autentiserare och ange koden.", + "settings.totp.title": "", + "settings.totp.description": "Lägg till en TOTP-autentiseringsapp till ditt konto för att förbättra säkerheten på ditt konto. Populära autentiseringsappar är LastPass och Google Authenticator.", + "settings.lookup_secret.description": "Återställningskoder är en säker backup för 2FA, vilket gör att du kan återfå åtkomst till ditt konto om du tappar bort din 2FA-enhet.", + "settings.lookup_secret.title": "Backup-återställningskoder (andra faktorn)", + "settings.navigation.title": "Kontoinställningar", + "settings.oidc.description": "Anslut en social inloggningsleverantör till ditt konto.", + "settings.oidc.info": "Anslutna konton från dessa leverantörer kan användas för att logga in på ditt konto", + "settings.oidc.title": "Anslutna konton", + "settings.passkey.description": "Hantera dina lösenordsinställningar", + "settings.passkey.info": "Hantera dina lösenordsinställningar", + "settings.passkey.title": "Hantera lösenord", + "settings.password.description": "Ändra ditt lösenord", + "settings.password.title": "Ändra lösenord", + "settings.profile.description": "Uppdatera din profilinformation", + "settings.profile.title": "Profilinställningar", + "settings.title-lookup-secret": "Hantera 2FA Backup Recovery-koder", + "settings.title-navigation": "Kontoinställningar", + "settings.title-oidc": "Social logga in", + "settings.title-passkey": "Hantera lösenord", + "settings.title-password": "Ändra lösenord", + "settings.title-profile": "Profilinställningar", + "settings.title-totp": "Hantera 2FA TOTP Authenticator-appen", + "settings.title-webauthn": "Hantera maskinvarutokens", + "settings.webauthn.description": "Hantera inställningarna för din maskinvarutoken", + "settings.webauthn.info": "Hårdvarutokens används för andrafaktorsautentisering eller som förstafaktor med lösenordsnycklar", + "settings.webauthn.title": "Hantera maskinvarutokens" } diff --git a/packages/elements-react/src/tests/jest/test-utils.tsx b/packages/elements-react/src/tests/jest/test-utils.tsx index 589642f6f..493ba6860 100644 --- a/packages/elements-react/src/tests/jest/test-utils.tsx +++ b/packages/elements-react/src/tests/jest/test-utils.tsx @@ -2,26 +2,12 @@ // SPDX-License-Identifier: Apache-2.0 import { render, RenderOptions } from "@testing-library/react" -import { PropsWithChildren, ReactElement, ReactNode } from "react" -import { OryProvider, OryProviderProps } from "../../context" +import { merge } from "lodash" +import { ComponentProps, PropsWithChildren, ReactElement } from "react" +import { OryFlowComponentOverrides } from "../../components" import { OryComponentProvider } from "../../context/component" import { OryDefaultComponents } from "../../theme/default" import { OryClientConfiguration } from "../../util" -import { IntlProvider } from "../../context/intl-context" - -const AllProviders = ({ children }: PropsWithChildren) => ( - - - {children} - - -) - -const customRender = ( - ui: ReactElement, - options?: Omit, -) => render(ui, { wrapper: AllProviders, ...options }) - export const defaultConfiguration: OryClientConfiguration = { name: "test", project: { @@ -38,20 +24,21 @@ export const defaultConfiguration: OryClientConfiguration = { }, } -export function renderWithOryProvider( - ui: ReactNode, - { - providerProps, - ...renderOptions - }: RenderOptions & { providerProps: OryProviderProps }, -) { - return render(ui, { - wrapper: ({ children }) => ( - {children} - ), - ...renderOptions, - }) -} +type ComponetOverrider = { components?: OryFlowComponentOverrides } + +const ComponentProvider = ({ + children, + components, +}: PropsWithChildren) => ( + + {children} + +) -export * from "@testing-library/react" -export { customRender as render } +export const renderWithComponents = ( + ui: ReactElement, + options?: Omit & + ComponentProps, +) => render(ui, { wrapper: ComponentProvider, ...options }) diff --git a/packages/elements-react/src/theme/default/assets/icons/download.svg b/packages/elements-react/src/theme/default/assets/icons/download.svg new file mode 100644 index 000000000..7cc1710f7 --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/download.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/eye.svg b/packages/elements-react/src/theme/default/assets/icons/eye.svg new file mode 100644 index 000000000..8e7389d95 --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/eye.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/key.svg b/packages/elements-react/src/theme/default/assets/icons/key.svg new file mode 100644 index 000000000..1e30392df --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/key.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/qrcode.svg b/packages/elements-react/src/theme/default/assets/icons/qrcode.svg new file mode 100644 index 000000000..8b5f4dea2 --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/qrcode.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/refresh.svg b/packages/elements-react/src/theme/default/assets/icons/refresh.svg new file mode 100644 index 000000000..d58bdc494 --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/refresh.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/trash.svg b/packages/elements-react/src/theme/default/assets/icons/trash.svg new file mode 100644 index 000000000..ca90b326b --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/trash.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/assets/icons/unlink.svg b/packages/elements-react/src/theme/default/assets/icons/unlink.svg new file mode 100644 index 000000000..54333b5ef --- /dev/null +++ b/packages/elements-react/src/theme/default/assets/icons/unlink.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/packages/elements-react/src/theme/default/components/card/index.tsx b/packages/elements-react/src/theme/default/components/card/index.tsx index 0ad38fe5c..3185ebe30 100644 --- a/packages/elements-react/src/theme/default/components/card/index.tsx +++ b/packages/elements-react/src/theme/default/components/card/index.tsx @@ -10,7 +10,7 @@ import { DefaultCardLogo } from "./logo" export function DefaultCard({ children }: OryCardProps) { return ( -
+
{children} diff --git a/packages/elements-react/src/theme/default/components/card/logo.tsx b/packages/elements-react/src/theme/default/components/card/logo.tsx index 910618984..722b329be 100644 --- a/packages/elements-react/src/theme/default/components/card/logo.tsx +++ b/packages/elements-react/src/theme/default/components/card/logo.tsx @@ -11,9 +11,7 @@ export function DefaultCardLogo() { } return ( -

+

{flow.config.name}

) diff --git a/packages/elements-react/src/theme/default/components/default-components.tsx b/packages/elements-react/src/theme/default/components/default-components.tsx index 733285aa9..6e1d72657 100644 --- a/packages/elements-react/src/theme/default/components/default-components.tsx +++ b/packages/elements-react/src/theme/default/components/default-components.tsx @@ -30,6 +30,16 @@ import { import { DefaultText } from "./form/text" import { DefaultCurrentIdentifierButton } from "./card/current-identifier-button" import { OryFlowComponents } from "@ory/elements-react" +import { + DefaultFormSection, + DefaultFormSectionContent, + DefaultFormSectionFooter, +} from "./form/section" +import { DefaultSettingsRecoveryCodes } from "./settings/settings-recovery-codes" +import { DefaultSettingsTotp } from "./settings/settings-top" +import { DefaultSettingsOidc } from "./settings/settings-oidc" +import { DefaultSettingsWebauthn } from "./settings/settings-webauthn" +import { DefaultSettingsPasskey } from "./settings/settings-passkey" import { DefaultPageHeader } from "./generic/page-header" export const OryDefaultComponents: OryFlowComponents = { @@ -41,6 +51,10 @@ export const OryDefaultComponents: OryFlowComponents = { Logo: DefaultCardLogo, Divider: DefaultHorizontalDivider, AuthMethodListItem: DefaultAuthMethodListItem, + + SettingsSection: DefaultFormSection, + SettingsSectionContent: DefaultFormSectionContent, + SettingsSectionFooter: DefaultFormSectionFooter, }, Node: { Button: DefaultButton, @@ -58,6 +72,11 @@ export const OryDefaultComponents: OryFlowComponents = { Root: DefaultFormContainer, Group: DefaultGroupContainer, OidcRoot: DefaultSocialButtonContainer, + RecoveryCodesSettings: DefaultSettingsRecoveryCodes, + TotpSettings: DefaultSettingsTotp, + OidcSettings: DefaultSettingsOidc, + WebauthnSettings: DefaultSettingsWebauthn, + PasskeySettings: DefaultSettingsPasskey, }, Message: { Root: DefaultMessageContainer, diff --git a/packages/elements-react/src/theme/default/components/form/button.tsx b/packages/elements-react/src/theme/default/components/form/button.tsx index 124f63d3f..d2edb234d 100644 --- a/packages/elements-react/src/theme/default/components/form/button.tsx +++ b/packages/elements-react/src/theme/default/components/form/button.tsx @@ -1,15 +1,54 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { getNodeLabel } from "@ory/client-fetch" +import { FlowType, getNodeLabel } from "@ory/client-fetch" import { OryNodeButtonProps, uiTextToFormattedMessage, } from "@ory/elements-react" import { useFormContext } from "react-hook-form" import { useIntl } from "react-intl" -import { cn } from "../../utils/cn" import { Spinner } from "./spinner" +import { useOryFlow } from "@ory/elements-react" +import { cva, VariantProps } from "class-variance-authority" + +const buttonStyles = cva( + [ + "ring-1 relative overflow-hidden ring-inset rounded text-sm leading-none flex gap-3 justify-center", + "disabled:cursor-not-allowed loading:before:pointer-events-none loading:cursor-wait", + "transition-colors ease-linear duration-100", + ], + { + variants: { + intent: { + primary: [ + "bg-button-primary-bg-default text-button-primary-fg-default ring-button-primary-border-default", + "hover:bg-button-primary-bg-hover hover:text-button-primary-fg-hover hover:ring-button-primary-border-hover", + "disabled:bg-button-primary-bg-disabled disabled:text-button-primary-fg-disabled disabled:ring-button-primary-border-disabled", + "loading:bg-button-primary-bg-default loading:text-button-primary-fg-default loading:ring-button-primary-border-default", + "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-primary-bg-default loading:before:opacity-80", + ], + secondary: [ + "bg-button-secondary-bg-default text-button-secondary-fg-default ring-button-secondary-border-default", + "hover:bg-button-secondary-bg-hover hover:text-button-secondary-fg-hover hover:ring-button-secondary-border-hover", + "disabled:bg-button-secondary-bg-disabled disabled:text-button-secondary-fg-disabled disabled:ring-button-secondary-border-disabled", + "loading:bg-button-secondary-bg-default loading:text-button-secondary-fg-default loading:ring-button-secondary-border-default", + "loading:before:absolute loading:before:content-[''] loading:before:inset-0 loading:before:bg-button-secondary-bg-default loading:before:opacity-80", + ], + }, + size: { + default: ["px-4 py-3"], + large: ["px-4 py-4.5 max-md:py-3"], + }, + defaultVariants: { + intent: "primary", + size: "default", + }, + }, + }, +) + +export type ButtonVariants = VariantProps export const DefaultButton = ({ attributes, @@ -29,6 +68,7 @@ export const DefaultButton = ({ } = attributes const intl = useIntl() const label = getNodeLabel(node) + const { flowType } = useOryFlow() const { formState: { isSubmitting }, setValue, @@ -37,7 +77,12 @@ export const DefaultButton = ({ const isPrimary = attributes.name === "method" || attributes.name.includes("passkey") || - attributes.name.includes("webauthn") + attributes.name.includes("webauthn") || + attributes.name.includes("lookup_secret") + + const isSmall = + flowType === FlowType.Settings && + attributes.name !== "webauthn_register_trigger" return ( ) } diff --git a/packages/elements-react/src/theme/default/components/form/checkbox.tsx b/packages/elements-react/src/theme/default/components/form/checkbox.tsx index 0437dcef0..b50997ebe 100644 --- a/packages/elements-react/src/theme/default/components/form/checkbox.tsx +++ b/packages/elements-react/src/theme/default/components/form/checkbox.tsx @@ -48,6 +48,7 @@ export const DefaultCheckbox = ({ // Button does not support these attributes, so we skip them autocomplete: _autocomplete, onclick: _onclick, + maxlength: _max, // End of skipped attributes ...attributes } = initialAttributes diff --git a/packages/elements-react/src/theme/default/components/form/index.tsx b/packages/elements-react/src/theme/default/components/form/index.tsx index 7d82f8ad7..c487d398b 100644 --- a/packages/elements-react/src/theme/default/components/form/index.tsx +++ b/packages/elements-react/src/theme/default/components/form/index.tsx @@ -4,8 +4,13 @@ import { PropsWithChildren } from "react" import { cn } from "../../utils/cn" import { useIntl } from "react-intl" -import { OryFormRootProps, uiTextToFormattedMessage } from "@ory/elements-react" +import { + OryFormRootProps, + uiTextToFormattedMessage, + useOryFlow, +} from "@ory/elements-react" import { OryMessageContentProps } from "@ory/elements-react" +import { FlowType } from "@ory/client-fetch" export function DefaultFormContainer({ children, @@ -27,11 +32,20 @@ export function DefaultFormContainer({ } export function DefaultMessageContainer({ children }: PropsWithChildren) { + const { flowType } = useOryFlow() if (!children || (Array.isArray(children) && children.length === 0)) { return null } - return
{children}
+ return ( +
+ {children} +
+ ) } export function DefaultMessage({ message }: OryMessageContentProps) { diff --git a/packages/elements-react/src/theme/default/components/form/input.tsx b/packages/elements-react/src/theme/default/components/form/input.tsx index b80105965..01d71f00c 100644 --- a/packages/elements-react/src/theme/default/components/form/input.tsx +++ b/packages/elements-react/src/theme/default/components/form/input.tsx @@ -38,7 +38,7 @@ export const DefaultInput = ({ maxLength={maxlength} autoComplete={autocomplete} placeholder={formattedLabel} - className="antialiased bg-forms-bg-default rounded-border-radius-forms border px-3 py-2.5 md:px-4 md:py-4 border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm" + className="antialiased disabled:text-forms-fg-disabled disabled:bg-forms-bg-disabled bg-forms-bg-default rounded-border-radius-forms border px-3 py-2.5 md:px-4 md:py-4 border-forms-border-default leading-tight hover:border-forms-border-hover transition-colors text-sm" {...register(name, { value })} /> ) diff --git a/packages/elements-react/src/theme/default/components/form/section.tsx b/packages/elements-react/src/theme/default/components/form/section.tsx new file mode 100644 index 000000000..f59324ce1 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/form/section.tsx @@ -0,0 +1,46 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { + OryFormSectionContentProps, + OryFormSectionFooterProps, + OryFormSectionProps, +} from "@ory/elements-react" + +const DefaultFormSection = ({ children }: OryFormSectionProps) => { + return ( +
+ {children} +
+ ) +} + +const DefaultFormSectionContent = ({ + title, + description, + children, +}: OryFormSectionContentProps) => { + return ( +
+
+

{title}

+ {description} +
+ {children} +
+ ) +} + +const DefaultFormSectionFooter = ({ children }: OryFormSectionFooterProps) => { + return ( +
+ {children} +
+ ) +} + +export { + DefaultFormSection, + DefaultFormSectionContent, + DefaultFormSectionFooter, +} diff --git a/packages/elements-react/src/theme/default/components/form/social.tsx b/packages/elements-react/src/theme/default/components/form/social.tsx index 00729205b..0bc00e139 100644 --- a/packages/elements-react/src/theme/default/components/form/social.tsx +++ b/packages/elements-react/src/theme/default/components/form/social.tsx @@ -11,7 +11,9 @@ import logos from "../../provider-logos" import { cn } from "../../utils/cn" import { useIntl } from "react-intl" -function extractProvider(context: object | undefined): string | undefined { +export function extractProvider( + context: object | undefined, +): string | undefined { if ( context && typeof context === "object" && @@ -23,11 +25,16 @@ function extractProvider(context: object | undefined): string | undefined { return undefined } +type DefaultSocialButtonProps = OryNodeOidcButtonProps & { + showLabel?: boolean +} + export function DefaultButtonSocial({ attributes, node, onClick, -}: OryNodeOidcButtonProps) { + showLabel: _showLabel, +}: DefaultSocialButtonProps) { const { node_type: _ignoredNodeType, type: _ignoredType, @@ -44,7 +51,8 @@ export function DefaultButtonSocial({ const Logo = logos[attributes.value] - const showLabel = oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0 + const showLabel = + _showLabel ?? (oidcNodeCount % 3 !== 0 && oidcNodeCount % 4 !== 0) const provider = extractProvider(node.meta.label?.context) ?? "" diff --git a/packages/elements-react/src/theme/default/components/form/spinner.tsx b/packages/elements-react/src/theme/default/components/form/spinner.tsx index 285a155cb..f33e94c07 100644 --- a/packages/elements-react/src/theme/default/components/form/spinner.tsx +++ b/packages/elements-react/src/theme/default/components/form/spinner.tsx @@ -9,7 +9,7 @@ export function Spinner({ className }: { className?: string }) { aria-hidden="true" role="status" className={cn( - "absolute inset-0 mx-auto my-auto w-8 h-8 text-branding-fg-default animate-spin text-button-primary-fg-default", + "absolute pointer-events-none inset-0 mx-auto my-auto w-8 h-8 animate-spin", className, )} viewBox="0 0 34 34" diff --git a/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx new file mode 100644 index 000000000..724ec2bd6 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/settings/settings-oidc.tsx @@ -0,0 +1,58 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { OrySettingsOidcProps } from "@ory/elements-react" +import { DefaultButtonSocial, extractProvider } from "../form/social" +import { UiNodeInputAttributes } from "@ory/client-fetch" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import logos from "../../provider-logos" +import Trash from "../../assets/icons/trash.svg" + +export function DefaultSettingsOidc({ + linkButtons, + unlinkButtons, +}: OrySettingsOidcProps) { + const hasLinkButtons = linkButtons.length > 0 + const hasUnlinkButtons = unlinkButtons.length > 0 + + return ( +
+ {hasLinkButtons && ( +
+ {linkButtons.map((button) => { + const attrs = button.attributes as UiNodeInputAttributes + + return ( + + ) + })} +
+ )} + {hasUnlinkButtons && hasLinkButtons ? : null} + {unlinkButtons.map((button) => { + const attrs = button.attributes as UiNodeInputAttributes + const provider = extractProvider(button.meta.label?.context) ?? "" + const Logo = logos[attrs.value] + + return ( +
+
+ +

+ {provider} +

+
+ +
+ ) + })} +
+ ) +} diff --git a/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx new file mode 100644 index 000000000..81bad6155 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/settings/settings-passkey.tsx @@ -0,0 +1,75 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { OrySettingsPasskeyProps } from "@ory/elements-react" +import { UiNodeInputAttributes } from "@ory/client-fetch" +import { DefaultButton } from "../form/button" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import Passkey from "../../assets/icons/passkey.svg" +import Trash from "../../assets/icons/trash.svg" + +export function DefaultSettingsPasskey({ + triggerButton, + removeButtons, +}: OrySettingsPasskeyProps) { + const hasRemoveButtons = removeButtons.length > 0 + + return ( +
+
+ {triggerButton ? ( + + ) : null} +
+ {hasRemoveButtons ? ( +
+ +
+ {removeButtons.map((node, i) => { + const context = node.meta.label?.context ?? {} + const addedAt = + "added_at" in context ? (context.added_at as string) : null + const diaplyName = + "display_name" in context + ? (context.display_name as string) + : null + const keyId = + "value" in node.attributes ? node.attributes.value : null + + return ( +
+ +
+

+ {diaplyName} +

+ {keyId} +
+ {addedAt && ( +

+ {new Date(addedAt).toLocaleDateString()} +

+ )} + +
+ ) + })} +
+
+ ) : null} +
+ ) +} diff --git a/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx new file mode 100644 index 000000000..391407650 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/settings/settings-recovery-codes.tsx @@ -0,0 +1,80 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { OrySettingsRecoveryCodesProps } from "@ory/elements-react" +import Download from "../../assets/icons/download.svg" +import Eye from "../../assets/icons/eye.svg" +import Refresh from "../../assets/icons/refresh.svg" +import { UiNode, UiNodeInputAttributes } from "@ory/client-fetch" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" + +interface SettingsRecoveryCodesProps extends OrySettingsRecoveryCodesProps { + codes: string[] + regenerateButton?: UiNode + revealButton?: UiNode +} + +export function DefaultSettingsRecoveryCodes({ + codes, + regnerateButton, + revealButton, +}: SettingsRecoveryCodesProps) { + const onDownload = () => { + const element = document.createElement("a") + const file = new Blob([codes.join("\n")], { + type: "text/plain", + }) + element.href = URL.createObjectURL(file) + element.download = "recovery-codes.txt" + document.body.appendChild(element) + element.click() + } + + const hasCodes = codes.length >= 1 + + return ( +
+ +
+ {regnerateButton && ( + + )} + {revealButton && ( + + )} + {hasCodes ? ( + + ) : null} +
+ {hasCodes ? ( +
+
+ {codes.map((code) => ( +

{code}

+ ))} +
+
+ ) : null} +
+ ) +} diff --git a/packages/elements-react/src/theme/default/components/settings/settings-top.tsx b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx new file mode 100644 index 000000000..6d19e9e40 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/settings/settings-top.tsx @@ -0,0 +1,103 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { + UiNodeImageAttributes, + UiNodeInputAttributes, + UiNodeTextAttributes, +} from "@ory/client-fetch" +import { OrySettingsTotpProps } from "@ory/elements-react" +import { DefaultInput } from "../form/input" +import { DefaultImage } from "../form/image" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import { DefaultLabel } from "../form/label" +import QrCode from "../../assets/icons/qrcode.svg" +import Trash from "../../assets/icons/trash.svg" + +export function DefaultSettingsTotp(props: OrySettingsTotpProps) { + if ("totpUnlink" in props && props.totpUnlink) { + const { + type, + autocomplete: _ignoredAutocomplete, + label: _ignoredLabel, + node_type: _ignoredNodeType, + ...buttonAttrs + } = props.totpUnlink?.attributes as UiNodeInputAttributes + + return ( +
+
+ +
+
+
+ +
+
+

+ Authenticator app +

+
+ +
+
+ ) + } + + if ("totpSecret" in props) { + return ( +
+
+ +
+
+
+
+ +
+
+
+
+ + + + + + +
+
+ ) + } +} diff --git a/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx new file mode 100644 index 000000000..1082dab68 --- /dev/null +++ b/packages/elements-react/src/theme/default/components/settings/settings-webauthn.tsx @@ -0,0 +1,89 @@ +// Copyright © 2024 Ory Corp +// SPDX-License-Identifier: Apache-2.0 + +import { OrySettingsWebauthnProps } from "@ory/elements-react" +import { UiNodeInputAttributes } from "@ory/client-fetch" +import { DefaultLabel } from "../form/label" +import { DefaultInput } from "../form/input" +import { DefaultButton } from "../form/button" +import { DefaultHorizontalDivider } from "../form/horizontal-divider" +import Key from "../../assets/icons/key.svg" +import Trash from "../../assets/icons/trash.svg" + +export function DefaultSettingsWebauthn({ + nameInput, + triggerButton, + removeButtons, +}: OrySettingsWebauthnProps) { + const hasRemoveButtons = removeButtons.length > 0 + + return ( +
+
+
+ + + +
+ {triggerButton ? ( + + ) : null} +
+ {hasRemoveButtons ? ( +
+ +
+ {removeButtons.map((node, i) => { + const context = node.meta.label?.context ?? {} + const addedAt = + "added_at" in context ? (context.added_at as string) : null + const diaplyName = + "display_name" in context + ? (context.display_name as string) + : null + const keyId = + "value" in node.attributes ? node.attributes.value : null + + return ( +
+ +
+

+ {diaplyName} +

+ {keyId} +
+ {addedAt && ( +

+ {new Date(addedAt).toLocaleDateString()} +

+ )} + +
+ ) + })} +
+
+ ) : null} +
+ ) +} diff --git a/packages/elements-react/src/theme/default/components/ui/checkbox-label.spec.tsx b/packages/elements-react/src/theme/default/components/ui/checkbox-label.spec.tsx index 459609f26..104c0e266 100644 --- a/packages/elements-react/src/theme/default/components/ui/checkbox-label.spec.tsx +++ b/packages/elements-react/src/theme/default/components/ui/checkbox-label.spec.tsx @@ -1,8 +1,14 @@ // Copyright © 2024 Ory Corp // SPDX-License-Identifier: Apache-2.0 -import { render } from "../../../../tests/jest/test-utils" +import { render } from "@testing-library/react" import { CheckboxLabel } from "./checkbox-label" +import { IntlProvider } from "react-intl" +import { PropsWithChildren } from "react" + +const wrapper = ({ children }: PropsWithChildren) => ( + {children} +) describe("computeLabelElements", () => { test("renders plain text without links correctly", () => { @@ -10,6 +16,7 @@ describe("computeLabelElements", () => { const { container } = render( , + { wrapper }, ) expect(container).toMatchSnapshot() }) @@ -19,6 +26,7 @@ describe("computeLabelElements", () => { const { container } = render( , + { wrapper }, ) expect(container).toMatchSnapshot() }) @@ -29,6 +37,7 @@ describe("computeLabelElements", () => { const { container } = render( , + { wrapper }, ) expect(container).toMatchSnapshot() }) @@ -39,6 +48,7 @@ describe("computeLabelElements", () => { const { container } = render( , + { wrapper }, ) expect(container).toMatchSnapshot() }) @@ -48,12 +58,15 @@ describe("computeLabelElements", () => { const { container } = render( , + { wrapper }, ) expect(container).toMatchSnapshot() }) test("renders null if label is undefined", () => { - const { container } = render() + const { container } = render(, { + wrapper, + }) expect(container).toMatchSnapshot() }) }) diff --git a/packages/elements-react/src/theme/default/flows/settings.tsx b/packages/elements-react/src/theme/default/flows/settings.tsx index a46642552..e21a61ba9 100644 --- a/packages/elements-react/src/theme/default/flows/settings.tsx +++ b/packages/elements-react/src/theme/default/flows/settings.tsx @@ -8,7 +8,7 @@ import { OryClientConfiguration, OryFlowComponentOverrides, OryProvider, - OryTwoStepCard, + OrySettingsCard, } from "@ory/elements-react" import merge from "lodash.merge" import { PropsWithChildren } from "react" @@ -40,7 +40,7 @@ export function Settings({ {children ?? ( <> - + )} diff --git a/packages/elements-react/src/theme/default/icons/code.svg b/packages/elements-react/src/theme/default/icons/code.svg deleted file mode 100644 index ac19b91cd..000000000 --- a/packages/elements-react/src/theme/default/icons/code.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/elements-react/src/theme/default/icons/passkey.svg b/packages/elements-react/src/theme/default/icons/passkey.svg deleted file mode 100644 index ede8307bf..000000000 --- a/packages/elements-react/src/theme/default/icons/passkey.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/elements-react/src/theme/default/icons/password.svg b/packages/elements-react/src/theme/default/icons/password.svg deleted file mode 100644 index d9ce74524..000000000 --- a/packages/elements-react/src/theme/default/icons/password.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/elements-react/src/theme/default/icons/webauthn.svg b/packages/elements-react/src/theme/default/icons/webauthn.svg deleted file mode 100644 index 3dd14f381..000000000 --- a/packages/elements-react/src/theme/default/icons/webauthn.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/packages/elements-react/src/theme/default/utils/__tests__/__snapshots__/constructCardHeader.spec.tsx.snap b/packages/elements-react/src/theme/default/utils/__tests__/__snapshots__/constructCardHeader.spec.tsx.snap index 984f29995..803312c88 100644 --- a/packages/elements-react/src/theme/default/utils/__tests__/__snapshots__/constructCardHeader.spec.tsx.snap +++ b/packages/elements-react/src/theme/default/utils/__tests__/__snapshots__/constructCardHeader.spec.tsx.snap @@ -591,196 +591,196 @@ exports[`flowType=registration refresh=true combination=webauthn constructCardHe exports[`flowType=settings refresh=false combination=code constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=default_and_code constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=default_and_oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=default_and_passkeys constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=default_and_password constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=default_and_webauthn constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=defaultGroup constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=idenfier_first_and_oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=identifierFirst constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=identifierFirstPhone constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=passkey constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=password constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=false combination=webauthn constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=code constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=default_and_code constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=default_and_oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=default_and_passkeys constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=default_and_password constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=default_and_webauthn constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=defaultGroup constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=idenfier_first_and_oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=identifierFirst constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=identifierFirstPhone constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=oidc constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=passkey constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=password constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; exports[`flowType=settings refresh=true combination=webauthn constructCardHeaderText 1`] = ` { "description": "Update your account settings", - "title": "Update your account", + "title": "Account Settings", } `; diff --git a/packages/elements-react/src/types.ts b/packages/elements-react/src/types.ts index e683e1e70..d46e34e2a 100644 --- a/packages/elements-react/src/types.ts +++ b/packages/elements-react/src/types.ts @@ -12,12 +12,15 @@ import { ComponentPropsWithoutRef, FormEventHandler, MouseEventHandler, + PropsWithChildren, } from "react" +import { ButtonVariants } from "./theme/default/components/form/button" export type OryNodeButtonProps = { attributes: UiNodeInputAttributes node: UiNode -} & Omit, "children"> +} & Omit, "children"> & + ButtonVariants export type OryCurrentIdentifierProps = { attributes: UiNodeInputAttributes @@ -71,3 +74,10 @@ export type OryNodeInputProps = { node: UiNode onClick?: MouseEventHandler } + +export type OryFormSectionContentProps = PropsWithChildren<{ + title?: string + description?: string +}> + +export type OryFormSectionFooterProps = PropsWithChildren diff --git a/packages/elements-react/src/util/i18n/__tests__/index.spec.tsx b/packages/elements-react/src/util/i18n/__tests__/index.spec.tsx index f335d9c03..32c31735b 100644 --- a/packages/elements-react/src/util/i18n/__tests__/index.spec.tsx +++ b/packages/elements-react/src/util/i18n/__tests__/index.spec.tsx @@ -4,7 +4,8 @@ import { IntlProvider } from "../../../context/intl-context" import { UiText } from "@ory/client-fetch" import { Inner } from "./test-components" -import { render, screen } from "../../../tests/jest/test-utils" +import { renderWithComponents } from "../../../tests/jest/test-utils" +import { screen } from "@testing-library/dom" const uiText: UiText = { id: 1050010, @@ -14,7 +15,7 @@ const uiText: UiText = { describe("IntlProvider", () => { test("should return the german locale", () => { - render( + renderWithComponents( , @@ -28,7 +29,7 @@ describe("IntlProvider", () => { }) test("should return the polish locale", () => { - render( + renderWithComponents( , diff --git a/packages/elements-react/src/util/i18n/__tests__/translations.spec.ts b/packages/elements-react/src/util/i18n/__tests__/translations.spec.ts index b81911433..53fb582c6 100644 --- a/packages/elements-react/src/util/i18n/__tests__/translations.spec.ts +++ b/packages/elements-react/src/util/i18n/__tests__/translations.spec.ts @@ -23,13 +23,14 @@ describe("Translations", () => { } }) - test("language keys and templates match", () => { - for (const [_language, translation] of Object.entries(supportedLanguages)) { - expect(Object.keys(translation).sort()).toEqual( - Object.keys(supportedLanguages.en).sort(), - ) - } - }) + for (const [language, translation] of Object.entries(supportedLanguages)) { + test(`language keys and templates match [${language}]`, () => { + expect( + Object.keys(translation).sort(), + `expected locales/${language}.json to contain all supported keys`, + ).toEqual(Object.keys(supportedLanguages.en).sort()) + }) + } // TODO: Re-enable, once we have a proper routine for translations // test("template strings are present in translations", () => { diff --git a/packages/elements-react/src/util/onSubmitLogin.ts b/packages/elements-react/src/util/onSubmitLogin.ts index b1677ce78..8a2f20946 100644 --- a/packages/elements-react/src/util/onSubmitLogin.ts +++ b/packages/elements-react/src/util/onSubmitLogin.ts @@ -52,9 +52,9 @@ export async function onSubmitLogin( }, onValidationError: (body: LoginFlow) => { setFlowContainer({ + config, flow: body, flowType: FlowType.Login, - config, }) }, onRedirect, diff --git a/packages/elements-react/src/util/ui/__test__/ui.spec.ts b/packages/elements-react/src/util/ui/__test__/ui.spec.ts index b75cb07b8..49bf215c1 100644 --- a/packages/elements-react/src/util/ui/__test__/ui.spec.ts +++ b/packages/elements-react/src/util/ui/__test__/ui.spec.ts @@ -3,9 +3,9 @@ import allMethodsInitialForm from "../../../../../elements-react-stories/src/elements-react/.stub-responses/login/1fa/all-methods/initial-form.json" -import { renderHook } from "@tests/jest/test-utils" import { useNodesGroups } from ".." import { UiNode } from "@ory/client-fetch" +import { renderHook } from "@testing-library/react" describe("utils/ui", () => { test("useNodesGroups", () => { @@ -14,11 +14,11 @@ describe("utils/ui", () => { useNodesGroups(allMethodsInitialForm.ui.nodes as UiNode[]), ) - expect(result.current.oidc).toHaveLength(2) - expect(result.current.default).toHaveLength(2) - expect(result.current.webauthn).toHaveLength(2) - expect(result.current.passkey).toHaveLength(3) - expect(result.current.password).toHaveLength(2) - expect(result.current.code).toHaveLength(1) + expect(result.current.groups.oidc).toHaveLength(2) + expect(result.current.groups.default).toHaveLength(2) + expect(result.current.groups.webauthn).toHaveLength(2) + expect(result.current.groups.passkey).toHaveLength(3) + expect(result.current.groups.password).toHaveLength(2) + expect(result.current.groups.code).toHaveLength(1) }) }) diff --git a/packages/elements-react/src/util/ui/index.ts b/packages/elements-react/src/util/ui/index.ts index 682b3d654..40c86f514 100644 --- a/packages/elements-react/src/util/ui/index.ts +++ b/packages/elements-react/src/util/ui/index.ts @@ -10,6 +10,7 @@ import type { UiNodeInputAttributesTypeEnum, } from "@ory/client-fetch" import { useMemo } from "react" +import { useGroupSorter } from "../../context/component" export function capitalize(s: string) { if (!s) { @@ -95,7 +96,13 @@ function triggerToFunction( return triggerFn as () => void } +type Entries = { + [K in keyof T]: [K, T[K]] +}[keyof T][] + export function useNodesGroups(nodes: UiNode[]) { + const groupSorter = useGroupSorter() + const groups = useMemo(() => { const groups: Partial> = {} @@ -104,8 +111,20 @@ export function useNodesGroups(nodes: UiNode[]) { groupNodes.push(node) groups[node.group] = groupNodes } + return groups }, [nodes]) - return groups + const entries = useMemo( + () => + ( + Object.entries(groups) as Entries> + ).sort(([a], [b]) => groupSorter(a, b)), + [groups, groupSorter], + ) + + return { + groups, + entries, + } } diff --git a/packages/elements-react/tailwind.config.ts b/packages/elements-react/tailwind.config.ts index 5c0fccfe9..e30663b04 100644 --- a/packages/elements-react/tailwind.config.ts +++ b/packages/elements-react/tailwind.config.ts @@ -4,6 +4,7 @@ import type { Config } from "tailwindcss" import variables from "./variables-processed.json" +import plugin from "tailwindcss/plugin" const config: Config = { content: ["./src/**/*.{js,ts,jsx,tsx,mdx}"], @@ -48,7 +49,11 @@ const config: Config = { ...variables.colors.light, }, }, - plugins: [], + plugins: [ + plugin(({ addVariant }) => { + addVariant("loading", "&[data-loading=true]") + }), + ], } export default config diff --git a/packages/elements-react/tsconfig.json b/packages/elements-react/tsconfig.json index 106512be5..fe7c75fd0 100644 --- a/packages/elements-react/tsconfig.json +++ b/packages/elements-react/tsconfig.json @@ -17,19 +17,19 @@ "declarationDir": "dist/types", "jsx": "react-jsx", "lib": ["ES6", "DOM", "WebWorker"], - "rootDir": "src", + "rootDir": ".", "paths": { - "@ory/elements-react": ["./src/index.ts"], - "@tests/*": ["./src/tests/*"] + "@ory/elements-react": ["./src/index.ts"] } }, - "exclude": ["node_modules"], + "exclude": ["node_modules", "dist"], "include": [ "src/**/*.ts", "src/**/*.tsx", "src/global.d.ts", "src/tests/**/*.ts", "src/tests/**/*.tsx", - "tsup.config.ts" + "tsup.config.ts", + "jest.config.ts" ] }