feat(console,ui,phrases,schemas): update favicon and html title (#3302)

.changeset-staged/eight-shoes-look.md

@@ -0,0 +1,17 @@
+---
+"@logto/console": minor
+"@logto/phrases": minor
+"@logto/phrases-ui": minor
+"@logto/schemas": minor
+"@logto/ui": minor
+---
+
+### Add dynamic favicon and html title
+
+- Add the favicon field in the sign-in-experience branding settings. Users would be able to upload their own favicon. Use local logto icon as a fallback
+
+- Set different html title for different pages.
+  - sign-in
+  - register
+  - forgot-password
+  - logto

packages/console/src/pages/SignInExperience/tabs/Branding/BrandingForm.tsx

@@ -27,6 +27,16 @@ const BrandingForm = () => {
   return (
     <Card>
       <div className={styles.title}>{t('sign_in_exp.branding.title')}</div>
+      <FormField title="sign_in_exp.branding.favicon">
+        <TextInput
+          {...register('branding.favicon', {
+            validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
+          })}
+          hasError={Boolean(errors.branding?.favicon)}
+          errorMessage={errors.branding?.favicon?.message}
+          placeholder={t('sign_in_exp.branding.favicon')}
+        />
+      </FormField>
       <FormField title="sign_in_exp.branding.ui_style">
         <Controller
           name="branding.style"

packages/console/src/pages/SignInExperience/utils/form.ts

@@ -47,6 +47,7 @@ export const signInExperienceParser = {
       branding: {
         ...branding,
         // Transform empty string to undefined
+        favicon: conditional(branding.favicon?.length && branding.favicon),
         darkLogoUrl: conditional(branding.darkLogoUrl?.length && branding.darkLogoUrl),
         slogan: conditional(branding.slogan?.length && branding.slogan),
       },

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: 'Ich akzeptiere die ',
     agree_with_terms_modal: 'Bitte akzeptiere die <link></link>.',
     terms_of_use: 'Nutzungsbedingungen',
+    sign_in: 'Anmelden',
     create_account: 'Konto erstellen',
     or: 'oder',
     enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',

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

@@ -46,6 +46,7 @@ const translation = {
     agree_with_terms: 'I have read and agree to the ',
     agree_with_terms_modal: 'To proceed, please agree to the <link></link>.',
     terms_of_use: 'Terms of Use',
+    sign_in: 'Sign in',
     create_account: 'Create account',
     or: 'or',
     enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: "J'ai lu et accepté les ",
     agree_with_terms_modal: 'Pour continuer, veuillez accepter le <link></link>.',
     terms_of_use: "Conditions d'utilisation",
+    sign_in: 'Connexion',
     create_account: 'Créer un compte',
     or: 'ou',
     enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: '나는 내용을 읽었으며, 이에 동의합니다.',
     agree_with_terms_modal: '진행하기 위해서는, 다음을 동의해주세요 <link></link>.',
     terms_of_use: '이용약관',
+    sign_in: '로그인',
     create_account: '계정 생성',
     or: '또는',
     enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: 'Eu li e concordo com os ',
     agree_with_terms_modal: 'Para continuar, por favor, concorde com os <link></link>.',
     terms_of_use: 'Termos de uso',
+    sign_in: 'Entrar',
     create_account: 'Criar conta',
     or: 'ou',
     enter_passcode: 'O código de verificação foi enviado para o seu {{address}} {{target}}',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: 'Eu li e concordo com os ',
     agree_with_terms_modal: 'Para prosseguir, por favor, concorde com o <link></link>.',
     terms_of_use: 'Termos de uso',
+    sign_in: 'Entrar',
     create_account: 'Criar uma conta',
     or: 'ou',
     enter_passcode: 'A senha foi enviada para o seu {{address}} {{target}}',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: 'Я прочитал и согласен с ',
     agree_with_terms_modal: 'Чтобы продолжить, пожалуйста, согласитесь с <link></link>',
     terms_of_use: 'Условиями использования',
+    sign_in: 'Войти',
     create_account: 'Создать аккаунт',
     or: 'или',
     enter_passcode: 'Код подтверждения был отправлен на {{address}}',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: 'Okudum ve anladım',
     agree_with_terms_modal: 'Devam etmek için lütfen <link></link>i kabul edin.',
     terms_of_use: 'Kullanım Koşulları',
+    sign_in: 'Giriş Yap',
     create_account: 'Hesap Oluştur',
     or: 'veya',
     enter_passcode: 'Kod {{address}} {{target}} inize gönderildi.',

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

@@ -48,6 +48,7 @@ const translation = {
     agree_with_terms: '我已阅读并同意 ',
     agree_with_terms_modal: '请先同意 <link></link> 以继续',
     terms_of_use: '使用条款',
+    sign_in: '登录',
     create_account: '创建帐号',
     or: '或',
     enter_passcode: '验证码已经发送至你的{{ address }} {{target}}',

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

@@ -84,6 +84,7 @@ const sign_in_exp = {
   branding: {
     title: 'BRANDING',
     ui_style: 'Stil',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: 'App logo mit Slogan',
       logo: 'Nur App logo',

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

@@ -27,6 +27,7 @@ const sign_in_exp = {
   branding: {
     title: 'BRANDING AREA',
     ui_style: 'Style',
+    favicon: 'Browser favicon',
     styles: {
       logo_slogan: 'App logo with slogan',
       logo: 'App logo only',

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

@@ -29,6 +29,7 @@ const sign_in_exp = {
   branding: {
     title: 'ZONE DE MARQUE',
     ui_style: 'Style',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: "Logo de l'application avec slogan",
       logo: "Logo de l'application seulement",

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

@@ -25,6 +25,7 @@ const sign_in_exp = {
   branding: {
     title: '브랜딩 영역',
     ui_style: '스타일',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: '앱 로고 & 슬로건',
       logo: '앱 로고만',

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

@@ -28,6 +28,7 @@ const sign_in_exp = {
   branding: {
     title: 'ÁREA DE MARCA',
     ui_style: 'Estilo',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: 'Logo do aplicativo com slogan',
       logo: 'Somente logotipo do aplicativo',

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

@@ -27,6 +27,7 @@ const sign_in_exp = {
   branding: {
     title: 'ÁREA DE MARCA',
     ui_style: 'Estilo',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: 'Logo da app com slogan',
       logo: 'Apenas o logo da app',

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

@@ -28,6 +28,7 @@ const sign_in_exp = {
   branding: {
     title: 'MARKA ALANI',
     ui_style: 'Stil',
+    favicon: 'Browser favicon', // UNTRANSLATED
     styles: {
       logo_slogan: 'Sloganlı şekilde uygulama logosu',
       logo: 'Yalnızca uygulama logosu',

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

@@ -26,6 +26,7 @@ const sign_in_exp = {
   branding: {
     title: '品牌定制区',
     ui_style: '样式',
+    favicon: '浏览器地址栏图标',
     styles: {
       logo_slogan: 'Logo 和标语',
       logo: '仅有 Logo',

packages/schemas/src/foundations/jsonb-types.ts

@@ -113,6 +113,7 @@ export const brandingGuard = z.object({
   logoUrl: z.string().url(),
   darkLogoUrl: z.string().url().optional(),
   slogan: z.string().optional(),
+  favicon: z.string().url().optional(),
 });
 
 export type Branding = z.infer<typeof brandingGuard>;

packages/ui/jest.config.ts

@@ -7,6 +7,7 @@ const config: Config.InitialOptions = {
     setupFilesAfterEnv: ['<rootDir>/src/jest.setup.ts'],
     transform: {
       '\\.(svg)$': 'jest-transformer-svg',
+      '\\.(png)$': 'jest-transform-stub',
     },
   }),
   // Will update common config soon

packages/ui/src/App.tsx

@@ -23,7 +23,7 @@ import SocialLinkAccount from './pages/SocialLinkAccount';
 import SocialSignIn from './pages/SocialSignInCallback';
 import Springboard from './pages/Springboard';
 import VerificationCode from './pages/VerificationCode';
-import { getSignInExperienceSettings } from './utils/sign-in-experience';
+import { getSignInExperienceSettings, setFavIcon } from './utils/sign-in-experience';
 
 import './scss/normalized.scss';
 
@@ -44,8 +44,15 @@ const App = () => {
 
     (async () => {
       const settings = await getSignInExperienceSettings();
+
+      const {
+        customCss,
+        branding: { favicon },
+      } = settings;
+
       // eslint-disable-next-line @silverhand/fp/no-mutation
-      customCssRef.current.textContent = settings.customCss;
+      customCssRef.current.textContent = customCss;
+      setFavIcon(favicon);
 
       // Note: i18n must be initialized ahead of page render
       await initI18n();

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

@@ -1,12 +1,25 @@
-import { Outlet } from 'react-router-dom';
+import { useEffect } from 'react';
+import { Outlet, useLocation } from 'react-router-dom';
 
 import LogtoSignature from '@/components/LogtoSignature';
 import usePlatform from '@/hooks/use-platform';
+import { parseHtmlTitle } from '@/utils/sign-in-experience';
 
 import * as styles from './index.module.scss';
 
 const AppContent = () => {
   const { isMobile } = usePlatform();
+  const location = useLocation();
+
+  useEffect(() => {
+    const { pathname } = location;
+    const title = parseHtmlTitle(pathname);
+
+    if (title) {
+      // eslint-disable-next-line @silverhand/fp/no-mutation
+      document.title = title;
+    }
+  }, [location]);
 
   return (
     <div className={styles.viewBox}>

packages/ui/src/hooks/use-preview.ts

@@ -57,7 +57,6 @@ const usePreview = (context: Context): [boolean, PreviewConfig?] => {
 
     const {
       signInExperience: { socialConnectors, color, ...rest },
-      language,
       mode,
       platform,
       isNative,

packages/ui/src/index.html

@@ -4,8 +4,6 @@
 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-  <link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
-  <link rel="icon" href="./favicon.ico" />
   <title>Logto</title>
 </head>
 

packages/ui/src/utils/sign-in-experience.ts

@@ -4,8 +4,12 @@
  */
 
 import { SignInIdentifier } from '@logto/schemas';
+import i18next from 'i18next';
+import type { TFuncKey } from 'react-i18next';
 
 import { getSignInExperience } from '@/apis/settings';
+import defaultAppleTouchLogo from '@/assets/apple-touch-icon.png';
+import defaultFavicon from '@/assets/favicon.png';
 import type { SignInExperienceResponse } from '@/types';
 import { filterSocialConnectors } from '@/utils/social-connectors';
 
@@ -30,3 +34,54 @@ export const isEmailOrPhoneMethod = (
   method: SignInIdentifier
 ): method is SignInIdentifier.Email | SignInIdentifier.Phone =>
   [SignInIdentifier.Email, SignInIdentifier.Phone].includes(method);
+
+export const parseHtmlTitle = (path: string) => {
+  if (path.startsWith('/sign-in') || path.startsWith('/callback') || path.startsWith('/consent')) {
+    return i18next.t<'translation', TFuncKey>('description.sign_in');
+  }
+
+  if (path.startsWith('/register') || path.startsWith('/social/link')) {
+    return i18next.t<'translation', TFuncKey>('description.create_account');
+  }
+
+  if (path.startsWith('/forgot-password')) {
+    return i18next.t<'translation', TFuncKey>('description.reset_password');
+  }
+
+  // Return undefined for all continue flow pages to keep title remain the same as the previous page
+  if (path.startsWith('/continue')) {
+    return;
+  }
+
+  return 'Logto';
+};
+
+export const setFavIcon = (icon?: string) => {
+  const iconLink = document.querySelector<HTMLLinkElement>('link[rel="icon"]');
+  const appleTouchIconLink = document.querySelector<HTMLLinkElement>(
+    'link[rel="apple-touch-icon"]'
+  );
+
+  /* eslint-disable @silverhand/fp/no-mutation */
+
+  if (iconLink) {
+    iconLink.href = icon ?? defaultFavicon;
+  } else {
+    const favIconLink = document.createElement('link');
+    favIconLink.rel = 'shortcut icon';
+    favIconLink.href = icon ?? defaultFavicon;
+    document.querySelectorAll('head')[0]?.append(favIconLink);
+  }
+
+  if (appleTouchIconLink) {
+    appleTouchIconLink.href = icon ?? defaultAppleTouchLogo;
+  } else {
+    const appleTouchIconLink = document.createElement('link');
+    appleTouchIconLink.rel = 'apple-touch-icon';
+    appleTouchIconLink.href = icon ?? defaultAppleTouchLogo;
+    appleTouchIconLink.setAttribute('sizes', '180x180');
+    document.querySelectorAll('head')[0]?.append(appleTouchIconLink);
+  }
+
+  /* eslint-enable @silverhand/fp/no-mutation */
+};