From 116eaf89481feafcdb0e242d0ad90e8b6b6f5830 Mon Sep 17 00:00:00 2001 From: aeneasr <3372410+aeneasr@users.noreply.github.com> Date: Mon, 20 May 2024 11:08:41 +0200 Subject: [PATCH 1/5] chore: synchronize workspaces --- src/react-components/ory/helpers/utils.ts | 2 ++ .../ory/sections/login-section.tsx | 10 +++++----- .../ory/sections/passwordless-section.tsx | 19 ++++++++++++++++++- src/react-components/ory/user-auth-card.tsx | 2 +- 4 files changed, 26 insertions(+), 7 deletions(-) diff --git a/src/react-components/ory/helpers/utils.ts b/src/react-components/ory/helpers/utils.ts index 65a91e6d..66b7a672 100644 --- a/src/react-components/ory/helpers/utils.ts +++ b/src/react-components/ory/helpers/utils.ts @@ -8,6 +8,8 @@ export const hasGroup = (group: string) => (nodes: UiNode[]) => export const hasOidc = hasGroup("oidc") export const hasPassword = hasGroup("password") +export const hasIdentityDiscovery = hasGroup("identity_discovery") +export const hasDefault = hasGroup("default") export const hasProfile = hasGroup("profile") export const hasWebauthn = hasGroup("webauthn") export const hasPasskey = hasGroup("passkey") diff --git a/src/react-components/ory/sections/login-section.tsx b/src/react-components/ory/sections/login-section.tsx index 820c679c..edda6b25 100644 --- a/src/react-components/ory/sections/login-section.tsx +++ b/src/react-components/ory/sections/login-section.tsx @@ -5,7 +5,7 @@ import { FormattedMessage } from "react-intl" import { gridStyle } from "../../../theme" import { ButtonLink, CustomHref } from "../../button-link" import { FilterFlowNodes } from "../helpers/filter-flow-nodes" -import { hasPassword } from "../helpers/utils" +import {hasDefault, hasIdentityDiscovery, hasPassword} from "../helpers/utils" export interface LoginSectionProps { nodes: UiNode[] @@ -16,17 +16,17 @@ export const LoginSection = ({ nodes, forgotPasswordURL, }: LoginSectionProps): JSX.Element | null => { - return hasPassword(nodes) ? ( + return hasPassword(nodes) || hasIdentityDiscovery(nodes)|| hasDefault(nodes) ? (
- {forgotPasswordURL && ( + {hasPassword(nodes) && forgotPasswordURL && ( diff --git a/src/react-components/ory/sections/passwordless-section.tsx b/src/react-components/ory/sections/passwordless-section.tsx index a9ed1343..e38396f6 100644 --- a/src/react-components/ory/sections/passwordless-section.tsx +++ b/src/react-components/ory/sections/passwordless-section.tsx @@ -3,7 +3,7 @@ import { JSX } from "react" import { gridStyle } from "../../../theme" import { FilterFlowNodes } from "../helpers/filter-flow-nodes" import { SelfServiceFlow } from "../helpers/types" -import { hasPasskey, hasWebauthn } from "../helpers/utils" +import {hasDefault, hasPasskey, hasWebauthn} from "../helpers/utils" export const PasswordlessSection = ( flow: SelfServiceFlow, @@ -76,6 +76,23 @@ export const PasskeyLoginSection = ( ) : null } +export const DefaultLoginSection = ( + flow: SelfServiceFlow, +): JSX.Element | null => { + return hasDefault(flow.ui.nodes) ? ( +
+ +
+ ) : null +} + export const PasswordlessLoginSection = ( flow: SelfServiceFlow, ): JSX.Element | null => { diff --git a/src/react-components/ory/user-auth-card.tsx b/src/react-components/ory/user-auth-card.tsx index fed3aaf1..0dac7fb1 100644 --- a/src/react-components/ory/user-auth-card.tsx +++ b/src/react-components/ory/user-auth-card.tsx @@ -559,7 +559,7 @@ export const UserAuthCard = ({ )} - {$profile && ( + {canShowProfile() && ( <> From 09c5e439a03766e39932a205085bccca4acef949 Mon Sep 17 00:00:00 2001 From: aeneasr <3372410+aeneasr@users.noreply.github.com> Date: Fri, 24 May 2024 08:58:13 +0200 Subject: [PATCH 2/5] chore: synchronize workspaces --- src/locales/en.json | 4 +- src/react-components/ory/helpers/utils.ts | 1 + .../ory/sections/auth-code-section.tsx | 7 +- .../ory/sections/link-section.tsx | 32 ++-- .../ory/sections/logged-info.tsx | 2 +- .../ory/sections/login-section.tsx | 85 +++++++--- .../lookup-secret-settings-section.tsx | 2 +- .../ory/sections/oidc-section.tsx | 5 +- .../ory/sections/passkey-settings-section.tsx | 3 +- .../sections/password-settings-section.tsx | 2 +- .../ory/sections/passwordless-section.tsx | 147 +++++++++++------- .../ory/sections/profile-section.tsx | 30 +++- .../ory/sections/registration-section.tsx | 4 +- .../ory/sections/totp-settings-section.tsx | 2 +- .../sections/webauthn-settings-section.tsx | 2 +- src/react-components/ory/user-auth-card.tsx | 69 ++++---- src/ui/index.test.ts | 2 +- src/ui/index.ts | 28 +++- 18 files changed, 275 insertions(+), 152 deletions(-) diff --git a/src/locales/en.json b/src/locales/en.json index bd995ecb..abc58575 100644 --- a/src/locales/en.json +++ b/src/locales/en.json @@ -20,7 +20,7 @@ "identities.messages.1010005": "Verify", "identities.messages.1010006": "Authentication code", "identities.messages.1010007": "Backup recovery code", - "identities.messages.1010008": "Use security key", + "identities.messages.1010008": "Sign in with hardware key", "identities.messages.1010009": "Use Authenticator", "identities.messages.1010010": "Use backup recovery code", "identities.messages.1010011": "Continue with security key", @@ -131,7 +131,7 @@ "identities.messages.4070006": "The verification code is invalid or has already been used. Please try again.", "identities.messages.5000001": "{reason}", "login.forgot-password": "Forgot password?", - "login.logged-in-as-label": "You're logged in as:", + "login.logged-in-as-label": "You are using:", "login.logout-button": "Logout", "login.logout-label": "Something's not working?", "login.registration-button": "Sign up", diff --git a/src/react-components/ory/helpers/utils.ts b/src/react-components/ory/helpers/utils.ts index 66b7a672..02e278ce 100644 --- a/src/react-components/ory/helpers/utils.ts +++ b/src/react-components/ory/helpers/utils.ts @@ -13,6 +13,7 @@ export const hasDefault = hasGroup("default") export const hasProfile = hasGroup("profile") export const hasWebauthn = hasGroup("webauthn") export const hasPasskey = hasGroup("passkey") +export const hasTwoStep = hasGroup("two_step") export const hasLookupSecret = hasGroup("lookup_secret") export const hasTotp = hasGroup("totp") export const hasCode = hasGroup("code") diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx index d7f62625..e072c4c7 100644 --- a/src/react-components/ory/sections/auth-code-section.tsx +++ b/src/react-components/ory/sections/auth-code-section.tsx @@ -22,7 +22,7 @@ export const AuthCodeSection = ({
diff --git a/src/react-components/ory/sections/link-section.tsx b/src/react-components/ory/sections/link-section.tsx index 635b2724..9bae8dd2 100644 --- a/src/react-components/ory/sections/link-section.tsx +++ b/src/react-components/ory/sections/link-section.tsx @@ -15,22 +15,32 @@ export interface LinkSectionProps { * - https://www.ory.sh/docs/kratos/self-service/flows/verify-email-account-activation */ export const LinkSection = ({ nodes }: LinkSectionProps): JSX.Element => ( -
-
+ <> + +
+
+ +
- -
+ ) diff --git a/src/react-components/ory/sections/logged-info.tsx b/src/react-components/ory/sections/logged-info.tsx index bac55532..d3306fb7 100644 --- a/src/react-components/ory/sections/logged-info.tsx +++ b/src/react-components/ory/sections/logged-info.tsx @@ -24,7 +24,7 @@ export const LoggedInInfo = ({ flow }: IdentifierInfoProps) => {
{identifier.value}
diff --git a/src/react-components/ory/sections/login-section.tsx b/src/react-components/ory/sections/login-section.tsx index edda6b25..4562456a 100644 --- a/src/react-components/ory/sections/login-section.tsx +++ b/src/react-components/ory/sections/login-section.tsx @@ -5,46 +5,81 @@ import { FormattedMessage } from "react-intl" import { gridStyle } from "../../../theme" import { ButtonLink, CustomHref } from "../../button-link" import { FilterFlowNodes } from "../helpers/filter-flow-nodes" -import {hasDefault, hasIdentityDiscovery, hasPassword} from "../helpers/utils" +import { hasPassword, hasTwoStep } from "../helpers/utils" +import { SelfServiceFlow } from "../helpers/types" export interface LoginSectionProps { nodes: UiNode[] forgotPasswordURL?: CustomHref | string } +export const TwoStepLoginSection = ( + flow: SelfServiceFlow, +): JSX.Element | null => { + const nodes = flow.ui.nodes + return hasTwoStep(nodes) ? ( +
+ + +
+ ) : null +} + export const LoginSection = ({ nodes, forgotPasswordURL, }: LoginSectionProps): JSX.Element | null => { - return hasPassword(nodes) || hasIdentityDiscovery(nodes)|| hasDefault(nodes) ? ( -
-
+ return hasPassword(nodes) ? ( + <> + +
+
+ + {forgotPasswordURL && ( + + + + )} +
- {hasPassword(nodes) && forgotPasswordURL && ( - - - - )}
- -
+ ) : null } diff --git a/src/react-components/ory/sections/lookup-secret-settings-section.tsx b/src/react-components/ory/sections/lookup-secret-settings-section.tsx index 123f926f..72fb9be2 100644 --- a/src/react-components/ory/sections/lookup-secret-settings-section.tsx +++ b/src/react-components/ory/sections/lookup-secret-settings-section.tsx @@ -21,7 +21,7 @@ export const LookupSecretSettingsSection = ({ return hasLookupSecret(flow.ui.nodes) ? (
{ nodes: flow.ui.nodes, groups: "oidc", withoutDefaultGroup: true, - excludeAttributes: "submit", + excludeAttributeTypes: "submit", }).length > 0 return hasOidc(flow.ui.nodes) ? ( @@ -24,7 +24,7 @@ export const OIDCSection = (flow: SelfServiceFlow): JSX.Element | null => { nodes: flow.ui.nodes, groups: "oidc", withoutDefaultGroup: true, - excludeAttributes: "submit", + excludeAttributeTypes: ["submit"], }} />
@@ -35,6 +35,7 @@ export const OIDCSection = (flow: SelfServiceFlow): JSX.Element | null => { nodes: flow.ui.nodes, groups: "oidc", attributes: "submit", + withoutDefaultGroup: true, }} />
diff --git a/src/react-components/ory/sections/passkey-settings-section.tsx b/src/react-components/ory/sections/passkey-settings-section.tsx index edea2749..52b48ddd 100644 --- a/src/react-components/ory/sections/passkey-settings-section.tsx +++ b/src/react-components/ory/sections/passkey-settings-section.tsx @@ -21,9 +21,8 @@ export const PasskeySettingsSection = ({ return hasPasskey(flow.ui.nodes) ? (
- { return hasWebauthn(flow.ui.nodes) ? ( -
-
+ <> +
- ) : null -} - -export const PasskeySection = (flow: SelfServiceFlow): JSX.Element | null => { - return hasPasskey(flow.ui.nodes) ? ( -
-
+
+
+
- -
+ ) : null } @@ -63,33 +90,26 @@ export const PasskeyLoginSection = ( flow: SelfServiceFlow, ): JSX.Element | null => { return hasPasskey(flow.ui.nodes) ? ( -
+ <>
- ) : null -} - -export const DefaultLoginSection = ( - flow: SelfServiceFlow, -): JSX.Element | null => { - return hasDefault(flow.ui.nodes) ? ( -
- -
+
+ +
+ ) : null } @@ -98,27 +118,36 @@ export const PasswordlessLoginSection = ( ): JSX.Element | null => { if (hasWebauthn(flow.ui.nodes)) { return ( -
-
+ <> +
+ ) } diff --git a/src/react-components/ory/sections/profile-section.tsx b/src/react-components/ory/sections/profile-section.tsx index b053664a..62ef7322 100644 --- a/src/react-components/ory/sections/profile-section.tsx +++ b/src/react-components/ory/sections/profile-section.tsx @@ -17,7 +17,7 @@ export const ProfileSettingsSection = ({ return (
) : null } + +export const ProfileLoginSection = ( + flow: SelfServiceFlow, +): JSX.Element | null => { + return hasProfile(flow.ui.nodes) ? ( +
+ + +
+ ) : null +} diff --git a/src/react-components/ory/sections/registration-section.tsx b/src/react-components/ory/sections/registration-section.tsx index 19b9bd3c..0d6ad7b3 100644 --- a/src/react-components/ory/sections/registration-section.tsx +++ b/src/react-components/ory/sections/registration-section.tsx @@ -19,7 +19,7 @@ export const RegistrationSection = ({ filter={{ nodes: nodes, groups: ["password"], - excludeAttributes: "submit,hidden", + excludeAttributeTypes: "submit,hidden", }} />
@@ -27,7 +27,7 @@ export const RegistrationSection = ({ filter={{ nodes: nodes, groups: ["password"], - excludeAttributes: "hidden", + excludeAttributeTypes: "hidden", attributes: "submit", }} /> diff --git a/src/react-components/ory/sections/totp-settings-section.tsx b/src/react-components/ory/sections/totp-settings-section.tsx index f483f763..ba4a77f2 100644 --- a/src/react-components/ory/sections/totp-settings-section.tsx +++ b/src/react-components/ory/sections/totp-settings-section.tsx @@ -21,7 +21,7 @@ export const TOTPSettingsSection = ({ return hasTotp(flow.ui.nodes) ? (
!!$profile && flowType === "registration" + const canShowProfile = () => !!$profile && hasProfile(flow.ui.nodes) // the current flow is a two factor flow if the user is logged in and has any of the second factor methods enabled. const isTwoFactor = () => @@ -307,7 +311,7 @@ export const UserAuthCard = ({ nodes: flow.ui.nodes, groups: "totp", withoutDefaultGroup: true, - excludeAttributes: "submit", + excludeAttributeTypes: "submit", }} /> {subtitle && {subtitle}} + + {$oidc && ( <> - {$oidc} + + + )} + + {$twoStep && ( + <> + + {$twoStep} + + + )} + + {canShowPasskey() && ( + <> + + {$passkey} + )} + {$code && ( <> - {$code} )} + {$flow && !isTwoFactor() && ( <> - {$flow} - {showLoggedAccount && } )} + {isTwoFactor() && ( <> {twoFactorFlows()} - {showLoggedAccount && } - - )} - - {canShowPasskey() && ( - <> - - - {$passkey} - )} {canShowPasswordless() && ( <> - - {$profile} )} + {showLoggedAccount && } + {message && MessageSection(message)}
diff --git a/src/ui/index.test.ts b/src/ui/index.test.ts index d6d396cd..ad7c448a 100644 --- a/src/ui/index.test.ts +++ b/src/ui/index.test.ts @@ -251,7 +251,7 @@ describe("generic helpers", () => { opts: { groups: "webauthn", withoutDefaultGroup: true, - excludeAttributes: "script", + excludeAttributeTypes: "script", }, expected: [ { diff --git a/src/ui/index.ts b/src/ui/index.ts index c86286df..19750ae3 100644 --- a/src/ui/index.ts +++ b/src/ui/index.ts @@ -125,7 +125,8 @@ export interface FilterNodesByGroups { withoutDefaultGroup?: boolean attributes?: string[] | string withoutDefaultAttributes?: boolean - excludeAttributes?: string[] | string + excludeAttributeTypes?: string[] | string + excludeAttributeValues?: string[] | string } /** @@ -146,14 +147,15 @@ export const filterNodesByGroups = ({ withoutDefaultGroup, attributes, withoutDefaultAttributes, - excludeAttributes, + excludeAttributeTypes, + excludeAttributeValues, }: FilterNodesByGroups) => { const search = (s: string[] | string | undefined) => typeof s === "string" ? s.split(",") : s return nodes.filter(({ group, attributes: attr }) => { // if we have not specified any group or attribute filters, return all nodes - if (!groups && !attributes && !excludeAttributes) return true + if (!groups && !attributes && !excludeAttributeTypes) return true const g = search(groups) ?? [] if (!withoutDefaultGroup) { @@ -174,16 +176,28 @@ export const filterNodesByGroups = ({ } // filter the attributes to exclude - const ea = search(excludeAttributes) ?? [] + const eat = search(excludeAttributeTypes) ?? [] + const eav = search(excludeAttributeValues) ?? [] const filterGroup = groups ? g.includes(group) : true const filterAttributes = attributes ? a.includes(getNodeInputType(attr)) : true - const filterExcludeAttributes = excludeAttributes - ? !ea.includes(getNodeInputType(attr)) + const filterExcludeAttributeTypes = excludeAttributeTypes + ? !eat.includes(getNodeInputType(attr)) + : true + const filterExcludeAttributeValue = excludeAttributeValues + ? !eav.includes(getNodeInputValue(attr)) : true - return filterGroup && filterAttributes && filterExcludeAttributes + return filterGroup && filterAttributes && filterExcludeAttributeTypes && filterExcludeAttributeValue }) } + +export const getNodeInputValue = (attr?: UiNodeAttributes) => { + if (!attr) return "" + if (isUiNodeInputAttributes(attr)) { + return String(attr.value) + } + return "" +} From 330df0aefca7fd967e7752e2d0f398fe72fed3a4 Mon Sep 17 00:00:00 2001 From: aeneasr <3372410+aeneasr@users.noreply.github.com> Date: Mon, 10 Jun 2024 10:51:00 +0200 Subject: [PATCH 3/5] chore: synchronize workspaces --- src/react-components/ory/helpers/utils.ts | 5 ++--- .../ory/sections/auth-code-section.tsx | 2 +- src/react-components/ory/sections/link-section.tsx | 2 +- src/react-components/ory/sections/login-section.tsx | 12 ++++++------ .../ory/sections/passwordless-section.tsx | 10 +++++----- src/react-components/ory/user-auth-card.tsx | 7 +++++-- 6 files changed, 20 insertions(+), 18 deletions(-) diff --git a/src/react-components/ory/helpers/utils.ts b/src/react-components/ory/helpers/utils.ts index 02e278ce..5aba42c8 100644 --- a/src/react-components/ory/helpers/utils.ts +++ b/src/react-components/ory/helpers/utils.ts @@ -8,12 +8,11 @@ export const hasGroup = (group: string) => (nodes: UiNode[]) => export const hasOidc = hasGroup("oidc") export const hasPassword = hasGroup("password") -export const hasIdentityDiscovery = hasGroup("identity_discovery") -export const hasDefault = hasGroup("default") +export const hasDefault = hasGroup("default") export const hasProfile = hasGroup("profile") export const hasWebauthn = hasGroup("webauthn") export const hasPasskey = hasGroup("passkey") -export const hasTwoStep = hasGroup("two_step") +export const hasIdentifierFirst = hasGroup("identifier_first") export const hasLookupSecret = hasGroup("lookup_secret") export const hasTotp = hasGroup("totp") export const hasCode = hasGroup("code") diff --git a/src/react-components/ory/sections/auth-code-section.tsx b/src/react-components/ory/sections/auth-code-section.tsx index e072c4c7..9a9c73ca 100644 --- a/src/react-components/ory/sections/auth-code-section.tsx +++ b/src/react-components/ory/sections/auth-code-section.tsx @@ -22,7 +22,7 @@ export const AuthCodeSection = ({