mirror of
https://github.com/logto-io/logto.git
synced 2025-03-24 22:41:28 -05:00
feat(console): add setup sie notice for the connectors page (#2306)
This commit is contained in:
Xiao Yijun
GitHub
parent
1c50efe632
commit
bc989eca38
18 changed files with 87 additions and 1 deletions
|
|
@ -15,6 +15,7 @@ type Props = {
|
|||
href?: string;
|
||||
onClick?: () => void;
|
||||
variant?: 'plain' | 'shadow';
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const Alert = ({
|
||||
|
|
@ -24,9 +25,10 @@ const Alert = ({
|
|||
onClick,
|
||||
severity = 'info',
|
||||
variant = 'plain',
|
||||
className,
|
||||
}: Props) => {
|
||||
return (
|
||||
<div className={classNames(styles.alert, styles[severity], styles[variant])}>
|
||||
<div className={classNames(styles.alert, styles[severity], styles[variant], className)}>
|
||||
<div className={styles.icon}>
|
||||
<Info />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ const userPreferencesGuard = z.object({
|
|||
appearanceMode: z.nativeEnum(AppearanceMode),
|
||||
experienceNoticeConfirmed: z.boolean().optional(),
|
||||
getStartedHidden: z.boolean().optional(),
|
||||
connectorSieNoticeConfirmed: z.boolean().optional(),
|
||||
});
|
||||
|
||||
export type UserPreferences = z.infer<typeof userPreferencesGuard>;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,12 @@
|
|||
@use '@/scss/underscore' as _;
|
||||
|
||||
.container {
|
||||
.notice {
|
||||
margin: _.unit(4) 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
color: var(--color-text-link);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import type { ConnectorResponse } from '@logto/schemas';
|
||||
import { Trans, useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import useSWR from 'swr';
|
||||
|
||||
import Alert from '@/components/Alert';
|
||||
import useUserPreferences from '@/hooks/use-user-preferences';
|
||||
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
const SignInExperienceSetupNotice = () => {
|
||||
const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
|
||||
const { data: connectors } = useSWR<ConnectorResponse[]>('/api/connectors');
|
||||
const {
|
||||
data: { connectorSieNoticeConfirmed },
|
||||
update,
|
||||
} = useUserPreferences();
|
||||
|
||||
if (!connectors || connectorSieNoticeConfirmed) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const hasSetupConnector = connectors.some(({ enabled }) => enabled);
|
||||
|
||||
if (!hasSetupConnector) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<Alert
|
||||
action="general.got_it"
|
||||
className={styles.notice}
|
||||
onClick={() => {
|
||||
void update({ connectorSieNoticeConfirmed: true });
|
||||
}}
|
||||
>
|
||||
<Trans
|
||||
components={{
|
||||
a: <Link to="/sign-in-experience/sign-up-and-sign-in" target="_blank" />,
|
||||
}}
|
||||
>
|
||||
{t('connectors.config_sie_notice', { link: t('connectors.config_sie_link_text') })}
|
||||
</Trans>
|
||||
</Alert>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default SignInExperienceSetupNotice;
|
||||
|
|
@ -7,6 +7,7 @@
|
|||
.headline {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
|
|||
|
|
@ -20,6 +20,7 @@ import * as tableStyles from '@/scss/table.module.scss';
|
|||
|
||||
import ConnectorRow from './components/ConnectorRow';
|
||||
import CreateForm from './components/CreateForm';
|
||||
import SignInExperienceSetupNotice from './components/SignInExperienceSetupNotice';
|
||||
import * as styles from './index.module.scss';
|
||||
|
||||
const Connectors = () => {
|
||||
|
|
@ -73,6 +74,7 @@ const Connectors = () => {
|
|||
/>
|
||||
)}
|
||||
</div>
|
||||
<SignInExperienceSetupNotice />
|
||||
<TabNav className={styles.tabs}>
|
||||
<TabNavItem href="/connectors">{t('connectors.tab_email_sms')}</TabNavItem>
|
||||
<TabNavItem href="/connectors/social">{t('connectors.tab_social')}</TabNavItem>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const connectors = {
|
|||
title: 'Connectors',
|
||||
subtitle: 'Set up connectors to enable passwordless and social sign in experience',
|
||||
create: 'Add Social Connector',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.',
|
||||
config_sie_link_text: 'sign in experience',
|
||||
tab_email_sms: 'Email and SMS connectors',
|
||||
tab_social: 'Social connectors',
|
||||
connector_name: 'Connector name',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const general = {
|
|||
leave_page: 'Leave Page',
|
||||
stay_on_page: 'Stay on Page',
|
||||
type_to_search: 'Type to search',
|
||||
got_it: 'Got it',
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ const connectors = {
|
|||
subtitle:
|
||||
'Configurez des connecteurs pour permettre une expérience de connexion sans mot de passe et sociale.',
|
||||
create: 'Ajouter un connecteur social',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
|
||||
config_sie_link_text: 'sign in experience', // UNTRANSLATED
|
||||
tab_email_sms: 'Connecteurs Email et SMS',
|
||||
tab_social: 'Connecteurs sociaux',
|
||||
connector_name: 'Nom du connecteur',
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const general = {
|
|||
leave_page: 'Quittez la page',
|
||||
stay_on_page: 'Rester sur la page',
|
||||
type_to_search: 'Type to search', // UNTRANSLATED
|
||||
got_it: 'Got it', // UNTRANSLATED
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const connectors = {
|
|||
title: '연동',
|
||||
subtitle: '비밀번호 없이 또는 소셜 로그인을 제공하여 보다 나은 경험을 위해 연동해주세요.',
|
||||
create: '소셜 연동 추가',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
|
||||
config_sie_link_text: 'sign in experience', // UNTRANSLATED
|
||||
tab_email_sms: '이메일/SMS 연동',
|
||||
tab_social: '소셜 연동',
|
||||
connector_name: '연동 이름',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const general = {
|
|||
leave_page: '페이지 나가기',
|
||||
stay_on_page: '페이지 유지하기',
|
||||
type_to_search: 'Type to search', // UNTRANSLATED
|
||||
got_it: 'Got it', // UNTRANSLATED
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const connectors = {
|
|||
title: 'Conectores',
|
||||
subtitle: 'Configure conectores para habilitar a experiência de login social e sem senha',
|
||||
create: 'Adicionar conector social',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
|
||||
config_sie_link_text: 'sign in experience', // UNTRANSLATED
|
||||
tab_email_sms: 'Conectores de Email e SMS',
|
||||
tab_social: 'Conectores sociais',
|
||||
connector_name: 'Nome do conector',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const general = {
|
|||
leave_page: 'Sair da página',
|
||||
stay_on_page: 'Ficar na página',
|
||||
type_to_search: 'Type to search', // UNTRANSLATED
|
||||
got_it: 'Got it', // UNTRANSLATED
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ const connectors = {
|
|||
subtitle:
|
||||
'Şifresiz ve sosyal oturum açma deneyimini etkinleştirmek için connectorları ayarlayınız.',
|
||||
create: 'Social Connector ekle',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
|
||||
config_sie_link_text: 'sign in experience', // UNTRANSLATED
|
||||
tab_email_sms: 'E-posta ve SMS connectorları',
|
||||
tab_social: 'Social connectorlar',
|
||||
connector_name: 'Connector adı',
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ const general = {
|
|||
leave_page: 'Sayfayı terk et',
|
||||
stay_on_page: 'Bu sayfada kal',
|
||||
type_to_search: 'Type to search', // UNTRANSLATED
|
||||
got_it: 'Got it', // UNTRANSLATED
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
|
|
@ -2,6 +2,8 @@ const connectors = {
|
|||
title: '连接器',
|
||||
subtitle: '设置连接器，开启无密码和社交登录',
|
||||
create: '添加社交连接器',
|
||||
config_sie_notice: 'You’ve set up connectors. Make sure to configure it in <a>{{link}}</a>.', // UNTRANSLATED
|
||||
config_sie_link_text: 'sign in experience', // UNTRANSLATED
|
||||
tab_email_sms: '短信和邮件连接器',
|
||||
tab_social: '社交连接器',
|
||||
connector_name: '连接器名称',
|
||||
|
|
|
|||
|
|
@ -36,6 +36,7 @@ const general = {
|
|||
leave_page: '离开此页',
|
||||
stay_on_page: '留在此页',
|
||||
type_to_search: '输入搜索',
|
||||
got_it: 'Got it', // UNTRANSLATED
|
||||
};
|
||||
|
||||
export default general;
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue