feat(console): connector warnings in sign in methods (#710)

* feat(console): connector warnings in sign in methods

* fix: cr

packages/console/src/pages/SignInExperience/components/ConnectorSetupWarning.tsx

@@ -0,0 +1,51 @@
+import { ConnectorDTO, ConnectorType, SignInMethodKey } from '@logto/schemas';
+import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import Alert from '@/components/Alert';
+import { RequestError } from '@/hooks/use-api';
+
+type Props = {
+  method: SignInMethodKey;
+};
+
+const ConnectorSetupWarning = ({ method }: Props) => {
+  const { data: connectors } = useSWR<ConnectorDTO[], RequestError>('/api/connectors');
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+
+  const type = useMemo(() => {
+    if (method === SignInMethodKey.Username) {
+      return;
+    }
+
+    if (method === SignInMethodKey.SMS) {
+      return ConnectorType.SMS;
+    }
+
+    if (method === SignInMethodKey.Email) {
+      return ConnectorType.Email;
+    }
+
+    return ConnectorType.Social;
+  }, [method]);
+
+  if (!type || !connectors) {
+    return null;
+  }
+
+  if (connectors.some(({ metadata, enabled }) => metadata.type === type && enabled)) {
+    return null;
+  }
+
+  return (
+    <Alert
+      action="admin_console.sign_in_exp.setup_warning.setup"
+      href={type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
+    >
+      {t('sign_in_exp.setup_warning.no_connector', { context: type.toLowerCase() })}
+    </Alert>
+  );
+};
+
+export default ConnectorSetupWarning;

packages/console/src/pages/SignInExperience/components/ConnectorsTransfer.tsx

@@ -5,6 +5,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import useSWR from 'swr';
 
+import Alert from '@/components/Alert';
 import Transfer from '@/components/Transfer';
 import UnnamedTrans from '@/components/UnnamedTrans';
 import { RequestError } from '@/hooks/use-api';
@@ -42,21 +43,26 @@ const ConnectorsTransfer = ({ value, onChange }: Props) => {
     : [];
 
   return (
-    <Transfer
-      value={value}
-      datasource={datasource}
-      title={t('sign_in_exp.sign_in_methods.transfer.title')}
-      footer={
-        <div>
-          {t('sign_in_exp.sign_in_methods.transfer.footer.not_in_list')}{' '}
-          <Link to="/connectors/social">
-            {t('sign_in_exp.sign_in_methods.transfer.footer.set_up_more')}
-          </Link>{' '}
-          {t('sign_in_exp.sign_in_methods.transfer.footer.go_to')}
-        </div>
-      }
-      onChange={onChange}
-    />
+    <>
+      {value.length === 0 && (
+        <Alert>{t('sign_in_exp.setup_warning.no_added_social_connector')}</Alert>
+      )}
+      <Transfer
+        value={value}
+        datasource={datasource}
+        title={t('sign_in_exp.sign_in_methods.transfer.title')}
+        footer={
+          <div>
+            {t('sign_in_exp.sign_in_methods.transfer.footer.not_in_list')}{' '}
+            <Link to="/connectors/social">
+              {t('sign_in_exp.sign_in_methods.transfer.footer.set_up_more')}
+            </Link>{' '}
+            {t('sign_in_exp.sign_in_methods.transfer.footer.go_to')}
+          </div>
+        }
+        onChange={onChange}
+      />
+    </>
   );
 };
 

packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx

@@ -9,6 +9,7 @@ import Select from '@/components/Select';
 import Switch from '@/components/Switch';
 
 import { SignInExperienceForm } from '../types';
+import ConnectorSetupWarning from './ConnectorSetupWarning';
 import ConnectorsTransfer from './ConnectorsTransfer';
 import * as styles from './index.module.scss';
 
@@ -19,6 +20,8 @@ const SignInMethodsForm = () => {
   const { register, watch, control, setValue } = useFormContext<SignInExperienceForm>();
   const primaryMethod = watch('signInMethods.primary');
   const enableSecondary = watch('signInMethods.enableSecondary');
+  const sms = watch('signInMethods.sms');
+  const email = watch('signInMethods.email');
   const social = watch('signInMethods.social');
 
   useEffect(() => {
@@ -42,6 +45,11 @@ const SignInMethodsForm = () => {
           </>
         );
 
+        const enabled =
+          (method === SignInMethodKey.Email && email) ||
+          (method === SignInMethodKey.SMS && sms) ||
+          (method === SignInMethodKey.Social && social);
+
         return (
           <div key={method} className={styles.method}>
             <Checkbox
@@ -49,10 +57,11 @@ const SignInMethodsForm = () => {
               disabled={primaryMethod === method}
               {...register(`signInMethods.${method}`)}
             />
+            {enabled && <ConnectorSetupWarning method={method} />}
           </div>
         );
       }),
-    [primaryMethod, register, t]
+    [primaryMethod, register, t, email, social, sms]
   );
 
   return (
@@ -74,6 +83,7 @@ const SignInMethodsForm = () => {
           )}
         />
       </FormField>
+      {primaryMethod && <ConnectorSetupWarning method={primaryMethod} />}
       {primaryMethod === SignInMethodKey.Social && (
         <div className={styles.primarySocial}>
           <Controller

packages/console/src/pages/SignInExperience/types.ts

@@ -1,5 +1,5 @@
 import { Language } from '@logto/phrases';
-import { SignInExperience, SignInMethods } from '@logto/schemas';
+import { SignInExperience, SignInMethodKey } from '@logto/schemas';
 
 export enum LanguageMode {
   Auto = 'Auto',
@@ -8,7 +8,7 @@ export enum LanguageMode {
 
 export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'languageInfo'> & {
   signInMethods: {
-    primary?: keyof SignInMethods;
+    primary?: SignInMethodKey;
     enableSecondary: boolean;
     username: boolean;
     sms: boolean;

packages/phrases/src/locales/en.ts

@@ -422,8 +422,15 @@ const translation = {
       },
       setup_warning: {
         setup: 'Set up',
-        no_connector:
+        no_connector: '',
+        no_connector_sms:
+          'You haven’t set up SMS connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_connector_email:
+          'You haven’t set up Email connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_connector_social:
           'You haven’t set up any social connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_added_social_connector:
+          'You’ve set up a few social connectors now. Make sure to add some to your sign in experience. Drag and drop to change the order.',
       },
       save_alert: {
         title: 'Reminder',

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

@@ -418,7 +418,15 @@ const translation = {
       },
       setup_warning: {
         setup: '设置',
-        no_connector: '你尚未添加社交登录连接器。你需要先完成设置才能启用。',
+        no_connector: '',
+        no_connector_sms:
+          'You haven’t set up SMS connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_connector_email:
+          'You haven’t set up Email connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_connector_social:
+          'You haven’t set up any social connectors yet. Your sign in experience won’t go live until you finish the settings first. ',
+        no_added_social_connector:
+          'You’ve set up a few social connectors now. Make sure to add some to your sign in experience. Drag and drop to change the order.',
       },
       save_alert: {
         title: '提示',