From 465c7a447a7bf14ae4cc2e73fc3d0dfbaa18be91 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Tue, 23 Apr 2024 10:10:31 +0800 Subject: [PATCH] style(experience): fix the terms of use link style (#5771) fix the terms of use link style in confirm modal --- .../src/components/TermsLinks/index.module.scss | 1 - packages/experience/src/components/TermsLinks/index.tsx | 9 +++++---- .../index.module.scss | 0 .../index.tsx | 4 ++-- .../intext.test.tsx | 0 .../TermsAndPrivacyConfirmModalContent/index.tsx | 5 ++++- .../src/containers/TermsAndPrivacyLinks/index.tsx | 1 + packages/experience/src/hooks/use-terms.ts | 4 ++-- .../src/pages/Register/IdentifierRegisterForm/index.tsx | 6 +++--- packages/experience/src/pages/Register/index.tsx | 5 +++-- 10 files changed, 20 insertions(+), 15 deletions(-) rename packages/experience/src/containers/{TermsAndPrivacy => TermsAndPrivacyCheckbox}/index.module.scss (100%) rename packages/experience/src/containers/{TermsAndPrivacy => TermsAndPrivacyCheckbox}/index.tsx (93%) rename packages/experience/src/containers/{TermsAndPrivacy => TermsAndPrivacyCheckbox}/intext.test.tsx (100%) rename packages/experience/src/containers/{TermsAndPrivacy => }/TermsAndPrivacyConfirmModalContent/index.tsx (75%) diff --git a/packages/experience/src/components/TermsLinks/index.module.scss b/packages/experience/src/components/TermsLinks/index.module.scss index 08f065072..1d65dd230 100644 --- a/packages/experience/src/components/TermsLinks/index.module.scss +++ b/packages/experience/src/components/TermsLinks/index.module.scss @@ -2,7 +2,6 @@ .link { - color: var(--color-type-primary); display: inline; } diff --git a/packages/experience/src/components/TermsLinks/index.tsx b/packages/experience/src/components/TermsLinks/index.tsx index 4e85decf7..3922539dd 100644 --- a/packages/experience/src/components/TermsLinks/index.tsx +++ b/packages/experience/src/components/TermsLinks/index.tsx @@ -1,17 +1,18 @@ import { useTranslation } from 'react-i18next'; -import TextLink from '@/components/TextLink'; +import TextLink, { type Props as TextLinkProps } from '@/components/TextLink'; import * as styles from './index.module.scss'; type Props = { + readonly linkType?: TextLinkProps['type']; // eslint-disable-next-line react/boolean-prop-naming readonly inline?: boolean; readonly termsOfUseUrl?: string; readonly privacyPolicyUrl?: string; }; -const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => { +const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl, linkType = 'secondary' }: Props) => { const { t } = useTranslation(); return ( @@ -21,7 +22,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => { className={styles.link} text="description.terms_of_use" href={termsOfUseUrl} - type="secondary" + type={linkType} target="_blank" onClick={(event) => { event.stopPropagation(); @@ -35,7 +36,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => { className={styles.link} text="description.privacy_policy" href={privacyPolicyUrl} - type="secondary" + type={linkType} target="_blank" onClick={(event) => { event.stopPropagation(); diff --git a/packages/experience/src/containers/TermsAndPrivacy/index.module.scss b/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss similarity index 100% rename from packages/experience/src/containers/TermsAndPrivacy/index.module.scss rename to packages/experience/src/containers/TermsAndPrivacyCheckbox/index.module.scss diff --git a/packages/experience/src/containers/TermsAndPrivacy/index.tsx b/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.tsx similarity index 93% rename from packages/experience/src/containers/TermsAndPrivacy/index.tsx rename to packages/experience/src/containers/TermsAndPrivacyCheckbox/index.tsx index 64b86fd0f..424f2078a 100644 --- a/packages/experience/src/containers/TermsAndPrivacy/index.tsx +++ b/packages/experience/src/containers/TermsAndPrivacyCheckbox/index.tsx @@ -13,7 +13,7 @@ type Props = { readonly className?: string; }; -const TermsAndPrivacy = ({ className }: Props) => { +const TermsAndPrivacyCheckbox = ({ className }: Props) => { const { termsAgreement, setTermsAgreement, termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } = useTerms(); const { t } = useTranslation(); @@ -57,4 +57,4 @@ const TermsAndPrivacy = ({ className }: Props) => { ); }; -export default TermsAndPrivacy; +export default TermsAndPrivacyCheckbox; diff --git a/packages/experience/src/containers/TermsAndPrivacy/intext.test.tsx b/packages/experience/src/containers/TermsAndPrivacyCheckbox/intext.test.tsx similarity index 100% rename from packages/experience/src/containers/TermsAndPrivacy/intext.test.tsx rename to packages/experience/src/containers/TermsAndPrivacyCheckbox/intext.test.tsx diff --git a/packages/experience/src/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent/index.tsx b/packages/experience/src/containers/TermsAndPrivacyConfirmModalContent/index.tsx similarity index 75% rename from packages/experience/src/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent/index.tsx rename to packages/experience/src/containers/TermsAndPrivacyConfirmModalContent/index.tsx index 387b8db3d..fda8601e9 100644 --- a/packages/experience/src/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent/index.tsx +++ b/packages/experience/src/containers/TermsAndPrivacyConfirmModalContent/index.tsx @@ -1,10 +1,12 @@ import { conditional } from '@silverhand/essentials'; import { useContext } from 'react'; -import { useTranslation, Trans } from 'react-i18next'; +import { Trans, useTranslation } from 'react-i18next'; import PageContext from '@/Providers/PageContextProvider/PageContext'; import TermsLinks from '@/components/TermsLinks'; +// Used by useTerms hook to display the terms and privacy policy confirmation modal +// This component should be used as the ModalContent prop in the useConfirmModal hook const TermsAndPrivacyConfirmModalContent = () => { const { experienceSettings } = useContext(PageContext); const { termsOfUseUrl, privacyPolicyUrl } = experienceSettings ?? {}; @@ -17,6 +19,7 @@ const TermsAndPrivacyConfirmModalContent = () => { link: ( diff --git a/packages/experience/src/containers/TermsAndPrivacyLinks/index.tsx b/packages/experience/src/containers/TermsAndPrivacyLinks/index.tsx index c2223da47..dfe093e9e 100644 --- a/packages/experience/src/containers/TermsAndPrivacyLinks/index.tsx +++ b/packages/experience/src/containers/TermsAndPrivacyLinks/index.tsx @@ -5,6 +5,7 @@ type Props = { readonly className?: string; }; +// For sign-in page displaying terms and privacy links use only. No user interaction is needed. const TermsAndPrivacyLinks = ({ className }: Props) => { const { termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } = useTerms(); diff --git a/packages/experience/src/hooks/use-terms.ts b/packages/experience/src/hooks/use-terms.ts index f250a945c..ca873a600 100644 --- a/packages/experience/src/hooks/use-terms.ts +++ b/packages/experience/src/hooks/use-terms.ts @@ -1,8 +1,8 @@ import { conditional } from '@silverhand/essentials'; -import { useContext, useCallback, useMemo } from 'react'; +import { useCallback, useContext, useMemo } from 'react'; import PageContext from '@/Providers/PageContextProvider/PageContext'; -import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent'; +import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacyConfirmModalContent'; import { useConfirmModal } from './use-confirm-modal'; diff --git a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx index dd7fe6ac8..96bfb20e4 100644 --- a/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx +++ b/packages/experience/src/pages/Register/IdentifierRegisterForm/index.tsx @@ -1,7 +1,7 @@ import type { SignInIdentifier } from '@logto/schemas'; import classNames from 'classnames'; import { useCallback, useEffect } from 'react'; -import { useForm, Controller } from 'react-hook-form'; +import { Controller, useForm } from 'react-hook-form'; import { useTranslation } from 'react-i18next'; import LockIcon from '@/assets/icons/lock.svg'; @@ -9,7 +9,7 @@ import Button from '@/components/Button'; import ErrorMessage from '@/components/ErrorMessage'; import { SmartInputField } from '@/components/InputFields'; import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField'; -import TermsAndPrivacy from '@/containers/TermsAndPrivacy'; +import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox'; import useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch'; import useTerms from '@/hooks/use-terms'; import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form'; @@ -130,7 +130,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props) * Form rerender will trigger autofill. * If the autofill value is SSO enabled, it will always show SSO form. */} - diff --git a/packages/experience/src/pages/Register/index.tsx b/packages/experience/src/pages/Register/index.tsx index 0a9302bc4..99f3ae890 100644 --- a/packages/experience/src/pages/Register/index.tsx +++ b/packages/experience/src/pages/Register/index.tsx @@ -9,7 +9,7 @@ import SingleSignOnFormModeContext from '@/Providers/SingleSignOnFormModeContext import Divider from '@/components/Divider'; import TextLink from '@/components/TextLink'; import SocialSignInList from '@/containers/SocialSignInList'; -import TermsAndPrivacy from '@/containers/TermsAndPrivacy'; +import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox'; import { useSieMethods } from '@/hooks/use-sie'; import ErrorPage from '../ErrorPage'; @@ -79,9 +79,10 @@ const Register = () => { {signUpMethods.length > 0 && ( )} + {/* Social sign-in methods only */} {signUpMethods.length === 0 && socialConnectors.length > 0 && ( <> - + )}