;
+
+/**
+ * TODO: Should align this with the guard `samlServiceProviderMetadataGuard` defined in {@link logto/core/src/sso/types/saml.ts}.
+ * This only applies to SAML SSO connectors.
+ */
+const providerPropertiesGuard = z.object({
+ assertionConsumerServiceUrl: z.string().min(1),
+ entityId: z.string().min(1),
+});
+
+function BasicInfo({ ssoConnectorId, providerName, providerProperties }: Props) {
+ const { tenantEndpoint } = useContext(AppDataContext);
+ const { applyDomain: applyCustomDomain } = useCustomDomain();
+
+ if (providerName === SsoProviderName.OIDC) {
+ return (
+
+
+ {/* Generated and passed in by Admin console. */}
+
+
+
+ );
+ }
+
+ const result = providerPropertiesGuard.safeParse(providerProperties);
+
+ /**
+ * Used fallback to show the default value anyways but the cases should not happen.
+ * TODO: @darcyYe refactor to remove the manual guard.
+ */
+ return (
+
+
+
+
+
+
+
+
+ );
+}
+
+export default BasicInfo;
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/OidcMetadataForm/index.tsx b/packages/console/src/pages/EnterpriseSso/Guide/OidcMetadataForm/index.tsx
new file mode 100644
index 000000000..f3898baf4
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/OidcMetadataForm/index.tsx
@@ -0,0 +1,29 @@
+import { useFormContext } from 'react-hook-form';
+
+import FormField from '@/ds-components/FormField';
+import TextInput from '@/ds-components/TextInput';
+
+import { type OidcGuideFormType } from '../../types.js';
+
+function OidcMetadataForm() {
+ const { register } = useFormContext();
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default OidcMetadataForm;
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.module.scss b/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.module.scss
new file mode 100644
index 000000000..957cdf7d7
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.module.scss
@@ -0,0 +1,39 @@
+@use '@/scss/underscore' as _;
+
+.copyToClipboard {
+ display: block;
+}
+
+.table {
+ width: 100%;
+}
+
+.row {
+ width: 100%;
+ display: flex;
+ flex-direction: row;
+ gap: _.unit(4);
+ padding-bottom: _.unit(3);
+
+ > td,
+ th {
+ width: calc((100% - _.unit(4)) / 2);
+ }
+}
+
+.header {
+ width: 100%;
+ font: var(--font-title-3);
+
+ > tr {
+ padding-bottom: _.unit(3);
+ }
+
+ * > th {
+ text-align: left;
+ }
+}
+
+.body {
+ width: 100%;
+}
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.tsx b/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.tsx
new file mode 100644
index 000000000..a1996f92e
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/SamlAttributeMapping/index.tsx
@@ -0,0 +1,74 @@
+import { useMemo } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import CopyToClipboard from '@/ds-components/CopyToClipboard';
+import DynamicT from '@/ds-components/DynamicT';
+import TextInput from '@/ds-components/TextInput';
+
+import { attributeKeys, type SamlGuideFormType, type AttributeMapping } from '../../types.js';
+
+import * as styles from './index.module.scss';
+
+type Props = {
+ isReadOnly?: boolean;
+};
+
+const primaryKey = 'attributeMapping';
+
+function SamlAttributeMapping({ isReadOnly }: Props) {
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+ const { watch, register } = useFormContext();
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ const attributeMapping = watch(primaryKey) ?? {};
+ const attributeMappingEntries = useMemo<
+ Array<[keyof AttributeMapping, string | undefined]>
+ >(() => {
+ return attributeKeys.map((key) => [key, attributeMapping[key] ?? '']);
+ }, [attributeMapping]);
+
+ return (
+
+
+
+
+ |
+
+ |
+
+
+ |
+
+
+
+ {attributeMappingEntries.map(([key, value]) => {
+ return (
+
+ |
+
+ |
+
+ {isReadOnly ? (
+
+ ) : (
+
+ )}
+ |
+
+ );
+ })}
+
+
+
+
+
+
+ ))}
+
+ );
+}
+
+export default SwitchFormatButton;
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.module.scss b/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.module.scss
new file mode 100644
index 000000000..c1044d7e7
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.module.scss
@@ -0,0 +1,13 @@
+@use '@/scss/underscore' as _;
+
+.description {
+ color: var(--color-text-secondary);
+ font: var(--font-body-2);
+ margin-top: _.unit(0.5);
+}
+
+.samlMetadataForm {
+ > div:not(:first-child) {
+ margin-top: _.unit(6);
+ }
+}
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.tsx b/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.tsx
new file mode 100644
index 000000000..b10071e61
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/SamlMetadataForm/index.tsx
@@ -0,0 +1,108 @@
+import { conditional, pick } from '@silverhand/essentials';
+import { useState } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FormField from '@/ds-components/FormField';
+import TextInput from '@/ds-components/TextInput';
+import Textarea from '@/ds-components/Textarea';
+
+import { type SamlGuideFormType } from '../../types.js';
+
+import SwitchFormatButton, { FormFormat } from './SwitchFormatButton';
+import * as styles from './index.module.scss';
+
+/**
+ * Since we need to reset some of the form fields when we switch the form format
+ * for SAML configuration form, here we define this object for convenience.
+ */
+const completeResetObject: Omit = {
+ metadata: undefined,
+ metadataUrl: undefined,
+ signInEndpoint: undefined,
+ entityId: undefined,
+ x509Certificate: undefined,
+};
+
+type Props = {
+ formFormat: FormFormat;
+};
+
+function SamlMetadataFormFields({ formFormat }: Props) {
+ const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+ const { register } = useFormContext();
+
+ switch (formFormat) {
+ case FormFormat.Manual: {
+ return (
+ <>
+
+
+
+
+
+
+
+
+
+
+ );
+ }
+ case FormFormat.Xml: {
+ return (
+
+
+
+ );
+ }
+ case FormFormat.Url: {
+ return (
+
+
+
+ {t('enterprise_sso.metadata.saml.metadata_url_description')}
+
+
+ );
+ }
+ default: {
+ return null;
+ }
+ }
+}
+
+function SamlMetadataForm() {
+ const { reset } = useFormContext();
+ const [formFormat, setFormFormat] = useState(FormFormat.Url);
+
+ // If some form format is selected, then fields from other fields should be cleared.
+ const onSelect = (formFormat: FormFormat) => {
+ reset({
+ ...conditional(
+ formFormat === FormFormat.Url &&
+ pick(completeResetObject, 'metadata', 'entityId', 'signInEndpoint', 'x509Certificate')
+ ),
+ ...conditional(
+ formFormat === FormFormat.Xml &&
+ pick(completeResetObject, 'metadataUrl', 'entityId', 'signInEndpoint', 'x509Certificate')
+ ),
+ ...conditional(
+ formFormat === FormFormat.Manual && pick(completeResetObject, 'metadata', 'metadataUrl')
+ ),
+ });
+
+ setFormFormat(formFormat);
+ };
+
+ return (
+
+
+
+
+ );
+}
+
+export default SamlMetadataForm;
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/index.module.scss b/packages/console/src/pages/EnterpriseSso/Guide/index.module.scss
new file mode 100644
index 000000000..65cfa91c1
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/index.module.scss
@@ -0,0 +1,129 @@
+@use '@/scss/underscore' as _;
+
+.container {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--color-base);
+ height: 100vh;
+ overflow-x: auto;
+
+ .header {
+ display: flex;
+ align-items: center;
+ background: none;
+ height: 64px;
+ padding: 0 _.unit(21) 0 _.unit(2);
+
+ button {
+ margin-left: _.unit(4);
+ }
+
+ .separator {
+ @include _.vertical-bar;
+ height: 20px;
+ margin: 0 _.unit(5) 0 _.unit(4);
+ }
+
+ .closeIcon {
+ color: var(--color-text-secondary);
+ }
+ }
+
+ .content {
+ flex: 1;
+ display: flex;
+ overflow: auto;
+ justify-content: center;
+ min-width: min-content;
+ padding: _.unit(2) _.unit(6) _.unit(6);
+
+ > * {
+ flex: 1;
+ max-width: 800px;
+ min-width: 400px;
+ }
+
+ .readme {
+ display: flex;
+ flex-direction: column;
+ background-color: var(--color-layer-1);
+ border: 1.5px solid var(--color-focused-variant);
+ border-radius: 16px;
+ margin: 0 _.unit(6) 0 0;
+ overflow-y: auto;
+ position: sticky;
+ top: 0;
+
+ .readmeTitle {
+ font: var(--font-title-2);
+ padding: _.unit(5) _.unit(6) _.unit(4);
+ border-bottom: 1px solid var(--color-focused-variant);
+ }
+
+ .readmeContent {
+ flex: 1;
+ padding: 0 _.unit(6) _.unit(4);
+
+ h2 {
+ color: var(--color-text);
+ }
+
+ h3 {
+ color: var(--color-text-secondary);
+ }
+ }
+ }
+
+ .setup {
+ padding-bottom: _.unit(6);
+
+ .block {
+ background-color: var(--color-layer-1);
+ border-radius: 16px;
+ padding: 0 _.unit(6) _.unit(6);
+ margin-bottom: _.unit(4);
+
+ .blockTitle {
+ font: var(--font-title-2);
+ padding: _.unit(5) 0 _.unit(6);
+ display: flex;
+ flex-direction: column;
+ gap: _.unit(2);
+
+ .numberedTitle {
+ display: flex;
+ align-items: center;
+ flex-direction: row;
+ gap: _.unit(4);
+ }
+
+ .number {
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ background-color: var(--color-focused-variant);
+ color: var(--color-primary);
+ font: var(--font-title-2);
+ text-align: center;
+ line-height: 28px;
+ }
+
+ .blockSubtitle {
+ font: var(--font-body-2);
+ color: var(--color-text-secondary);
+ }
+ }
+ }
+
+ .footer {
+ padding-bottom: _.unit(10);
+ display: flex;
+ justify-content: right;
+ }
+ }
+
+ form + div {
+ margin-top: _.unit(6);
+ }
+ }
+}
diff --git a/packages/console/src/pages/EnterpriseSso/Guide/index.tsx b/packages/console/src/pages/EnterpriseSso/Guide/index.tsx
new file mode 100644
index 000000000..ce41b69bc
--- /dev/null
+++ b/packages/console/src/pages/EnterpriseSso/Guide/index.tsx
@@ -0,0 +1,187 @@
+import { type AdminConsoleKey } from '@logto/phrases';
+import { SsoProviderName, type SsoConnectorWithProviderConfig } from '@logto/schemas';
+import cleanDeep from 'clean-deep';
+import type { ReactNode } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import Modal from 'react-modal';
+
+import Close from '@/assets/icons/close.svg';
+import Markdown from '@/components/Markdown';
+import Button from '@/ds-components/Button';
+import CardTitle from '@/ds-components/CardTitle';
+import DangerousRaw from '@/ds-components/DangerousRaw';
+import DynamicT from '@/ds-components/DynamicT';
+import IconButton from '@/ds-components/IconButton';
+import OverlayScrollbar from '@/ds-components/OverlayScrollbar';
+import useApi from '@/hooks/use-api';
+import * as modalStyles from '@/scss/modal.module.scss';
+import { trySubmitSafe } from '@/utils/form';
+
+import { splitMarkdownByTitle } from '../../Connectors/utils.js';
+import { type GuideFormType } from '../types.js';
+
+import BasicInfo from './BasicInfo';
+import OidcMetadataForm from './OidcMetadataForm';
+import SamlAttributeMapping from './SamlAttributeMapping';
+import SamlMetadataForm from './SamlMetadataForm';
+import * as styles from './index.module.scss';
+import { type SsoConnectorWithProviderConfigWithGeneric } from './types.js';
+
+type Props = {
+ isOpen: boolean;
+ connector: SsoConnectorWithProviderConfigWithGeneric;
+ onClose: (ssoConnectorId?: string) => void;
+ isReadOnly?: boolean;
+};
+
+type GuideCardProps = {
+ cardOrder: number;
+ children: ReactNode;
+ title: AdminConsoleKey;
+ description: AdminConsoleKey;
+};
+
+function GuideCard({ cardOrder, title, description, children }: GuideCardProps) {
+ return (
+
+ );
+}
+
+function Guide({ isOpen, connector, onClose, isReadOnly }: Props) {
+ const {
+ id: ssoConnectorId,
+ connectorName: ssoConnectorName,
+ providerName,
+ providerProperties,
+ } = connector;
+
+ const api = useApi();
+
+ const methods = useForm>();
+
+ const {
+ formState: { isSubmitting },
+ handleSubmit,
+ } = methods;
+
+ // TODO: @darcyYe Add SSO connector README.
+ const { title, content } = splitMarkdownByTitle(
+ '# SSO connector guide\n\nThis is a guide for Logto Enterprise SSO connector.'
+ );
+
+ const onSubmit = handleSubmit(
+ trySubmitSafe(async (formData) => {
+ if (isSubmitting) {
+ return;
+ }
+
+ await api
+ .patch(`api/sso-connectors/${ssoConnectorId}/config`, {
+ json: cleanDeep(formData),
+ })
+ .json();
+
+ onClose(ssoConnectorId);
+ })
+ );
+
+ return (
+ {
+ onClose();
+ }}
+ >
+
+
+
{
+ onClose(ssoConnectorId);
+ }}
+ >
+
+
+
+
{ssoConnectorName}}
+ subtitle="enterprise_sso.guide.subtitle"
+ />
+
+
+
+ README: {title}
+ {content}
+
+
+
+