diff --git a/packages/console/src/assets/images/connector-email.svg b/packages/console/src/assets/images/connector-email.svg
new file mode 100644
index 000000000..2a717b4d5
--- /dev/null
+++ b/packages/console/src/assets/images/connector-email.svg
@@ -0,0 +1,10 @@
+
diff --git a/packages/console/src/assets/images/connector-sms.svg b/packages/console/src/assets/images/connector-sms.svg
new file mode 100644
index 000000000..312c817f0
--- /dev/null
+++ b/packages/console/src/assets/images/connector-sms.svg
@@ -0,0 +1,14 @@
+
diff --git a/packages/console/src/components/ImagePlaceholder/index.module.scss b/packages/console/src/components/ImagePlaceholder/index.module.scss
deleted file mode 100644
index 0c3515f03..000000000
--- a/packages/console/src/components/ImagePlaceholder/index.module.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.container {
- background: rgba(#ffcc4d, 0.3);
- display: flex;
- justify-content: center;
- align-items: center;
- padding: _.unit(2);
-}
diff --git a/packages/console/src/components/ImagePlaceholder/index.tsx b/packages/console/src/components/ImagePlaceholder/index.tsx
deleted file mode 100644
index e3eb7b8c0..000000000
--- a/packages/console/src/components/ImagePlaceholder/index.tsx
+++ /dev/null
@@ -1,27 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-
-import defaultPlaceholder from '@/assets/images/default-placeholder.svg';
-
-import * as styles from './index.module.scss';
-
-type Props = {
- size?: number;
- borderRadius?: number;
-};
-
-const ImagePlaceholder = ({ size = 40, borderRadius = 8 }: Props) => {
- const { t } = useTranslation();
-
- return (
-
-

-
- );
-};
-
-export default ImagePlaceholder;
diff --git a/packages/console/src/consts/connectors.ts b/packages/console/src/consts/connectors.ts
new file mode 100644
index 000000000..7449fa992
--- /dev/null
+++ b/packages/console/src/consts/connectors.ts
@@ -0,0 +1,26 @@
+import { I18nKey } from '@logto/phrases';
+import { ConnectorType } from '@logto/schemas';
+
+import emailConnectorIcon from '@/assets/images/connector-email.svg';
+import smsConnectorIcon from '@/assets/images/connector-sms.svg';
+
+type TitlePlaceHolder = {
+ [key in ConnectorType]: I18nKey;
+};
+
+export const connectorTitlePlaceHolder: TitlePlaceHolder = Object.freeze({
+ [ConnectorType.SMS]: 'admin_console.connectors.type.sms',
+ [ConnectorType.Email]: 'admin_console.connectors.type.email',
+ [ConnectorType.Social]: 'admin_console.connectors.type.social',
+});
+
+type IconPlaceHolder = {
+ [key in ConnectorType]: string;
+};
+
+export const connectorIconPlaceHolder: IconPlaceHolder = Object.freeze({
+ [ConnectorType.SMS]: smsConnectorIcon,
+ [ConnectorType.Email]: emailConnectorIcon,
+ // Note: we don't need icon placeholder for social connector
+ [ConnectorType.Social]: '',
+});
diff --git a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
index fca5c09ed..55d7288bb 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@@ -1,21 +1,29 @@
-import { ConnectorDTO } from '@logto/schemas';
+import { ConnectorDTO, ConnectorType } from '@logto/schemas';
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { Link } from 'react-router-dom';
-import ImagePlaceholder from '@/components/ImagePlaceholder';
import ItemPreview from '@/components/ItemPreview';
import UnnamedTrans from '@/components/UnnamedTrans';
+import { connectorIconPlaceHolder, connectorTitlePlaceHolder } from '@/consts/connectors';
import * as styles from './index.module.scss';
type Props = {
+ type: ConnectorType;
connector?: ConnectorDTO;
- titlePlaceholder?: string;
};
-const ConnectorName = ({ connector, titlePlaceholder = '' }: Props) => {
+const ConnectorName = ({ type, connector }: Props) => {
+ const { t } = useTranslation(undefined);
+
if (!connector) {
- return } />;
+ return (
+ }
+ />
+ );
}
return (
diff --git a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
index cd6039796..99011de1c 100644
--- a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
@@ -1,9 +1,10 @@
import { ConnectorDTO, ConnectorType } from '@logto/schemas';
-import React, { useMemo } from 'react';
+import React from 'react';
import { useTranslation } from 'react-i18next';
import Button from '@/components/Button';
import Status from '@/components/Status';
+import { connectorTitlePlaceHolder } from '@/consts/connectors';
import ConnectorName from '../ConnectorName';
@@ -14,38 +15,26 @@ type Props = {
};
const ConnectorRow = ({ type, connector, onClickSetup }: Props) => {
- const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
-
- const typeLabel = useMemo(() => {
- if (type === ConnectorType.Email) {
- return t('connectors.type.email');
- }
-
- if (type === ConnectorType.SMS) {
- return t('connectors.type.sms');
- }
-
- return t('connectors.type.social');
- }, [type, t]);
+ const { t } = useTranslation(undefined);
return (
-
+
|
- {typeLabel} |
+ {t(connectorTitlePlaceHolder[type])} |
{type === ConnectorType.Social && (
{t(
connector?.enabled
- ? 'connectors.connector_status_enabled'
- : 'connectors.connector_status_disabled'
+ ? 'admin_console.connectors.connector_status_enabled'
+ : 'admin_console.connectors.connector_status_disabled'
)}
)}
{type !== ConnectorType.Social && connector && (
- {t('connectors.connector_status_enabled')}
+ {t('admin_console.connectors.connector_status_enabled')}
)}
{type !== ConnectorType.Social && !connector && (
|