Infrastructure/logto
0
Fork 0
mirror of https://github.com/logto-io/logto.git synced 2025-01-27 21:39:16 -05:00
Code Issues Activity

chore: update custom css content and add placeholder in code editor (#3396)

Browse source
This commit is contained in:
Darcy Ye 2023-03-15 17:10:19 +08:00 • committed by GitHub
parent 76b49de1f0
commit 5a20199675
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 52 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/console/src/pages/SignInExperience/index.tsx
View file

@ -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) {

3
packages/console/src/pages/SignInExperience/types.ts
View file

@ -12,7 +12,8 @@ export type SignUpForm = Omit<SignUp, 'identifiers'> & {
identifier: SignUpIdentifier;
};
export type SignInExperienceForm = Omit<SignInExperience, 'signUp'> & {
export type SignInExperienceForm = Omit<SignInExperience, 'signUp' | 'customCss'> & {
customCss?: string; // Code editor components can not properly handle null value, manually transform null to undefined instead.
signUp?: SignUpForm;
createAccountEnabled: boolean;
};

7
packages/console/src/pages/SignInExperience/utils/form.ts
View file

@ -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 => {

8
packages/phrases/src/locales/de/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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: {

10
packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>',
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',

8
packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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

8
packages/phrases/src/locales/ko/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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: '이메일 주소',

8
packages/phrases/src/locales/pt-br/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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',

8
packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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

8
packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // 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. <a>{{link}}</a>', // 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

10
packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
View file

@ -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. <a>{{link}}</a>', // UNTRANSLATED
css_code_editor_description_link_content: 'Readme', // UNTRANSLATED
title: '自定义 CSS',
css_code_editor_title: '自定义 CSS 个性化你的用户界面',
css_code_editor_description: '查看自定义 CSS 的例子。 <a>{{link}}</a>',
css_code_editor_description_link_content: '了解更多',
css_code_editor_content_placeholder:
'// 输入自定义CSS代码，从颜色、字体、组件样式和布局等，定制你的登录、注册、忘记密码和其他页面。充分发挥创造力，让你的用户界面脱颖而出。',
},
sign_up_and_sign_in: {
identifiers_email: '邮件地址',