From 794e270dc585d02b76ea1a7cbdddb5a57f66bbf6 Mon Sep 17 00:00:00 2001 From: Xiao Yijun Date: Thu, 23 Feb 2023 14:21:11 +0800 Subject: [PATCH] refactor(console): welcome state of the sie page (#3188) --- .../sign-in-experience-welcome-dark.svg | 36 ++-- .../images/sign-in-experience-welcome.svg | 81 ++++----- .../components/Welcome/index.module.scss | 45 +++-- .../components/Welcome/index.tsx | 22 ++- .../src/pages/SignInExperience/index.tsx | 158 ++++++++++-------- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 4 +- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 5 +- .../translation/admin-console/sign-in-exp.ts | 4 +- 13 files changed, 194 insertions(+), 186 deletions(-) diff --git a/packages/console/src/assets/images/sign-in-experience-welcome-dark.svg b/packages/console/src/assets/images/sign-in-experience-welcome-dark.svg index 529bda7de..a333fdf41 100644 --- a/packages/console/src/assets/images/sign-in-experience-welcome-dark.svg +++ b/packages/console/src/assets/images/sign-in-experience-welcome-dark.svg @@ -1,26 +1,24 @@ - - - - - - - + + + + + - + - + - - + + @@ -30,15 +28,13 @@ - - - - - - - - - + + + + + + + diff --git a/packages/console/src/assets/images/sign-in-experience-welcome.svg b/packages/console/src/assets/images/sign-in-experience-welcome.svg index b04ea9be6..fe54d0675 100644 --- a/packages/console/src/assets/images/sign-in-experience-welcome.svg +++ b/packages/console/src/assets/images/sign-in-experience-welcome.svg @@ -1,49 +1,40 @@ - - - - - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + - + - - - - - - - - - - - - - - - - - - - - + + + + + + + + + + diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss b/packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss index 954ebf1f6..8cf970925 100644 --- a/packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss +++ b/packages/console/src/pages/SignInExperience/components/Welcome/index.module.scss @@ -1,36 +1,35 @@ @use '@/scss/underscore' as _; .container { - height: 100%; min-height: 528px; - padding-bottom: _.unit(6); -} - -.welcome { - height: 100%; display: flex; flex-direction: column; + justify-content: center; + align-items: center; +} - .cardTitle { - flex-shrink: 0; +.content { + display: flex; + justify-content: center; + align-items: center; + + .icon { + width: 200px; + height: 200px; } - .content { - flex: 1; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - padding: _.unit(4); + .wrapper { + margin-left: _.unit(6); + } - > *:not(:last-child) { - margin-bottom: _.unit(5); - } + .title { + font: var(--font-label-2); + } - .text { - font: var(--font-body-2); - max-width: 410px; - text-align: center; - } + .description { + font: var(--font-body-2); + color: var(--color-text-secondary); + max-width: 350px; + margin-bottom: _.unit(6); } } diff --git a/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx b/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx index fbe4f8360..de3f8e9e2 100644 --- a/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx +++ b/packages/console/src/pages/SignInExperience/components/Welcome/index.tsx @@ -5,8 +5,6 @@ import { useTranslation } from 'react-i18next'; import WelcomeImageDark from '@/assets/images/sign-in-experience-welcome-dark.svg'; import WelcomeImage from '@/assets/images/sign-in-experience-welcome.svg'; import Button from '@/components/Button'; -import Card from '@/components/Card'; -import CardTitle from '@/components/CardTitle'; import { useTheme } from '@/hooks/use-theme'; import GuideModal from './GuideModal'; @@ -23,15 +21,15 @@ const Welcome = ({ mutate }: Props) => { return (
- - -
- {theme === AppearanceMode.LightMode ? : } -
{t('sign_in_exp.welcome.title')}
+
+ {theme === AppearanceMode.LightMode ? ( + + ) : ( + + )} +
+
{t('sign_in_exp.welcome.title')}
+
{t('sign_in_exp.welcome.description')}
- +
{ diff --git a/packages/console/src/pages/SignInExperience/index.tsx b/packages/console/src/pages/SignInExperience/index.tsx index 1d1aea376..3219acf76 100644 --- a/packages/console/src/pages/SignInExperience/index.tsx +++ b/packages/console/src/pages/SignInExperience/index.tsx @@ -12,6 +12,7 @@ import ConfirmModal from '@/components/ConfirmModal'; import SubmitFormChangesActionBar from '@/components/SubmitFormChangesActionBar'; import TabNav, { TabNavItem } from '@/components/TabNav'; import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal'; +import { isCloud } from '@/consts/cloud'; import { SignInExperiencePage } from '@/consts/page-tabs'; import type { RequestError } from '@/hooks/use-api'; import useApi from '@/hooks/use-api'; @@ -40,7 +41,18 @@ const SignInExperience = () => { const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const { tab } = useParams(); const { data, error, mutate } = useSWR('api/sign-in-exp'); - const { configs, error: configsError, updateConfigs, mutate: mutateConfigs } = useConfigs(); + const isLoadingSignInExperience = !data && !error; + + const { + configs, + error: configsError, + updateConfigs, + isLoading: isLoadingConfig, + mutate: mutateConfigs, + } = useConfigs(); + + const shouldDisplayWelcome = !isCloud && !configs?.signInExperienceCustomized; + const { error: languageError, isLoading: isLoadingLanguages } = useUiLanguages(); const [dataToCompare, setDataToCompare] = useState(); @@ -100,11 +112,11 @@ const SignInExperience = () => { await saveData(); }); - if ((!configs && !configsError) || (!data && !error) || isLoadingLanguages) { + if (isLoadingSignInExperience || isLoadingConfig || isLoadingLanguages) { return ; } - if (!configs && configsError) { + if (configsError) { return
{configsError.body?.message ?? configsError.message}
; } @@ -112,17 +124,6 @@ const SignInExperience = () => { return
{languageError.body?.message ?? languageError.message}
; } - if (!configs?.signInExperienceCustomized) { - return ( - { - void mutateConfigs(); - void mutate(); - }} - /> - ); - } - return (
{ subtitle="sign_in_exp.description" className={styles.cardTitle} /> - - - {t('sign_in_exp.tabs.branding')} - - - {t('sign_in_exp.tabs.sign_up_and_sign_in')} - - - {t('sign_in_exp.tabs.others')} - - - {!data && error &&
{`error occurred: ${error.body?.message ?? error.message}`}
} - {data && defaultFormData && ( -
-
- -
- - - - -
- {formData.id && ( - - )} -
- { + void mutateConfigs(); + void mutate(); + }} + /> + ) : ( + <> + + + {t('sign_in_exp.tabs.branding')} + + + {t('sign_in_exp.tabs.sign_up_and_sign_in')} + + + {t('sign_in_exp.tabs.others')} + + + {!data && error &&
{`error occurred: ${error.body?.message ?? error.message}`}
} + {data && defaultFormData && ( +
+
+ +
+ + + + +
+ {formData.id && ( + + )} +
+ +
+ )} + {data && ( + { + setDataToCompare(undefined); + }} + onConfirm={async () => { + await saveData(); + }} + > + {dataToCompare && ( + + )} + + )} + -
+ )} - {data && ( - { - setDataToCompare(undefined); - }} - onConfirm={async () => { - await saveData(); - }} - > - {dataToCompare && } - - )} -
); }; 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 19be51fb8..21a0c9970 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 @@ -9,8 +9,9 @@ const sign_in_exp = { others: 'Andere', }, welcome: { - title: - 'Dies ist das erste Mal, dass du deine Anmeldeoberfläche anpasst. Diese Anleitung hilft dir, alle notwendigen Einstellungen vorzunehmen und schnell loszulegen.', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: 'Erste Schritte', apply_remind: 'Bitte beachte, dass die Anmeldeoberfläche für alle Anwendungen unter diesem Konto gilt.', 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 407ae3780..82d013f6e 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 @@ -7,8 +7,9 @@ const sign_in_exp = { others: 'Others', }, welcome: { - title: - 'This is the first time you define sign-in experience. This guide will help you go through all necessary settings and quickly get started.', + title: 'Customize sign-in experience', + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', get_started: 'Get Started', apply_remind: 'Please note that sign-in experience will apply to all applications under this account.', 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 5f92cf9a7..a3623af4b 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 @@ -8,8 +8,9 @@ const sign_in_exp = { others: 'Autres', }, welcome: { - title: - "C'est la première fois que vous définissez l'expérience de connexion. Ce guide vous aidera à passer par tous les paramètres nécessaires et à démarrer rapidement.", + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: 'Commencez', apply_remind: "Veuillez noter que l'expérience de connexion s'appliquera à toutes les applications sous ce compte.", 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 de50423fe..8351593b5 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 @@ -7,7 +7,9 @@ const sign_in_exp = { others: '기타', }, welcome: { - title: '가이드를 따라, 필수 설정을 빠르게 수정해 보세요.', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: '시작하기', apply_remind: '이 계정이 관리하는 모든 앱의 로그인 경험이 수정되는 것을 주의해 주세요.', }, 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 e4f583d64..af91cd921 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 @@ -8,8 +8,9 @@ const sign_in_exp = { others: 'Outros', }, welcome: { - title: - 'Esta é a primeira vez que você define a experiência de login. Este guia irá ajudá-lo a passar por todas as configurações necessárias e começar rapidamente.', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: 'Iniciar', apply_remind: 'Observe que a experiência de login será aplicada a todos os aplicativos nesta conta.', 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 bf1c3d880..63cf187af 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 @@ -8,8 +8,9 @@ const sign_in_exp = { others: 'Outros', }, welcome: { - title: - 'Esta é a primeira vez que define a experiência de login. Este guia irá ajudá-lo a passar por todas as configurações necessárias e começar rapidamente.', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: 'Começar', apply_remind: 'Observe que a experiência de login será aplicada a todos os apps nesta conta.', }, 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 ed1143594..d832f8983 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 @@ -8,8 +8,9 @@ const sign_in_exp = { others: 'Diğerleri', }, welcome: { - title: - 'Bu oturum açma deneyimini ilk kez tanımlıyorsunuz. Bu kılavuz, gerekli tüm ayarları yapmanıza ve hızlı bir şekilde başlamanıza yardımcı olacaktır.', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: 'Başla', apply_remind: 'Lütfen oturum açma deneyiminin bu hesap altındaki tüm uygulamalar için geçerli olacağını unutmayınız.', 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 4eb35f579..f7c39391b 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 @@ -7,7 +7,9 @@ const sign_in_exp = { others: '其它', }, welcome: { - title: '这是你首次定义登录体验。跟随引导，完成登录体验的必要设置项。', + title: 'Customize sign-in experience', // UNTRANSLATED + description: + 'Get started fast with your first sign-in setup. This guide walks you through all the necessary settings.', // UNTRANSLATED get_started: '开始', apply_remind: '请注意，登录体验将会应用到当前帐户下的所有应用。', },