refactor(ui): load branding info from settings (#608)

* refactor(ui): load branding info from settings

load branding info from settings

* fix(ui): cr fix typo

fix typo

packages/phrases/src/locales/en.ts

@@ -34,9 +34,11 @@ const translation = {
       cancel: 'Cancel',
     },
     description: {
+      loading: 'Loading...',
+      redirecting: 'Redirecting...',
       agree_with_terms: 'I have read and agree to the ',
       terms_of_use: 'Terms of Use',
-      creat_account: 'Create Account',
+      create_account: 'Create Account',
       forgot_password: 'Forgot Password?',
       or: 'Or',
       enter_passcode: 'The passcode has been sent to {{address}}',

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

@@ -36,9 +36,11 @@ const translation = {
       confirm: '确认',
     },
     description: {
+      loading: '读取中...',
+      redirecting: '页面跳转中...',
       agree_with_terms: '我已阅读并同意 ',
       terms_of_use: '使用条款',
-      creat_account: '创建账号',
+      create_account: '创建账号',
       forgot_password: '忘记密码？',
       or: '或',
       enter_passcode: '验证码已经发送至 {{ address }}',

packages/ui/src/pages/Consent/index.module.scss

@@ -0,0 +1,15 @@
+@use '@/scss/underscore' as _;
+
+.wrapper {
+  position: relative;
+  padding: _.unit(8) _.unit(5);
+  @include _.flex-column;
+
+  .header {
+    margin: _.unit(30) 0;
+  }
+
+  .content {
+    @include _.text-hint;
+  }
+}

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

@@ -1,11 +1,20 @@
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
+import { useTranslation } from 'react-i18next';
 
 import { consent } from '@/apis/consent';
+import BrandingHeader from '@/components/BrandingHeader';
 import useApi from '@/hooks/use-api';
+import { PageContext } from '@/hooks/use-page-context';
+
+import * as styles from './index.module.scss';
 
 const Consent = () => {
+  const { experienceSettings } = useContext(PageContext);
+  const { logoUrl = '' } = experienceSettings?.branding ?? {};
   const { result, run: asyncConsent } = useApi(consent);
 
+  const { t } = useTranslation(undefined, { keyPrefix: 'main_flow' });
+
   useEffect(() => {
     void asyncConsent();
   }, [asyncConsent]);
@@ -16,7 +25,12 @@ const Consent = () => {
     }
   }, [result]);
 
-  return <div>loading...</div>;
+  return (
+    <div className={styles.wrapper}>
+      <BrandingHeader className={styles.header} logo={logoUrl} />
+      <div className={styles.content}>{t('description.loading')}</div>
+    </div>
+  );
 };
 
 export default Consent;

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

@@ -6,7 +6,6 @@ import SignIn from '@/pages/SignIn';
 describe('<SignIn />', () => {
   test('renders without exploding', async () => {
     const { queryByText } = render(<SignIn />);
-    expect(queryByText('Welcome to Logto')).not.toBeNull();
     expect(queryByText('action.sign_in')).not.toBeNull();
   });
 });

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

@@ -1,20 +1,25 @@
+import { BrandingStyle } from '@logto/schemas';
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 
 import BrandingHeader from '@/components/BrandingHeader';
 import TextLink from '@/components/TextLink';
 import UsernameSignin from '@/containers/UsernameSignin';
+import { PageContext } from '@/hooks/use-page-context';
 
 import * as styles from './index.module.scss';
 
 const SignIn = () => {
+  const { experienceSettings } = useContext(PageContext);
+  const { slogan, logoUrl = '', style } = experienceSettings?.branding ?? {};
+
   return (
     <div className={classNames(styles.wrapper)}>
       {/* TODO: load content from sign-in experience  */}
       <BrandingHeader
         className={styles.header}
-        headline="Welcome to Logto"
-        logo="https://avatars.githubusercontent.com/u/84981374?s=400&u=6c44c3642f2fe15a59a56cdcb0358c0bd8b92f57&v=4"
+        headline={style === BrandingStyle.Logo_Slogan ? slogan : undefined}
+        logo={logoUrl}
       />
       <UsernameSignin />
       <TextLink