diff --git a/packages/ui/src/App.tsx b/packages/ui/src/App.tsx
index dd0c71a62..8c04bad4e 100644
--- a/packages/ui/src/App.tsx
+++ b/packages/ui/src/App.tsx
@@ -1,9 +1,7 @@
-import { conditionalString } from '@silverhand/essentials';
import React, { useEffect } from 'react';
import { Route, Routes, BrowserRouter, Navigate } from 'react-router-dom';
-import * as styles from './App.module.scss';
-import AppContent from './components/AppContent';
+import AppContent from './containers/AppContent';
import LoadingLayerProvider from './containers/LoadingLayerProvider';
import usePageContext from './hooks/use-page-context';
import usePreview from './hooks/use-preview';
@@ -29,8 +27,6 @@ const App = () => {
useEffect(() => {
if (isPreview) {
- document.body.classList.add(conditionalString(styles.preview));
-
return;
}
@@ -61,17 +57,21 @@ const App = () => {
/>
}>
- {/* always keep route path with param as the last one */}
} />
} />
} />
} />
{/* social sign-in pages */}
- } />
+ }
+ />
} />
} />
} />
+
+ {/* always keep route path with param as the last one */}
} />
diff --git a/packages/ui/src/components/AppContent/index.module.scss b/packages/ui/src/containers/AppContent/index.module.scss
similarity index 100%
rename from packages/ui/src/components/AppContent/index.module.scss
rename to packages/ui/src/containers/AppContent/index.module.scss
diff --git a/packages/ui/src/components/AppContent/index.tsx b/packages/ui/src/containers/AppContent/index.tsx
similarity index 100%
rename from packages/ui/src/components/AppContent/index.tsx
rename to packages/ui/src/containers/AppContent/index.tsx
diff --git a/packages/ui/src/hooks/use-preview.ts b/packages/ui/src/hooks/use-preview.ts
index 54323baff..c8881a36c 100644
--- a/packages/ui/src/hooks/use-preview.ts
+++ b/packages/ui/src/hooks/use-preview.ts
@@ -1,8 +1,10 @@
import { Language } from '@logto/phrases';
import { AppearanceMode } from '@logto/schemas';
+import { conditionalString } from '@silverhand/essentials';
import i18next from 'i18next';
import { useEffect, useState } from 'react';
+import * as styles from '@/App.module.scss';
import { Context } from '@/hooks/use-page-context';
import initI18n from '@/i18n/init';
import { SignInExperienceSettingsResponse, Platform } from '@/types';
@@ -32,6 +34,9 @@ const usePreview = (context: Context): [boolean, PreviewConfig?] => {
// Init i18n
void initI18n();
+ // Block pointer event
+ document.body.classList.add(conditionalString(styles.preview));
+
const previewMessageHandler = (event: MessageEvent) => {
if (event.origin !== window.location.origin) {
return;
diff --git a/packages/ui/src/hooks/use-social-callback-handler.ts b/packages/ui/src/hooks/use-social-callback-handler.ts
index 9bf2bc81b..db9ab5807 100644
--- a/packages/ui/src/hooks/use-social-callback-handler.ts
+++ b/packages/ui/src/hooks/use-social-callback-handler.ts
@@ -47,7 +47,7 @@ const useSocialCallbackHandler = () => {
// Web flow
navigate(
{
- pathname: `/sign-in/callback/${connectorId}`,
+ pathname: `/social/sign-in-callback/${connectorId}`,
search: data,
},
{
diff --git a/packages/ui/src/hooks/use-social.ts b/packages/ui/src/hooks/use-social.ts
index 6349c5d32..3bbc1cbba 100644
--- a/packages/ui/src/hooks/use-social.ts
+++ b/packages/ui/src/hooks/use-social.ts
@@ -24,7 +24,7 @@ const useSocial = () => {
: redirectTo;
getLogtoNativeSdk()?.getPostMessage()({
- callbackUri: `${window.location.origin}/sign-in/callback/${connectorId}`,
+ callbackUri: `${window.location.origin}/social/sign-in-callback/${connectorId}`,
redirectTo: redirectUri,
});
}, []);
diff --git a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx b/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
index 314bc1b84..2d8f136b7 100644
--- a/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
+++ b/packages/ui/src/pages/SocialSignInCallback/index.test.tsx
@@ -24,9 +24,9 @@ describe('SocialCallbackPage with code', () => {
Object.defineProperty(window, 'location', {
value: {
origin,
- href: `/sign-in/callback?state=${state}&code=foo`,
+ href: `/social/sign-in-callback?state=${state}&code=foo`,
search: `?state=${state}&code=foo`,
- pathname: '/sign-in/callback',
+ pathname: '/social/sign-in-callback',
replace: jest.fn(),
},
});
@@ -34,9 +34,9 @@ describe('SocialCallbackPage with code', () => {
renderWithPageContext(
-
+
- } />
+ } />