Revert "refactor(ui): hard code the page slogan" (#3221)

packages/phrases-ui/src/locales/de.ts

@@ -93,8 +93,6 @@ const translation = {
       'Für zusätzliche Sicherheit, verknüpfe bitte deine Email oder Telefonnummer mit dem Konto.',
     continue_with_more_information:
       'Für zusätzliche Sicherheit, vervollständige bitte deine Informationen.',
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} ist erforderlich`,

packages/phrases-ui/src/locales/en.ts

@@ -88,8 +88,6 @@ const translation = {
     link_email_or_phone_description:
       'For added security, please link your email or phone with the account.',
     continue_with_more_information: 'For added security, please complete below account details.',
-    create_your_account: 'Create your account',
-    welcome_to_sign_in: 'Welcome to sign in',
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} is required`,

packages/phrases-ui/src/locales/fr.ts

@@ -65,9 +65,9 @@ const translation = {
       'The {{type}} {{value}} is linked to another account. Please try another {{type}}', // UNTRANSLATED
     bind_account_title: 'Link or create account', // UNTRANSLATED
     social_create_account: 'Pas de compte ? Vous pouvez créer un nouveau compte et un lien.',
-    social_link_email: 'You can link another email', // UNTRANSLATED
+    social_link_email: 'You can link another email', // UNTRANSLATED,
-    social_link_phone: 'You can link another phone', // UNTRANSLATED
+    social_link_phone: 'You can link another phone', // UNTRANSLATED,
-    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED
+    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
     social_bind_with_existing:
       'Nous trouvons un compte connexe, vous pouvez le relier directement.',
     reset_password: 'Réinitialiser le mot de passe',
@@ -91,8 +91,6 @@ const translation = {
     link_email_or_phone_description:
       'For added security, please link your email or phone with the account.', // UNTRANSLATED
     continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `Le {{types, list(type: disjunction;)}} est requis`,

packages/phrases-ui/src/locales/ko.ts

@@ -87,8 +87,6 @@ const translation = {
     link_email_or_phone_description:
       '더 나은 보안을 위해 이메일 또는 휴대전화번호를 연동해 주세요.',
     continue_with_more_information: '더 나은 보안을 위해 아래 자세한 내용을 따라 주세요.',
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} 필수예요.`,

packages/phrases-ui/src/locales/pt-br.ts

@@ -32,7 +32,7 @@ const translation = {
     switch_to: 'Trocar para {{method}}',
     sign_in_via_passcode: 'Entrar com código de verificação',
     sign_in_via_password: 'Entrar com senha',
-    change: 'Change {{change}}', // UNTRANSLATED
+    change: 'Change {{change}}', // UNTRANSLATED,
     link_another_email: 'Link another email', // UNTRANSLATED
     link_another_phone: 'Link another phone', // UNTRANSLATED
     link_another_email_or_phone: 'Link another email or phone', // UNTRANSLATED
@@ -64,9 +64,9 @@ const translation = {
       'The {{type}} {{value}} is linked to another account. Please try another {{type}}', // UNTRANSLATED
     bind_account_title: 'Link or create account', // UNTRANSLATED
     social_create_account: 'Sem conta? Você pode criar uma nova conta e link.',
-    social_link_email: 'You can link another email', // UNTRANSLATED
+    social_link_email: 'You can link another email', // UNTRANSLATED,
-    social_link_phone: 'You can link another phone', // UNTRANSLATED
+    social_link_phone: 'You can link another phone', // UNTRANSLATED,
-    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED
+    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
     social_bind_with_existing:
       'Encontramos uma conta relacionada, você pode vinculá-la diretamente.',
     reset_password: 'Redefinir senha',
@@ -90,8 +90,6 @@ const translation = {
     link_email_or_phone_description:
       'Para maior segurança, vincule seu e-mail ou telefone à conta.',
     continue_with_more_information: 'Para maior segurança, preencha os detalhes da conta abaixo.',
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} é obrigatório`,

packages/phrases-ui/src/locales/pt-pt.ts

@@ -63,9 +63,9 @@ const translation = {
       'The {{type}} {{value}} is linked to another account. Please try another {{type}}', // UNTRANSLATED
     bind_account_title: 'Link or create account', // UNTRANSLATED
     social_create_account: 'Sem conta? Pode criar uma nova e agregar.',
-    social_link_email: 'You can link another email', // UNTRANSLATED
+    social_link_email: 'You can link another email', // UNTRANSLATED,
-    social_link_phone: 'You can link another phone', // UNTRANSLATED
+    social_link_phone: 'You can link another phone', // UNTRANSLATED,
-    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED
+    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
     social_bind_with_existing: 'Encontramos uma conta relacionada, pode agrega-la diretamente.',
     reset_password: 'Redefinir Password',
     reset_password_description:
@@ -88,8 +88,6 @@ const translation = {
     link_email_or_phone_description:
       'For added security, please link your email or phone with the account.', // UNTRANSLATED
     continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} is necessário`,

packages/phrases-ui/src/locales/ru.ts

@@ -91,8 +91,6 @@ const translation = {
       'Для дополнительной безопасности, пожалуйста, привяжите свою электронную почту или номер телефона к учетной записи.',
     continue_with_more_information:
       'Для дополнительной безопасности, пожалуйста, заполните приведенные ниже данные учетной записи.',
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `Введите {{types, list(type: disjunction;)}}`,

packages/phrases-ui/src/locales/tr-tr.ts

@@ -64,9 +64,9 @@ const translation = {
       'The {{type}} {{value}} is linked to another account. Please try another {{type}}', // UNTRANSLATED
     bind_account_title: 'Link or create account', // UNTRANSLATED
     social_create_account: 'Hesabınız yok mu? Yeni bir hesap ve bağlantı oluşturabilirsiniz.',
-    social_link_email: 'You can link another email', // UNTRANSLATED
+    social_link_email: 'You can link another email', // UNTRANSLATED,
-    social_link_phone: 'You can link another phone', // UNTRANSLATED
+    social_link_phone: 'You can link another phone', // UNTRANSLATED,
-    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED
+    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
     social_bind_with_existing: 'İlgili bir hesap bulduk, hemen bağlayabilirsiniz.',
     reset_password: 'Şifre yenile',
     reset_password_description:
@@ -89,8 +89,6 @@ const translation = {
     link_email_or_phone_description:
       'For added security, please link your email or phone with the account.', // UNTRANSLATED
     continue_with_more_information: 'For added security, please complete below account details.', // UNTRANSLATED
-    create_your_account: 'Create your account', // UNTRANSLATED
-    welcome_to_sign_in: 'Welcome to sign in', // UNTRANSLATED
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}} is required`, // UNTRANSLATED

packages/phrases-ui/src/locales/zh-cn.ts

@@ -63,9 +63,9 @@ const translation = {
       'The {{type}} {{value}} is linked to another account. Please try another {{type}}', // UNTRANSLATED
     bind_account_title: '绑定或创建帐号',
     social_create_account: '没有帐号？你可以创建一个帐号并绑定。',
-    social_link_email: 'You can link another email', // UNTRANSLATED
+    social_link_email: 'You can link another email', // UNTRANSLATED,
-    social_link_phone: 'You can link another phone', // UNTRANSLATED
+    social_link_phone: 'You can link another phone', // UNTRANSLATED,
-    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED
+    social_link_email_or_phone: 'You can link another email or phone', // UNTRANSLATED,
     social_bind_with_existing: '找到了一个匹配的帐号，你可以直接绑定。',
     reset_password: '重设密码',
     reset_password_description: '输入{{types, list(type: disjunction;)}}，获取验证码以重设密码。',
@@ -81,12 +81,10 @@ const translation = {
     link_email: '绑定邮箱',
     link_phone: '绑定手机',
     link_email_or_phone: '绑定邮箱或手机号',
-    link_email_description: '绑定邮箱以保障你的账号安全',
+    link_email_description: '绑定邮箱以保障您的账号安全',
-    link_phone_description: '绑定手机号以保障你的账号安全',
+    link_phone_description: '绑定手机号以保障您的账号安全',
-    link_email_or_phone_description: '绑定邮箱或手机号以保障你的账号安全',
+    link_email_or_phone_description: '绑定邮箱或手机号以保障您的账号安全',
-    continue_with_more_information: '为保障你的账号安全，需要你补充以下信息。',
+    continue_with_more_information: '为保障您的账号安全，需要您补充以下信息。',
-    create_your_account: '注册你的账号',
-    welcome_to_sign_in: '欢迎登录',
   },
   error: {
     general_required: `{{types, list(type: disjunction;)}}必填`,

packages/ui/src/components/BrandingHeader/index.test.tsx

@@ -1,12 +1,10 @@
 import { render } from '@testing-library/react';
 
-import { appLogo } from '@/__mocks__/logto';
+import { appLogo, appHeadline } from '@/__mocks__/logto';
 
 import BrandingHeader from '.';
 
 describe('BrandingHeader UI Component', () => {
-  const appHeadline = 'description.welcome_to_sign_in';
-
   test('render logo with context', () => {
     const { queryByText, container } = render(
       <BrandingHeader logo={appLogo} headline={appHeadline} />

packages/ui/src/components/BrandingHeader/index.tsx

@@ -1,22 +1,18 @@
 import classNames from 'classnames';
-import { useTranslation } from 'react-i18next';
-import type { TFuncKey } from 'react-i18next';
 
 import * as styles from './index.module.scss';
 
 export type Props = {
   className?: string;
   logo: string;
-  headline?: TFuncKey;
+  headline?: string;
 };
 
 const BrandingHeader = ({ logo, headline, className }: Props) => {
-  const { t } = useTranslation();
-
   return (
     <div className={classNames(styles.container, className)}>
       <img className={styles.logo} alt="app logo" src={logo} />
-      {headline && <div className={styles.headline}>{t(headline)}</div>}
+      {headline && <div className={styles.headline}>{headline}</div>}
     </div>
   );
 };

packages/ui/src/containers/LandingPageContainer/index.tsx

@@ -1,7 +1,7 @@
+import { BrandingStyle } from '@logto/schemas';
 import classNames from 'classnames';
 import type { ReactNode } from 'react';
 import { useContext } from 'react';
-import type { TFuncKey } from 'react-i18next';
 
 import BrandingHeader from '@/components/BrandingHeader';
 import { PageContext } from '@/hooks/use-page-context';
@@ -13,17 +13,16 @@ import * as styles from './index.module.scss';
 type Props = {
   children: ReactNode;
   className?: string;
-  title?: TFuncKey;
 };
 
-const LandingPageContainer = ({ children, className, title }: Props) => {
+const LandingPageContainer = ({ children, className }: Props) => {
   const { experienceSettings, theme, platform } = useContext(PageContext);
 
   if (!experienceSettings) {
     return null;
   }
 
-  const { logoUrl, darkLogoUrl } = experienceSettings.branding;
+  const { slogan, logoUrl, darkLogoUrl, style } = experienceSettings.branding;
 
   return (
     <>
@@ -31,7 +30,7 @@ const LandingPageContainer = ({ children, className, title }: Props) => {
       <div className={classNames(styles.wrapper, className)}>
         <BrandingHeader
           className={styles.header}
-          headline={title}
+          headline={style === BrandingStyle.Logo_Slogan ? slogan : undefined}
           logo={getLogoUrl({ theme, logoUrl, darkLogoUrl })}
         />
         {children}

packages/ui/src/pages/Register/index.tsx

@@ -20,7 +20,7 @@ const Register = () => {
   }
 
   return (
-    <LandingPageContainer title="description.create_your_account">
+    <LandingPageContainer>
       {signUpMethods.length > 0 && (
         <IdentifierRegisterForm signUpMethods={signUpMethods} className={styles.main} />
       )}

packages/ui/src/pages/SignIn/index.tsx

@@ -20,7 +20,7 @@ const SignIn = () => {
   }
 
   return (
-    <LandingPageContainer title="description.welcome_to_sign_in">
+    <LandingPageContainer>
       <Main signInMethods={signInMethods} socialConnectors={socialConnectors} />
       {
         // Create Account footer