feat(console): init connectors (#332)

packages/console/src/App.tsx

@@ -11,6 +11,7 @@ import Topbar from './components/Topbar';
 import initI18n from './i18n/init';
 import ApiResources from './pages/ApiResources';
 import Applications from './pages/Applications';
+import Connectors from './pages/Connectors';
 import Connector from './pages/Connectors/Connector';
 import { fetcher } from './swr';
 
@@ -38,6 +39,7 @@ const Main = () => {
             <Routes>
               <Route path="api-resources" element={<ApiResources />} />
               <Route path="applications" element={<Applications />} />
+              <Route path="connectors" element={<Connectors />} />
               <Route path="connectors/:connectorId" element={<Connector />} />
             </Routes>
           </Content>

packages/console/src/pages/Connectors/index.module.scss

@@ -0,0 +1,34 @@
+@use '@/scss/underscore' as _;
+
+.headline {
+  display: flex;
+  justify-content: space-between;
+}
+
+.table {
+  margin-top: _.unit(6);
+  width: 100%;
+
+  tbody tr.clickable {
+    cursor: pointer;
+
+    &:hover {
+      background: var(--color-table-row-selected);
+    }
+  }
+}
+
+.connectorName {
+  width: 360px;
+}
+
+a.link {
+  color: inherit;
+  text-decoration: none;
+}
+
+.logo {
+  width: 50px;
+  height: 50px;
+  border-radius: 5px;
+}

packages/console/src/pages/Connectors/index.tsx

@@ -0,0 +1,75 @@
+import { ConnectorDTO } from '@logto/schemas';
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Link } from 'react-router-dom';
+import useSWR from 'swr';
+
+import Button from '@/components/Button';
+import Card from '@/components/Card';
+import CardTitle from '@/components/CardTitle';
+import ImagePlaceholder from '@/components/ImagePlaceholder';
+import ItemPreview from '@/components/ItemPreview';
+import { RequestError } from '@/swr';
+
+import * as styles from './index.module.scss';
+
+const Connectors = () => {
+  const { t, i18n } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { data, error } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
+  const isLoading = !data && !error;
+
+  return (
+    <Card>
+      <div className={styles.headline}>
+        <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
+        <Button disabled title="admin_console.connectors.create" />
+      </div>
+      <table className={styles.table}>
+        <thead>
+          <tr>
+            <td className={styles.connectorName}>{t('connectors.connector_name')}</td>
+            <td>{t('connectors.connector_status')}</td>
+          </tr>
+        </thead>
+        <tbody>
+          {error && (
+            <tr>
+              <td colSpan={2}>error occurred: {error.metadata.code}</td>
+            </tr>
+          )}
+          {isLoading && (
+            <tr>
+              <td colSpan={2}>loading</td>
+            </tr>
+          )}
+          {data?.map(({ id, metadata: { name, logo }, enabled }) => (
+            <tr key={id}>
+              <td>
+                <Link to={`/connectors/${id}`} className={styles.link}>
+                  <ItemPreview
+                    title={name[i18n.language] ?? name.en ?? '-'}
+                    subtitle={id}
+                    icon={
+                      logo.startsWith('http') ? (
+                        <img className={styles.logo} src={logo} />
+                      ) : (
+                        <ImagePlaceholder />
+                      )
+                    }
+                  />
+                </Link>
+              </td>
+              <td>
+                {enabled
+                  ? t('connectors.connector_status_enabled')
+                  : t('connectors.connector_status_disabled')}
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </Card>
+  );
+};
+
+export default Connectors;

packages/core/src/connectors/aliyun-dm/index.ts

@@ -18,13 +18,13 @@ export const metadata: ConnectorMetadata = {
   type: ConnectorType.Email,
   name: {
     en: 'Aliyun Direct Mail',
-    zh_CN: '阿里云邮件推送',
+    'zh-CN': '阿里云邮件推送',
   },
   // TODO: add the real logo URL (LOG-1823)
   logo: './logo.png',
   description: {
     en: 'A simple and efficient email service to help you send transactional notifications and batch email.',
-    zh_CN:
+    'zh-CN':
       '邮件推送（DirectMail）是款简单高效的电子邮件群发服务，构建在阿里云基础之上，帮您快速、精准地实现事务邮件、通知邮件和批量邮件的发送。',
   },
 };

packages/core/src/connectors/aliyun-sms/index.ts

@@ -18,13 +18,13 @@ export const metadata: ConnectorMetadata = {
   type: ConnectorType.SMS,
   name: {
     en: 'Aliyun Short Message Service',
-    zh_CN: '阿里云短信服务',
+    'zh-CN': '阿里云短信服务',
   },
   // TODO: add the real logo URL (LOG-1823)
   logo: './logo.png',
   description: {
     en: 'Short Message Service (SMS) has a batch sending feature and various API operations to send one-time password (OTP) messages, notification messages, and promotional messages to customers.',
-    zh_CN:
+    'zh-CN':
       '短信服务（Short Message Service）是指通过调用短信发送API，将指定短信内容发送给指定手机用户。',
   },
 };

packages/core/src/connectors/github/index.ts

@@ -22,13 +22,12 @@ export const metadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   name: {
     en: 'Sign In with GitHub',
-    zh_CN: 'GitHub登录',
+    'zh-CN': 'GitHub登录',
   },
-  // TODO: add the real logo URL (LOG-1823)
+  logo: 'https://user-images.githubusercontent.com/5717882/156983224-7ea0296b-38fa-419d-9515-67e8a9612e09.png',
-  logo: './logo.png',
   description: {
     en: 'Sign In with GitHub',
-    zh_CN: 'GitHub登录',
+    'zh-CN': 'GitHub登录',
   },
 };
 

packages/core/src/connectors/google/index.ts

@@ -28,13 +28,13 @@ export const metadata: ConnectorMetadata = {
   type: ConnectorType.Social,
   name: {
     en: 'Sign In with Google',
-    zh_CN: 'Google登录',
+    'zh-CN': 'Google登录',
   },
   // TODO: add the real logo URL (LOG-1823)
   logo: './logo.png',
   description: {
     en: 'Sign In with Google',
-    zh_CN: 'Google登录',
+    'zh-CN': 'Google登录',
   },
 };
 

packages/phrases/src/locales/en.ts

@@ -58,6 +58,20 @@ const translation = {
       api_name: 'API Name',
       api_identifier: 'API Identifier',
     },
+    connectors: {
+      title: 'Connectors',
+      subtitle: 'Setup connectors to enable passwordless and social sign in experience.',
+      create: 'Add Connector',
+      connector_name: 'Connector Name',
+      connector_status: 'Status',
+      connector_status_enabled: 'Enabled',
+      connector_status_disabled: 'Disabled',
+      type: {
+        email: 'Email Sender',
+        sms: 'SMS Sender',
+        social: 'Social',
+      },
+    },
   },
 };
 

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

@@ -60,6 +60,20 @@ const translation = {
       api_name: 'API Name',
       api_identifier: 'API Identifier',
     },
+    connectors: {
+      title: '连接器',
+      subtitle: 'Setup connectors to enable passwordless and social sign in experience.',
+      create: '添加连接器',
+      connector_name: '连接器',
+      connector_status: '状态',
+      connector_status_enabled: '已启用',
+      connector_status_disabled: '已禁用',
+      type: {
+        email: '邮件服务商',
+        sms: '短信服务商',
+        social: '社会化登录',
+      },
+    },
   },
 };