From 387ee50684338be29330320e33b8027e212e6383 Mon Sep 17 00:00:00 2001 From: Wang Sijie Date: Tue, 8 Mar 2022 11:10:46 +0800 Subject: [PATCH] feat(console): init connectors (#332) --- packages/console/src/App.tsx | 2 + .../src/pages/Connectors/index.module.scss | 34 +++++++++ .../console/src/pages/Connectors/index.tsx | 75 +++++++++++++++++++ .../core/src/connectors/aliyun-dm/index.ts | 4 +- .../core/src/connectors/aliyun-sms/index.ts | 4 +- packages/core/src/connectors/github/index.ts | 7 +- packages/core/src/connectors/google/index.ts | 4 +- packages/phrases/src/locales/en.ts | 14 ++++ packages/phrases/src/locales/zh-cn.ts | 14 ++++ 9 files changed, 148 insertions(+), 10 deletions(-) create mode 100644 packages/console/src/pages/Connectors/index.module.scss create mode 100644 packages/console/src/pages/Connectors/index.tsx diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index 735461c60..184d5d11f 100644 --- a/packages/console/src/App.tsx +++ b/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 = () => { } /> } /> + } /> } /> diff --git a/packages/console/src/pages/Connectors/index.module.scss b/packages/console/src/pages/Connectors/index.module.scss new file mode 100644 index 000000000..5c0e8d902 --- /dev/null +++ b/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; +} diff --git a/packages/console/src/pages/Connectors/index.tsx b/packages/console/src/pages/Connectors/index.tsx new file mode 100644 index 000000000..ec53e2831 --- /dev/null +++ b/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('/api/connectors'); + const isLoading = !data && !error; + + return ( + +
+ +
+ + + + + + + + + {error && ( + + + + )} + {isLoading && ( + + + + )} + {data?.map(({ id, metadata: { name, logo }, enabled }) => ( + + + + + ))} + +
{t('connectors.connector_name')}{t('connectors.connector_status')}
error occurred: {error.metadata.code}
loading
+ + + ) : ( + + ) + } + /> + + + {enabled + ? t('connectors.connector_status_enabled') + : t('connectors.connector_status_disabled')} +
+ + ); +}; + +export default Connectors; diff --git a/packages/core/src/connectors/aliyun-dm/index.ts b/packages/core/src/connectors/aliyun-dm/index.ts index 15d44f06c..41e8eb8b3 100644 --- a/packages/core/src/connectors/aliyun-dm/index.ts +++ b/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）是款简单高效的电子邮件群发服务，构建在阿里云基础之上，帮您快速、精准地实现事务邮件、通知邮件和批量邮件的发送。', }, }; diff --git a/packages/core/src/connectors/aliyun-sms/index.ts b/packages/core/src/connectors/aliyun-sms/index.ts index 4a35da6be..01ca8e02b 100644 --- a/packages/core/src/connectors/aliyun-sms/index.ts +++ b/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，将指定短信内容发送给指定手机用户。', }, }; diff --git a/packages/core/src/connectors/github/index.ts b/packages/core/src/connectors/github/index.ts index ee83eb939..d23ed7e78 100644 --- a/packages/core/src/connectors/github/index.ts +++ b/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: './logo.png', + logo: 'https://user-images.githubusercontent.com/5717882/156983224-7ea0296b-38fa-419d-9515-67e8a9612e09.png', description: { en: 'Sign In with GitHub', - zh_CN: 'GitHub登录', + 'zh-CN': 'GitHub登录', }, }; diff --git a/packages/core/src/connectors/google/index.ts b/packages/core/src/connectors/google/index.ts index a00294f21..20a1b8d59 100644 --- a/packages/core/src/connectors/google/index.ts +++ b/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登录', }, }; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index bdd77ed1a..8cad89c16 100644 --- a/packages/phrases/src/locales/en.ts +++ b/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', + }, + }, }, }; diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index de41b6589..03e4a2c1f 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/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: '社会化登录', + }, + }, }, };