feat(console): add connector check for forgot password methods (#7635)

Author: wangsijie

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/ForgotPasswordMethodEditBox/VerificationMethodItem.tsx

@@ -1,30 +1,46 @@
-import type { ForgotPasswordMethod } from '@logto/schemas';
+import type { ConnectorType, ForgotPasswordMethod } from '@logto/schemas';
+import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import Draggable from '@/assets/icons/draggable.svg?react';
 import Minus from '@/assets/icons/minus.svg?react';
 import IconButton from '@/ds-components/IconButton';
 
+import ConnectorSetupWarning from '../../components/ConnectorSetupWarning';
+
 import styles from './index.module.scss';
 import { forgotPasswordMethodPhrase } from './utils';
 
 type Props = {
   readonly method: ForgotPasswordMethod;
+  readonly requiredConnectors: ConnectorType[];
+  readonly hasError?: boolean;
+  readonly errorMessage?: string;
   readonly onRemove: () => void;
 };
 
-function VerificationMethodItem({ method, onRemove }: Props) {
+function VerificationMethodItem({
+  method,
+  requiredConnectors,
+  hasError,
+  errorMessage,
+  onRemove,
+}: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
 
   return (
-    <div className={styles.methodItem}>
-      <div className={styles.methodContent}>
-        <Draggable className={styles.draggableIcon} />
-        <span className={styles.methodLabel}>{t(forgotPasswordMethodPhrase[method])}</span>
+    <div>
+      <div className={styles.methodItem}>
+        <div className={classNames(styles.methodContent, hasError && styles.error)}>
+          <Draggable className={styles.draggableIcon} />
+          <span className={styles.methodLabel}>{t(forgotPasswordMethodPhrase[method])}</span>
+        </div>
+        <IconButton onClick={onRemove}>
+          <Minus />
+        </IconButton>
       </div>
-      <IconButton onClick={onRemove}>
-        <Minus />
-      </IconButton>
+      {errorMessage && <div className={styles.errorMessage}>{errorMessage}</div>}
+      <ConnectorSetupWarning requiredConnectors={requiredConnectors} />
     </div>
   );
 }

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/ForgotPasswordMethodEditBox/index.module.scss

@@ -36,3 +36,9 @@
 .plusIcon {
   color: var(--color-text-secondary);
 }
+
+.errorMessage {
+  margin-top: _.unit(1);
+  color: var(--color-error);
+  font: var(--font-body-2);
+}

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/SignInForm/ForgotPasswordMethodEditBox/index.tsx

@@ -7,9 +7,11 @@ import ActionMenu from '@/ds-components/ActionMenu';
 import { DragDropProvider, DraggableItem } from '@/ds-components/DragDrop';
 import { DropdownItem } from '@/ds-components/Dropdown';
 import FormField from '@/ds-components/FormField';
+import useEnabledConnectorTypes from '@/hooks/use-enabled-connector-types';
 
 import type { SignInExperienceForm } from '../../../../types';
 import FormFieldDescription from '../../../components/FormFieldDescription';
+import { getForgotPasswordMethodsRequiredConnectors } from '../../utils';
 
 import VerificationMethodItem from './VerificationMethodItem';
 import styles from './index.module.scss';
@@ -18,6 +20,7 @@ import { forgotPasswordMethodPhrase } from './utils';
 function ForgotPasswordMethodEditBox() {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { control } = useFormContext<SignInExperienceForm>();
+  const { isConnectorTypeEnabled } = useEnabledConnectorTypes();
 
   return (
     <FormField title="sign_in_exp.sign_up_and_sign_in.sign_in.forgot_password_verification_method">
@@ -28,8 +31,17 @@ function ForgotPasswordMethodEditBox() {
         control={control}
         defaultValue={[]}
         name="forgotPasswordMethods"
-        render={({ field: { value, onChange } }) => {
+        rules={{
+          validate: (value) => {
+            const requiredConnectors = getForgotPasswordMethodsRequiredConnectors(value ?? []);
+            return requiredConnectors.every((connectorType) =>
+              isConnectorTypeEnabled(connectorType)
+            );
+          },
+        }}
+        render={({ field: { value, onChange }, fieldState: { error } }) => {
           const methods = value ?? [];
+
           const availableMethods = Object.values(ForgotPasswordMethod).filter(
             (method) => !methods.includes(method)
           );
@@ -68,22 +80,31 @@ function ForgotPasswordMethodEditBox() {
           return (
             <div>
               <DragDropProvider>
-                {methods.map((method: ForgotPasswordMethod, index: number) => (
-                  <DraggableItem
-                    key={method}
-                    id={method}
-                    sortIndex={index}
-                    moveItem={handleSwapMethods}
-                    className={styles.draggleItemContainer}
-                  >
-                    <VerificationMethodItem
-                      method={method}
-                      onRemove={() => {
-                        handleRemoveMethod(method);
-                      }}
-                    />
-                  </DraggableItem>
-                ))}
+                {(value ?? []).map((method: ForgotPasswordMethod, index: number) => {
+                  const requiredConnectors = getForgotPasswordMethodsRequiredConnectors([method]);
+                  const hasConnectorError = requiredConnectors.some(
+                    (connectorType) => !isConnectorTypeEnabled(connectorType)
+                  );
+
+                  return (
+                    <DraggableItem
+                      key={method}
+                      id={method}
+                      sortIndex={index}
+                      moveItem={handleSwapMethods}
+                      className={styles.draggleItemContainer}
+                    >
+                      <VerificationMethodItem
+                        method={method}
+                        requiredConnectors={requiredConnectors}
+                        hasError={hasConnectorError}
+                        onRemove={() => {
+                          handleRemoveMethod(method);
+                        }}
+                      />
+                    </DraggableItem>
+                  );
+                })}
               </DragDropProvider>
               {availableMethods.length > 0 && (
                 <ActionMenu

packages/console/src/pages/SignInExperience/PageContent/SignUpAndSignIn/utils.ts

@@ -1,6 +1,7 @@
 import {
   AlternativeSignUpIdentifier,
   ConnectorType,
+  ForgotPasswordMethod,
   SignInIdentifier,
   MfaFactor,
   type SignUpIdentifier as SignUpIdentifierMethod,
@@ -50,3 +51,24 @@ export const getSignUpIdentifiersRequiredConnectors = (
 
   return Array.from(requiredConnectors);
 };
+
+export const getForgotPasswordMethodsRequiredConnectors = (
+  forgotPasswordMethods: ForgotPasswordMethod[]
+): ConnectorType[] => {
+  const requiredConnectors = new Set<ConnectorType>();
+
+  for (const method of forgotPasswordMethods) {
+    switch (method) {
+      case ForgotPasswordMethod.EmailVerificationCode: {
+        requiredConnectors.add(ConnectorType.Email);
+        continue;
+      }
+      case ForgotPasswordMethod.PhoneVerificationCode: {
+        requiredConnectors.add(ConnectorType.Sms);
+        continue;
+      }
+    }
+  }
+
+  return Array.from(requiredConnectors);
+};