From d649755c3e0edac2255a289961205f72a6cc8989 Mon Sep 17 00:00:00 2001 From: simeng-li Date: Mon, 4 Jul 2022 18:43:49 +0800 Subject: [PATCH] refactor(ui): refactor default logo (#1402) * refactor(ui): refactor default logo refactor default logo * fix(ui): default logo update default logo update * style(ui): add darkLogo add darkLogo --- .../core/src/lib/sign-in-experience.test.ts | 11 ++++ packages/core/src/lib/sign-in-experience.ts | 2 + packages/phrases/src/locales/en.ts | 1 + packages/phrases/src/locales/zh-cn.ts | 1 + .../schemas/src/seeds/sign-in-experience.ts | 6 +- packages/ui/src/assets/logo/logto-dark.svg | 59 ------------------- packages/ui/src/assets/logo/logto-light.svg | 59 ------------------- packages/ui/src/pages/Consent/index.tsx | 12 ++-- packages/ui/src/pages/SignIn/index.tsx | 12 +--- 9 files changed, 25 insertions(+), 138 deletions(-) delete mode 100644 packages/ui/src/assets/logo/logto-dark.svg delete mode 100644 packages/ui/src/assets/logo/logto-light.svg diff --git a/packages/core/src/lib/sign-in-experience.test.ts b/packages/core/src/lib/sign-in-experience.test.ts index c70b6e1ef..9fd1ba573 100644 --- a/packages/core/src/lib/sign-in-experience.test.ts +++ b/packages/core/src/lib/sign-in-experience.test.ts @@ -29,6 +29,17 @@ describe('validate branding', () => { }).toMatchError(new RequestError('sign_in_experiences.empty_slogan')); }); + test('should throw when the logo is empty', () => { + expect(() => { + validateBranding({ + ...mockBranding, + style: BrandingStyle.Logo, + logoUrl: ' ', + slogan: '', + }); + }).toMatchError(new RequestError('sign_in_experiences.empty_logo')); + }); + test('should throw when the UI style contains the slogan and slogan is blank', () => { expect(() => { validateBranding({ diff --git a/packages/core/src/lib/sign-in-experience.ts b/packages/core/src/lib/sign-in-experience.ts index f9ec48354..1631ab7ca 100644 --- a/packages/core/src/lib/sign-in-experience.ts +++ b/packages/core/src/lib/sign-in-experience.ts @@ -15,6 +15,8 @@ export const validateBranding = (branding: Branding) => { if (branding.style === BrandingStyle.Logo_Slogan) { assertThat(branding.slogan?.trim(), 'sign_in_experiences.empty_slogan'); } + + assertThat(branding.logoUrl.trim(), 'sign_in_experiences.empty_logo'); }; export const validateTermsOfUse = (termsOfUse: TermsOfUse) => { diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 928af90e2..36e05aeac 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -603,6 +603,7 @@ const errors = { sign_in_experiences: { empty_content_url_of_terms_of_use: 'Empty "Terms of use" content URL. Please add the content URL if "Terms of use" is enabled.', + empty_logo: 'Please enter your logo URL', empty_slogan: 'Empty branding slogan. Please add a branding slogan if a UI style containing the slogan is selected.', empty_social_connectors: diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 50ddff8ef..4b4f81811 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -583,6 +583,7 @@ const errors = { }, sign_in_experiences: { empty_content_url_of_terms_of_use: '你启用了“使用条款”，请添加使用条款 URL。', + empty_logo: '请输入 logo URL', empty_slogan: '你选择了 App logo + 标语的布局。请输入你的标语。', empty_social_connectors: '你启用了社交登录的方式。请至少选择一个社交连接器。', enabled_connector_not_found: '未找到已启用的 {{type}} 连接器', diff --git a/packages/schemas/src/seeds/sign-in-experience.ts b/packages/schemas/src/seeds/sign-in-experience.ts index d0c9db616..c119a52d2 100644 --- a/packages/schemas/src/seeds/sign-in-experience.ts +++ b/packages/schemas/src/seeds/sign-in-experience.ts @@ -12,7 +12,7 @@ export const defaultSignInExperience: Readonly = { }, branding: { style: BrandingStyle.Logo, - logoUrl: '', + logoUrl: 'https://logto.io/logo.svg', darkLogoUrl: '', }, languageInfo: { @@ -37,7 +37,7 @@ export const adminConsoleSignInExperience: CreateSignInExperience = { ...defaultSignInExperience, branding: { style: BrandingStyle.Logo_Slogan, - logoUrl: '', - darkLogoUrl: '', + logoUrl: 'https://logto.io/logo.svg', + darkLogoUrl: 'https://logto.io/logo-dark.svg', }, }; diff --git a/packages/ui/src/assets/logo/logto-dark.svg b/packages/ui/src/assets/logo/logto-dark.svg deleted file mode 100644 index 8d897cc3d..000000000 --- a/packages/ui/src/assets/logo/logto-dark.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/ui/src/assets/logo/logto-light.svg b/packages/ui/src/assets/logo/logto-light.svg deleted file mode 100644 index 509727b3c..000000000 --- a/packages/ui/src/assets/logo/logto-light.svg +++ /dev/null @@ -1,59 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/packages/ui/src/pages/Consent/index.tsx b/packages/ui/src/pages/Consent/index.tsx index 390549140..85886401b 100644 --- a/packages/ui/src/pages/Consent/index.tsx +++ b/packages/ui/src/pages/Consent/index.tsx @@ -11,11 +11,6 @@ const Consent = () => { const { experienceSettings, theme } = useContext(PageContext); const { error, result, run: asyncConsent } = useApi(consent); - const logoUrl = - theme === 'light' - ? experienceSettings?.branding.logoUrl - : experienceSettings?.branding.darkLogoUrl; - useEffect(() => { void asyncConsent(); }, [asyncConsent]); @@ -28,7 +23,12 @@ const Consent = () => { return (
- + {!error && }
); diff --git a/packages/ui/src/pages/SignIn/index.tsx b/packages/ui/src/pages/SignIn/index.tsx index ae8f73571..1814ec8a5 100644 --- a/packages/ui/src/pages/SignIn/index.tsx +++ b/packages/ui/src/pages/SignIn/index.tsx @@ -2,8 +2,6 @@ import { BrandingStyle, SignInMode } from '@logto/schemas'; import classNames from 'classnames'; import React, { useContext } from 'react'; -import darkLogto from '@/assets/logo/logto-dark.svg'; -import lightLogto from '@/assets/logo/logto-light.svg'; import BrandingHeader from '@/components/BrandingHeader'; import AppNotification from '@/containers/AppNotification'; import { PageContext } from '@/hooks/use-page-context'; @@ -20,14 +18,6 @@ const SignIn = () => { const { slogan, logoUrl, darkLogoUrl, style } = experienceSettings.branding; - const getLogto = () => { - if (theme === 'light') { - return logoUrl || lightLogto; - } - - return darkLogoUrl ? darkLogoUrl : logoUrl || darkLogto; - }; - return ( <> {platform === 'web' &&
} @@ -35,7 +25,7 @@ const SignIn = () => {