refactor(console): change captcha policy to single switch (#7184)

Author: wangsijie

Diff for: packages/console/src/pages/Security/RequiredFlows/index.module.scss renamed to packages/console/src/pages/Security/EnableCaptcha/index.module.scss

@@ -3,7 +3,3 @@
 .container {
   margin-top: _.unit(4);
 }
-
-.line {
-  margin-top: _.unit(3);
-}

Diff for: packages/console/src/pages/Security/EnableCaptcha/index.tsx

@@ -0,0 +1,42 @@
+import { type CaptchaPolicy, type SignInExperience } from '@logto/schemas';
+import { useEffect } from 'react';
+import { useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+import useSWR from 'swr';
+
+import FormField from '@/ds-components/FormField';
+import Switch from '@/ds-components/Switch';
+import { type RequestError } from '@/hooks/use-api';
+
+import styles from './index.module.scss';
+
+function EnableCaptcha() {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { register, reset } = useFormContext<CaptchaPolicy>();
+  const { data, isLoading } = useSWR<SignInExperience, RequestError>('api/sign-in-exp');
+
+  useEffect(() => {
+    if (data) {
+      reset(data.captchaPolicy);
+    }
+  }, [data, reset]);
+
+  if (isLoading) {
+    return null;
+  }
+
+  return (
+    <div className={styles.container}>
+      <FormField title="security.bot_protection.enable_captcha">
+        <div className={styles.line}>
+          <Switch
+            label={t('security.bot_protection.enable_captcha_description')}
+            {...register('enabled')}
+          />
+        </div>
+      </FormField>
+    </div>
+  );
+}
+
+export default EnableCaptcha;

Diff for: packages/console/src/pages/Security/RequiredFlows/index.tsx

@@ -22,8 +22,8 @@ import { trySubmitSafe } from '@/utils/form';
 
 import CaptchaCard from './CaptchaCard';
 import CreateCaptchaForm from './CreateCaptchaForm';
+import EnableCaptcha from './EnableCaptcha';
 import Guide from './Guide';
-import RequiredFlows from './RequiredFlows';
 import styles from './index.module.scss';
 import useDataFetch from './use-data-fetch';
 
@@ -34,9 +34,7 @@ function Security() {
   const { data, isLoading } = useDataFetch();
   const formMethods = useForm<CaptchaPolicy>({
     defaultValues: {
-      signUp: false,
-      signIn: false,
-      forgotPassword: false,
+      enabled: false,
     },
     mode: 'onBlur',
   });
@@ -103,7 +101,7 @@ function Security() {
                 {data ? (
                   <>
                     <CaptchaCard captchaProvider={data} />
-                    <RequiredFlows />
+                    <EnableCaptcha />
                   </>
                 ) : (
                   <Button

Diff for: packages/console/src/pages/Security/index.tsx

@@ -12,10 +12,9 @@ const security = {
       add: 'Add CAPTCHA',
     },
     settings: 'Settings',
-    captcha_required_flows: 'CAPTCHA required flows',
-    sign_up: 'Sign up',
-    sign_in: 'Sign in',
-    forgot_password: 'Forgot password',
+    enable_captcha: 'Enable CAPTCHA',
+    enable_captcha_description:
+      'Enable CAPTCHA verification for sign-up, sign-in, and password recovery flows.',
   },
   create_captcha: {
     setup_captcha: 'Setup CAPTCHA',

Diff for: packages/phrases/src/locales/en/translation/admin-console/security.ts

@@ -231,9 +231,7 @@ export const customUiAssetsGuard = z.object({
 export type CustomUiAssets = z.infer<typeof customUiAssetsGuard>;
 
 export const captchaPolicyGuard = z.object({
-  signIn: z.boolean().optional(),
-  signUp: z.boolean().optional(),
-  forgotPassword: z.boolean().optional(),
+  enabled: z.boolean().optional(),
 });
 
 export type CaptchaPolicy = z.infer<typeof captchaPolicyGuard>;