feat(account-center): add powered by logto (#8021)

Author: wangsijie

packages/account-center/src/App.tsx

@@ -1,15 +1,16 @@
+import LogtoSignature from '@experience/shared/components/LogtoSignature';
 import { LogtoProvider, useLogto, UserScope } from '@logto/react';
 import { accountCenterApplicationId } from '@logto/schemas';
 import { useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Routes } from 'react-router-dom';
 
 import AppBoundary from '@ac/Providers/AppBoundary';
-import ErrorBoundary from '@ac/Providers/AppBoundary/ErrorBoundary';
-import LogtoErrorBoundary from '@ac/Providers/AppBoundary/LogtoErrorBoundary';
 import LoadingContextProvider from '@ac/Providers/LoadingContextProvider';
 
 import styles from './App.module.scss';
 import Callback from './Callback';
+import ErrorBoundary from './Providers/AppBoundary/ErrorBoundary';
+import LogtoErrorBoundary from './Providers/AppBoundary/LogtoErrorBoundary';
 import PageContextProvider from './Providers/PageContextProvider';
 import PageContext from './Providers/PageContextProvider/PageContext';
 import BrandingHeader from './components/BrandingHeader';
@@ -20,7 +21,6 @@ import Home from './pages/Home';
 import Phone from './pages/Phone';
 import UpdateSuccess from './pages/UpdateSuccess';
 import { accountCenterBasePath, handleAccountCenterRoute } from './utils/account-center-route';
-
 import '@experience/shared/scss/normalized.scss';
 
 void initI18n();
@@ -68,6 +68,29 @@ const Main = () => {
   );
 };
 
+const Layout = () => {
+  const { experienceSettings, theme } = useContext(PageContext);
+  const hideLogtoBranding = experienceSettings?.hideLogtoBranding === true;
+
+  return (
+    <div className={styles.app}>
+      <BrandingHeader />
+      <div className={styles.layout}>
+        <div className={styles.container}>
+          <main className={styles.main}>
+            <ErrorBoundary>
+              <LogtoErrorBoundary>
+                <Main />
+              </LogtoErrorBoundary>
+            </ErrorBoundary>
+            {!hideLogtoBranding && <LogtoSignature className={styles.signature} theme={theme} />}
+          </main>
+        </div>
+      </div>
+    </div>
+  );
+};
+
 const App = () => (
   <BrowserRouter basename={accountCenterBasePath}>
     <LogtoProvider
@@ -80,20 +103,7 @@ const App = () => (
       <LoadingContextProvider>
         <PageContextProvider>
           <AppBoundary>
-            <div className={styles.app}>
-              <BrandingHeader />
-              <div className={styles.layout}>
-                <div className={styles.container}>
-                  <main className={styles.main}>
-                    <ErrorBoundary>
-                      <LogtoErrorBoundary>
-                        <Main />
-                      </LogtoErrorBoundary>
-                    </ErrorBoundary>
-                  </main>
-                </div>
-              </div>
-            </div>
+            <Layout />
           </AppBoundary>
         </PageContextProvider>
       </LoadingContextProvider>

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

@@ -3,15 +3,15 @@ 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 LogtoSignature from '@/shared/components/LogtoSignature';
 import { layoutClassNames } from '@/utils/consts';
 
 import CustomContent from './CustomContent';
 import styles from './index.module.scss';
 
 const AppLayout = () => {
-  const { experienceSettings } = useContext(PageContext);
+  const { experienceSettings, theme } = useContext(PageContext);
   const { isMobile } = usePlatform();
   const hideLogtoBranding = experienceSettings?.hideLogtoBranding === true;
 
@@ -22,7 +22,10 @@ const AppLayout = () => {
         <main className={classNames(styles.main, layoutClassNames.mainContent)}>
           <Outlet />
           {!hideLogtoBranding && (
-            <LogtoSignature className={classNames(styles.signature, layoutClassNames.signature)} />
+            <LogtoSignature
+              className={classNames(styles.signature, layoutClassNames.signature)}
+              theme={theme}
+            />
           )}
         </main>
       </div>

packages/experience/src/assets/index.d.ts

@@ -4,3 +4,8 @@ declare module '@/assets/icons/*.svg' {
   const value: SvgComponent;
   export default value;
 }
+
+declare module '@/shared/assets/icons/*.svg' {
+  const value: SvgComponent;
+  export default value;
+}

…nce/src/assets/icons/logto-logo-dark.svg …/shared/assets/icons/logto-logo-dark.svgpackages/experience/src/assets/icons/logto-logo-dark.svg renamed to packages/experience/src/shared/assets/icons/logto-logo-dark.svg packages/experience/src/assets/icons/logto-logo-dark.svg renamed to packages/experience/src/shared/assets/icons/logto-logo-dark.svg

@@ -1,6 +1,5 @@
 @use '@/shared/scss/underscore' as _;
 
-
 .signature {
   @include _.flex-row;
   font: var(--font-label-2);
@@ -37,7 +36,6 @@
   }
 }
 
-
 :global(body.mobile) {
   .signature {
     color: var(--color-neutral-variant-80);

…ce/src/assets/icons/logto-logo-light.svg …shared/assets/icons/logto-logo-light.svgpackages/experience/src/assets/icons/logto-logo-light.svg renamed to packages/experience/src/shared/assets/icons/logto-logo-light.svg packages/experience/src/assets/icons/logto-logo-light.svg renamed to packages/experience/src/shared/assets/icons/logto-logo-light.svg

@@ -1,10 +1,9 @@
 import { Theme } from '@logto/schemas';
-import { useContext, useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
-import PageContext from '@/Providers/PageContextProvider/PageContext';
-import LogtoLogtoDark from '@/assets/icons/logto-logo-dark.svg?react';
-import LogtoLogoLight from '@/assets/icons/logto-logo-light.svg?react';
-import LogtoLogoShadow from '@/assets/icons/logto-logo-shadow.svg?react';
+import LogtoLogtoDark from '@/shared/assets/icons/logto-logo-dark.svg?react';
+import LogtoLogoLight from '@/shared/assets/icons/logto-logo-light.svg?react';
+import LogtoLogoShadow from '@/shared/assets/icons/logto-logo-shadow.svg?react';
 
 import styles from './index.module.scss';
 
@@ -77,10 +76,10 @@ body.mobile [data-logto-signature="secured"][data-logto-signature="secured"] {
 
 type Props = {
   readonly className?: string;
+  readonly theme: Theme;
 };
 
-const LogtoSignature = ({ className }: Props) => {
-  const { theme } = useContext(PageContext);
+const LogtoSignature = ({ className, theme }: Props) => {
   const LogtoLogo = theme === Theme.Light ? LogtoLogoLight : LogtoLogtoDark;
 
   const containerRef = useRef<HTMLDivElement>(null);
@@ -165,7 +164,7 @@ const LogtoSignature = ({ className }: Props) => {
         guardStyleElement.remove();
       }
     };
-  }, [className]);
+  }, []);
 
   return (
     <div ref={containerRef} className={className} data-logto-signature-container="secured">