feat(console): connector logo and platform icon (#892)

packages/connector-alipay/src/constant.ts

@@ -27,8 +27,8 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Web,
   name: {
-    en: 'Sign In with Alipay',
-    'zh-CN': '支付宝登录',
+    en: 'Alipay',
+    'zh-CN': '支付宝',
   },
   logo: './logo.png',
   description: {

packages/connector-facebook/src/constant.ts

@@ -29,8 +29,8 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Web,
   name: {
-    en: 'Sign In with Facebook',
-    'zh-CN': 'Facebook 登录',
+    en: 'Facebook',
+    'zh-CN': 'Facebook',
   },
   logo: './logo.png',
   description: {

packages/connector-github/src/constant.ts

@@ -20,10 +20,10 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Web,
   name: {
-    en: 'Sign In with GitHub',
-    'zh-CN': 'GitHub登录',
+    en: 'GitHub',
+    'zh-CN': 'GitHub',
   },
-  logo: 'https://user-images.githubusercontent.com/5717882/156983224-7ea0296b-38fa-419d-9515-67e8a9612e09.png',
+  logo: 'https://user-images.githubusercontent.com/5717882/169224449-687a1680-85ec-4482-bf04-4132b6476246.svg',
   description: {
     en: 'Sign In with GitHub',
     'zh-CN': 'GitHub登录',

packages/connector-google/src/constant.ts

@@ -20,8 +20,8 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Web,
   name: {
-    en: 'Sign In with Google',
-    'zh-CN': 'Google登录',
+    en: 'Google',
+    'zh-CN': 'Google',
   },
   logo: './logo.png',
   description: {

packages/connector-wechat-native/src/constant.ts

@@ -20,8 +20,8 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Native,
   name: {
-    en: 'Sign In with WeChat',
-    'zh-CN': '微信登录',
+    en: 'WeChat',
+    'zh-CN': '微信',
   },
   logo: './logo.png',
   description: {

packages/connector-wechat/src/constant.ts

@@ -20,8 +20,8 @@ export const defaultMetadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   platform: ConnectorPlatform.Web,
   name: {
-    en: 'Sign In with WeChat',
-    'zh-CN': '微信登录',
+    en: 'WeChat',
+    'zh-CN': '微信',
   },
   logo: './logo.png',
   description: {

packages/console/src/hooks/use-connector-groups.ts

@@ -24,6 +24,7 @@ const useConnectorGroups = () => {
             name: item.metadata.name,
             logo: item.metadata.logo,
             target: item.metadata.target,
+            type: item.metadata.type,
             enabled: item.enabled,
             connectors: [item],
           },

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

@@ -1,3 +1,29 @@
+@use '@/scss/underscore' as _;
+
 .disabled {
   color: var(--color-disabled);
 }
+
+.title {
+  display: flex;
+  align-items: center;
+
+  .logo {
+    margin-right: _.unit(2);
+    width: 20px;
+    height: 20px;
+
+    img {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  .icon {
+    width: 16px;
+    height: 16px;
+    object-fit: cover;
+    margin-left: _.unit(1);
+    color: var(--color-icon);
+  }
+}

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

@@ -1,3 +1,4 @@
+import { ConnectorPlatform, ConnectorType } from '@logto/schemas';
 import { conditionalString } from '@silverhand/essentials';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
@@ -7,6 +8,9 @@ import Alert from '@/components/Alert';
 import Transfer from '@/components/Transfer';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import useConnectorGroups from '@/hooks/use-connector-groups';
+import Native from '@/icons/Native';
+import Universal from '@/icons/Universal';
+import Web from '@/icons/Web';
 
 import * as styles from './ConnectorsTransfer.module.scss';
 
@@ -29,15 +33,32 @@ const ConnectorsTransfer = ({ value, onChange }: Props) => {
   }
 
   const datasource = data
-    ? data.map(({ target, name, enabled }) => ({
-        value: target,
-        title: (
-          <UnnamedTrans
-            resource={name}
-            className={conditionalString(!enabled && styles.disabled)}
-          />
-        ),
-      }))
+    ? data
+        .filter(({ type }) => type === ConnectorType.Social)
+        .map(({ target, name, enabled, connectors, logo }) => ({
+          value: target,
+          title: (
+            <div className={styles.title}>
+              <div className={styles.logo}>
+                <img src={logo} alt={target} />
+              </div>
+              <UnnamedTrans
+                resource={name}
+                className={conditionalString(!enabled && styles.disabled)}
+              />
+              {connectors.length > 1 &&
+                connectors
+                  .filter(({ enabled }) => enabled)
+                  .map(({ platform }) => (
+                    <div key={platform} className={styles.icon}>
+                      {platform === ConnectorPlatform.Web && <Web />}
+                      {platform === ConnectorPlatform.Native && <Native />}
+                      {platform === ConnectorPlatform.Universal && <Universal />}
+                    </div>
+                  ))}
+            </div>
+          ),
+        }))
     : [];
 
   return (

packages/console/src/types/connector.ts

@@ -1,6 +1,6 @@
 import { ConnectorDTO } from '@logto/schemas';
 
-export type ConnectorGroup = Pick<ConnectorDTO['metadata'], 'name' | 'logo' | 'target'> & {
+export type ConnectorGroup = Pick<ConnectorDTO['metadata'], 'name' | 'logo' | 'target' | 'type'> & {
   enabled: boolean;
   connectors: ConnectorDTO[];
 };