From 5a2019967571cbff5496c16259d7cf23171b958f Mon Sep 17 00:00:00 2001 From: Darcy Ye Date: Wed, 15 Mar 2023 17:10:19 +0800 Subject: [PATCH] chore: update custom css content and add placeholder in code editor (#3396) --- packages/console/src/pages/SignInExperience/index.tsx | 3 ++- packages/console/src/pages/SignInExperience/types.ts | 3 ++- .../console/src/pages/SignInExperience/utils/form.ts | 7 ++++++- .../de/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../en/translation/admin-console/sign-in-exp.ts | 10 ++++++---- .../fr/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../ko/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../pt-br/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../pt-pt/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../tr-tr/translation/admin-console/sign-in-exp.ts | 8 +++++--- .../zh-cn/translation/admin-console/sign-in-exp.ts | 10 ++++++---- 11 files changed, 52 insertions(+), 29 deletions(-) diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx index c3e818883..606bb7834 100644 --- a/packages/console/src/pages/SignInExperience/index.tsx +++ b/packages/console/src/pages/SignInExperience/index.tsx @@ -95,7 +95,8 @@ const SignInExperience = () => { } return signInExperienceParser.toLocalForm(data); - }, [data]); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [data, t]); // Form data default value depends on i18n, manually trigger re-render when i18n changes. useEffect(() => { if (defaultFormData) { diff --git a/packages/console/src/pages/SignInExperience/types.ts b/packages/console/src/pages/SignInExperience/types.ts index dbed84b6b..96a06f09e 100644 --- a/packages/console/src/pages/SignInExperience/types.ts +++ b/packages/console/src/pages/SignInExperience/types.ts @@ -12,7 +12,8 @@ export type SignUpForm = Omit & { identifier: SignUpIdentifier; }; -export type SignInExperienceForm = Omit & { +export type SignInExperienceForm = Omit & { + customCss?: string; // Code editor components can not properly handle null value, manually transform null to undefined instead. signUp?: SignUpForm; createAccountEnabled: boolean; }; diff --git a/packages/console/src/pages/SignInExperience/utils/form.ts b/packages/console/src/pages/SignInExperience/utils/form.ts index 7c8953d88..530f89d75 100644 --- a/packages/console/src/pages/SignInExperience/utils/form.ts +++ b/packages/console/src/pages/SignInExperience/utils/form.ts @@ -1,6 +1,7 @@ import type { SignInExperience, SignUp } from '@logto/schemas'; import { SignInMode, SignInIdentifier } from '@logto/schemas'; import { conditional } from '@silverhand/essentials'; +import { t } from 'i18next'; import type { DeepRequired, FieldErrorsImpl } from 'react-hook-form'; import { @@ -31,12 +32,16 @@ export const signInExperienceParser = { }; }, toLocalForm: (signInExperience: SignInExperience): SignInExperienceForm => { - const { signUp, signInMode } = signInExperience; + const { signUp, signInMode, customCss } = signInExperience; return { ...signInExperience, signUp: signInExperienceParser.toLocalSignUp(signUp), createAccountEnabled: signInMode !== SignInMode.SignIn, + // CodeEditor component can not properly handle i18n default value, put placeholder here as workaround + customCss: customCss?.length + ? customCss + : t('admin_console.sign_in_exp.custom_css.css_code_editor_content_placeholder'), }; }, toRemoteModel: (setup: SignInExperienceForm): SignInExperience => { diff --git a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts index 81dac6ad3..f1b497261 100644 --- a/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts @@ -100,9 +100,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, others: { terms_of_use: { diff --git a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts index 188f633dc..10a06cff2 100644 --- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts @@ -42,10 +42,12 @@ const sign_in_exp = { upload_favicon_description: 'Browser Favicon', }, custom_css: { - title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + title: 'CUSTOM CSS', + css_code_editor_title: 'Personalize your UI with Custom CSS', + css_code_editor_description: 'See the example of Custom CSS. {{link}}', + css_code_editor_description_link_content: 'Learn more', + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', }, sign_up_and_sign_in: { identifiers_email: 'Email address', diff --git a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts index 4873e8ed4..c28c7a675 100644 --- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts @@ -45,9 +45,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, sign_up_and_sign_in: { identifiers_email: 'Email address', // UNTRANSLATED diff --git a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts index 9b6e3b713..0a466aeaf 100644 --- a/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts @@ -41,9 +41,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, sign_up_and_sign_in: { identifiers_email: '이메일 주소', diff --git a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts index dce36424f..7f60d64f7 100644 --- a/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts @@ -44,9 +44,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, sign_up_and_sign_in: { identifiers_email: 'Endereço de e-mail', diff --git a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts index 18156b762..c892d0f53 100644 --- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts @@ -43,9 +43,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, sign_up_and_sign_in: { identifiers_email: 'Email address', // UNTRANSLATED diff --git a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts index 6b8c647b6..7e4af8ee7 100644 --- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts @@ -44,9 +44,11 @@ const sign_in_exp = { }, custom_css: { title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + css_code_editor_title: 'Personalize your UI with Custom CSS', // UNTRANSLATED + css_code_editor_description: 'See the example of Custom CSS. {{link}}', // UNTRANSLATED + css_code_editor_description_link_content: 'Learn more', // UNTRANSLATED + css_code_editor_content_placeholder: + '// Enter your Custom CSS code to tailor the styles of color, font, components, and layout... of Sign-in, Create-account, Forgot-Password, and other pages to your exact specifications. Express your creativity and make your UI stand out.', // UNTRANSLATED }, sign_up_and_sign_in: { identifiers_email: 'Email address', // UNTRANSLATED diff --git a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts index 118b4c773..cf3b119e9 100644 --- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts +++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts @@ -41,10 +41,12 @@ const sign_in_exp = { upload_favicon_description: 'Browser Favicon', // UNTRANSLATED }, custom_css: { - title: 'CUSTOM CSS', // UNTRANSLATED - css_code_editor_title: 'Custom CSS to change UI', // UNTRANSLATED - css_code_editor_description: 'Description - Doc. {{link}}', // UNTRANSLATED - css_code_editor_description_link_content: 'Readme', // UNTRANSLATED + title: '自定义 CSS', + css_code_editor_title: '自定义 CSS 个性化你的用户界面', + css_code_editor_description: '查看自定义 CSS 的例子。 {{link}}', + css_code_editor_description_link_content: '了解更多', + css_code_editor_content_placeholder: + '// 输入自定义CSS代码，从颜色、字体、组件样式和布局等，定制你的登录、注册、忘记密码和其他页面。充分发挥创造力，让你的用户界面脱颖而出。', }, sign_up_and_sign_in: { identifiers_email: '邮件地址',