Skip to content

Commit 590f423

Browse files
LauraBeatrisLauraBeatris
committed
Create root steps per provider
1 parent 3eb5583 commit 590f423

3 files changed

Lines changed: 286 additions & 15 deletions

File tree

‎packages/localizations/src/en-US.ts‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -400,8 +400,7 @@ export const enUS: LocalizationResource = {
400400
},
401401
},
402402
attributeMappingStep: {
403-
// TODO - Not mention Clerk
404-
headerSubtitle: 'Map user attributes from Okta to Clerk',
403+
headerSubtitle: 'Map user attributes from Okta to your application',
405404
paragraph: 'We expect your SAML responses to have the following specific attributes:',
406405
step1:
407406
'Open the <bold>Sign On</bold> tab of your Okta application and locate the <bold>Attribute Statements</bold> section. If you don’t see it, click <bold>Show legacy configuration</bold>, then <bold>Edit</bold>.',
@@ -483,8 +482,7 @@ export const enUS: LocalizationResource = {
483482
},
484483
},
485484
attributeMappingStep: {
486-
// TODO - Implement header subtitle copy
487-
headerSubtitle: 'Map user attributes from your identity provider.',
485+
headerSubtitle: 'Map user attributes from your identity provider to your application.',
488486
attributeMappingTable: {
489487
columns: {
490488
userProfile: 'Identity Provider User Profile',

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlCustomConfigureSteps.tsx‎

Lines changed: 142 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
import { Step } from '@/components/ConfigureSSO/elements/Step';
2-
import { Wizard } from '@/components/ConfigureSSO/elements/Wizard';
2+
import { useWizard, Wizard } from '@/components/ConfigureSSO/elements/Wizard';
33
import { InnerStepCounter } from '@/components/ConfigureSSO/elements/Wizard/InnerStepCounter';
4-
import { localizationKeys } from '@/localization';
4+
import { Col, descriptors, Heading, localizationKeys } from '@/customizables';
55

66
export const SamlCustomConfigureSteps = () => {
77
return (
8-
<Wizard>
8+
<>
99
<Wizard.Step id='create-app'>
1010
<Step.Header
1111
title={localizationKeys('configureSSO.configureStep.samlCustom.mainHeaderTitle')}
@@ -15,10 +15,147 @@ export const SamlCustomConfigureSteps = () => {
1515
</Step.Header>
1616
<SamlCustomCreateAppStep />
1717
</Wizard.Step>
18-
</Wizard>
18+
19+
<Wizard.Step id='attribute-mapping'>
20+
<Step.Header
21+
title={localizationKeys('configureSSO.configureStep.samlCustom.mainHeaderTitle')}
22+
description={localizationKeys('configureSSO.configureStep.samlCustom.attributeMappingStep.headerSubtitle')}
23+
>
24+
<InnerStepCounter />
25+
</Step.Header>
26+
<SamlCustomAttributeMappingStep />
27+
</Wizard.Step>
28+
29+
<Wizard.Step id='assign-users'>
30+
<Step.Header
31+
title={localizationKeys('configureSSO.configureStep.samlCustom.mainHeaderTitle')}
32+
description={localizationKeys('configureSSO.configureStep.samlCustom.assignUsersStep.headerSubtitle')}
33+
>
34+
<InnerStepCounter />
35+
</Step.Header>
36+
<SamlCustomAssignUsersStep />
37+
</Wizard.Step>
38+
39+
<Wizard.Step id='identity-provider-metadata'>
40+
<Step.Header
41+
title={localizationKeys('configureSSO.configureStep.samlCustom.mainHeaderTitle')}
42+
description={localizationKeys(
43+
'configureSSO.configureStep.samlCustom.identityProviderMetadataStep.headerSubtitle',
44+
)}
45+
>
46+
<InnerStepCounter />
47+
</Step.Header>
48+
<SamlCustomIdentityProviderMetadataStep />
49+
</Wizard.Step>
50+
</>
1951
);
2052
};
2153

2254
const SamlCustomCreateAppStep = () => {
23-
return <div>SamlCustomCreateAppStep</div>;
55+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
56+
57+
return (
58+
<>
59+
<Step.Body>
60+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
61+
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
62+
<Heading
63+
elementDescriptor={descriptors.configureSSOInstructionsHeading}
64+
as='h3'
65+
textVariant='subtitle'
66+
localizationKey={localizationKeys(
67+
'configureSSO.configureStep.samlCustom.createAppStep.createAppInstructions.title',
68+
)}
69+
/>
70+
</Col>
71+
</Step.Section>
72+
</Step.Body>
73+
74+
<Step.Footer>
75+
<Step.Footer.Previous
76+
onClick={() => goPrev()}
77+
isDisabled={isFirstStep}
78+
/>
79+
<Step.Footer.Continue
80+
onClick={() => goNext()}
81+
isDisabled={isLastStep}
82+
/>
83+
</Step.Footer>
84+
</>
85+
);
86+
};
87+
88+
const SamlCustomAttributeMappingStep = () => {
89+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
90+
91+
return (
92+
<>
93+
<Step.Body>
94+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
95+
<p>add table here</p>
96+
</Step.Section>
97+
</Step.Body>
98+
99+
<Step.Footer>
100+
<Step.Footer.Previous
101+
onClick={() => goPrev()}
102+
isDisabled={isFirstStep}
103+
/>
104+
<Step.Footer.Continue
105+
onClick={() => goNext()}
106+
isDisabled={isLastStep}
107+
/>
108+
</Step.Footer>
109+
</>
110+
);
111+
};
112+
113+
const SamlCustomAssignUsersStep = () => {
114+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
115+
116+
return (
117+
<>
118+
<Step.Body>
119+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
120+
<p>add content here</p>
121+
</Step.Section>
122+
</Step.Body>
123+
124+
<Step.Footer>
125+
<Step.Footer.Previous
126+
onClick={() => goPrev()}
127+
isDisabled={isFirstStep}
128+
/>
129+
<Step.Footer.Continue
130+
onClick={() => goNext()}
131+
isDisabled={isLastStep}
132+
/>
133+
</Step.Footer>
134+
</>
135+
);
136+
};
137+
138+
const SamlCustomIdentityProviderMetadataStep = () => {
139+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
140+
141+
return (
142+
<>
143+
<Step.Body>
144+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
145+
<p>add content here</p>
146+
</Step.Section>
147+
</Step.Body>
148+
149+
<Step.Footer>
150+
<Step.Footer.Previous
151+
onClick={() => goPrev()}
152+
isDisabled={isFirstStep}
153+
/>
154+
<Step.Footer.Continue
155+
onClick={() => goNext()}
156+
isDisabled={isLastStep}
157+
/>
158+
</Step.Footer>
159+
</>
160+
);
24161
};

‎packages/ui/src/components/ConfigureSSO/steps/ConfigureStep/saml/SamlOktaConfigureSteps.tsx‎

Lines changed: 142 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,161 @@
11
import { Step } from '@/components/ConfigureSSO/elements/Step';
2-
import { Wizard } from '@/components/ConfigureSSO/elements/Wizard';
2+
import { useWizard, Wizard } from '@/components/ConfigureSSO/elements/Wizard';
33
import { InnerStepCounter } from '@/components/ConfigureSSO/elements/Wizard/InnerStepCounter';
4-
import { localizationKeys } from '@/localization';
4+
import { Col, descriptors, Heading, localizationKeys } from '@/customizables';
55

66
export const SamlOktaConfigureSteps = () => {
77
return (
8-
<Wizard>
8+
<>
99
<Wizard.Step id='create-app'>
1010
<Step.Header
1111
title={localizationKeys('configureSSO.configureStep.samlOkta.mainHeaderTitle')}
1212
description={localizationKeys('configureSSO.configureStep.samlOkta.createAppStep.headerSubtitle')}
1313
>
1414
<InnerStepCounter />
1515
</Step.Header>
16-
1716
<SamlOktaCreateAppStep />
1817
</Wizard.Step>
19-
</Wizard>
18+
19+
<Wizard.Step id='attribute-mapping'>
20+
<Step.Header
21+
title={localizationKeys('configureSSO.configureStep.samlOkta.mainHeaderTitle')}
22+
description={localizationKeys('configureSSO.configureStep.samlOkta.attributeMappingStep.headerSubtitle')}
23+
>
24+
<InnerStepCounter />
25+
</Step.Header>
26+
<SamlOktaAttributeMappingStep />
27+
</Wizard.Step>
28+
29+
<Wizard.Step id='assign-users'>
30+
<Step.Header
31+
title={localizationKeys('configureSSO.configureStep.samlOkta.mainHeaderTitle')}
32+
description={localizationKeys('configureSSO.configureStep.samlOkta.assignUsersStep.headerSubtitle')}
33+
>
34+
<InnerStepCounter />
35+
</Step.Header>
36+
<SamlOktaAssignUsersStep />
37+
</Wizard.Step>
38+
39+
<Wizard.Step id='identity-provider-metadata'>
40+
<Step.Header
41+
title={localizationKeys('configureSSO.configureStep.samlOkta.mainHeaderTitle')}
42+
description={localizationKeys(
43+
'configureSSO.configureStep.samlOkta.identityProviderMetadataStep.headerSubtitle',
44+
)}
45+
>
46+
<InnerStepCounter />
47+
</Step.Header>
48+
<SamlOktaIdentityProviderMetadataStep />
49+
</Wizard.Step>
50+
</>
2051
);
2152
};
2253

2354
const SamlOktaCreateAppStep = () => {
24-
return <div>SamlOktaCreateAppStep</div>;
55+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
56+
57+
return (
58+
<>
59+
<Step.Body>
60+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
61+
<Col sx={theme => ({ gap: theme.space.$1x5 })}>
62+
<Heading
63+
elementDescriptor={descriptors.configureSSOInstructionsHeading}
64+
as='h3'
65+
textVariant='subtitle'
66+
localizationKey={localizationKeys(
67+
'configureSSO.configureStep.samlOkta.createAppStep.createAppInstructions.title',
68+
)}
69+
/>
70+
</Col>
71+
</Step.Section>
72+
</Step.Body>
73+
74+
<Step.Footer>
75+
<Step.Footer.Previous
76+
onClick={() => goPrev()}
77+
isDisabled={isFirstStep}
78+
/>
79+
<Step.Footer.Continue
80+
onClick={() => goNext()}
81+
isDisabled={isLastStep}
82+
/>
83+
</Step.Footer>
84+
</>
85+
);
86+
};
87+
88+
const SamlOktaAttributeMappingStep = () => {
89+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
90+
91+
return (
92+
<>
93+
<Step.Body>
94+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
95+
<p>add table here</p>
96+
</Step.Section>
97+
</Step.Body>
98+
99+
<Step.Footer>
100+
<Step.Footer.Previous
101+
onClick={() => goPrev()}
102+
isDisabled={isFirstStep}
103+
/>
104+
<Step.Footer.Continue
105+
onClick={() => goNext()}
106+
isDisabled={isLastStep}
107+
/>
108+
</Step.Footer>
109+
</>
110+
);
111+
};
112+
113+
const SamlOktaAssignUsersStep = () => {
114+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
115+
116+
return (
117+
<>
118+
<Step.Body>
119+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
120+
<p>add content here</p>
121+
</Step.Section>
122+
</Step.Body>
123+
124+
<Step.Footer>
125+
<Step.Footer.Previous
126+
onClick={() => goPrev()}
127+
isDisabled={isFirstStep}
128+
/>
129+
<Step.Footer.Continue
130+
onClick={() => goNext()}
131+
isDisabled={isLastStep}
132+
/>
133+
</Step.Footer>
134+
</>
135+
);
136+
};
137+
138+
const SamlOktaIdentityProviderMetadataStep = () => {
139+
const { goPrev, goNext, isFirstStep, isLastStep } = useWizard();
140+
141+
return (
142+
<>
143+
<Step.Body>
144+
<Step.Section sx={theme => ({ gap: theme.space.$5 })}>
145+
<p>add content here</p>
146+
</Step.Section>
147+
</Step.Body>
148+
149+
<Step.Footer>
150+
<Step.Footer.Previous
151+
onClick={() => goPrev()}
152+
isDisabled={isFirstStep}
153+
/>
154+
<Step.Footer.Continue
155+
onClick={() => goNext()}
156+
isDisabled={isLastStep}
157+
/>
158+
</Step.Footer>
159+
</>
160+
);
25161
};

0 commit comments

Comments
 (0)