mirror of
https://github.com/logto-io/logto.git
synced 2024-12-16 20:26:19 -05:00
style(experience): fix the terms of use link style (#5771)
fix the terms of use link style in confirm modal
This commit is contained in:
parent
9bece65d91
commit
465c7a447a
10 changed files with 20 additions and 15 deletions
|
@ -2,7 +2,6 @@
|
||||||
|
|
||||||
|
|
||||||
.link {
|
.link {
|
||||||
color: var(--color-type-primary);
|
|
||||||
display: inline;
|
display: inline;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,17 +1,18 @@
|
||||||
import { useTranslation } from 'react-i18next';
|
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';
|
import * as styles from './index.module.scss';
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
|
readonly linkType?: TextLinkProps['type'];
|
||||||
// eslint-disable-next-line react/boolean-prop-naming
|
// eslint-disable-next-line react/boolean-prop-naming
|
||||||
readonly inline?: boolean;
|
readonly inline?: boolean;
|
||||||
readonly termsOfUseUrl?: string;
|
readonly termsOfUseUrl?: string;
|
||||||
readonly privacyPolicyUrl?: string;
|
readonly privacyPolicyUrl?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
|
const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl, linkType = 'secondary' }: Props) => {
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
@ -21,7 +22,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
|
||||||
className={styles.link}
|
className={styles.link}
|
||||||
text="description.terms_of_use"
|
text="description.terms_of_use"
|
||||||
href={termsOfUseUrl}
|
href={termsOfUseUrl}
|
||||||
type="secondary"
|
type={linkType}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
@ -35,7 +36,7 @@ const TermsLinks = ({ inline, termsOfUseUrl, privacyPolicyUrl }: Props) => {
|
||||||
className={styles.link}
|
className={styles.link}
|
||||||
text="description.privacy_policy"
|
text="description.privacy_policy"
|
||||||
href={privacyPolicyUrl}
|
href={privacyPolicyUrl}
|
||||||
type="secondary"
|
type={linkType}
|
||||||
target="_blank"
|
target="_blank"
|
||||||
onClick={(event) => {
|
onClick={(event) => {
|
||||||
event.stopPropagation();
|
event.stopPropagation();
|
||||||
|
|
|
@ -13,7 +13,7 @@ type Props = {
|
||||||
readonly className?: string;
|
readonly className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const TermsAndPrivacy = ({ className }: Props) => {
|
const TermsAndPrivacyCheckbox = ({ className }: Props) => {
|
||||||
const { termsAgreement, setTermsAgreement, termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } =
|
const { termsAgreement, setTermsAgreement, termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } =
|
||||||
useTerms();
|
useTerms();
|
||||||
const { t } = useTranslation();
|
const { t } = useTranslation();
|
||||||
|
@ -57,4 +57,4 @@ const TermsAndPrivacy = ({ className }: Props) => {
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export default TermsAndPrivacy;
|
export default TermsAndPrivacyCheckbox;
|
|
@ -1,10 +1,12 @@
|
||||||
import { conditional } from '@silverhand/essentials';
|
import { conditional } from '@silverhand/essentials';
|
||||||
import { useContext } from 'react';
|
import { useContext } from 'react';
|
||||||
import { useTranslation, Trans } from 'react-i18next';
|
import { Trans, useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import PageContext from '@/Providers/PageContextProvider/PageContext';
|
import PageContext from '@/Providers/PageContextProvider/PageContext';
|
||||||
import TermsLinks from '@/components/TermsLinks';
|
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 TermsAndPrivacyConfirmModalContent = () => {
|
||||||
const { experienceSettings } = useContext(PageContext);
|
const { experienceSettings } = useContext(PageContext);
|
||||||
const { termsOfUseUrl, privacyPolicyUrl } = experienceSettings ?? {};
|
const { termsOfUseUrl, privacyPolicyUrl } = experienceSettings ?? {};
|
||||||
|
@ -17,6 +19,7 @@ const TermsAndPrivacyConfirmModalContent = () => {
|
||||||
link: (
|
link: (
|
||||||
<TermsLinks
|
<TermsLinks
|
||||||
inline
|
inline
|
||||||
|
linkType="primary"
|
||||||
termsOfUseUrl={conditional(termsOfUseUrl)}
|
termsOfUseUrl={conditional(termsOfUseUrl)}
|
||||||
privacyPolicyUrl={conditional(privacyPolicyUrl)}
|
privacyPolicyUrl={conditional(privacyPolicyUrl)}
|
||||||
/>
|
/>
|
|
@ -5,6 +5,7 @@ type Props = {
|
||||||
readonly className?: string;
|
readonly className?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// For sign-in page displaying terms and privacy links use only. No user interaction is needed.
|
||||||
const TermsAndPrivacyLinks = ({ className }: Props) => {
|
const TermsAndPrivacyLinks = ({ className }: Props) => {
|
||||||
const { termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } = useTerms();
|
const { termsOfUseUrl, privacyPolicyUrl, isTermsDisabled } = useTerms();
|
||||||
|
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
import { conditional } from '@silverhand/essentials';
|
import { conditional } from '@silverhand/essentials';
|
||||||
import { useContext, useCallback, useMemo } from 'react';
|
import { useCallback, useContext, useMemo } from 'react';
|
||||||
|
|
||||||
import PageContext from '@/Providers/PageContextProvider/PageContext';
|
import PageContext from '@/Providers/PageContextProvider/PageContext';
|
||||||
import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacy/TermsAndPrivacyConfirmModalContent';
|
import TermsAndPrivacyConfirmModalContent from '@/containers/TermsAndPrivacyConfirmModalContent';
|
||||||
|
|
||||||
import { useConfirmModal } from './use-confirm-modal';
|
import { useConfirmModal } from './use-confirm-modal';
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import type { SignInIdentifier } from '@logto/schemas';
|
import type { SignInIdentifier } from '@logto/schemas';
|
||||||
import classNames from 'classnames';
|
import classNames from 'classnames';
|
||||||
import { useCallback, useEffect } from 'react';
|
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 { useTranslation } from 'react-i18next';
|
||||||
|
|
||||||
import LockIcon from '@/assets/icons/lock.svg';
|
import LockIcon from '@/assets/icons/lock.svg';
|
||||||
|
@ -9,7 +9,7 @@ import Button from '@/components/Button';
|
||||||
import ErrorMessage from '@/components/ErrorMessage';
|
import ErrorMessage from '@/components/ErrorMessage';
|
||||||
import { SmartInputField } from '@/components/InputFields';
|
import { SmartInputField } from '@/components/InputFields';
|
||||||
import type { IdentifierInputValue } from '@/components/InputFields/SmartInputField';
|
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 useSingleSignOnWatch from '@/hooks/use-single-sign-on-watch';
|
||||||
import useTerms from '@/hooks/use-terms';
|
import useTerms from '@/hooks/use-terms';
|
||||||
import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
|
import { getGeneralIdentifierErrorMessage, validateIdentifierField } from '@/utils/form';
|
||||||
|
@ -130,7 +130,7 @@ const IdentifierRegisterForm = ({ className, autoFocus, signUpMethods }: Props)
|
||||||
* Form rerender will trigger autofill.
|
* Form rerender will trigger autofill.
|
||||||
* If the autofill value is SSO enabled, it will always show SSO form.
|
* If the autofill value is SSO enabled, it will always show SSO form.
|
||||||
*/}
|
*/}
|
||||||
<TermsAndPrivacy
|
<TermsAndPrivacyCheckbox
|
||||||
className={classNames(styles.terms, showSingleSignOnForm && styles.hidden)}
|
className={classNames(styles.terms, showSingleSignOnForm && styles.hidden)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
|
|
@ -9,7 +9,7 @@ import SingleSignOnFormModeContext from '@/Providers/SingleSignOnFormModeContext
|
||||||
import Divider from '@/components/Divider';
|
import Divider from '@/components/Divider';
|
||||||
import TextLink from '@/components/TextLink';
|
import TextLink from '@/components/TextLink';
|
||||||
import SocialSignInList from '@/containers/SocialSignInList';
|
import SocialSignInList from '@/containers/SocialSignInList';
|
||||||
import TermsAndPrivacy from '@/containers/TermsAndPrivacy';
|
import TermsAndPrivacyCheckbox from '@/containers/TermsAndPrivacyCheckbox';
|
||||||
import { useSieMethods } from '@/hooks/use-sie';
|
import { useSieMethods } from '@/hooks/use-sie';
|
||||||
|
|
||||||
import ErrorPage from '../ErrorPage';
|
import ErrorPage from '../ErrorPage';
|
||||||
|
@ -79,9 +79,10 @@ const Register = () => {
|
||||||
{signUpMethods.length > 0 && (
|
{signUpMethods.length > 0 && (
|
||||||
<IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
|
<IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
|
||||||
)}
|
)}
|
||||||
|
{/* Social sign-in methods only */}
|
||||||
{signUpMethods.length === 0 && socialConnectors.length > 0 && (
|
{signUpMethods.length === 0 && socialConnectors.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<TermsAndPrivacy className={styles.terms} />
|
<TermsAndPrivacyCheckbox className={styles.terms} />
|
||||||
<SocialSignInList className={styles.main} socialConnectors={socialConnectors} />
|
<SocialSignInList className={styles.main} socialConnectors={socialConnectors} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue