mirror of
https://github.com/logto-io/logto.git
synced 2025-03-10 22:22:45 -05:00
refactor(ui): replace some of the reactStringReplace usage using i18Next Trans (#1626)
refactor(ui): replace some of the reactStringReplace usage using i18nNext Trans replace some of the reactStringReplace usage using i18nNext Trans
This commit is contained in:
parent
041bd13c28
commit
04b08a83ea
5 changed files with 20 additions and 28 deletions
|
@ -32,14 +32,14 @@ const translation = {
|
|||
reminder: 'Reminder',
|
||||
not_found: '404 Not Found',
|
||||
agree_with_terms: 'I have read and agree to the ',
|
||||
agree_with_terms_modal: 'To proceed, please agree to the {{terms}}.',
|
||||
agree_with_terms_modal: 'To proceed, please agree to the <link></link>.',
|
||||
terms_of_use: 'Terms of Use',
|
||||
create_account: 'Create Account',
|
||||
forgot_password: 'Forgot Password?',
|
||||
or: 'or',
|
||||
enter_passcode: 'The passcode has been sent to your {{address}}',
|
||||
passcode_sent: 'The passcode has been resent',
|
||||
resend_after_seconds: 'Resend after {{seconds}} seconds',
|
||||
resend_after_seconds: 'Resend after <span>{{seconds}}</span> seconds',
|
||||
resend_passcode: 'Resend Passcode',
|
||||
continue_with: 'Continue with',
|
||||
create_account_id_exists:
|
||||
|
|
|
@ -34,14 +34,14 @@ const translation = {
|
|||
reminder: '提示',
|
||||
not_found: '404 页面不存在',
|
||||
agree_with_terms: '我已阅读并同意 ',
|
||||
agree_with_terms_modal: '请先同意 {{terms}} 以继续',
|
||||
agree_with_terms_modal: '请先同意 <link></link> 以继续',
|
||||
terms_of_use: '使用条款',
|
||||
create_account: '创建帐号',
|
||||
forgot_password: '忘记密码?',
|
||||
or: '或',
|
||||
enter_passcode: '验证码已经发送至你的{{ address }}',
|
||||
passcode_sent: '验证码已经发送',
|
||||
resend_after_seconds: '在 {{ seconds }} 秒后重发',
|
||||
resend_after_seconds: '在 <span>{{ seconds }}</span> 秒后重发',
|
||||
resend_passcode: '重发验证码',
|
||||
continue_with: '通过以下方式继续',
|
||||
create_account_id_exists: '{{ type }}为 {{ value }} 的帐号已存在,你要登录吗?',
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import classNames from 'classnames';
|
||||
import { useState, useEffect, useContext, useCallback, useMemo } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
import { useTimer } from 'react-timer-hook';
|
||||
|
||||
import { getSendPasscodeApi, getVerifyPasscodeApi } from '@/apis/utils';
|
||||
|
@ -87,18 +86,6 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
|
|||
}
|
||||
}, [verifyPasscodeResult]);
|
||||
|
||||
const renderCountDownMessage = useMemo(() => {
|
||||
const contents = t('description.resend_after_seconds', { seconds });
|
||||
|
||||
return (
|
||||
<div className={styles.message}>
|
||||
{reactStringReplace(contents, `${seconds}`, (match) => (
|
||||
<span key="counter">{match}</span>
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}, [seconds, t]);
|
||||
|
||||
return (
|
||||
<form className={classNames(styles.form, className)}>
|
||||
<Passcode
|
||||
|
@ -109,7 +96,11 @@ const PasscodeValidation = ({ type, method, className, target }: Props) => {
|
|||
onChange={setCode}
|
||||
/>
|
||||
{isRunning ? (
|
||||
renderCountDownMessage
|
||||
<div className={styles.message}>
|
||||
<Trans components={{ span: <span key="counter" /> }}>
|
||||
{t('description.resend_after_seconds', { seconds })}
|
||||
</Trans>
|
||||
</div>
|
||||
) : (
|
||||
<TextLink
|
||||
className={styles.link}
|
||||
|
|
|
@ -1,7 +1,6 @@
|
|||
import { ReactNode, useContext } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useContext } from 'react';
|
||||
import { useTranslation, Trans } from 'react-i18next';
|
||||
import { create } from 'react-modal-promise';
|
||||
import reactStringReplace from 'react-string-replace';
|
||||
|
||||
import { WebModal, MobileModal } from '@/components/ConfirmModal';
|
||||
import TextLink from '@/components/TextLink';
|
||||
|
@ -30,7 +29,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
|
|||
const ConfirmModal = isMobile ? MobileModal : WebModal;
|
||||
|
||||
const terms = t('description.terms_of_use');
|
||||
const content = t('description.agree_with_terms_modal', { terms });
|
||||
|
||||
const linkProps = isMobile
|
||||
? {
|
||||
|
@ -43,10 +41,6 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
|
|||
target: '_blank',
|
||||
};
|
||||
|
||||
const modalContent: ReactNode = reactStringReplace(content, terms, () => (
|
||||
<TextLink key={terms} text="description.terms_of_use" {...linkProps} />
|
||||
));
|
||||
|
||||
return (
|
||||
<ConfirmModal
|
||||
isOpen={isOpen}
|
||||
|
@ -57,7 +51,13 @@ const TermsOfUseConfirmModal = ({ isOpen = false, onConfirm, onClose }: Props) =
|
|||
}}
|
||||
onClose={onClose}
|
||||
>
|
||||
{modalContent}
|
||||
<Trans
|
||||
components={{
|
||||
link: <TextLink key={terms} text="description.terms_of_use" {...linkProps} />,
|
||||
}}
|
||||
>
|
||||
{t('description.agree_with_terms_modal')}
|
||||
</Trans>
|
||||
</ConfirmModal>
|
||||
);
|
||||
};
|
||||
|
|
|
@ -23,6 +23,7 @@ global.crypto = new Crypto();
|
|||
const translation = (key: string) => key;
|
||||
|
||||
jest.mock('react-i18next', () => ({
|
||||
...jest.requireActual('react-i18next'),
|
||||
useTranslation: () => ({
|
||||
t: translation,
|
||||
i18n: {
|
||||
|
|
Loading…
Add table
Reference in a new issue