fix(console): update captcha backlink and always show captcha toggle (#7396)

Author: wangsijie

.changeset/perfect-phones-relax.md

@@ -0,0 +1,9 @@
+---
+"@logto/console": patch
+---
+
+always show enable CAPTCHA toggle
+
+Even if there is no CAPTCHA provider, the toggle will be shown but disabled.
+
+Also the back link of the captcha details page is changed to `/security/captcha`.

packages/console/src/pages/CaptchaDetails/index.tsx

@@ -71,7 +71,7 @@ function CaptchaDetails() {
 
   return (
     <DetailsPage
-      backLink="/security"
+      backLink="/security/captcha"
       backLinkTitle="security.captcha_details.back_to_security"
       isLoading={isLoading}
       error={error}

packages/console/src/pages/Security/Captcha/EnableCaptcha/index.tsx

@@ -10,7 +10,12 @@ import { type RequestError } from '@/hooks/use-api';
 
 import styles from './index.module.scss';
 
-function EnableCaptcha() {
+type Props = {
+  // eslint-disable-next-line react/boolean-prop-naming
+  readonly disabled?: boolean;
+};
+
+function EnableCaptcha({ disabled }: Props) {
   const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
   const { register, reset } = useFormContext<CaptchaPolicy>();
   const { data, isLoading } = useSWR<SignInExperience, RequestError>('api/sign-in-exp');
@@ -32,6 +37,7 @@ function EnableCaptcha() {
           <Switch
             label={t('security.bot_protection.enable_captcha_description')}
             {...register('enabled')}
+            disabled={disabled}
           />
         </div>
       </FormField>

packages/console/src/pages/Security/Captcha/index.tsx

@@ -105,10 +105,7 @@ function Captcha() {
                   {t('security.bot_protection.captcha.placeholder')}
                 </div>
                 {data && !isFreeTenant ? (
-                  <>
-                    <CaptchaCard captchaProvider={data} />
-                    <EnableCaptcha />
-                  </>
+                  <CaptchaCard captchaProvider={data} />
                 ) : (
                   <Button
                     title="security.bot_protection.captcha.add"
@@ -119,6 +116,7 @@ function Captcha() {
                     }}
                   />
                 )}
+                <EnableCaptcha disabled={isFreeTenant || !data} />
               </FormField>
             </FormCard>
           </DetailsForm>