feat(core,console): add hide logto branding switch

Author: wangsijie

packages/console/src/pages/SignInExperience/PageContent/Branding/BrandingForm/index.tsx

@@ -5,6 +5,7 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { useTranslation } from 'react-i18next';
 
 import LogoAndFavicon from '@/components/ImageInputs/LogoAndFavicon';
+import { isCloud, isDevFeaturesEnabled } from '@/consts/env';
 import Button from '@/ds-components/Button';
 import Card from '@/ds-components/Card';
 import ColorPicker from '@/ds-components/ColorPicker';
@@ -49,6 +50,8 @@ function BrandingForm() {
     }
   }, [handleResetColor, isDarkModeEnabled, isDirty]);
 
+  const showHideLogtoBranding = isCloud && isDevFeaturesEnabled;
+
   return (
     <Card>
       <FormSectionTitle title="branding.title" />
@@ -113,6 +116,14 @@ function BrandingForm() {
           />
         </>
       )}
+      {showHideLogtoBranding && (
+        <FormField title="sign_in_exp.branding.hide_logto_branding">
+          <Switch
+            label={t('sign_in_exp.branding.hide_logto_branding_description')}
+            {...register('hideLogtoBranding')}
+          />
+        </FormField>
+      )}
     </Card>
   );
 }

packages/core/src/__mocks__/sign-in-experience.ts

@@ -54,6 +54,7 @@ export const mockSignInExperience: SignInExperience = {
   branding: {
     logoUrl: 'http://logto.png',
   },
+  hideLogtoBranding: false,
   termsOfUseUrl: mockTermsOfUseUrl,
   privacyPolicyUrl: mockPrivacyPolicyUrl,
   languageInfo: {

packages/core/src/routes/sign-in-experience/index.openapi.json

@@ -23,6 +23,9 @@
                     "languageInfo": {
                       "description": "The language detection policy for the sign-in page."
                     },
+                    "hideLogtoBranding": {
+                      "description": "Cloud only. Whether to hide the Logto branding on hosted sign-in pages."
+                    },
                     "signIn": {
                       "description": "Sign-in method settings."
                     },
@@ -112,6 +115,9 @@
                   "languageInfo": {
                     "description": "Control the language detection policy for the sign-in page."
                   },
+                  "hideLogtoBranding": {
+                    "description": "Cloud only. Whether to hide the Logto branding on hosted sign-in pages."
+                  },
                   "signIn": {
                     "description": "Sign-in method settings"
                   },

packages/core/src/routes/sign-in-experience/index.ts

@@ -10,6 +10,7 @@ import {
 import { conditional, type Optional, tryThat } from '@silverhand/essentials';
 import { literal, object, string, z } from 'zod';
 
+import { EnvSet } from '#src/env-set/index.js';
 import {
   validateSignUp,
   validateSignIn,
@@ -90,7 +91,7 @@ export default function signInExperiencesRoutes<T extends ManagementApiRouter>(
     async (ctx, next) => {
       const {
         query: { removeUnusedDemoSocialConnector },
-        body: { socialSignInConnectorTargets, emailBlocklistPolicy, ...rest },
+        body: { socialSignInConnectorTargets, emailBlocklistPolicy, hideLogtoBranding, ...rest },
       } = ctx.guard;
       const {
         languageInfo,
@@ -189,6 +190,11 @@ export default function signInExperiencesRoutes<T extends ManagementApiRouter>(
 
       const payload = {
         ...rest,
+        ...conditional(
+          EnvSet.values.isCloud &&
+            EnvSet.values.isDevFeaturesEnabled &&
+            hideLogtoBranding !== undefined && { hideLogtoBranding }
+        ),
         ...conditional(
           filteredSocialSignInConnectorTargets && {
             socialSignInConnectorTargets: filteredSocialSignInConnectorTargets,

packages/experience/src/Layout/AppLayout/index.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
+import { useContext } from 'react';
 import { Outlet } from 'react-router-dom';
 
+import PageContext from '@/Providers/PageContextProvider/PageContext';
 import LogtoSignature from '@/components/LogtoSignature';
 import usePlatform from '@/hooks/use-platform';
 import { layoutClassNames } from '@/utils/consts';
@@ -9,15 +11,19 @@ import CustomContent from './CustomContent';
 import styles from './index.module.scss';
 
 const AppLayout = () => {
+  const { experienceSettings } = useContext(PageContext);
   const { isMobile } = usePlatform();
+  const hideLogtoBranding = experienceSettings?.hideLogtoBranding === true;
 
   return (
     <div className={styles.viewBox}>
       <div className={classNames(styles.container, layoutClassNames.pageContainer)}>
         {!isMobile && <CustomContent className={layoutClassNames.customContent} />}
         <main className={classNames(styles.main, layoutClassNames.mainContent)}>
           <Outlet />
-          <LogtoSignature className={classNames(styles.signature, layoutClassNames.signature)} />
+          {!hideLogtoBranding && (
+            <LogtoSignature className={classNames(styles.signature, layoutClassNames.signature)} />
+          )}
         </main>
       </div>
     </div>

packages/experience/src/__mocks__/logto.tsx

@@ -121,6 +121,7 @@ export const mockSignInExperience: SignInExperience = {
   sentinelPolicy: {},
   emailBlocklistPolicy: {},
   forgotPasswordMethods: [],
+  hideLogtoBranding: false,
 };
 
 export const mockSignInExperienceSettings: SignInExperienceResponse = {
@@ -131,6 +132,7 @@ export const mockSignInExperienceSettings: SignInExperienceResponse = {
   termsOfUseUrl: mockSignInExperience.termsOfUseUrl,
   privacyPolicyUrl: mockSignInExperience.privacyPolicyUrl,
   languageInfo: mockSignInExperience.languageInfo,
+  hideLogtoBranding: false,
   signIn: mockSignInExperience.signIn,
   signUp: {
     identifiers: [SignInIdentifier.Username],

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

@@ -40,6 +40,9 @@ const sign_in_exp = {
     app_logo_and_favicon: 'شعار التطبيق ورمز الموقع',
     company_logo_and_favicon: 'شعار الشركة ورمز الموقع',
     organization_logo_and_favicon: 'شعار المنظمة ورمز الموقع',
+    hide_logto_branding: 'Hide Logto branding',
+    hide_logto_branding_description:
+      'Remove "Powered by Logto". Spotlight your brand exclusively with a clean, professional sign-in experience.',
   },
   branding_uploads: {
     app_logo: {

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

@@ -42,6 +42,9 @@ const sign_in_exp = {
     app_logo_and_favicon: 'App-Logo und Favicon',
     company_logo_and_favicon: 'Firmenlogo und Favicon',
     organization_logo_and_favicon: 'Organisationslogo und Favicon',
+    hide_logto_branding: 'Hide Logto branding',
+    hide_logto_branding_description:
+      'Remove "Powered by Logto". Spotlight your brand exclusively with a clean, professional sign-in experience.',
   },
   branding_uploads: {
     app_logo: {

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

@@ -42,6 +42,9 @@ const sign_in_exp = {
     app_logo_and_favicon: 'App logo and favicon',
     company_logo_and_favicon: 'Company logo and favicon',
     organization_logo_and_favicon: 'Organization logo and favicon',
+    hide_logto_branding: 'Hide Logto branding',
+    hide_logto_branding_description:
+      'Remove "Powered by Logto". Spotlight your brand exclusively with a clean, professional sign-in experience.',
   },
   branding_uploads: {
     app_logo: {

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

@@ -43,6 +43,9 @@ const sign_in_exp = {
     app_logo_and_favicon: 'Logotipo y favicon de la aplicación',
     company_logo_and_favicon: 'Logotipo y favicon de la empresa',
     organization_logo_and_favicon: 'Logotipo y favicon de la organización',
+    hide_logto_branding: 'Hide Logto branding',
+    hide_logto_branding_description:
+      'Remove "Powered by Logto". Spotlight your brand exclusively with a clean, professional sign-in experience.',
   },
   branding_uploads: {
     app_logo: {