Skip to content

Commit

Permalink
feat: show registration with code in storybook & cleanup component (#142
Browse files Browse the repository at this point in the history
)

* feat: show registration with code in storybook

* chore: cleanup auth code section logic and tests
  • Loading branch information
Benehiko authored Sep 15, 2023
1 parent 3eb3abe commit 77d74fa
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 3 deletions.
74 changes: 74 additions & 0 deletions src/react-components/ory/sections/auth-code-section.spec.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -104,3 +104,77 @@ test("shouldn't render anything with no code group", async ({ mount }) => {

await expect(container.locator("input[name=identifier]")).not.toBeVisible()
})

test("should render traits on default group", async ({ mount }) => {
const container = await mount(
<AuthCodeSection
nodes={[
{
group: "default",
attributes: {
name: "traits.email",
node_type: "input",
type: "text",
required: true,
disabled: false,
},
messages: [],
type: "input",
meta: {
label: {
id: 1070002,
text: "E-Mail",
type: "info",
context: {
title: "E-Mail",
},
},
},
},
{
group: "default",
attributes: {
name: "traits.name",
node_type: "input",
type: "text",
required: true,
disabled: false,
},
messages: [],
type: "input",
meta: {
label: {
id: 1070001,
text: "Name",
type: "info",
},
},
},
{
group: "code",
attributes: {
name: "method",
node_type: "input",
type: "submit",
required: true,
disabled: false,
value: "code",
},
messages: [],
type: "input",
meta: {
label: {
id: 1040006,
text: "Sign up with code",
type: "info",
},
},
},
]}
/>,
)

await expect(container.locator("input[name='traits.email']")).toBeVisible()
await expect(container.locator("input[name='traits.name']")).toBeVisible()
await expect(container.locator("button[name=method]")).toBeVisible()
})
7 changes: 4 additions & 3 deletions src/react-components/ory/sections/auth-code-section.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ export const AuthCodeSection = ({
filter={{
nodes: nodes,
groups: "code",
excludeAttributes: ["submit", "hidden"],
withoutDefaultAttributes: true,
excludeAttributes: ["hidden", "button", "submit"], // the form will take care of hidden fields
}}
/>
</div>
Expand All @@ -28,8 +29,8 @@ export const AuthCodeSection = ({
filter={{
nodes: nodes,
groups: "code",
withoutDefaultGroup: true,
attributes: ["submit", "hidden"],
withoutDefaultAttributes: true,
attributes: ["button", "submit"],
}}
/>
</div>
Expand Down
8 changes: 8 additions & 0 deletions src/stories/Ory/Auth.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,15 @@ import loginFlowRefresh from "./login-flow-refresh.json"
import loginFlow from "./login-flow.json"
import loginFlowCodeOne from "./login-flow-code-1.json"
import loginFlowCodeTwo from "./login-flow-code-2.json"

import loginFlowHydra from "./login-flow-hydra.json"

import loginFlowError from "./login-flow-error.json"
import loginFlowUiError from "./login-flow-ui-error.json"

import registrationFlowWebAuthn from "./register-flow-webauthn.json"
import registrationFlow from "./register-flow.json"
import registrationFlowCode from "./register-flow-code.json"

import recoveryFlow from "./recovery-flow.json"

Expand Down Expand Up @@ -206,6 +208,12 @@ RecoveryAuthCardWithoutAdditionalProps.args = {
flowType: "recovery",
}

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

export const VerificationAuthCard = Template.bind({})

VerificationAuthCard.args = {
Expand Down
178 changes: 178 additions & 0 deletions src/stories/Ory/register-flow-code.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
{
"id": "4028e642-a1a2-4ab7-b8b8-0b8683216f16",
"type": "browser",
"expires_at": "2023-09-15T06:51:15.085031Z",
"issued_at": "2023-09-15T06:21:15.085031Z",
"request_url": "https://example.com/self-service/registration/browser?return_to=",
"ui": {
"action": "https://example.com/self-service/registration?flow=4028e642-a1a2-4ab7-b8b8-0b8683216f16",
"method": "POST",
"nodes": [
{
"type": "input",
"group": "default",
"attributes": {
"name": "traits.email",
"type": "email",
"required": true,
"autocomplete": "email",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1070002,
"text": "E-Mail",
"type": "info",
"context": {
"title": "E-Mail"
}
}
}
},
{
"type": "input",
"group": "default",
"attributes": {
"name": "csrf_token",
"type": "hidden",
"value": "AYWGaOmwWvetqDidhkfq2nJxD9IFITJ4Czi6MPbRLO5LCNKhJpvX8TF5XsF2L7Sk0YNhAbPYFCiwPbdL8P3lxw==",
"required": true,
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {}
},
{
"type": "input",
"group": "webauthn",
"attributes": {
"name": "webauthn_register_displayname",
"type": "text",
"value": "",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1050013,
"text": "Name of the security key",
"type": "info"
}
}
},
{
"type": "input",
"group": "webauthn",
"attributes": {
"name": "webauthn_register",
"type": "hidden",
"value": "",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {}
},
{
"type": "input",
"group": "webauthn",
"attributes": {
"name": "webauthn_register_trigger",
"type": "button",
"value": "",
"disabled": false,
"onclick": "window.__oryWebAuthnRegistration({\"publicKey\":{\"rp\":{\"name\":\"Test\",\"id\":\"example.com\"},\"user\":{\"name\":\"Test\",\"displayName\":\"Test\",\"id\":\"rhD-u3guQBaDPkwrIbBISQ\"},\"challenge\":\"PwDL5hQ-H9fsxdurVLe5gisJ8-\",\"pubKeyCredParams\":[{\"type\":\"public-key\",\"alg\":-7},{\"type\":\"public-key\",\"alg\":-35},{\"type\":\"public-key\",\"alg\":-36},{\"type\":\"public-key\",\"alg\":-257},{\"type\":\"public-key\",\"alg\":-258},{\"type\":\"public-key\",\"alg\":-259},{\"type\":\"public-key\",\"alg\":-37},{\"type\":\"public-key\",\"alg\":-38},{\"type\":\"public-key\",\"alg\":-39},{\"type\":\"public-key\",\"alg\":-8}],\"timeout\":300000,\"authenticatorSelection\":{\"requireResidentKey\":false,\"userVerification\":\"discouraged\"}}})",
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1040004,
"text": "Sign up with security key",
"type": "info"
}
}
},
{
"type": "script",
"group": "webauthn",
"attributes": {
"src": "https://example.com/.well-known/ory/webauthn.js",
"async": true,
"referrerpolicy": "no-referrer",
"crossorigin": "anonymous",
"integrity": "sha512-RI23aG5lwYTo7zknGdc++eHUMimUWhkyFzrGid6HkVSdUSjdESPtM3KufXGq/lo4Ut0jI9mDiZeT8tHoSvaHvg==",
"type": "text/javascript",
"id": "webauthn_script",
"nonce": "94a13785-1ae3-4560-8a87-09d24f7b36bb",
"node_type": "script"
},
"messages": [],
"meta": {}
},
{
"type": "input",
"group": "code",
"attributes": {
"name": "method",
"type": "submit",
"value": "code",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1040006,
"text": "Sign up with code",
"type": "info"
}
}
},
{
"type": "input",
"group": "password",
"attributes": {
"name": "password",
"type": "password",
"required": true,
"autocomplete": "new-password",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1070001,
"text": "Password",
"type": "info"
}
}
},
{
"type": "input",
"group": "password",
"attributes": {
"name": "method",
"type": "submit",
"value": "password",
"disabled": false,
"node_type": "input"
},
"messages": [],
"meta": {
"label": {
"id": 1040001,
"text": "Sign up",
"type": "info"
}
}
}
]
},
"state": "choose_method"
}

0 comments on commit 77d74fa

Please sign in to comment.