diff --git a/.changeset/brown-singers-fall.md b/.changeset/brown-singers-fall.md new file mode 100644 index 00000000000..aa039d45201 --- /dev/null +++ b/.changeset/brown-singers-fall.md @@ -0,0 +1,7 @@ +--- +'@clerk/localizations': patch +'@clerk/shared': patch +'@clerk/ui': patch +--- + +Layer architecture for configure steps per IdP and protocol on `` diff --git a/packages/localizations/src/en-US.ts b/packages/localizations/src/en-US.ts index b0b2d822312..0179215908d 100644 --- a/packages/localizations/src/en-US.ts +++ b/packages/localizations/src/en-US.ts @@ -340,207 +340,179 @@ export const enUS: LocalizationResource = { }, }, configureStep: { - attributeMapping: { - title: 'We expect your SAML responses to have the following specific attributes:', - columns: { - attribute: 'Attribute', - claimName: 'Claim Name', - claimValue: 'Claim Value', - }, + attributeMappingTable: { badges: { required: 'Required', optional: 'Optional', }, - rows: { - email: { - attribute: 'Email address', - claim: 'mail', - }, - firstName: { - attribute: 'First Name', - claim: 'firstName', - }, - lastName: { - attribute: 'Last Name', - claim: 'lastName', - }, - }, }, samlOkta: { - headerTitle: 'Configure Okta Workforce', - attributeMapping: { - columns: { - name: 'Name', - value: 'Value', - }, - rows: { - email: { name: 'mail', value: 'user.profile.mail' }, - firstName: { name: 'firstName', value: 'user.profile.firstName' }, - lastName: { name: 'lastName', value: 'user.profile.lastName' }, + mainHeaderTitle: 'Configure Okta Workforce', + createAppStep: { + headerSubtitle: 'Create a new enterprise application in your Okta Dashboard', + createAppInstructions: { + title: 'Create a new enterprise application in Okta', + step1: 'Sign in to Okta and go to Admin → Applications.', + step2: 'Click Create App Integration.', + step3: 'Select SAML 2.0.', + step4: 'Fill in the General Settings (App name is required).', + step5: 'Click Next to complete creating the application.', }, - }, - spFields: { - acsUrl: { - label: 'Single sign-on URL', + serviceProviderInstructions: { + title: 'Configure service provider', + paragraph1: + 'Once you have moved forward from the General Settings instructions, you will be presented with the Configure SAML page.', + paragraph2: + 'To configure your service provider (Clerk), you must add these two fields to your Okta application:', + serviceProviderFields: { + acsUrl: { + label: 'Single sign-on URL', + }, + spEntityId: { + label: 'Audience URI (SP Entity ID)', + }, + }, }, - spEntityId: { - label: 'Audience URI (SP Entity ID)', + completeSamlIntegrationInstructions: { + title: 'Complete SAML integration', + step1: 'Select This is an internal app that we have created from the options menu.', + step2: 'Complete the form with any comments and select "Finish".', }, }, - createApp: { - headerSubtitle: 'Create a new enterprise application in your Okta Dashboard', - title: 'Create a new enterprise application in Okta', - step1: 'Sign in to Okta and go to Admin → Applications.', - step2: 'Click Create App Integration.', - step3: 'Select SAML 2.0.', - step4: 'Fill in the General Settings (App name is required).', - step5: 'Click Next to complete creating the application.', - }, - serviceProvider: { - title: 'Configure service provider', - paragraph1: - 'Once you have moved forward from the General Settings instructions, you will be presented with the Configure SAML page.', - paragraph2: - 'To configure your service provider (Clerk), you must add these two fields to your Okta application:', - }, - completeSamlIntegration: { - title: 'Complete SAML integration', - step1: 'Select This is an internal app that we have created from the options menu.', - step2: 'Complete the form with any comments and select Finish.', - }, - configureAttributes: { - headerSubtitle: 'Map user attributes from Okta to Clerk', + attributeMappingStep: { + headerSubtitle: 'Map user attributes from Okta to your application', + paragraph: 'We expect your SAML responses to have the following specific attributes:', step1: 'Open the Sign On tab of your Okta application and locate the Attribute Statements section. If you don’t see it, click Show legacy configuration, then Edit.', step2: 'Select Add Expression for each row below, then enter the matching name and value:', - pairs: { - conjunction: ' and ', - email: { - name: 'mail', - expression: 'user.profile.mail', + attributeMappingTable: { + columns: { + name: 'Name', + expression: 'Expression', }, - firstName: { - name: 'firstName', - expression: 'user.profile.firstName', - }, - lastName: { - name: 'lastName', - expression: 'user.profile.lastName', + rows: { + email: { name: 'mail', expression: 'user.mail' }, + firstName: { name: 'firstName', expression: 'user.firstName' }, + lastName: { name: 'lastName', expression: 'user.lastName' }, }, }, }, - assignUsers: { - headerSubtitle: 'Assign users to the enterprise app', - title: 'Assign selected user or group in Okta', - paragraph: 'You need to assign users or groups to your enterprise app before they can use it to sign in.', - step1: 'In the Okta dashboard, select the Assignments tab.', - step2: - 'Select the Assign dropdown. You can either select Assign to people or Assign to groups.', - step3: 'In the search field, enter the user or group of users that you want to assign to the application.', - step4: 'Select the Assign button next to the user or group that you want to assign.', - step5: 'Select the Done button to complete the assignment.', + assignUsersStep: { + headerSubtitle: 'Assign users to the enterprise application', + assignUsersInstructions: { + title: 'Assign selected user or group in Okta', + paragraph: + 'You need to assign users or groups to your enterprise application before they can use it to sign in.', + step1: 'In the Okta dashboard, select the Assignments tab.', + step2: + 'Select the Assign dropdown. You can either select Assign to people or Assign to groups.', + step3: 'In the search field, enter the user or group of users that you want to assign to the application.', + step4: 'Select the Assign button next to the user or group that you want to assign.', + step5: 'Select the Done button to complete the assignment.', + }, }, - metadataUrl: { + identityProviderMetadataStep: { headerSubtitle: 'Configure identity provider metadata', - label: 'Metadata URL', - placeholder: 'Paste URL here...', - description: 'In your Okta SAML app, go to the Sign On tab and retrieve the metadata URL. Paste it below.', - }, - modes: { - ariaLabel: 'Configuration mode', - metadataUrl: 'Add via metadata', - manual: 'Configure manually', - }, - submitSamlConfig: { - title: 'Fill in your Okta SAML application details', - }, - manual: { - description: 'In your Okta SAML app, go to the Sign On tab and retrieve these values.', - signOnUrl: { - label: 'Sign on URL', - placeholder: 'Paste URL here...', + modes: { + title: 'Fill in your Okta SAML application details', + ariaLabel: 'Configuration ', + metadataUrl: 'Add via metadata', + manual: 'Configure manually', }, - issuer: { - label: 'Issuer', + metadataUrl: { + label: 'Metadata URL', placeholder: 'Paste URL here...', + description: 'In your Okta SAML app, go to the Sign On tab and retrieve the metadata URL. Paste it below.', }, - signingCertificate: { - label: 'Signing certificate', - uploadFile: 'Upload file', - replaceFile: 'Replace file', - removeFile: 'Remove file', - fileUploaded: 'File uploaded', + manual: { + description: 'In your Okta SAML app, go to the Sign On tab and retrieve these values.', + signOnUrl: { + label: 'Single Sign-On URL', + placeholder: 'Paste URL here...', + }, + issuer: { + label: 'Issuer', + placeholder: 'Paste URL here...', + }, + signingCertificate: { + label: 'X.509 certificate', + uploadFile: 'Upload file', + replaceFile: 'Replace file', + removeFile: 'Remove file', + fileUploaded: 'File uploaded', + }, }, }, }, samlCustom: { - headerTitle: 'Configure your identity provider (IdP)', - attributeMapping: { - columns: { - userProfile: 'Identity Provider User Profile', - attributeName: 'Attribute Name', + mainHeaderTitle: 'Configure your identity provider (IdP)', + createAppStep: { + headerSubtitle: 'Create a new enterprise application in your identity provider’s admin dashboard', + createAppInstructions: { + title: 'Create a SAML application on your identity provider', + paragraph: + 'In your identity provider’s admin dashboard, create a new SAML 2.0 application and use the following service provider details:', }, - rows: { - id: { userProfile: 'Unique identifier representing a user', attributeName: 'id' }, - email: { userProfile: 'User’s email address', attributeName: 'email' }, - firstName: { userProfile: 'User’s first name', attributeName: 'firstName' }, - lastName: { userProfile: 'User’s last name', attributeName: 'lastName' }, + serviceProviderFields: { + acsUrl: { + label: 'Assertion consumer service (ACS) URL', + }, + spEntityId: { + label: 'Service provider entity ID', + }, }, }, - spFields: { - acsUrl: { - label: 'Assertion consumer service (ACS) URL', - }, - spEntityId: { - label: 'Service provider entity ID', + attributeMappingStep: { + headerSubtitle: 'Map user attributes from your identity provider to your application.', + paragraph: 'We expect your SAML response to return the user’s email, first name and last name.', + attributeMappingTable: { + columns: { + userProfile: 'Identity Provider User Profile', + attributeName: 'Attribute Name', + }, + rows: { + email: { userProfile: 'Primary email', attributeName: 'email' }, + firstName: { userProfile: 'First name', attributeName: 'firstName' }, + lastName: { userProfile: 'Last name', attributeName: 'lastName' }, + }, }, }, - createApp: { - headerSubtitle: - 'Register Clerk as a service provider in your IdP, then add your identity provider configuration.', - title: 'Create a SAML application on your identity provider', - subtitle: - 'In your identity provider’s admin dashboard, create a new SAML 2.0 application and use the following service provider details:', - }, - configureAttributes: { - headerSubtitle: 'Map user attributes from your identity provider to Clerk.', - title: 'We expect your SAML responses to have the following specific attributes:', - }, - assignUsers: { - headerSubtitle: 'Assign users to the enterprise app', + assignUsersStep: { + headerSubtitle: 'Assign users to the enterprise application', title: 'Assign selected user or group', - paragraph: 'You need to assign users or groups to your enterprise app before they can use it to sign in.', + paragraph: + 'You need to assign users or groups to your enterprise application before they can use it to sign in.', }, - metadataUrl: { + identityProviderMetadataStep: { headerSubtitle: 'Configure identity provider metadata', - label: 'Metadata URL', - placeholder: 'Paste URL here...', - description: 'In your enterprise app, retrieve the metadata URL. Paste it below.', - }, - modes: { - ariaLabel: 'Configuration mode', - metadataUrl: 'Add via metadata', - manual: 'Configure manually', - }, - submitSamlConfig: { - title: 'Fill in your SAML application details', - }, - manual: { - description: 'In your SAML app, retrieve these values.', - signOnUrl: { - label: 'Sign on URL', - placeholder: 'Paste URL here...', + modes: { + title: 'Fill in your SAML application details', + ariaLabel: 'Configuration ', + metadataUrl: 'Add via metadata', + manual: 'Configure manually', }, - issuer: { - label: 'Issuer', + metadataUrl: { + label: 'Metadata URL', placeholder: 'Paste URL here...', + description: 'In your enterprise application, retrieve the metadata URL. Paste it below.', }, - signingCertificate: { - label: 'Signing certificate', - uploadFile: 'Upload file', - replaceFile: 'Replace file', - removeFile: 'Remove file', - fileUploaded: 'File uploaded', + manual: { + description: 'In your SAML application, retrieve these values.', + signOnUrl: { + label: 'Single Sign-On URL', + placeholder: 'Paste URL here...', + }, + issuer: { + label: 'Issuer', + placeholder: 'Paste URL here...', + }, + signingCertificate: { + label: 'X.509 certificate', + uploadFile: 'Upload file', + replaceFile: 'Replace file', + removeFile: 'Remove file', + fileUploaded: 'File uploaded', + }, }, }, }, diff --git a/packages/shared/src/types/localization.ts b/packages/shared/src/types/localization.ts index e6c2a17cf4c..3b3bca7ad40 100644 --- a/packages/shared/src/types/localization.ts +++ b/packages/shared/src/types/localization.ts @@ -1400,202 +1400,173 @@ export type __internal_LocalizationResource = { }; }; configureStep: { - attributeMapping: { - title: LocalizationValue; - paragraph: LocalizationValue; - columns: { - attribute: LocalizationValue; - claimName: LocalizationValue; - claimValue: LocalizationValue; - }; + attributeMappingTable: { badges: { required: LocalizationValue; optional: LocalizationValue; }; - rows: { - email: { - attribute: LocalizationValue; - claim: LocalizationValue; - }; - firstName: { - attribute: LocalizationValue; - claim: LocalizationValue; - }; - lastName: { - attribute: LocalizationValue; - claim: LocalizationValue; - }; - }; }; samlOkta: { - headerTitle: LocalizationValue; - attributeMapping: { - columns: { - name: LocalizationValue; - value: LocalizationValue; - }; - rows: { - email: { name: LocalizationValue; value: LocalizationValue }; - firstName: { name: LocalizationValue; value: LocalizationValue }; - lastName: { name: LocalizationValue; value: LocalizationValue }; + mainHeaderTitle: LocalizationValue; + createAppStep: { + headerSubtitle: LocalizationValue; + createAppInstructions: { + title: LocalizationValue; + step1: LocalizationValue; + step2: LocalizationValue; + step3: LocalizationValue; + step4: LocalizationValue; + step5: LocalizationValue; }; - }; - spFields: { - acsUrl: { - label: LocalizationValue; + serviceProviderInstructions: { + title: LocalizationValue; + paragraph1: LocalizationValue; + paragraph2: LocalizationValue; + serviceProviderFields: { + acsUrl: { + label: LocalizationValue; + }; + spEntityId: { + label: LocalizationValue; + }; + }; }; - spEntityId: { - label: LocalizationValue; + completeSamlIntegrationInstructions: { + title: LocalizationValue; + step1: LocalizationValue; + step2: LocalizationValue; }; }; - createApp: { - headerSubtitle: LocalizationValue; - title: LocalizationValue; - step1: LocalizationValue; - step2: LocalizationValue; - step3: LocalizationValue; - step4: LocalizationValue; - step5: LocalizationValue; - }; - serviceProvider: { - title: LocalizationValue; - paragraph1: LocalizationValue; - paragraph2: LocalizationValue; - }; - completeSamlIntegration: { - title: LocalizationValue; - step1: LocalizationValue; - step2: LocalizationValue; - }; - configureAttributes: { + attributeMappingStep: { headerSubtitle: LocalizationValue; + paragraph: LocalizationValue; step1: LocalizationValue; step2: LocalizationValue; - pairs: { - conjunction: LocalizationValue; - email: { + attributeMappingTable: { + columns: { name: LocalizationValue; expression: LocalizationValue; }; - firstName: { - name: LocalizationValue; - expression: LocalizationValue; - }; - lastName: { - name: LocalizationValue; - expression: LocalizationValue; + rows: { + email: { name: LocalizationValue; expression: LocalizationValue }; + firstName: { name: LocalizationValue; expression: LocalizationValue }; + lastName: { name: LocalizationValue; expression: LocalizationValue }; }; }; }; - assignUsers: { + assignUsersStep: { headerSubtitle: LocalizationValue; - title: LocalizationValue; - paragraph: LocalizationValue; - step1: LocalizationValue; - step2: LocalizationValue; - step3: LocalizationValue; - step4: LocalizationValue; - step5: LocalizationValue; + assignUsersInstructions: { + title: LocalizationValue; + paragraph: LocalizationValue; + step1: LocalizationValue; + step2: LocalizationValue; + step3: LocalizationValue; + step4: LocalizationValue; + step5: LocalizationValue; + }; }; - metadataUrl: { + identityProviderMetadataStep: { headerSubtitle: LocalizationValue; - label: LocalizationValue; - placeholder: LocalizationValue; - description: LocalizationValue; - }; - modes: { - ariaLabel: LocalizationValue; - metadataUrl: LocalizationValue; - manual: LocalizationValue; - }; - submitSamlConfig: { - title: LocalizationValue; - }; - manual: { - description: LocalizationValue; - signOnUrl: { - label: LocalizationValue; - placeholder: LocalizationValue; + modes: { + title: LocalizationValue; + ariaLabel: LocalizationValue; + metadataUrl: LocalizationValue; + manual: LocalizationValue; }; - issuer: { + metadataUrl: { label: LocalizationValue; placeholder: LocalizationValue; + description: LocalizationValue; }; - signingCertificate: { - label: LocalizationValue; - uploadFile: LocalizationValue; - replaceFile: LocalizationValue; - removeFile: LocalizationValue; - fileUploaded: LocalizationValue; + manual: { + description: LocalizationValue; + signOnUrl: { + label: LocalizationValue; + placeholder: LocalizationValue; + }; + issuer: { + label: LocalizationValue; + placeholder: LocalizationValue; + }; + signingCertificate: { + label: LocalizationValue; + uploadFile: LocalizationValue; + replaceFile: LocalizationValue; + removeFile: LocalizationValue; + fileUploaded: LocalizationValue; + }; }; }; }; samlCustom: { - headerTitle: LocalizationValue; - attributeMapping: { - columns: { - userProfile: LocalizationValue; - attributeName: LocalizationValue; - }; - rows: { - id: { userProfile: LocalizationValue; attributeName: LocalizationValue }; - email: { userProfile: LocalizationValue; attributeName: LocalizationValue }; - firstName: { userProfile: LocalizationValue; attributeName: LocalizationValue }; - lastName: { userProfile: LocalizationValue; attributeName: LocalizationValue }; - }; - }; - spFields: { - acsUrl: { - label: LocalizationValue; + mainHeaderTitle: LocalizationValue; + createAppStep: { + headerSubtitle: LocalizationValue; + createAppInstructions: { + title: LocalizationValue; + paragraph: LocalizationValue; }; - spEntityId: { - label: LocalizationValue; + serviceProviderFields: { + acsUrl: { + label: LocalizationValue; + }; + spEntityId: { + label: LocalizationValue; + }; }; }; - createApp: { + attributeMappingStep: { headerSubtitle: LocalizationValue; - title: LocalizationValue; - subtitle: LocalizationValue; - }; - configureAttributes: { - headerSubtitle: LocalizationValue; - title: LocalizationValue; + paragraph: LocalizationValue; + attributeMappingTable: { + title: LocalizationValue; + columns: { + userProfile: LocalizationValue; + attributeName: LocalizationValue; + }; + rows: { + email: { userProfile: LocalizationValue; attributeName: LocalizationValue }; + firstName: { userProfile: LocalizationValue; attributeName: LocalizationValue }; + lastName: { userProfile: LocalizationValue; attributeName: LocalizationValue }; + }; + }; }; - assignUsers: { + assignUsersStep: { headerSubtitle: LocalizationValue; title: LocalizationValue; paragraph: LocalizationValue; }; - metadataUrl: { + identityProviderMetadataStep: { headerSubtitle: LocalizationValue; - label: LocalizationValue; - placeholder: LocalizationValue; - description: LocalizationValue; - }; - modes: { - ariaLabel: LocalizationValue; - metadataUrl: LocalizationValue; - manual: LocalizationValue; - }; - submitSamlConfig: { - title: LocalizationValue; - }; - manual: { - description: LocalizationValue; - signOnUrl: { - label: LocalizationValue; - placeholder: LocalizationValue; + modes: { + title: LocalizationValue; + ariaLabel: LocalizationValue; + metadataUrl: LocalizationValue; + manual: LocalizationValue; }; - issuer: { + metadataUrl: { label: LocalizationValue; placeholder: LocalizationValue; + description: LocalizationValue; }; - signingCertificate: { - label: LocalizationValue; - uploadFile: LocalizationValue; - replaceFile: LocalizationValue; - removeFile: LocalizationValue; - fileUploaded: LocalizationValue; + manual: { + description: LocalizationValue; + signOnUrl: { + label: LocalizationValue; + placeholder: LocalizationValue; + }; + issuer: { + label: LocalizationValue; + placeholder: LocalizationValue; + }; + signingCertificate: { + label: LocalizationValue; + uploadFile: LocalizationValue; + replaceFile: LocalizationValue; + removeFile: LocalizationValue; + fileUploaded: LocalizationValue; + }; }; }; }; diff --git a/packages/ui/src/components/ConfigureSSO/elements/Wizard/InnerStepCounter.tsx b/packages/ui/src/components/ConfigureSSO/elements/Wizard/InnerStepCounter.tsx new file mode 100644 index 00000000000..a49e00a4dcb --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/elements/Wizard/InnerStepCounter.tsx @@ -0,0 +1,12 @@ +import { Step } from '../Step'; +import { useWizard } from './index'; + +export const InnerStepCounter = (): JSX.Element => { + const { currentIndex, totalSteps } = useWizard(); + return ( + + ); +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx deleted file mode 100644 index f0d842a4b1e..00000000000 --- a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep.tsx +++ /dev/null @@ -1,968 +0,0 @@ -import { isClerkAPIResponseError } from '@clerk/shared/error'; -import { useReverification } from '@clerk/shared/react'; -import type { FieldId, UpdateMeEnterpriseConnectionParams } from '@clerk/shared/types'; -import React, { type JSX } from 'react'; - -import { - Badge, - Box, - Button, - Col, - descriptors, - Flex, - Flow, - Heading, - Icon, - type LocalizationKey, - localizationKeys, - Table, - Tbody, - Td, - Text, - Th, - Thead, - Tr, - useLocalizations, -} from '@/customizables'; -import { ClipboardInput } from '@/elements/ClipboardInput'; -import { useCardState } from '@/elements/contexts'; -import { Field } from '@/elements/FieldControl'; -import { Form } from '@/elements/Form'; -import { SegmentedControl } from '@/elements/SegmentedControl'; -import { Checkmark, Clipboard, Close, ArrowUpTray } from '@/icons'; -import type { FormControlState } from '@/ui/utils/useFormControl'; -import { useFormControl } from '@/ui/utils/useFormControl'; -import { handleError } from '@/utils/errorHandler'; - -import { useConfigureSSO } from '../ConfigureSSOContext'; -import { Step } from '../elements/Step'; -import { useWizard, Wizard } from '../elements/Wizard'; -import type { ProviderType } from '../types'; -import { useConfigureStepTranslations } from './configureStepTranslations'; - -export const ConfigureStep = (): JSX.Element => { - const { key } = useConfigureStepTranslations(); - - return ( - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - ); -}; - -const InnerStepCounter = (): JSX.Element => { - const { currentIndex, totalSteps } = useWizard(); - return ( - - ); -}; - -/** - * Per-provider attribute mapping table descriptor - */ -type AttributeMappingTableConfig = { - columns: { first: LocalizationKey; second: LocalizationKey }; - monoFirst?: boolean; - rows: ReadonlyArray<{ - id: string; - isRequired: boolean; - first: LocalizationKey; - second: LocalizationKey; - }>; -}; - -const SAML_OKTA_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = { - columns: { - first: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.columns.name'), - second: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.columns.value'), - }, - monoFirst: true, - rows: [ - { - id: 'email', - isRequired: true, - first: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.email.name'), - second: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.email.value'), - }, - { - id: 'firstName', - isRequired: false, - first: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.firstName.name'), - second: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.firstName.value'), - }, - { - id: 'lastName', - isRequired: false, - first: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.lastName.name'), - second: localizationKeys('configureSSO.configureStep.samlOkta.attributeMapping.rows.lastName.value'), - }, - ], -}; - -const SAML_CUSTOM_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = { - columns: { - first: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.columns.userProfile'), - second: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.columns.attributeName'), - }, - rows: [ - { - id: 'id', - isRequired: true, - first: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.id.userProfile'), - second: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.id.attributeName'), - }, - { - id: 'email', - isRequired: true, - first: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.email.userProfile'), - second: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.email.attributeName'), - }, - { - id: 'firstName', - isRequired: false, - first: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.firstName.userProfile'), - second: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.firstName.attributeName'), - }, - { - id: 'lastName', - isRequired: false, - first: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.lastName.userProfile'), - second: localizationKeys('configureSSO.configureStep.samlCustom.attributeMapping.rows.lastName.attributeName'), - }, - ], -}; - -const ATTRIBUTE_MAPPING_BY_PROVIDER: Partial> = { - saml_okta: SAML_OKTA_ATTRIBUTE_MAPPING, - saml_custom: SAML_CUSTOM_ATTRIBUTE_MAPPING, -}; - -export const CreateAppSubStep = (): JSX.Element => { - const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); - const { enterpriseConnection, provider } = useConfigureSSO(); - const { key } = useConfigureStepTranslations(); - - const acsUrl = enterpriseConnection?.samlConnection?.acsUrl ?? ''; - const spEntityId = enterpriseConnection?.samlConnection?.spEntityId ?? ''; - - const acsUrlField = useFormControl('acsUrl', acsUrl, { - type: 'text', - label: localizationKeys(key('spFields.acsUrl.label')), - isRequired: false, - }); - const spEntityIdField = useFormControl('spEntityId', spEntityId, { - type: 'text', - label: localizationKeys(key('spFields.spEntityId.label')), - isRequired: false, - }); - - return ( - <> - - ({ gap: theme.space.$5 })}> - ({ gap: theme.space.$1x5 })}> - - - {provider === 'saml_okta' && } - - {provider === 'saml_custom' && ( - - )} - - - {provider === 'saml_okta' && } - - - - - - - - - - - - - - {provider === 'saml_okta' && } - - - - - goPrev()} - isDisabled={isFirstStep} - /> - goNext()} - isDisabled={isLastStep} - /> - - - ); -}; - -// TODO - Move IdP specific content to separate modules -const OktaServiceProviderStepContent = (): JSX.Element => { - return ( - ({ gap: theme.space.$1x5 })}> - - - - - ); -}; - -const OktaCreateAppStepContent = (): JSX.Element => { - return ( - ({ - gap: theme.space.$1x5, - margin: 0, - paddingInlineStart: theme.space.$5, - listStyleType: 'disc', - })} - > - - - - - - - ); -}; - -const OktaCompleteSamlIntegrationStepContent = (): JSX.Element => { - return ( - ({ gap: theme.space.$1x5 })}> - - ({ - gap: theme.space.$1x5, - margin: 0, - paddingInlineStart: theme.space.$5, - listStyleType: 'disc', - })} - > - - - - - ); -}; - -export const ConfigureAttributesSubStep = (): JSX.Element => { - const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); - - const { provider } = useConfigureSSO(); - const mappingConfig = provider ? ATTRIBUTE_MAPPING_BY_PROVIDER[provider] : undefined; - - return ( - <> - - ({ gap: theme.space.$3 })}> - {provider === 'saml_custom' && ( - - )} - - {provider === 'saml_okta' && } - - {mappingConfig && } - - - - - goPrev()} - isDisabled={isFirstStep} - /> - goNext()} - isDisabled={isLastStep} - /> - - - ); -}; - -const OktaConfigureAttributesStepContent = (): JSX.Element => ( - ({ - gap: theme.space.$1x5, - margin: 0, - paddingInlineStart: theme.space.$5, - listStyleType: 'decimal', - })} - > - - {/* - * The actual name/expression pairs that step 2 refers to are rendered - * by the `AttributeMappingTable` immediately below this component — - * keeping them in a single tabular surface instead of an inline badge - * list matches the design (see Okta screenshot: "Create the following - * attribute mapping statements:" + table). - */} - - -); - -const AttributeMappingTable = ({ config }: { config: AttributeMappingTableConfig }): JSX.Element => ( - ({ - 'tr > th:first-of-type': { - paddingInlineStart: theme.space.$4, - }, - })} - > - - - - - - - - - {config.rows.map(row => ( - - - - - ))} - -
- ({ fontSize: theme.fontSizes.$xs })} - localizationKey={config.columns.first} - /> - - ({ fontSize: theme.fontSizes.$xs })} - localizationKey={config.columns.second} - /> -
- ({ gap: theme.space.$2 })} - > - - - - - -
-); - -export const AssignUsersSubStep = (): JSX.Element => { - const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); - const { provider } = useConfigureSSO(); - - if (provider === 'saml_custom') { - return ( - <> - - ({ gap: theme.space.$3 })}> - - - - - - - goPrev()} - isDisabled={isFirstStep} - /> - goNext()} - isDisabled={isLastStep} - /> - - - ); - } - - return ( - <> - - ({ gap: theme.space.$3 })}> - - - - ({ - gap: theme.space.$1x5, - margin: 0, - paddingInlineStart: theme.space.$5, - listStyleType: 'decimal', - })} - > - - - - - - - - - - - goPrev()} - isDisabled={isFirstStep} - /> - goNext()} - isDisabled={isLastStep} - /> - - - ); -}; - -export const SubmitSamlConfigSubStep = (): JSX.Element => { - const card = useCardState(); - const { t } = useLocalizations(); - const { goNext, goPrev, isFirstStep } = useWizard(); - const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO(); - const { key } = useConfigureStepTranslations(); - - const samlConnection = enterpriseConnection?.samlConnection; - const hasExistingConfig = Boolean( - samlConnection?.idpSsoUrl || - samlConnection?.idpEntityId || - samlConnection?.idpCertificate || - samlConnection?.idpMetadataUrl, - ); - const existingCertPresent = Boolean(samlConnection?.idpCertificate); - - const [mode, setMode] = React.useState<'metadataUrl' | 'manual'>(hasExistingConfig ? 'manual' : 'metadataUrl'); - const [certFile, setCertFile] = React.useState(null); - - const updateConnection = useReverification( - React.useCallback( - async (params: UpdateMeEnterpriseConnectionParams) => { - if (!enterpriseConnection) { - throw new Error('Enterprise connection required'); - } - - return updateEnterpriseConnection(enterpriseConnection.id, params); - }, - [enterpriseConnection, updateEnterpriseConnection], - ), - ); - - const metadataUrlField = useFormControl('idpMetadataUrl', samlConnection?.idpMetadataUrl ?? '', { - type: 'text', - label: localizationKeys(key('metadataUrl.label')), - placeholder: localizationKeys(key('metadataUrl.placeholder')), - isRequired: true, - }); - - const signOnUrlField = useFormControl('idpSsoUrl', samlConnection?.idpSsoUrl ?? '', { - type: 'text', - label: localizationKeys(key('manual.signOnUrl.label')), - placeholder: localizationKeys(key('manual.signOnUrl.placeholder')), - isRequired: true, - }); - - const issuerField = useFormControl('idpEntityId', samlConnection?.idpEntityId ?? '', { - type: 'text', - label: localizationKeys(key('manual.issuer.label')), - placeholder: localizationKeys(key('manual.issuer.placeholder')), - isRequired: true, - }); - - const certFileField = useFormControl('idpCertificate', '', { - type: 'text', - label: localizationKeys(key('manual.signingCertificate.label')), - isRequired: true, - }); - - const trimmedMetadataUrl = metadataUrlField.value.trim(); - const trimmedSignOnUrl = signOnUrlField.value.trim(); - const trimmedIssuer = issuerField.value.trim(); - - const hasCert = certFile !== null || existingCertPresent; - const canSubmit = - !card.isLoading && - ((mode === 'metadataUrl' && trimmedMetadataUrl.length > 0) || - (mode === 'manual' && trimmedSignOnUrl.length > 0 && trimmedIssuer.length > 0 && hasCert)); - - const handleContinue = async () => { - if (!enterpriseConnection || !canSubmit) { - return; - } - - card.setError(undefined); - card.setLoading(); - - try { - if (mode === 'metadataUrl') { - await updateConnection({ saml: { idpMetadataUrl: trimmedMetadataUrl } }); - } else { - const samlPayload: NonNullable = { - idpSsoUrl: trimmedSignOnUrl, - idpEntityId: trimmedIssuer, - }; - - if (certFile !== null) { - samlPayload.idpCertificate = await certFile.text(); - } - - await updateConnection({ saml: samlPayload }); - } - - void goNext(); - } catch (err) { - const fields = mode === 'metadataUrl' ? [metadataUrlField] : [signOnUrlField, issuerField, certFileField]; - - handleError(err as Error, fields, card.setError); - - if (isClerkAPIResponseError(err)) { - const unscopedSamlError = err.errors.find(e => e.code?.startsWith('saml_') && !e.meta?.paramName); - - if (unscopedSamlError) { - const primaryField = mode === 'metadataUrl' ? metadataUrlField : signOnUrlField; - primaryField.setError(unscopedSamlError); - card.setError(undefined); - } - } - } finally { - card.setIdle(); - } - }; - - return ( - <> - - - - { - card.setError(undefined); - setMode(value as 'metadataUrl' | 'manual'); - }} - fullWidth - > - - - - - {mode === 'metadataUrl' ? ( - - ) : ( - - )} - - - - - goPrev()} - isDisabled={isFirstStep || card.isLoading} - /> - - - - ); -}; - -type FormControl = FormControlState; - -type MetadataUrlPanelProps = { - field: FormControl; -}; - -type ManualEntryPanelProps = { - signOnUrlField: FormControl; - issuerField: FormControl; - certFileField: FormControl; - certFile: File | null; - setCertFile: React.Dispatch>; - existingCertPresent: boolean; -}; - -const MetadataUrlPanel = ({ field }: MetadataUrlPanelProps): JSX.Element => { - const { key } = useConfigureStepTranslations(); - - return ( - <> - - - - - - ); -}; - -const ManualEntryPanel = ({ - signOnUrlField, - issuerField, - certFileField, - certFile, - setCertFile, - existingCertPresent, -}: ManualEntryPanelProps): JSX.Element => { - const { t } = useLocalizations(); - const certInputRef = React.useRef(null); - const { key } = useConfigureStepTranslations(); - - return ( - <> - - - - - - - - - - - - - - - - - - { - setCertFile(e.target.files?.[0] ?? null); - certFileField.clearFeedback(); - }} - /> - - {certFile === null ? ( - - {existingCertPresent && ( - - )} - - - ) : ( - ({ paddingTop: theme.space.$1, paddingBottom: theme.space.$1 })} - > - - {certFile.name} - - - - - )} - - - - - - ); -}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/index.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/index.tsx new file mode 100644 index 00000000000..d8a518d4fd9 --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/index.tsx @@ -0,0 +1,44 @@ +import { type JSX } from 'react'; + +import { descriptors, Flow } from '@/customizables'; + +import { useConfigureSSO } from '../../ConfigureSSOContext'; +import { Step } from '../../elements/Step'; +import { Wizard } from '../../elements/Wizard'; +import type { ProviderType } from '../../types'; +import { SamlCustomConfigureSteps } from './saml/SamlCustomConfigureSteps'; +import { SamlOktaConfigureSteps } from './saml/SamlOktaConfigureSteps'; + +const STEPS_BY_PROVIDER: Record JSX.Element> = { + saml_custom: SamlCustomConfigureSteps, + saml_okta: SamlOktaConfigureSteps, +}; + +export const ConfigureStep = (): JSX.Element | null => { + const { provider } = useConfigureSSO(); + + // Type guard, at this point the provider should have been defined + if (!provider) { + return null; + } + + // Type guard to ensure steps are provided + // If a new provider is added to the select step, then build will fail ahead of runtime + const StepsByProvider = STEPS_BY_PROVIDER[provider]; + if (!StepsByProvider) { + throw new Error(`No steps found for provider: ${provider}`); + } + + return ( + + + + + + + + ); +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx new file mode 100644 index 00000000000..da367429243 --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx @@ -0,0 +1,383 @@ +import { type JSX } from 'react'; + +import { Col, descriptors, Heading, localizationKeys, Text } from '@/customizables'; +import { ClipboardInput } from '@/elements/ClipboardInput'; +import { useCardState } from '@/elements/contexts'; +import { Form } from '@/elements/Form'; +import { Checkmark, Clipboard } from '@/icons'; +import { useFormControl } from '@/ui/utils/useFormControl'; + +import { useConfigureSSO } from '../../../ConfigureSSOContext'; +import { Step } from '../../../elements/Step'; +import { useWizard, Wizard } from '../../../elements/Wizard'; +import { InnerStepCounter } from '../../../elements/Wizard/InnerStepCounter'; +import { AttributeMappingTable, type AttributeMappingTableConfig } from './shared/AttributeMappingTable'; +import { IdentityProviderMetadataForm } from './shared/IdentityProviderMetadataForm'; +import { useIdentityProviderMetadataForm } from './shared/useIdentityProviderMetadataForm'; + +export const SamlCustomConfigureSteps = (): JSX.Element => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const SamlCustomCreateAppStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + const { enterpriseConnection } = useConfigureSSO(); + + const acsUrl = enterpriseConnection?.samlConnection?.acsUrl ?? ''; + const spEntityId = enterpriseConnection?.samlConnection?.spEntityId ?? ''; + + const acsUrlField = useFormControl('acsUrl', acsUrl, { + type: 'text', + label: localizationKeys('configureSSO.configureStep.samlCustom.createAppStep.serviceProviderFields.acsUrl.label'), + isRequired: false, + }); + const spEntityIdField = useFormControl('spEntityId', spEntityId, { + type: 'text', + label: localizationKeys( + 'configureSSO.configureStep.samlCustom.createAppStep.serviceProviderFields.spEntityId.label', + ), + isRequired: false, + }); + + return ( + <> + + ({ gap: theme.space.$5 })}> + ({ gap: theme.space.$1x5 })}> + + + + + + + + + + + + + + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const CUSTOM_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = { + columns: { + first: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.userProfile', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.columns.attributeName', + ), + }, + rows: [ + { + id: 'email', + isRequired: true, + first: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.email.userProfile', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.email.attributeName', + ), + }, + { + id: 'firstName', + isRequired: false, + first: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.firstName.userProfile', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.firstName.attributeName', + ), + }, + { + id: 'lastName', + isRequired: false, + first: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.lastName.userProfile', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlCustom.attributeMappingStep.attributeMappingTable.rows.lastName.attributeName', + ), + }, + ], +}; + +const SamlCustomAttributeMappingStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + + return ( + <> + + ({ gap: theme.space.$3 })}> + + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const SamlCustomAssignUsersStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + + return ( + <> + + ({ gap: theme.space.$3 })}> + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const SamlCustomIdentityProviderMetadataStep = (): JSX.Element => { + const card = useCardState(); + const { goNext, goPrev, isFirstStep } = useWizard(); + const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO(); + + const controller = useIdentityProviderMetadataForm({ + metadataUrl: { + label: localizationKeys('configureSSO.configureStep.samlCustom.identityProviderMetadataStep.metadataUrl.label'), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.metadataUrl.placeholder', + ), + }, + manual: { + signOnUrl: { + label: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.manual.signOnUrl.label', + ), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.manual.signOnUrl.placeholder', + ), + }, + issuer: { + label: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.manual.issuer.label', + ), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.manual.issuer.placeholder', + ), + }, + signingCertificateLabel: localizationKeys( + 'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.manual.signingCertificate.label', + ), + }, + }); + + const canSubmit = !card.isLoading && controller.isValid; + + const handleContinue = async (): Promise => { + if (!enterpriseConnection || !canSubmit) { + return; + } + + card.setError(undefined); + card.setLoading(); + + try { + const saml = await controller.buildSamlPayload(); + await updateEnterpriseConnection(enterpriseConnection.id, { saml }); + void goNext(); + } catch (err) { + controller.applySubmitError(err, card); + } finally { + card.setIdle(); + } + }; + + return ( + <> + + + + + + + + + goPrev()} + isDisabled={isFirstStep || card.isLoading} + /> + + + + ); +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlOktaConfigureSteps.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlOktaConfigureSteps.tsx new file mode 100644 index 00000000000..265cb2a5c84 --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlOktaConfigureSteps.tsx @@ -0,0 +1,579 @@ +import { type JSX } from 'react'; + +import { Col, descriptors, Heading, localizationKeys, Text } from '@/customizables'; +import { ClipboardInput } from '@/elements/ClipboardInput'; +import { useCardState } from '@/elements/contexts'; +import { Form } from '@/elements/Form'; +import { Checkmark, Clipboard } from '@/icons'; +import { useFormControl } from '@/ui/utils/useFormControl'; + +import { useConfigureSSO } from '../../../ConfigureSSOContext'; +import { Step } from '../../../elements/Step'; +import { useWizard, Wizard } from '../../../elements/Wizard'; +import { InnerStepCounter } from '../../../elements/Wizard/InnerStepCounter'; +import { AttributeMappingTable, type AttributeMappingTableConfig } from './shared/AttributeMappingTable'; +import { IdentityProviderMetadataForm } from './shared/IdentityProviderMetadataForm'; +import { useIdentityProviderMetadataForm } from './shared/useIdentityProviderMetadataForm'; + +export const SamlOktaConfigureSteps = (): JSX.Element => { + return ( + <> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + ); +}; + +const SamlOktaCreateAppStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + const { enterpriseConnection } = useConfigureSSO(); + + const acsUrl = enterpriseConnection?.samlConnection?.acsUrl ?? ''; + const spEntityId = enterpriseConnection?.samlConnection?.spEntityId ?? ''; + + const acsUrlField = useFormControl('acsUrl', acsUrl, { + type: 'text', + label: localizationKeys( + 'configureSSO.configureStep.samlOkta.createAppStep.serviceProviderInstructions.serviceProviderFields.acsUrl.label', + ), + isRequired: false, + }); + const spEntityIdField = useFormControl('spEntityId', spEntityId, { + type: 'text', + label: localizationKeys( + 'configureSSO.configureStep.samlOkta.createAppStep.serviceProviderInstructions.serviceProviderFields.spEntityId.label', + ), + isRequired: false, + }); + + return ( + <> + + ({ gap: theme.space.$5 })}> + ({ gap: theme.space.$1x5 })}> + + + ({ + gap: theme.space.$1x5, + margin: 0, + paddingInlineStart: theme.space.$5, + listStyleType: 'disc', + })} + > + + + + + + + + + ({ gap: theme.space.$1x5 })}> + + + + + + + + + + + + + + + + + + ({ gap: theme.space.$1x5 })}> + + ({ + gap: theme.space.$1x5, + margin: 0, + paddingInlineStart: theme.space.$5, + listStyleType: 'disc', + })} + > + + + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const OKTA_ATTRIBUTE_MAPPING: AttributeMappingTableConfig = { + columns: { + first: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.columns.name', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.columns.expression', + ), + }, + monoFirst: true, + rows: [ + { + id: 'email', + isRequired: true, + first: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.email.name', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.email.expression', + ), + }, + { + id: 'firstName', + isRequired: false, + first: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.firstName.name', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.firstName.expression', + ), + }, + { + id: 'lastName', + isRequired: false, + first: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.lastName.name', + ), + second: localizationKeys( + 'configureSSO.configureStep.samlOkta.attributeMappingStep.attributeMappingTable.rows.lastName.expression', + ), + }, + ], +}; + +const SamlOktaAttributeMappingStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + + return ( + <> + + ({ gap: theme.space.$3 })}> + + + ({ + gap: theme.space.$1x5, + margin: 0, + paddingInlineStart: theme.space.$5, + listStyleType: 'decimal', + })} + > + + {/* + * The actual name/expression pairs that step 2 refers to are + * rendered by the `AttributeMappingTable` immediately below this + * list — keeping them in a single tabular surface instead of an + * inline badge list matches the design (see Okta screenshot: + * "Create the following attribute mapping statements:" + table). + */} + + + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const SamlOktaAssignUsersStep = (): JSX.Element => { + const { goNext, goPrev, isFirstStep, isLastStep } = useWizard(); + + return ( + <> + + ({ gap: theme.space.$3 })}> + + + + ({ + gap: theme.space.$1x5, + margin: 0, + paddingInlineStart: theme.space.$5, + listStyleType: 'decimal', + })} + > + + + + + + + + + + + goPrev()} + isDisabled={isFirstStep} + /> + goNext()} + isDisabled={isLastStep} + /> + + + ); +}; + +const SamlOktaIdentityProviderMetadataStep = (): JSX.Element => { + const card = useCardState(); + const { goNext, goPrev, isFirstStep } = useWizard(); + const { enterpriseConnection, updateEnterpriseConnection } = useConfigureSSO(); + + const controller = useIdentityProviderMetadataForm({ + metadataUrl: { + label: localizationKeys('configureSSO.configureStep.samlOkta.identityProviderMetadataStep.metadataUrl.label'), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.metadataUrl.placeholder', + ), + }, + manual: { + signOnUrl: { + label: localizationKeys( + 'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.manual.signOnUrl.label', + ), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.manual.signOnUrl.placeholder', + ), + }, + issuer: { + label: localizationKeys('configureSSO.configureStep.samlOkta.identityProviderMetadataStep.manual.issuer.label'), + placeholder: localizationKeys( + 'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.manual.issuer.placeholder', + ), + }, + signingCertificateLabel: localizationKeys( + 'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.manual.signingCertificate.label', + ), + }, + }); + + const canSubmit = !card.isLoading && controller.isValid; + + const handleContinue = async (): Promise => { + if (!enterpriseConnection || !canSubmit) { + return; + } + + card.setError(undefined); + card.setLoading(); + + try { + const saml = await controller.buildSamlPayload(); + await updateEnterpriseConnection(enterpriseConnection.id, { saml }); + void goNext(); + } catch (err) { + controller.applySubmitError(err, card); + } finally { + card.setIdle(); + } + }; + + return ( + <> + + + + + + + + + goPrev()} + isDisabled={isFirstStep || card.isLoading} + /> + + + + ); +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/AttributeMappingTable.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/AttributeMappingTable.tsx new file mode 100644 index 00000000000..162adde1772 --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/AttributeMappingTable.tsx @@ -0,0 +1,99 @@ +import { type JSX } from 'react'; + +import { + Badge, + descriptors, + Flex, + type LocalizationKey, + localizationKeys, + Table, + Tbody, + Td, + Text, + Th, + Thead, + Tr, +} from '@/customizables'; + +export type AttributeMappingTableConfig = { + columns: { first: LocalizationKey; second: LocalizationKey }; + rows: ReadonlyArray<{ + id: string; + isRequired: boolean; + first: LocalizationKey; + second: LocalizationKey; + }>; + /** + * When true, the first column renders in a monospace font and the badge + * sits inline with it + */ + monoFirst?: boolean; +}; + +export const AttributeMappingTable = ({ config }: { config: AttributeMappingTableConfig }): JSX.Element => ( + ({ + 'tr > th:first-of-type': { + paddingInlineStart: theme.space.$4, + }, + })} + > + + + + + + + + + {config.rows.map(row => ( + + + + + ))} + +
+ ({ fontSize: theme.fontSizes.$xs })} + localizationKey={config.columns.first} + /> + + ({ fontSize: theme.fontSizes.$xs })} + localizationKey={config.columns.second} + /> +
+ ({ gap: theme.space.$2 })} + > + + + + + +
+); diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/IdentityProviderMetadataForm.tsx b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/IdentityProviderMetadataForm.tsx new file mode 100644 index 00000000000..5b108d9b2ac --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/IdentityProviderMetadataForm.tsx @@ -0,0 +1,259 @@ +import type { FieldId } from '@clerk/shared/types'; +import React, { type JSX } from 'react'; + +import { + Badge, + Box, + Button, + Col, + descriptors, + Flex, + Icon, + type LocalizationKey, + Text, + useLocalizations, +} from '@/customizables'; +import { useCardState } from '@/elements/contexts'; +import { Field } from '@/elements/FieldControl'; +import { Form } from '@/elements/Form'; +import { SegmentedControl } from '@/elements/SegmentedControl'; +import { ArrowUpTray, Close } from '@/icons'; +import type { FormControlState } from '@/ui/utils/useFormControl'; + +import type { IdentityProviderMetadataFormController, IdpMetadataMode } from './useIdentityProviderMetadataForm'; + +type SigningCertificateLocalization = { + label: LocalizationKey; + uploadFile: LocalizationKey; + replaceFile: LocalizationKey; + removeFile: LocalizationKey; + fileUploaded: LocalizationKey; +}; + +type IdentityProviderMetadataFormProps = { + controller: IdentityProviderMetadataFormController; + modes: { + ariaLabel: LocalizationKey; + metadataUrlLabel: LocalizationKey; + manualLabel: LocalizationKey; + }; + /** + * Copy for the metadata URL panel + */ + metadataUrl: { + description: LocalizationKey; + }; + /** + * Copy for the manual metadata panel + */ + manual: { + description: LocalizationKey; + signingCertificate: SigningCertificateLocalization; + }; +}; + +export const IdentityProviderMetadataForm = ({ + controller, + modes, + metadataUrl, + manual, +}: IdentityProviderMetadataFormProps): JSX.Element => { + const card = useCardState(); + const { t } = useLocalizations(); + + return ( + <> + { + card.setError(undefined); + controller.setMode(value as IdpMetadataMode); + }} + fullWidth + > + + + + + {controller.mode === 'metadataUrl' ? ( + + ) : ( + + )} + + ); +}; + +type FormControl = FormControlState; + +type MetadataUrlPanelProps = { + field: FormControl; + description: LocalizationKey; +}; + +const MetadataUrlPanel = ({ field, description }: MetadataUrlPanelProps): JSX.Element => ( + <> + + + + + +); + +type ManualEntryPanelProps = { + description: LocalizationKey; + signingCertificate: SigningCertificateLocalization; + signOnUrlField: FormControl; + issuerField: FormControl; + certFileField: FormControl; + certFile: File | null; + setCertFile: React.Dispatch>; + existingCertPresent: boolean; +}; + +const ManualEntryPanel = ({ + description, + signingCertificate, + signOnUrlField, + issuerField, + certFileField, + certFile, + setCertFile, + existingCertPresent, +}: ManualEntryPanelProps): JSX.Element => { + const { t } = useLocalizations(); + const certInputRef = React.useRef(null); + + return ( + <> + + + + + + + + + + + + + + + + + + { + setCertFile(e.target.files?.[0] ?? null); + certFileField.clearFeedback(); + }} + /> + + {certFile === null ? ( + + {existingCertPresent && ( + + )} + + + ) : ( + ({ paddingTop: theme.space.$1, paddingBottom: theme.space.$1 })} + > + + {certFile.name} + + + + + )} + + + + + + ); +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/useIdentityProviderMetadataForm.ts b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/useIdentityProviderMetadataForm.ts new file mode 100644 index 00000000000..4bdb6effb4d --- /dev/null +++ b/packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/shared/useIdentityProviderMetadataForm.ts @@ -0,0 +1,149 @@ +import { isClerkAPIResponseError } from '@clerk/shared/error'; +import type { FieldId, UpdateMeEnterpriseConnectionParams } from '@clerk/shared/types'; +import React from 'react'; + +import { type LocalizationKey } from '@/customizables'; +import type { useCardState } from '@/elements/contexts'; +import type { FormControlState } from '@/ui/utils/useFormControl'; +import { useFormControl } from '@/ui/utils/useFormControl'; +import { handleError } from '@/utils/errorHandler'; + +import { useConfigureSSO } from '../../../../ConfigureSSOContext'; + +export type IdpMetadataMode = 'metadataUrl' | 'manual'; + +type FieldLocalization = { + label: LocalizationKey; + placeholder: LocalizationKey; +}; + +type UseIdentityProviderMetadataFormParams = { + metadataUrl: FieldLocalization; + manual: { + signOnUrl: FieldLocalization; + issuer: FieldLocalization; + /** Label for the signing-certificate uploader field. */ + signingCertificateLabel: LocalizationKey; + }; +}; + +type CardState = ReturnType; + +type SamlPayload = NonNullable; + +export type IdentityProviderMetadataFormController = { + mode: IdpMetadataMode; + setMode: React.Dispatch>; + certFile: File | null; + setCertFile: React.Dispatch>; + existingCertPresent: boolean; + metadataUrlField: FormControlState; + signOnUrlField: FormControlState; + issuerField: FormControlState; + certFileField: FormControlState; + isValid: boolean; + buildSamlPayload: () => Promise; + applySubmitError: (err: unknown, card: CardState) => void; +}; + +export const useIdentityProviderMetadataForm = ({ + metadataUrl, + manual, +}: UseIdentityProviderMetadataFormParams): IdentityProviderMetadataFormController => { + const { enterpriseConnection } = useConfigureSSO(); + + const samlConnection = enterpriseConnection?.samlConnection; + const hasExistingConfig = Boolean( + samlConnection?.idpSsoUrl || + samlConnection?.idpEntityId || + samlConnection?.idpCertificate || + samlConnection?.idpMetadataUrl, + ); + const existingCertPresent = Boolean(samlConnection?.idpCertificate); + + const [mode, setMode] = React.useState(hasExistingConfig ? 'manual' : 'metadataUrl'); + const [certFile, setCertFile] = React.useState(null); + + const metadataUrlField = useFormControl('idpMetadataUrl', samlConnection?.idpMetadataUrl ?? '', { + type: 'text', + label: metadataUrl.label, + placeholder: metadataUrl.placeholder, + isRequired: true, + }); + + const signOnUrlField = useFormControl('idpSsoUrl', samlConnection?.idpSsoUrl ?? '', { + type: 'text', + label: manual.signOnUrl.label, + placeholder: manual.signOnUrl.placeholder, + isRequired: true, + }); + + const issuerField = useFormControl('idpEntityId', samlConnection?.idpEntityId ?? '', { + type: 'text', + label: manual.issuer.label, + placeholder: manual.issuer.placeholder, + isRequired: true, + }); + + const certFileField = useFormControl('idpCertificate', '', { + type: 'text', + label: manual.signingCertificateLabel, + isRequired: true, + }); + + const trimmedMetadataUrl = metadataUrlField.value.trim(); + const trimmedSignOnUrl = signOnUrlField.value.trim(); + const trimmedIssuer = issuerField.value.trim(); + const hasCert = certFile !== null || existingCertPresent; + + const isValid = + (mode === 'metadataUrl' && trimmedMetadataUrl.length > 0) || + (mode === 'manual' && trimmedSignOnUrl.length > 0 && trimmedIssuer.length > 0 && hasCert); + + const buildSamlPayload = async (): Promise => { + if (mode === 'metadataUrl') { + return { idpMetadataUrl: trimmedMetadataUrl }; + } + + const payload: SamlPayload = { + idpSsoUrl: trimmedSignOnUrl, + idpEntityId: trimmedIssuer, + }; + + if (certFile !== null) { + payload.idpCertificate = await certFile.text(); + } + + return payload; + }; + + const applySubmitError = (err: unknown, card: CardState): void => { + const activeFields = mode === 'metadataUrl' ? [metadataUrlField] : [signOnUrlField, issuerField, certFileField]; + + handleError(err as Error, activeFields, card.setError); + + if (isClerkAPIResponseError(err)) { + const unscopedSamlError = err.errors.find(e => e.code?.startsWith('saml_') && !e.meta?.paramName); + if (unscopedSamlError) { + const primaryField = mode === 'metadataUrl' ? metadataUrlField : signOnUrlField; + primaryField.setError(unscopedSamlError); + card.setError(undefined); + } + } + }; + + return { + mode, + setMode, + certFile, + setCertFile, + existingCertPresent, + metadataUrlField, + signOnUrlField, + issuerField, + certFileField, + isValid, + buildSamlPayload, + applySubmitError, + }; +}; diff --git a/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx b/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx index 6c97e674f6d..32854089282 100644 --- a/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx +++ b/packages/ui/src/components/ConfigureSSO/steps/VerifyDomainStep.tsx @@ -22,6 +22,7 @@ import { handleError } from '@/utils/errorHandler'; import { useConfigureSSO } from '../ConfigureSSOContext'; import { Step } from '../elements/Step'; import { useWizard, Wizard } from '../elements/Wizard'; +import { InnerStepCounter } from '../elements/Wizard/InnerStepCounter'; export const VerifyDomainStep = (): JSX.Element => { const { user } = useUser(); @@ -157,16 +158,6 @@ export const VerifyDomainStep = (): JSX.Element => { ); }; -const InnerStepCounter = (): JSX.Element => { - const { currentIndex, totalSteps } = useWizard(); - return ( - - ); -}; - const isEmail = (str: string) => /^\S+@\S+\.\S+$/.test(str); type ProvideEmailStepProps = { diff --git a/packages/ui/src/components/ConfigureSSO/steps/configureStepTranslations.ts b/packages/ui/src/components/ConfigureSSO/steps/configureStepTranslations.ts deleted file mode 100644 index b38efd6921f..00000000000 --- a/packages/ui/src/components/ConfigureSSO/steps/configureStepTranslations.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type { __internal_LocalizationResource } from '@clerk/shared/types'; - -import { useConfigureSSO } from '../ConfigureSSOContext'; -import type { ProviderType } from '../types'; - -type ConfigureStepProviderKey = Extract< - keyof __internal_LocalizationResource['configureSSO']['configureStep'], - `saml${string}` ->; - -export type TranslationKeyPrefix = `configureSSO.configureStep.${ConfigureStepProviderKey}`; - -export const PROVIDER_TRANSLATION_KEY_PREFIX = { - saml_okta: 'configureSSO.configureStep.samlOkta', - saml_custom: 'configureSSO.configureStep.samlCustom', -} as const satisfies Record; - -export function getConfigureStepKey

( - provider: P, - suffix: S, -): `${(typeof PROVIDER_TRANSLATION_KEY_PREFIX)[P]}.${S}` { - return `${PROVIDER_TRANSLATION_KEY_PREFIX[provider]}.${suffix}`; -} - -export function useConfigureStepTranslations() { - const { provider } = useConfigureSSO(); - if (!provider) { - throw new Error('useConfigureStepTranslations called without a selected provider.'); - } - - return { - provider, - key: (suffix: S) => getConfigureStepKey(provider, suffix), - } as const; -}