feat(console): add mobile web tab in preview (#1214)

packages/console/src/pages/SignInExperience/components/Preview.module.scss

@@ -121,14 +121,6 @@
           transform: scale(0.75);
           height: 675px;
         }
-
-        .description {
-          margin-top: _.unit(6);
-          width: 100%;
-          text-align: center;
-          color: var(--color-caption);
-          font: var(--font-body-small);
-        }
       }
     }
   }

packages/console/src/pages/SignInExperience/components/Preview.tsx

@@ -23,7 +23,7 @@ const Preview = ({ signInExperience, className }: Props) => {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const [language, setLanguage] = useState<Language>(Language.English);
   const [mode, setMode] = useState<AppearanceMode>(AppearanceMode.LightMode);
-  const [platform, setPlatform] = useState<'web' | 'mobile'>('mobile');
+  const [platform, setPlatform] = useState<'desktopWeb' | 'mobile' | 'mobileWeb'>('mobile');
   const { data: allConnectors } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
   const previewRef = useRef<HTMLIFrameElement>(null);
 
@@ -93,7 +93,8 @@ const Preview = ({ signInExperience, className }: Props) => {
       },
       language,
       mode,
-      platform,
+      platform: platform === 'desktopWeb' ? 'web' : 'mobile',
+      isNative: platform === 'mobile',
     };
   }, [allConnectors, language, mode, platform, signInExperience]);
 
@@ -157,18 +158,28 @@ const Preview = ({ signInExperience, className }: Props) => {
           {t('sign_in_exp.preview.mobile')}
         </TabNavItem>
         <TabNavItem
-          isActive={platform === 'web'}
+          isActive={platform === 'desktopWeb'}
           onClick={() => {
-            setPlatform('web');
+            setPlatform('desktopWeb');
           }}
         >
-          {t('sign_in_exp.preview.web')}
+          {t('sign_in_exp.preview.desktop_web')}
+        </TabNavItem>
+        <TabNavItem
+          isActive={platform === 'mobileWeb'}
+          onClick={() => {
+            setPlatform('mobileWeb');
+          }}
+        >
+          {t('sign_in_exp.preview.mobile_web')}
         </TabNavItem>
       </TabNav>
-      <div className={classNames(styles.body, styles[platform])}>
+      <div
+        className={classNames(styles.body, platform === 'desktopWeb' ? styles.web : styles.mobile)}
+      >
         <div className={styles.deviceWrapper}>
           <div className={classNames(styles.device, styles[mode])}>
-            {platform === 'mobile' && (
+            {platform !== 'desktopWeb' && (
               <div className={styles.topBar}>
                 <div className={styles.time}>{dayjs().format('HH:mm')}</div>
                 <PhoneInfo />
@@ -176,9 +187,6 @@ const Preview = ({ signInExperience, className }: Props) => {
             )}
             <iframe ref={previewRef} src="/sign-in?preview=true" tabIndex={-1} />
           </div>
-          {platform === 'mobile' && (
-            <div className={styles.description}>{t('sign_in_exp.preview.mobile_description')}</div>
-          )}
         </div>
       </div>
     </Card>

packages/phrases/src/locales/en.ts

@@ -511,8 +511,8 @@ const translation = {
         dark: 'Dark',
         light: 'Light',
         mobile: 'Mobile',
-        web: 'Web',
-        mobile_description: 'Mobile includes mobile web, Android and iOS.',
+        desktop_web: 'Desktop Web',
+        mobile_web: 'Mobile Web',
       },
     },
     settings: {

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

@@ -493,9 +493,9 @@ const translation = {
         },
         dark: 'Dark',
         light: 'Light',
-        mobile: 'Mobile',
-        web: 'Web',
-        mobile_description: 'Mobile includes mobile web, Android and iOS.',
+        mobile: '移动',
+        desktop_web: '桌面网页',
+        mobile_web: '移动网页',
       },
     },
     settings: {

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

@@ -1,5 +1,5 @@
 import { Language } from '@logto/phrases';
-import { AppearanceMode } from '@logto/schemas';
+import { AppearanceMode, ConnectorPlatform } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import i18next from 'i18next';
 import { useEffect, useState } from 'react';
@@ -17,6 +17,7 @@ type PreviewConfig = {
   language: Language;
   mode: AppearanceMode.LightMode | AppearanceMode.DarkMode;
   platform: Platform;
+  isNative: boolean;
 };
 
 const usePreview = (context: Context): [boolean, PreviewConfig?] => {
@@ -64,6 +65,7 @@ const usePreview = (context: Context): [boolean, PreviewConfig?] => {
       language,
       mode,
       platform,
+      isNative,
     } = previewConfig;
 
     const experienceSettings: SignInExperienceSettings = {
@@ -74,7 +76,10 @@ const usePreview = (context: Context): [boolean, PreviewConfig?] => {
       },
       primarySignInMethod: getPrimarySignInMethod(signInMethods),
       secondarySignInMethods: getSecondarySignInMethods(signInMethods),
-      socialConnectors: filterPreviewSocialConnectors(platform, socialConnectors),
+      socialConnectors: filterPreviewSocialConnectors(
+        isNative ? ConnectorPlatform.Native : ConnectorPlatform.Web,
+        socialConnectors
+      ),
     };
 
     void i18next.changeLanguage(language);

packages/ui/src/utils/social-connectors.test.ts

@@ -1,3 +1,5 @@
+import { ConnectorPlatform } from '@logto/schemas';
+
 import { ConnectorData, SearchParameters } from '@/types';
 import { getLogtoNativeSdk, isNativeWebview } from '@/utils/native-sdk';
 
@@ -111,12 +113,12 @@ describe('filterPreviewSocialConnectors', () => {
   });
 
   it('undefined input should return empty list', () => {
-    expect(filterPreviewSocialConnectors('web')).toEqual([]);
-    expect(filterPreviewSocialConnectors('mobile')).toEqual([]);
+    expect(filterPreviewSocialConnectors(ConnectorPlatform.Native)).toEqual([]);
+    expect(filterPreviewSocialConnectors(ConnectorPlatform.Web)).toEqual([]);
   });
 
   it('filter Web Connectors', () => {
-    expect(filterPreviewSocialConnectors('web', mockConnectors)).toEqual([
+    expect(filterPreviewSocialConnectors(ConnectorPlatform.Web, mockConnectors)).toEqual([
       { platform: 'Web', target: 'facebook' },
       { platform: 'Web', target: 'google' },
       { platform: 'Universal', target: 'WeChat' },
@@ -124,7 +126,7 @@ describe('filterPreviewSocialConnectors', () => {
   });
 
   it('filter Native Connectors', () => {
-    expect(filterPreviewSocialConnectors('mobile', mockConnectors)).toEqual([
+    expect(filterPreviewSocialConnectors(ConnectorPlatform.Native, mockConnectors)).toEqual([
       { platform: 'Universal', target: 'facebook' },
       { platform: 'Native', target: 'WeChat' },
       { platform: 'Native', target: 'Alipay' },

packages/ui/src/utils/social-connectors.ts

@@ -1,4 +1,6 @@
-import { ConnectorData, Platform, SearchParameters } from '@/types';
+import { ConnectorPlatform } from '@logto/schemas';
+
+import { ConnectorData, SearchParameters } from '@/types';
 import { generateRandomString } from '@/utils';
 import { getLogtoNativeSdk, isNativeWebview } from '@/utils/native-sdk';
 
@@ -139,7 +141,7 @@ export const filterSocialConnectors = (socialConnectors?: ConnectorData[]) => {
  * Social Connectors Filter Utility Methods used in preview mode only
  */
 export const filterPreviewSocialConnectors = (
-  previewPlatform: Platform,
+  platform: ConnectorPlatform.Native | ConnectorPlatform.Web,
   socialConnectors?: ConnectorData[]
 ) => {
   if (!socialConnectors) {
@@ -155,7 +157,7 @@ export const filterPreviewSocialConnectors = (
    * Web platform has higher priority.
    **/
 
-  if (previewPlatform === 'web') {
+  if (platform === ConnectorPlatform.Web) {
     for (const connector of socialConnectors) {
       const { platform, target } = connector;