mirror of
https://github.com/logto-io/logto.git
synced 2025-03-17 22:31:28 -05:00
feat(console): init connectors (#332)
This commit is contained in:
Wang Sijie
GitHub
parent
d035047ee8
commit
387ee50684
9 changed files with 148 additions and 10 deletions
|
|
@ -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>
|
||||
|
|
|
|||
34
packages/console/src/pages/Connectors/index.module.scss
Normal file
34
packages/console/src/pages/Connectors/index.module.scss
Normal file
|
|
@ -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;
|
||||
}
|
||||
75
packages/console/src/pages/Connectors/index.tsx
Normal file
75
packages/console/src/pages/Connectors/index.tsx
Normal file
|
|
@ -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;
|
||||
|
|
@ -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）是款简单高效的电子邮件群发服务，构建在阿里云基础之上，帮您快速、精准地实现事务邮件、通知邮件和批量邮件的发送。',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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，将指定短信内容发送给指定手机用户。',
|
||||
},
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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登录',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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登录',
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -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: '社会化登录',
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue