From 6e001f582cf7f919fa7d5d2f8d0236df1582cf09 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Wed, 24 Jan 2024 17:00:19 +0800 Subject: [PATCH] refactor(console): reorg sie page codes (#5292) --- .../src/containers/ConsoleContent/index.tsx | 3 +- .../src/ds-components/TabWrapper/index.tsx | 2 +- .../LogoAndFaviconUploader/index.module.scss | 0 .../LogoAndFaviconUploader/index.tsx | 0 .../Branding/BrandingForm/index.module.scss | 9 + .../Branding/BrandingForm/index.tsx} | 9 +- .../Branding/CustomCssForm/index.module.scss} | 0 .../Branding/CustomCssForm/index.tsx} | 8 +- .../{tabs => PageContent}/Branding/index.tsx | 7 +- .../AddLanguageSelector.module.scss | 0 .../LanguageEditor/AddLanguageSelector.tsx | 0 .../LanguageDetails.module.scss | 0 .../LanguageEditor/LanguageDetails.tsx | 10 +- .../LanguageEditor/LanguageItem.module.scss | 0 .../LanguageEditor/LanguageItem.tsx | 0 .../LanguageEditor/LanguageNav.module.scss | 0 .../LanguageEditor/LanguageNav.tsx | 0 .../LanguageEditor}/constants.ts | 0 .../LanguageEditor/index.module.scss | 0 .../ManageLanguage/LanguageEditor/index.tsx | 0 .../use-language-editor-context.ts | 0 .../ManageLanguage/LanguageEditor/utils.ts} | 0 .../ManageLanguage/ManageLanguageButton.tsx | 0 .../Content/LanguagesForm/index.module.scss | 16 ++ .../Content/LanguagesForm/index.tsx} | 9 +- .../Content/TermsForm.tsx | 4 +- .../{tabs => PageContent}/Content/index.tsx | 7 +- .../PasswordPolicy/index.module.scss | 0 .../PasswordPolicy/index.tsx | 21 +- .../AdvancedOptions/index.module.scss | 11 ++ .../AdvancedOptions/index.tsx} | 8 +- .../SignInMethodEditBox/AddButton.tsx | 3 +- .../SignInMethodEditBox/SignInMethodItem.tsx | 4 +- .../SignInMethodEditBox/index.module.scss | 0 .../SignInForm}/SignInMethodEditBox/index.tsx | 16 +- .../SignUpAndSignIn/SignInForm/index.tsx} | 11 +- .../SignUpForm/index.module.scss | 17 ++ .../SignUpAndSignIn/SignUpForm/index.tsx} | 30 ++- .../AddButton/index.module.scss} | 0 .../AddButton/index.tsx} | 2 +- .../SelectedConnectorItem/index.module.scss} | 0 .../SelectedConnectorItem/index.tsx} | 2 +- .../SocialConnectorEditBox/index.module.scss | 0 .../SocialConnectorEditBox/index.tsx | 2 +- .../SocialSignInForm/index.tsx} | 16 +- .../ConnectorSetupWarning/index.module.scss | 0 .../ConnectorSetupWarning/index.tsx | 12 +- .../PageContent/SignUpAndSignIn/constants.ts | 9 + .../SignUpAndSignIn/index.tsx | 7 +- .../SignUpAndSignIn/utils.ts | 25 ++- .../DiffSegment.tsx | 0 .../SignInDiffSection.tsx | 7 +- .../SignUpDiffSection.tsx | 7 +- .../SocialTargetsDiffSection.tsx | 0 .../index.module.scss | 0 .../SignUpAndSignInDiffSection/index.tsx | 0 .../index.module.scss | 0 .../SignUpAndSignInChangePreview/index.tsx | 0 .../FormFieldDescription/index.module.scss | 7 + .../components/FormFieldDescription/index.tsx | 13 ++ .../FormSectionTitle/index.module.scss | 6 + .../components/FormSectionTitle/index.tsx | 19 ++ .../index.module.scss | 7 + .../SignInExperienceTabWrapper/index.tsx | 15 ++ .../{ => PageContent}/constants.ts | 21 +- .../PageContent/index.module.scss | 36 ++++ .../SignInExperience/PageContent/index.tsx | 171 ++++++++++++++++ .../{ => PageContent}/utils/form.ts | 41 ++-- .../{ => PageContent}/utils/parser.ts | 32 +-- .../Skeleton/index.module.scss | 0 .../{components => }/Skeleton/index.tsx | 13 +- .../Welcome/GuideModal.module.scss | 0 .../{components => }/Welcome/GuideModal.tsx | 14 +- .../Welcome/index.module.scss | 0 .../{components => }/Welcome/index.tsx | 0 .../SignUpAndSignInDiffSection/utils.ts | 24 --- .../hooks/use-preview-configs.ts | 2 +- .../src/pages/SignInExperience/index.tsx | 186 ++---------------- .../SignInExperience/tabs/index.module.scss | 69 ------- .../src/pages/SignInExperience/types.ts | 11 +- .../SignInExperience/utils/identifier.ts | 34 ---- 81 files changed, 544 insertions(+), 471 deletions(-) rename packages/console/src/pages/SignInExperience/{tabs/Branding/components => PageContent/Branding/BrandingForm}/LogoAndFaviconUploader/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Branding/components => PageContent/Branding/BrandingForm}/LogoAndFaviconUploader/index.tsx (100%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.module.scss rename packages/console/src/pages/SignInExperience/{tabs/Branding/BrandingForm.tsx => PageContent/Branding/BrandingForm/index.tsx} (95%) rename packages/console/src/pages/SignInExperience/{tabs/Branding/CustomCssForm.module.scss => PageContent/Branding/CustomCssForm/index.module.scss} (100%) rename packages/console/src/pages/SignInExperience/{tabs/Branding/CustomCssForm.tsx => PageContent/Branding/CustomCssForm/index.tsx} (88%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/Branding/index.tsx (68%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageDetails.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageDetails.tsx (97%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageItem.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageItem.tsx (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageNav.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/LanguageNav.tsx (100%) rename packages/console/src/pages/SignInExperience/{utils => PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor}/constants.ts (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/index.tsx (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/LanguageEditor/use-language-editor-context.ts (100%) rename packages/console/src/pages/SignInExperience/{utils/language.ts => PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/utils.ts} (100%) rename packages/console/src/pages/SignInExperience/{tabs/Content/components => PageContent/Content/LanguagesForm}/ManageLanguage/ManageLanguageButton.tsx (100%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.module.scss rename packages/console/src/pages/SignInExperience/{tabs/Content/LanguagesForm.tsx => PageContent/Content/LanguagesForm/index.tsx} (89%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/Content/TermsForm.tsx (91%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/Content/index.tsx (69%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/PasswordPolicy/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/PasswordPolicy/index.tsx (91%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.module.scss rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/AdvancedOptions.tsx => PageContent/SignUpAndSignIn/AdvancedOptions/index.tsx} (84%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SignInForm}/SignInMethodEditBox/AddButton.tsx (96%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SignInForm}/SignInMethodEditBox/SignInMethodItem.tsx (96%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SignInForm}/SignInMethodEditBox/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SignInForm}/SignInMethodEditBox/index.tsx (92%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/SignInForm.tsx => PageContent/SignUpAndSignIn/SignInForm/index.tsx} (61%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/SignUpForm.tsx => PageContent/SignUpAndSignIn/SignUpForm/index.tsx} (91%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.module.scss => PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.module.scss} (100%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components/SocialConnectorEditBox/AddButton.tsx => PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/AddButton/index.tsx} (97%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.module.scss => PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.module.scss} (100%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components/SocialConnectorEditBox/SelectedConnectorItem.tsx => PageContent/SignUpAndSignIn/SocialSignInForm/SocialConnectorEditBox/SelectedConnectorItem/index.tsx} (95%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SocialSignInForm}/SocialConnectorEditBox/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/components => PageContent/SignUpAndSignIn/SocialSignInForm}/SocialConnectorEditBox/index.tsx (97%) rename packages/console/src/pages/SignInExperience/{tabs/SignUpAndSignIn/SocialSignInForm.tsx => PageContent/SignUpAndSignIn/SocialSignInForm/index.tsx} (69%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/SignUpAndSignIn/components/ConnectorSetupWarning/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/SignUpAndSignIn/components/ConnectorSetupWarning/index.tsx (76%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/constants.ts rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/SignUpAndSignIn/index.tsx (76%) rename packages/console/src/pages/SignInExperience/{tabs => PageContent}/SignUpAndSignIn/utils.ts (52%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx (100%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx (93%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx (91%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx (100%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx (100%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{components => PageContent}/SignUpAndSignInChangePreview/index.tsx (100%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.module.scss create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.tsx create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.module.scss create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.tsx create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.module.scss create mode 100644 packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.tsx rename packages/console/src/pages/SignInExperience/{ => PageContent}/constants.ts (69%) create mode 100644 packages/console/src/pages/SignInExperience/PageContent/index.module.scss create mode 100644 packages/console/src/pages/SignInExperience/PageContent/index.tsx rename packages/console/src/pages/SignInExperience/{ => PageContent}/utils/form.ts (58%) rename packages/console/src/pages/SignInExperience/{ => PageContent}/utils/parser.ts (79%) rename packages/console/src/pages/SignInExperience/{components => }/Skeleton/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{components => }/Skeleton/index.tsx (80%) rename packages/console/src/pages/SignInExperience/{components => }/Welcome/GuideModal.module.scss (100%) rename packages/console/src/pages/SignInExperience/{components => }/Welcome/GuideModal.tsx (91%) rename packages/console/src/pages/SignInExperience/{components => }/Welcome/index.module.scss (100%) rename packages/console/src/pages/SignInExperience/{components => }/Welcome/index.tsx (100%) delete mode 100644 packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utils.ts delete mode 100644 packages/console/src/pages/SignInExperience/tabs/index.module.scss delete mode 100644 packages/console/src/pages/SignInExperience/utils/identifier.ts diff --git a/packages/console/src/containers/ConsoleContent/index.tsx b/packages/console/src/containers/ConsoleContent/index.tsx index fb3096629..b99ed975e 100644 --- a/packages/console/src/containers/ConsoleContent/index.tsx +++ b/packages/console/src/containers/ConsoleContent/index.tsx @@ -45,7 +45,8 @@ import RolePermissions from '@/pages/RoleDetails/RolePermissions'; import RoleSettings from '@/pages/RoleDetails/RoleSettings'; import RoleUsers from '@/pages/RoleDetails/RoleUsers'; import Roles from '@/pages/Roles'; -import SignInExperience, { SignInExperienceTab } from '@/pages/SignInExperience'; +import SignInExperience from '@/pages/SignInExperience'; +import { SignInExperienceTab } from '@/pages/SignInExperience/types'; import TenantSettings from '@/pages/TenantSettings'; import BillingHistory from '@/pages/TenantSettings/BillingHistory'; import Subscription from '@/pages/TenantSettings/Subscription'; diff --git a/packages/console/src/ds-components/TabWrapper/index.tsx b/packages/console/src/ds-components/TabWrapper/index.tsx index 8cb631288..5966aac53 100644 --- a/packages/console/src/ds-components/TabWrapper/index.tsx +++ b/packages/console/src/ds-components/TabWrapper/index.tsx @@ -3,7 +3,7 @@ import type { ReactNode } from 'react'; import * as styles from './index.module.scss'; -type Props = { +export type Props = { isActive: boolean; className?: string; children: ReactNode; diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Branding/components/LogoAndFaviconUploader/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/LogoAndFaviconUploader/index.tsx diff --git a/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.module.scss new file mode 100644 index 000000000..92ed171e0 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.module.scss @@ -0,0 +1,9 @@ +@use '@/scss/underscore' as _; + +.darkModeTip { + display: flex; + align-items: baseline; + font: var(--font-body-2); + color: var(--color-text-secondary); + margin-top: _.unit(1); +} diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx similarity index 95% rename from packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx index b7ceca240..709dda507 100644 --- a/packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx @@ -14,10 +14,11 @@ import ImageUploaderField from '@/ds-components/Uploader/ImageUploaderField'; import useUserAssetsService from '@/hooks/use-user-assets-service'; import { uriValidator } from '@/utils/validator'; -import type { SignInExperienceForm } from '../../types'; -import * as styles from '../index.module.scss'; +import type { SignInExperienceForm } from '../../../types'; +import FormSectionTitle from '../../components/FormSectionTitle'; -import LogoAndFaviconUploader from './components/LogoAndFaviconUploader'; +import LogoAndFaviconUploader from './LogoAndFaviconUploader'; +import * as styles from './index.module.scss'; function BrandingForm() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -55,7 +56,7 @@ function BrandingForm() { return ( -
{t('sign_in_exp.branding.title')}
+ -
{t('sign_in_exp.custom_css.title')}
+ ( diff --git a/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Branding/index.tsx similarity index 68% rename from packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Branding/index.tsx index 80f2f86c7..245666fe5 100644 --- a/packages/console/src/pages/SignInExperience/tabs/Branding/index.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/Branding/index.tsx @@ -1,7 +1,6 @@ import PageMeta from '@/components/PageMeta'; -import TabWrapper from '@/ds-components/TabWrapper'; -import * as styles from '../index.module.scss'; +import SignInExperienceTabWrapper from '../components/SignInExperienceTabWrapper'; import BrandingForm from './BrandingForm'; import CustomCssForm from './CustomCssForm'; @@ -12,11 +11,11 @@ type Props = { function Branding({ isActive }: Props) { return ( - + {isActive && } - + ); } diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/AddLanguageSelector.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/AddLanguageSelector.tsx diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageDetails.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageDetails.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.tsx similarity index 97% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.tsx index ec972c6d0..34ac03fb4 100644 --- a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageDetails.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageDetails.tsx @@ -27,19 +27,13 @@ import { Tooltip } from '@/ds-components/Tip'; import useApi, { RequestError } from '@/hooks/use-api'; import useSwrFetcher from '@/hooks/use-swr-fetcher'; import useUiLanguages from '@/hooks/use-ui-languages'; -import { - hiddenLocalePhraseGroups, - hiddenLocalePhrases, -} from '@/pages/SignInExperience/utils/constants'; -import { - createEmptyUiTranslation, - flattenTranslation, -} from '@/pages/SignInExperience/utils/language'; import type { CustomPhraseResponse } from '@/types/custom-phrase'; import { trySubmitSafe } from '@/utils/form'; import * as styles from './LanguageDetails.module.scss'; +import { hiddenLocalePhraseGroups, hiddenLocalePhrases } from './constants'; import { LanguageEditorContext } from './use-language-editor-context'; +import { createEmptyUiTranslation, flattenTranslation } from './utils'; const emptyUiTranslation = createEmptyUiTranslation(); diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageItem.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageItem.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageItem.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageItem.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageItem.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageItem.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageItem.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageItem.tsx diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageNav.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageNav.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageNav.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageNav.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageNav.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageNav.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/LanguageNav.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/LanguageNav.tsx diff --git a/packages/console/src/pages/SignInExperience/utils/constants.ts b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/constants.ts similarity index 100% rename from packages/console/src/pages/SignInExperience/utils/constants.ts rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/constants.ts diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/index.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/index.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/index.tsx diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/use-language-editor-context.ts b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/use-language-editor-context.ts similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/LanguageEditor/use-language-editor-context.ts rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/use-language-editor-context.ts diff --git a/packages/console/src/pages/SignInExperience/utils/language.ts b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/utils.ts similarity index 100% rename from packages/console/src/pages/SignInExperience/utils/language.ts rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/LanguageEditor/utils.ts diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/ManageLanguageButton.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/ManageLanguageButton.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/Content/components/ManageLanguage/ManageLanguageButton.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/ManageLanguage/ManageLanguageButton.tsx diff --git a/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.module.scss new file mode 100644 index 000000000..b4c5d5478 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.module.scss @@ -0,0 +1,16 @@ +@use '@/scss/underscore' as _; + +.title { + @include _.section-head-1; + color: var(--color-neutral-variant-60); +} + +.manageLanguageButton { + margin-top: _.unit(1); +} + +.defaultLanguageDescription { + padding-top: _.unit(2); + font: var(--font-body-2); + color: var(--color-text-secondary); +} diff --git a/packages/console/src/pages/SignInExperience/tabs/Content/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.tsx similarity index 89% rename from packages/console/src/pages/SignInExperience/tabs/Content/LanguagesForm.tsx rename to packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.tsx index 105ffd3a7..64e93ffc1 100644 --- a/packages/console/src/pages/SignInExperience/tabs/Content/LanguagesForm.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/Content/LanguagesForm/index.tsx @@ -12,10 +12,11 @@ import Switch from '@/ds-components/Switch'; import type { RequestError } from '@/hooks/use-api'; import useUiLanguages from '@/hooks/use-ui-languages'; -import type { SignInExperienceForm } from '../../types'; -import * as styles from '../index.module.scss'; +import type { SignInExperienceForm } from '../../../types'; +import FormSectionTitle from '../../components/FormSectionTitle'; -import ManageLanguageButton from './components/ManageLanguage/ManageLanguageButton'; +import ManageLanguageButton from './ManageLanguage/ManageLanguageButton'; +import * as styles from './index.module.scss'; type Props = { isManageLanguageVisible?: boolean; @@ -47,7 +48,7 @@ function LanguagesForm({ isManageLanguageVisible = false }: Props) { return ( -
{t('sign_in_exp.content.languages.title')}
+ -
{t('sign_in_exp.content.terms_of_use.title')}
+ + {isActive && } - + ); } diff --git a/packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.tsx similarity index 91% rename from packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.tsx index fd0d0a229..5869c0abf 100644 --- a/packages/console/src/pages/SignInExperience/tabs/PasswordPolicy/index.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/PasswordPolicy/index.tsx @@ -9,13 +9,14 @@ import Card from '@/ds-components/Card'; import Checkbox from '@/ds-components/Checkbox/Checkbox'; import FormField from '@/ds-components/FormField'; import RadioGroup, { Radio } from '@/ds-components/RadioGroup'; -import TabWrapper from '@/ds-components/TabWrapper'; import NumericInput from '@/ds-components/TextInput/NumericInput'; import TextLink from '@/ds-components/TextLink'; import Textarea from '@/ds-components/Textarea'; import { type SignInExperienceForm } from '../../types'; -import * as commonStyles from '../index.module.scss'; +import FormFieldDescription from '../components/FormFieldDescription'; +import FormSectionTitle from '../components/FormSectionTitle'; +import SignInExperienceTabWrapper from '../components/SignInExperienceTabWrapper'; import * as styles from './index.module.scss'; @@ -69,14 +70,14 @@ function PasswordPolicy({ isActive }: Props) { }); return ( - + {isActive && ( )} -
{t('password_requirements')}
+ -
+ {t('minimum_length_description')} -
+ -
+ {t('minimum_required_char_types_description', { symbols: PasswordPolicyChecker.symbols, })} -
+ -
{t('password_rejection')}
+ - + ); } diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.module.scss new file mode 100644 index 000000000..65853a158 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.module.scss @@ -0,0 +1,11 @@ +@use '@/scss/underscore' as _; + +.setUpHint { + font: var(--font-body-2); + color: var(--color-text-secondary); + margin-top: _.unit(2); + + .setup { + margin: 0 _.unit(1); + } +} diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/AdvancedOptions.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.tsx similarity index 84% rename from packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/AdvancedOptions.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.tsx index c0d7a5c70..d158f9628 100644 --- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/AdvancedOptions.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/AdvancedOptions/index.tsx @@ -6,8 +6,10 @@ import FormField from '@/ds-components/FormField'; import Switch from '@/ds-components/Switch'; import TextLink from '@/ds-components/TextLink'; -import type { SignInExperienceForm } from '../../types'; -import * as styles from '../index.module.scss'; +import type { SignInExperienceForm } from '../../../types'; +import FormSectionTitle from '../../components/FormSectionTitle'; + +import * as styles from './index.module.scss'; function AdvancedOptions() { const { t } = useTranslation(undefined, { @@ -17,7 +19,7 @@ function AdvancedOptions() { return ( -
{t('title')}
+ -
{t('sign_in_exp.sign_up_and_sign_in.sign_in.title')}
+ -
+ {t('sign_in_exp.sign_up_and_sign_in.sign_in.description')} -
+ diff --git a/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss new file mode 100644 index 000000000..27a3f520a --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.module.scss @@ -0,0 +1,17 @@ +@use '@/scss/underscore' as _; + +.title { + @include _.section-head-1; + color: var(--color-neutral-variant-60); +} + +.socialOnlyDescription { + margin-left: _.unit(1); + color: var(--color-text-secondary); +} + +.selections { + > :not(:first-child) { + margin-top: _.unit(3); + } +} diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.tsx similarity index 91% rename from packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.tsx index 976d41f7e..3b327c505 100644 --- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/SignUpForm.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignUpForm/index.tsx @@ -8,25 +8,25 @@ import FormField from '@/ds-components/FormField'; import Select from '@/ds-components/Select'; import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types'; +import { SignUpIdentifier } from '../../../types'; +import type { SignInExperienceForm } from '../../../types'; +import FormFieldDescription from '../../components/FormFieldDescription'; +import FormSectionTitle from '../../components/FormSectionTitle'; import { signUpIdentifierPhrase, signUpIdentifiers, signUpIdentifiersMapping, } from '../../constants'; -import type { SignInExperienceForm } from '../../types'; -import { SignUpIdentifier } from '../../types'; +import ConnectorSetupWarning from '../components/ConnectorSetupWarning'; import { getSignUpRequiredConnectorTypes, isVerificationRequiredSignUpIdentifiers, -} from '../../utils/identifier'; -import * as styles from '../index.module.scss'; - -import ConnectorSetupWarning from './components/ConnectorSetupWarning'; -import { createSignInMethod, getSignInMethodPasswordCheckState, getSignInMethodVerificationCodeCheckState, -} from './utils'; +} from '../utils'; + +import * as styles from './index.module.scss'; function SignUpForm() { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); @@ -42,10 +42,6 @@ function SignUpForm() { const signUp = watch('signUp'); - if (!signUp) { - return null; - } - const { identifier: signUpIdentifier } = signUp; const isUsernamePasswordSignUp = signUpIdentifier === SignUpIdentifier.Username; @@ -113,11 +109,11 @@ function SignUpForm() { return ( -
{t('sign_in_exp.sign_up_and_sign_in.sign_up.title')}
+ -
+ {t('sign_in_exp.sign_up_and_sign_in.sign_up.identifier_description')} -
+ {signUpIdentifier !== SignUpIdentifier.None && ( -
+ {t('sign_in_exp.sign_up_and_sign_in.sign_up.authentication_description')} -
+
-
- {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.title')} -
- + -
+ {t('sign_in_exp.sign_up_and_sign_in.social_sign_in.description')} -
+ + {isActive && ( )} @@ -22,7 +21,7 @@ function SignUpAndSignIn({ isActive }: Props) { - + ); } diff --git a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/utils.ts b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/utils.ts similarity index 52% rename from packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/utils.ts rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/utils.ts index 139d479d6..61e6a430e 100644 --- a/packages/console/src/pages/SignInExperience/tabs/SignUpAndSignIn/utils.ts +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/utils.ts @@ -1,7 +1,10 @@ -import { SignInIdentifier } from '@logto/schemas'; +import { type ConnectorType, SignInIdentifier } from '@logto/schemas'; -import type { SignUpForm } from '@/pages/SignInExperience/types'; -import { SignUpIdentifier } from '@/pages/SignInExperience/types'; +import type { SignUpForm } from '../../types'; +import { SignUpIdentifier } from '../../types'; +import { signUpIdentifiersMapping } from '../constants'; + +import { identifierRequiredConnectorMapping } from './constants'; export const getSignInMethodPasswordCheckState = ( signInIdentifier: SignInIdentifier, @@ -41,3 +44,19 @@ export const createSignInMethod = (identifier: SignInIdentifier) => ({ verificationCode: identifier !== SignInIdentifier.Username, isPasswordPrimary: true, }); + +export const isVerificationRequiredSignUpIdentifiers = (signUpIdentifier: SignUpIdentifier) => { + const identifiers = signUpIdentifiersMapping[signUpIdentifier]; + + return ( + identifiers.includes(SignInIdentifier.Email) || identifiers.includes(SignInIdentifier.Phone) + ); +}; + +export const getSignUpRequiredConnectorTypes = ( + signUpIdentifier: SignUpIdentifier +): ConnectorType[] => + signUpIdentifiersMapping[signUpIdentifier] + .map((identifier) => identifierRequiredConnectorMapping[identifier]) + // eslint-disable-next-line unicorn/prefer-native-coercion-functions + .filter((connectorType): connectorType is ConnectorType => Boolean(connectorType)); diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/DiffSegment.tsx diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx similarity index 93% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx index 92adb54a7..4de35a3a8 100644 --- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignInDiffSection.tsx @@ -4,12 +4,13 @@ import { detailedDiff } from 'deep-object-diff'; import { useTranslation } from 'react-i18next'; import DynamicT from '@/ds-components/DynamicT'; -import { signInIdentifierPhrase } from '@/pages/SignInExperience/constants'; -import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types'; + +import type { SignInMethod, SignInMethodsObject } from '../../../types'; +import { signInIdentifierPhrase } from '../../constants'; +import { convertToSignInMethodsObject } from '../../utils/form'; import DiffSegment from './DiffSegment'; import * as styles from './index.module.scss'; -import { convertToSignInMethodsObject } from './utils'; type Props = { before: SignInMethod[]; diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx similarity index 91% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx index 1a0953ebb..f799bcca9 100644 --- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx +++ b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SignUpDiffSection.tsx @@ -4,9 +4,10 @@ import { diff } from 'deep-object-diff'; import { useTranslation } from 'react-i18next'; import DynamicT from '@/ds-components/DynamicT'; -import { signUpIdentifierPhrase } from '@/pages/SignInExperience/constants'; -import type { SignUpForm } from '@/pages/SignInExperience/types'; -import { signUpFormDataParser } from '@/pages/SignInExperience/utils/parser'; + +import type { SignUpForm } from '../../../types'; +import { signUpIdentifierPhrase } from '../../constants'; +import { signUpFormDataParser } from '../../utils/parser'; import DiffSegment from './DiffSegment'; import * as styles from './index.module.scss'; diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/SocialTargetsDiffSection.tsx diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/index.tsx diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.module.scss rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/index.tsx rename to packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignInChangePreview/index.tsx diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.module.scss new file mode 100644 index 000000000..6fe3e4477 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.module.scss @@ -0,0 +1,7 @@ +@use '@/scss/underscore' as _; + +.formFieldDescription { + font: var(--font-body-2); + color: var(--color-text-secondary); + margin: _.unit(1) 0 _.unit(2); +} diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.tsx new file mode 100644 index 000000000..1d004c18d --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/FormFieldDescription/index.tsx @@ -0,0 +1,13 @@ +import { type ReactNode } from 'react'; + +import * as styles from './index.module.scss'; + +type Props = { + children: ReactNode; +}; + +function FormFieldDescription({ children }: Props) { + return
{children}
; +} + +export default FormFieldDescription; diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.module.scss new file mode 100644 index 000000000..a38f219b8 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.module.scss @@ -0,0 +1,6 @@ +@use '@/scss/underscore' as _; + +.title { + @include _.section-head-1; + color: var(--color-neutral-variant-60); +} diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.tsx new file mode 100644 index 000000000..ac818da02 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/FormSectionTitle/index.tsx @@ -0,0 +1,19 @@ +import { type TFuncKey } from 'i18next'; + +import DynamicT from '@/ds-components/DynamicT'; + +import * as styles from './index.module.scss'; + +type Props = { + title: TFuncKey<'translation', 'admin_console.sign_in_exp'>; +}; + +function FormSectionTitle({ title }: Props) { + return ( +
+ +
+ ); +} + +export default FormSectionTitle; diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.module.scss new file mode 100644 index 000000000..4b582e25a --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.module.scss @@ -0,0 +1,7 @@ +@use '@/scss/underscore' as _; + +.tabContent { + > :not(:first-child) { + margin-top: _.unit(3); + } +} diff --git a/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.tsx new file mode 100644 index 000000000..774056ee0 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/components/SignInExperienceTabWrapper/index.tsx @@ -0,0 +1,15 @@ +import TabWrapper, { type Props as TabWrapperProps } from '@/ds-components/TabWrapper'; + +import * as styles from './index.module.scss'; + +type Props = Omit; + +function SignInExperienceTabWrapper({ children, ...reset }: Props) { + return ( + + {children} + + ); +} + +export default SignInExperienceTabWrapper; diff --git a/packages/console/src/pages/SignInExperience/constants.ts b/packages/console/src/pages/SignInExperience/PageContent/constants.ts similarity index 69% rename from packages/console/src/pages/SignInExperience/constants.ts rename to packages/console/src/pages/SignInExperience/PageContent/constants.ts index 9cb42e2c7..eb5d8fb4f 100644 --- a/packages/console/src/pages/SignInExperience/constants.ts +++ b/packages/console/src/pages/SignInExperience/PageContent/constants.ts @@ -1,7 +1,7 @@ import type { AdminConsoleKey } from '@logto/phrases'; -import { ConnectorType, SignInIdentifier } from '@logto/schemas'; +import { SignInIdentifier } from '@logto/schemas'; -import { SignUpIdentifier } from './types'; +import { SignUpIdentifier } from '../types'; export const signUpIdentifiers = Object.values(SignUpIdentifier); @@ -15,13 +15,6 @@ export const signUpIdentifiersMapping: { [key in SignUpIdentifier]: SignInIdenti [SignUpIdentifier.None]: [], }; -export const identifierRequiredConnectorMapping: { - [key in SignInIdentifier]?: ConnectorType; -} = { - [SignInIdentifier.Email]: ConnectorType.Email, - [SignInIdentifier.Phone]: ConnectorType.Sms, -}; - type SignInIdentifierPhrase = { [key in SignInIdentifier]: AdminConsoleKey; }; @@ -43,13 +36,3 @@ export const signUpIdentifierPhrase = Object.freeze({ [SignUpIdentifier.EmailOrSms]: 'sign_in_exp.sign_up_and_sign_in.identifiers_email_or_sms', [SignUpIdentifier.None]: 'sign_in_exp.sign_up_and_sign_in.identifiers_none', }) satisfies SignUpIdentifierPhrase; - -type NoConnectorWarningPhrase = { - [key in ConnectorType]: AdminConsoleKey; -}; - -export const noConnectorWarningPhrase = Object.freeze({ - [ConnectorType.Email]: 'sign_in_exp.setup_warning.no_connector_email', - [ConnectorType.Sms]: 'sign_in_exp.setup_warning.no_connector_sms', - [ConnectorType.Social]: 'sign_in_exp.setup_warning.no_connector_social', -}) satisfies NoConnectorWarningPhrase; diff --git a/packages/console/src/pages/SignInExperience/PageContent/index.module.scss b/packages/console/src/pages/SignInExperience/PageContent/index.module.scss new file mode 100644 index 000000000..c2142b351 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/index.module.scss @@ -0,0 +1,36 @@ +@use '@/scss/underscore' as _; + +.tabs { + margin: _.unit(4) 0; +} + +.content { + flex: 1; + display: flex; + flex-direction: column; + + .contentTop { + display: flex; + flex: 1; + margin-bottom: _.unit(6); + + &.withSubmitActionBar { + margin-bottom: _.unit(3); + } + + > * { + flex: 1; + min-width: 510px; + } + + .form { + margin-right: _.unit(3); + } + + .preview { + position: sticky; + top: _.unit(4); + align-self: flex-start; + } + } +} diff --git a/packages/console/src/pages/SignInExperience/PageContent/index.tsx b/packages/console/src/pages/SignInExperience/PageContent/index.tsx new file mode 100644 index 000000000..c6e886a63 --- /dev/null +++ b/packages/console/src/pages/SignInExperience/PageContent/index.tsx @@ -0,0 +1,171 @@ +import { type SignInExperience } from '@logto/schemas'; +import classNames from 'classnames'; +import { useState } from 'react'; +import { FormProvider, useForm } from 'react-hook-form'; +import { toast } from 'react-hot-toast'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; + +import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar'; +import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; +import ConfirmModal from '@/ds-components/ConfirmModal'; +import TabNav, { TabNavItem } from '@/ds-components/TabNav'; +import useApi from '@/hooks/use-api'; +import useConfigs from '@/hooks/use-configs'; +import useTenantPathname from '@/hooks/use-tenant-pathname'; +import { trySubmitSafe } from '@/utils/form'; + +import Preview from '../components/Preview'; +import usePreviewConfigs from '../hooks/use-preview-configs'; +import { SignInExperienceTab } from '../types'; +import { type SignInExperienceForm } from '../types'; + +import Branding from './Branding'; +import Content from './Content'; +import PasswordPolicy from './PasswordPolicy'; +import SignUpAndSignIn from './SignUpAndSignIn'; +import SignUpAndSignInChangePreview from './SignUpAndSignInChangePreview'; +import * as styles from './index.module.scss'; +import { + getBrandingErrorCount, + getSignUpAndSignInErrorCount, + getContentErrorCount, + hasSignUpAndSignInConfigChanged, +} from './utils/form'; +import { sieFormDataParser } from './utils/parser'; + +const PageTab = TabNavItem<`../${SignInExperienceTab}`>; + +type Props = { + data: SignInExperience; + onSignInExperienceUpdated: (data: SignInExperience) => void; +}; + +function PageContent({ data, onSignInExperienceUpdated }: Props) { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { tab } = useParams(); + const [isSaving, setIsSaving] = useState(false); + + const { updateConfigs } = useConfigs(); + const { getPathname } = useTenantPathname(); + + const [dataToCompare, setDataToCompare] = useState(); + + const methods = useForm({ + defaultValues: sieFormDataParser.fromSignInExperience(data), + }); + + const { + reset, + handleSubmit, + getValues, + watch, + formState: { isDirty, errors }, + } = methods; + const api = useApi(); + const formData = watch(); + + const previewConfigs = usePreviewConfigs(formData, isDirty, data); + + const saveData = async () => { + setIsSaving(true); + + try { + const updatedData = await api + .patch('api/sign-in-exp', { + json: sieFormDataParser.toUpdateSignInExperienceData(getValues()), + }) + .json(); + + reset(sieFormDataParser.fromSignInExperience(updatedData)); + onSignInExperienceUpdated(updatedData); + setDataToCompare(undefined); + await updateConfigs({ signInExperienceCustomized: true }); + toast.success(t('general.saved')); + } finally { + setIsSaving(false); + } + }; + + const onSubmit = handleSubmit( + trySubmitSafe(async (formData: SignInExperienceForm) => { + if (isSaving) { + return; + } + + const formatted = sieFormDataParser.toSignInExperience(formData); + + // Sign-in methods changed, need to show confirm modal first. + if (!hasSignUpAndSignInConfigChanged(data, formatted)) { + setDataToCompare(formatted); + + return; + } + + await saveData(); + }) + ); + + return ( + <> + + + {t('sign_in_exp.tabs.branding')} + + + {t('sign_in_exp.tabs.sign_up_and_sign_in')} + + + {t('sign_in_exp.tabs.content')} + + {t('sign_in_exp.tabs.password_policy')} + +
+
+ +
+ + + + + +
+ {formData.id && ( + + )} +
+ +
+ { + setDataToCompare(undefined); + }} + onConfirm={async () => { + await saveData(); + }} + > + {dataToCompare && } + + + + ); +} + +export default PageContent; diff --git a/packages/console/src/pages/SignInExperience/utils/form.ts b/packages/console/src/pages/SignInExperience/PageContent/utils/form.ts similarity index 58% rename from packages/console/src/pages/SignInExperience/utils/form.ts rename to packages/console/src/pages/SignInExperience/PageContent/utils/form.ts index 857016410..f837f9779 100644 --- a/packages/console/src/pages/SignInExperience/utils/form.ts +++ b/packages/console/src/pages/SignInExperience/PageContent/utils/form.ts @@ -1,13 +1,29 @@ -import type { SignInExperience } from '@logto/schemas'; +import type { SignInExperience, SignUp } from '@logto/schemas'; +import { diff } from 'deep-object-diff'; import type { DeepRequired, FieldErrorsImpl } from 'react-hook-form'; -import { - hasSignInMethodsChanged, - hasSignUpSettingsChanged, - hasSocialTargetsChanged, -} from '../components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utils'; -import { SignUpIdentifier } from '../types'; -import type { SignInExperienceForm } from '../types'; +import type { SignInExperienceForm, SignInMethod, SignInMethodsObject } from '../../types'; +import { SignUpIdentifier } from '../../types'; + +export const convertToSignInMethodsObject = (signInMethods: SignInMethod[]): SignInMethodsObject => + signInMethods.reduce( + (methodsObject, { identifier, password, verificationCode }) => ({ + ...methodsObject, + [identifier]: { password, verificationCode }, + }), + // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, no-restricted-syntax + {} as SignInMethodsObject + ); + +const hasSignUpSettingsChanged = (before: SignUp, after: SignUp) => + Object.keys(diff(before, after)).length > 0; + +const hasSignInMethodsChanged = (before: SignInMethod[], after: SignInMethod[]) => + Object.keys(diff(convertToSignInMethodsObject(before), convertToSignInMethodsObject(after))) + .length > 0; + +const hasSocialTargetsChanged = (before: string[], after: string[]) => + Object.keys(diff(before.slice().sort(), after.slice().sort())).length > 0; export const hasSignUpAndSignInConfigChanged = ( before: SignInExperience, @@ -38,15 +54,12 @@ export const getSignUpAndSignInErrorCount = ( errors: FieldErrorsImpl>, formData: SignInExperienceForm ) => { - const signUpIdentifier = formData.signUp?.identifier; + const signUpIdentifier = formData.signUp.identifier; /** * Note: we treat the `emailOrSms` sign-up identifier as 2 errors when it's invalid. */ - const signUpIdentifierRelatedErrorCount = signUpIdentifier - ? signUpIdentifier === SignUpIdentifier.EmailOrSms - ? 2 - : 1 - : 0; + const signUpIdentifierRelatedErrorCount = + signUpIdentifier === SignUpIdentifier.EmailOrSms ? 2 : 1; const { signUp, signIn } = errors; diff --git a/packages/console/src/pages/SignInExperience/utils/parser.ts b/packages/console/src/pages/SignInExperience/PageContent/utils/parser.ts similarity index 79% rename from packages/console/src/pages/SignInExperience/utils/parser.ts rename to packages/console/src/pages/SignInExperience/PageContent/utils/parser.ts index 30e16e740..c0c73b708 100644 --- a/packages/console/src/pages/SignInExperience/utils/parser.ts +++ b/packages/console/src/pages/SignInExperience/PageContent/utils/parser.ts @@ -1,15 +1,29 @@ import { passwordPolicyGuard } from '@logto/core-kit'; -import { SignInMode, type SignInExperience, type SignUp, SignInIdentifier } from '@logto/schemas'; -import { conditional } from '@silverhand/essentials'; +import { + SignInMode, + type SignInExperience, + type SignUp, + type SignInIdentifier, +} from '@logto/schemas'; +import { conditional, isSameArray } from '@silverhand/essentials'; -import { signUpIdentifiersMapping } from '../constants'; import { type UpdateSignInExperienceData, type SignInExperienceForm, type SignUpForm, -} from '../types'; + type SignUpIdentifier, +} from '../../types'; +import { signUpIdentifiersMapping } from '../constants'; -import { mapIdentifiersToSignUpIdentifier } from './identifier'; +const mapIdentifiersToSignUpIdentifier = (identifiers: SignInIdentifier[]): SignUpIdentifier => { + for (const [signUpIdentifier, mappedIdentifiers] of Object.entries(signUpIdentifiersMapping)) { + if (isSameArray(identifiers, mappedIdentifiers)) { + // eslint-disable-next-line no-restricted-syntax + return signUpIdentifier as SignUpIdentifier; + } + } + throw new Error('Invalid identifiers in the sign up settings.'); +}; export const signUpFormDataParser = { fromSignUp: (data: SignUp): SignUpForm => { @@ -72,13 +86,7 @@ export const sieFormDataParser = { logoUrl: conditional(branding.logoUrl?.length && branding.logoUrl), darkLogoUrl: conditional(branding.darkLogoUrl?.length && branding.darkLogoUrl), }, - signUp: signUp - ? signUpFormDataParser.toSignUp(signUp) - : { - identifiers: [SignInIdentifier.Username], - password: true, - verify: false, - }, + signUp: signUpFormDataParser.toSignUp(signUp), signInMode: createAccountEnabled ? SignInMode.SignInAndRegister : SignInMode.SignIn, customCss: customCss?.length ? customCss : null, passwordPolicy: { diff --git a/packages/console/src/pages/SignInExperience/components/Skeleton/index.module.scss b/packages/console/src/pages/SignInExperience/Skeleton/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/components/Skeleton/index.module.scss rename to packages/console/src/pages/SignInExperience/Skeleton/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx b/packages/console/src/pages/SignInExperience/Skeleton/index.tsx similarity index 80% rename from packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx rename to packages/console/src/pages/SignInExperience/Skeleton/index.tsx index ed07a5a87..1d7566e4b 100644 --- a/packages/console/src/pages/SignInExperience/components/Skeleton/index.tsx +++ b/packages/console/src/pages/SignInExperience/Skeleton/index.tsx @@ -3,7 +3,8 @@ import classNames from 'classnames'; import CardTitle from '@/ds-components/CardTitle'; import Spacer from '@/ds-components/Spacer'; -import * as pageStyles from '../../index.module.scss'; +import * as pageContentStyles from '../PageContent/index.module.scss'; +import * as pageStyles from '../index.module.scss'; import * as styles from './index.module.scss'; @@ -15,10 +16,10 @@ function Skeleton() { subtitle="sign_in_exp.description" className={pageStyles.cardTitle} /> -
-
-
-
+
+
+
+
@@ -30,7 +31,7 @@ function Skeleton() {
-
+
diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss b/packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.module.scss rename to packages/console/src/pages/SignInExperience/Welcome/GuideModal.module.scss diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx b/packages/console/src/pages/SignInExperience/Welcome/GuideModal.tsx similarity index 91% rename from packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx rename to packages/console/src/pages/SignInExperience/Welcome/GuideModal.tsx index 31c7b677d..a236b2153 100644 --- a/packages/console/src/pages/SignInExperience/components/Welcome/GuideModal.tsx +++ b/packages/console/src/pages/SignInExperience/Welcome/GuideModal.tsx @@ -17,13 +17,13 @@ import useUserPreferences from '@/hooks/use-user-preferences'; import * as modalStyles from '@/scss/modal.module.scss'; import { trySubmitSafe } from '@/utils/form'; -import usePreviewConfigs from '../../hooks/use-preview-configs'; -import BrandingForm from '../../tabs/Branding/BrandingForm'; -import LanguagesForm from '../../tabs/Content/LanguagesForm'; -import TermsForm from '../../tabs/Content/TermsForm'; -import type { SignInExperienceForm } from '../../types'; -import { sieFormDataParser } from '../../utils/parser'; -import Preview from '../Preview'; +import BrandingForm from '../PageContent/Branding/BrandingForm'; +import LanguagesForm from '../PageContent/Content/LanguagesForm'; +import TermsForm from '../PageContent/Content/TermsForm'; +import { sieFormDataParser } from '../PageContent/utils/parser'; +import Preview from '../components/Preview'; +import usePreviewConfigs from '../hooks/use-preview-configs'; +import type { SignInExperienceForm } from '../types'; import * as styles from './GuideModal.module.scss'; diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss b/packages/console/src/pages/SignInExperience/Welcome/index.module.scss similarity index 100% rename from packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss rename to packages/console/src/pages/SignInExperience/Welcome/index.module.scss diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx b/packages/console/src/pages/SignInExperience/Welcome/index.tsx similarity index 100% rename from packages/console/src/pages/SignInExperience/components/Welcome/index.tsx rename to packages/console/src/pages/SignInExperience/Welcome/index.tsx diff --git a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utils.ts b/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utils.ts deleted file mode 100644 index 32f78db5e..000000000 --- a/packages/console/src/pages/SignInExperience/components/SignUpAndSignInChangePreview/SignUpAndSignInDiffSection/utils.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type { SignUp } from '@logto/schemas'; -import { diff } from 'deep-object-diff'; - -import type { SignInMethod, SignInMethodsObject } from '@/pages/SignInExperience/types'; - -export const hasSignUpSettingsChanged = (before: SignUp, after: SignUp) => - Object.keys(diff(before, after)).length > 0; - -export const convertToSignInMethodsObject = (signInMethods: SignInMethod[]): SignInMethodsObject => - signInMethods.reduce( - (methodsObject, { identifier, password, verificationCode }) => ({ - ...methodsObject, - [identifier]: { password, verificationCode }, - }), - // eslint-disable-next-line @typescript-eslint/prefer-reduce-type-parameter, no-restricted-syntax - {} as SignInMethodsObject - ); - -export const hasSignInMethodsChanged = (before: SignInMethod[], after: SignInMethod[]) => - Object.keys(diff(convertToSignInMethodsObject(before), convertToSignInMethodsObject(after))) - .length > 0; - -export const hasSocialTargetsChanged = (before: string[], after: string[]) => - Object.keys(diff(before.slice().sort(), after.slice().sort())).length > 0; diff --git a/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts b/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts index a063622f4..2afb3f893 100644 --- a/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts +++ b/packages/console/src/pages/SignInExperience/hooks/use-preview-configs.ts @@ -3,8 +3,8 @@ import { useEffect, useState, useMemo } from 'react'; import useDebounce from '@/hooks/use-debounce'; +import { sieFormDataParser } from '../PageContent/utils/parser'; import type { SignInExperienceForm } from '../types'; -import { sieFormDataParser } from '../utils/parser'; const usePreviewConfigs = ( formData: SignInExperienceForm, diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx index 2eedd9a43..589f97e10 100644 --- a/packages/console/src/pages/SignInExperience/index.tsx +++ b/packages/console/src/pages/SignInExperience/index.tsx @@ -1,56 +1,20 @@ import { withAppInsights } from '@logto/app-insights/react'; import type { SignInExperience as SignInExperienceType } from '@logto/schemas'; -import classNames from 'classnames'; import type { ReactNode } from 'react'; -import { useEffect, useMemo, useState } from 'react'; -import { FormProvider, useForm } from 'react-hook-form'; -import { toast } from 'react-hot-toast'; -import { useTranslation } from 'react-i18next'; -import { useParams } from 'react-router-dom'; import useSWR from 'swr'; import RequestDataError from '@/components/RequestDataError'; -import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar'; -import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; import { isCloud } from '@/consts/env'; import CardTitle from '@/ds-components/CardTitle'; -import ConfirmModal from '@/ds-components/ConfirmModal'; -import TabNav, { TabNavItem } from '@/ds-components/TabNav'; import type { RequestError } from '@/hooks/use-api'; -import useApi from '@/hooks/use-api'; import useConfigs from '@/hooks/use-configs'; -import useTenantPathname from '@/hooks/use-tenant-pathname'; import useUiLanguages from '@/hooks/use-ui-languages'; import useUserAssetsService from '@/hooks/use-user-assets-service'; -import { trySubmitSafe } from '@/utils/form'; -import Preview from './components/Preview'; -import SignUpAndSignInChangePreview from './components/SignUpAndSignInChangePreview'; -import Skeleton from './components/Skeleton'; -import Welcome from './components/Welcome'; -import usePreviewConfigs from './hooks/use-preview-configs'; +import PageContent from './PageContent'; +import Skeleton from './Skeleton'; +import Welcome from './Welcome'; import * as styles from './index.module.scss'; -import Branding from './tabs/Branding'; -import Content from './tabs/Content'; -import PasswordPolicy from './tabs/PasswordPolicy'; -import SignUpAndSignIn from './tabs/SignUpAndSignIn'; -import type { SignInExperienceForm } from './types'; -import { - hasSignUpAndSignInConfigChanged, - getBrandingErrorCount, - getContentErrorCount, - getSignUpAndSignInErrorCount, -} from './utils/form'; -import { sieFormDataParser } from './utils/parser'; - -export enum SignInExperienceTab { - Branding = 'branding', - SignUpAndSignIn = 'sign-up-and-sign-in', - Content = 'content', - PasswordPolicy = 'password-policy', -} - -const PageTab = TabNavItem<`../${SignInExperienceTab}`>; type PageWrapperProps = { children: ReactNode; @@ -70,26 +34,25 @@ function PageWrapper({ children }: PageWrapperProps) { } function SignInExperience() { - const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); - const { tab } = useParams(); - const { data, error, mutate } = useSWR('api/sign-in-exp'); - const isLoadingSignInExperience = !data && !error; + const { + data, + error, + isLoading: isLoadingSignInExperience, + mutate, + } = useSWR('api/sign-in-exp'); + const { isLoading: isUserAssetsServiceLoading } = useUserAssetsService(); - const [isSaving, setIsSaving] = useState(false); const { configs, error: configsError, - updateConfigs, isLoading: isLoadingConfig, mutate: mutateConfigs, } = useConfigs(); - const { getPathname } = useTenantPathname(); const shouldDisplayWelcome = !isCloud && !configs?.signInExperienceCustomized; const { error: languageError, isLoading: isLoadingLanguages } = useUiLanguages(); - const [dataToCompare, setDataToCompare] = useState(); const requestError = error ?? configsError ?? languageError; @@ -99,74 +62,6 @@ function SignInExperience() { isLoadingLanguages || isUserAssetsServiceLoading; - const methods = useForm(); - const { - reset, - handleSubmit, - getValues, - watch, - formState: { isDirty, errors }, - } = methods; - const api = useApi(); - const formData = watch(); - - const previewConfigs = usePreviewConfigs(formData, isDirty, data); - - const defaultFormData = useMemo(() => { - if (!data) { - return; - } - - return sieFormDataParser.fromSignInExperience(data); - }, [data]); - - useEffect(() => { - if (isDirty) { - return; - } - if (defaultFormData) { - reset(defaultFormData); - } - }, [reset, defaultFormData, isDirty]); - - const saveData = async () => { - setIsSaving(true); - - try { - const updatedData = await api - .patch('api/sign-in-exp', { - json: sieFormDataParser.toUpdateSignInExperienceData(getValues()), - }) - .json(); - reset(sieFormDataParser.fromSignInExperience(updatedData)); - void mutate(updatedData); - setDataToCompare(undefined); - await updateConfigs({ signInExperienceCustomized: true }); - toast.success(t('general.saved')); - } finally { - setIsSaving(false); - } - }; - - const onSubmit = handleSubmit( - trySubmitSafe(async (formData: SignInExperienceForm) => { - if (!data || isSaving) { - return; - } - - const formatted = sieFormDataParser.toSignInExperience(formData); - - // Sign-in methods changed, need to show confirm modal first. - if (!hasSignUpAndSignInConfigChanged(data, formatted)) { - setDataToCompare(formatted); - - return; - } - - await saveData(); - }) - ); - if (isLoading) { return ; } @@ -201,66 +96,7 @@ function SignInExperience() { return ( - - - {t('sign_in_exp.tabs.branding')} - - - {t('sign_in_exp.tabs.sign_up_and_sign_in')} - - - {t('sign_in_exp.tabs.content')} - - {t('sign_in_exp.tabs.password_policy')} - - {data && defaultFormData && ( -
-
- -
- - - - - -
- {formData.id && ( - - )} -
- -
- )} - {data && ( - { - setDataToCompare(undefined); - }} - onConfirm={async () => { - await saveData(); - }} - > - {dataToCompare && } - - )} - + {data && } ); } diff --git a/packages/console/src/pages/SignInExperience/tabs/index.module.scss b/packages/console/src/pages/SignInExperience/tabs/index.module.scss deleted file mode 100644 index 85ade0c78..000000000 --- a/packages/console/src/pages/SignInExperience/tabs/index.module.scss +++ /dev/null @@ -1,69 +0,0 @@ -@use '@/scss/underscore' as _; - -.tabContent { - > :not(:first-child) { - margin-top: _.unit(3); - } -} - -.title { - @include _.section-head-1; - color: var(--color-neutral-variant-60); -} - -.formFieldDescription { - font: var(--font-body-2); - color: var(--color-text-secondary); - margin: _.unit(1) 0 _.unit(2); -} - -.socialOnlyDescription { - margin-left: _.unit(1); - color: var(--color-text-secondary); -} - -.selections { - > :not(:first-child) { - margin-top: _.unit(3); - } -} - -.primaryTag { - color: var(--color-text-secondary); -} - -.method { - margin-top: _.unit(3); -} - -.primarySocial { - margin-top: _.unit(2); -} - -.darkModeTip { - display: flex; - align-items: baseline; - font: var(--font-body-2); - color: var(--color-text-secondary); - margin-top: _.unit(1); -} - -.manageLanguageButton { - margin-top: _.unit(1); -} - -.defaultLanguageDescription { - padding-top: _.unit(2); - font: var(--font-body-2); - color: var(--color-text-secondary); -} - -.setUpHint { - font: var(--font-body-2); - color: var(--color-text-secondary); - margin-top: _.unit(2); - - .setup { - margin: 0 _.unit(1); - } -} diff --git a/packages/console/src/pages/SignInExperience/types.ts b/packages/console/src/pages/SignInExperience/types.ts index 53e13c6b5..0a3a1a943 100644 --- a/packages/console/src/pages/SignInExperience/types.ts +++ b/packages/console/src/pages/SignInExperience/types.ts @@ -1,5 +1,12 @@ import { type PasswordPolicy } from '@logto/core-kit'; -import type { SignInExperience, SignInIdentifier, SignUp } from '@logto/schemas'; +import { type SignUp, type SignInExperience, type SignInIdentifier } from '@logto/schemas'; + +export enum SignInExperienceTab { + Branding = 'branding', + SignUpAndSignIn = 'sign-up-and-sign-in', + Content = 'content', + PasswordPolicy = 'password-policy', +} export enum SignUpIdentifier { Email = 'email', @@ -18,7 +25,7 @@ export type SignInExperienceForm = Omit< 'signUp' | 'customCss' | 'passwordPolicy' > & { customCss?: string; // Code editor components can not properly handle null value, manually transform null to undefined instead. - signUp?: SignUpForm; + signUp: SignUpForm; /** The parsed password policy object. All properties are required. */ passwordPolicy: PasswordPolicy & { /** diff --git a/packages/console/src/pages/SignInExperience/utils/identifier.ts b/packages/console/src/pages/SignInExperience/utils/identifier.ts deleted file mode 100644 index f92248dfd..000000000 --- a/packages/console/src/pages/SignInExperience/utils/identifier.ts +++ /dev/null @@ -1,34 +0,0 @@ -import type { ConnectorType } from '@logto/schemas'; -import { SignInIdentifier } from '@logto/schemas'; -import { isSameArray } from '@silverhand/essentials'; - -import { identifierRequiredConnectorMapping, signUpIdentifiersMapping } from '../constants'; -import type { SignUpIdentifier } from '../types'; - -export const isVerificationRequiredSignUpIdentifiers = (signUpIdentifier: SignUpIdentifier) => { - const identifiers = signUpIdentifiersMapping[signUpIdentifier]; - - return ( - identifiers.includes(SignInIdentifier.Email) || identifiers.includes(SignInIdentifier.Phone) - ); -}; - -export const mapIdentifiersToSignUpIdentifier = ( - identifiers: SignInIdentifier[] -): SignUpIdentifier => { - for (const [signUpIdentifier, mappedIdentifiers] of Object.entries(signUpIdentifiersMapping)) { - if (isSameArray(identifiers, mappedIdentifiers)) { - // eslint-disable-next-line no-restricted-syntax - return signUpIdentifier as SignUpIdentifier; - } - } - throw new Error('Invalid identifiers in the sign up settings.'); -}; - -export const getSignUpRequiredConnectorTypes = ( - signUpIdentifier: SignUpIdentifier -): ConnectorType[] => - signUpIdentifiersMapping[signUpIdentifier] - .map((identifier) => identifierRequiredConnectorMapping[identifier]) - // eslint-disable-next-line unicorn/prefer-native-coercion-functions - .filter((connectorType): connectorType is ConnectorType => Boolean(connectorType));