feat(cloud): add social callback page (#3440)

packages/console/src/cloud/App.tsx

@@ -4,6 +4,7 @@ import Callback from '@cloud/pages/Callback';
 
 import * as styles from './App.module.scss';
 import Main from './pages/Main';
+import SocialDemoCallback from './pages/SocialDemoCallback';
 import { CloudRoute } from './types';
 
 const App = () => {
@@ -12,6 +13,7 @@ const App = () => {
       <div className={styles.app}>
         <Routes>
           <Route path={`/${CloudRoute.Callback}`} element={<Callback />} />
+          <Route path={`/${CloudRoute.SocialDemoCallback}`} element={<SocialDemoCallback />} />
           <Route path={`/:tenantId/${CloudRoute.Callback}`} element={<Callback />} />
           <Route path="/*" element={<Main />} />
         </Routes>

packages/console/src/cloud/pages/SocialDemoCallback/index.module.scss

@@ -0,0 +1,53 @@
+@use '@/scss/underscore' as _;
+@use '@logto/core-kit/scss/fonts';
+@use '@logto/core-kit/scss/console-themes' as themes;
+
+.container {
+  .card {
+    background: var(--color-layer-1);
+    border-radius: 16px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    width: 640px;
+    height: 640px;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    font-size: 14px;
+    line-height: 20px;
+
+    img {
+      margin-top: _.unit(25);
+      width: 160px;
+      height: 160px;
+    }
+
+    .title {
+      margin-top: _.unit(16);
+      color: var(--color-neutral-10);
+      font: var(--font-title-2);
+    }
+
+    .message {
+      margin-top: _.unit(3);
+      font: var(--font-body-2);
+      color: var(--color-text-secondary);
+      padding: 0 _.unit(8);
+    }
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  body {
+    @include themes.light;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  body {
+    @include themes.dark;
+  }
+}

packages/console/src/cloud/pages/SocialDemoCallback/index.tsx

@@ -0,0 +1,26 @@
+import { Theme } from '@logto/schemas';
+import { useTranslation } from 'react-i18next';
+
+import CongratsDark from '@/assets/images/congrats-dark.svg';
+import Congrats from '@/assets/images/congrats.svg';
+import Card from '@/components/Card';
+import useTheme from '@/hooks/use-theme';
+
+import * as styles from './index.module.scss';
+
+const SocialDemoCallback = () => {
+  const theme = useTheme();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  return (
+    <div className={styles.container}>
+      <Card className={styles.card}>
+        {theme === Theme.Light ? <Congrats /> : <CongratsDark />}
+        <div className={styles.title}>{t('cloud.socialCallback.title')}</div>
+        <div className={styles.message}>{t('cloud.socialCallback.description')}</div>
+      </Card>
+    </div>
+  );
+};
+
+export default SocialDemoCallback;

packages/console/src/cloud/types.ts

@@ -1,3 +1,4 @@
 export enum CloudRoute {
   Callback = 'callback',
+  SocialDemoCallback = 'social-demo-callback',
 }

packages/phrases/src/locales/de/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/en/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview',
+  socialCallback: {
+    title: "You've successfully signed in!",
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.',
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/fr/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/ko/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/pt-br/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/pt-pt/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/tr-tr/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;

packages/phrases/src/locales/zh-cn/translation/admin-console/cloud.ts

@@ -96,6 +96,11 @@ const cloud = {
     },
   },
   broadcast: '📣 You are participating in Logto Cloud Preview', // UNTRANSLATED
+  socialCallback: {
+    title: "You've successfully signed in!", // UNTRANSLATED
+    description:
+      'You have successfully signed in using your social account. To ensure seamless integration and access to all the features of Logto, we recommend that you proceed to configure your own social connector.', // UNTRANSLATED
+  },
 };
 
 export default cloud;