feat(console,core,toolkit,phrases): add email blocklist page (#7356)

* feat(console,core,toolkit,phrases): add email blocklist page

add email blocklist settings page

* refactor(phrases): remove unused keys

remove unused keys

* fix(console): refactor blocklist page code
refactor some email blocklist page code

Author: simeng-li

packages/console/src/components/MultiOptionInput/index.module.scss

@@ -79,6 +79,20 @@
     outline-color: var(--color-focused-variant);
   }
 
+  &.disabled {
+    background: var(--color-layer-2);
+    cursor: not-allowed;
+
+    &:active {
+      pointer-events: none;
+    }
+
+    &:focus-within {
+      border-color: var(--color-border);
+      outline-color: transparent;
+    }
+  }
+
   &.error {
     border-color: var(--color-error);
 
@@ -98,3 +112,4 @@ canvas {
   margin-top: _.unit(1);
   white-space: pre-wrap;
 }
+

packages/console/src/components/MultiOptionInput/index.tsx

@@ -24,6 +24,8 @@ type Props<T> = {
   readonly validateInput: (text: string) => CanBePromise<{ value: T } | string>;
   readonly error?: string | boolean;
   readonly placeholder?: string;
+  // eslint-disable-next-line react/boolean-prop-naming -- align with input props
+  readonly disabled?: boolean;
 };
 
 function MultiOptionInput<T>({
@@ -38,6 +40,7 @@ function MultiOptionInput<T>({
   error,
   placeholder,
   validateInput,
+  disabled,
 }: Props<T>) {
   const ref = useRef<HTMLInputElement>(null);
   const [focusedValueId, setFocusedValueId] = useState<Nullable<string>>(null);
@@ -82,13 +85,24 @@ function MultiOptionInput<T>({
   return (
     <>
       <div
-        className={classNames(styles.input, Boolean(error) && styles.error, className)}
+        className={classNames(
+          styles.input,
+          Boolean(error) && styles.error,
+          disabled && styles.disabled,
+          className
+        )}
         role="button"
         tabIndex={0}
         onKeyDown={onKeyDownHandler(() => {
+          if (disabled) {
+            return;
+          }
           ref.current?.focus();
         })}
         onClick={() => {
+          if (disabled) {
+            return;
+          }
           ref.current?.focus();
         }}
       >
@@ -126,6 +140,7 @@ function MultiOptionInput<T>({
           ))}
           <input
             ref={ref}
+            disabled={disabled}
             value={currentValue}
             onKeyDown={async (event) => {
               switch (event.key) {

packages/console/src/consts/external-links.ts

@@ -52,6 +52,7 @@ export const enterpriseSso = '/connectors/enterprise-connectors';
 export const security = '/security';
 export const captcha = '/security/captcha';
 export const sentinel = '/security/identifier-lockout';
+export const emailBlocklist = '/security/blocklist';
 export const passwordPolicy = '/security/password-policy';
 export const spInitiatedSsoFlow = '/end-user-flows/enterprise-sso/sp-initiated-sso';
 export const apiResources = '/authorization/api-resources';

packages/console/src/hooks/use-console-routes/routes/security.tsx

@@ -1,6 +1,7 @@
 import { Navigate, type RouteObject } from 'react-router-dom';
 import { safeLazy } from 'react-safe-lazy';
 
+import { isDevFeaturesEnabled } from '@/consts/env';
 import { SecurityTabs } from '@/pages/Security/types';
 
 const Security = safeLazy(async () => import('@/pages/Security'));
@@ -27,5 +28,14 @@ export const security: RouteObject = {
       path: SecurityTabs.General,
       element: <Security tab={SecurityTabs.General} />,
     },
+    {
+      path: SecurityTabs.Blocklist,
+      // TODO: @simeng remove dev feature guard
+      element: isDevFeaturesEnabled ? (
+        <Security tab={SecurityTabs.Blocklist} />
+      ) : (
+        <Navigate replace to={SecurityTabs.PasswordPolicy} />
+      ),
+    },
   ],
 };

packages/console/src/pages/Security/Blocklist/BlocklistForm/index.module.scss

@@ -0,0 +1,11 @@
+@use '@/scss/underscore' as _;
+
+.fieldDescription {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin: _.unit(1) 0 _.unit(2);
+}
+
+.paywallNotification {
+  margin-bottom: _.unit(4);
+}

packages/console/src/pages/Security/Blocklist/BlocklistForm/index.tsx

@@ -0,0 +1,151 @@
+import { emailOrEmailDomainRegex } from '@logto/core-kit';
+import { type SignInExperience, type EmailBlocklistPolicy } from '@logto/schemas';
+import { Controller, useForm } from 'react-hook-form';
+import { toast } from 'react-hot-toast';
+import { useTranslation } from 'react-i18next';
+import { useSWRConfig } from 'swr';
+
+import DetailsForm from '@/components/DetailsForm';
+import { CombinedAddOnAndFeatureTag, addOnLabels } from '@/components/FeatureTag';
+import FormCard from '@/components/FormCard';
+import MultiOptionInput from '@/components/MultiOptionInput';
+import UnsavedChangesAlertModal from '@/components/UnsavedChangesAlertModal';
+import { emailBlocklist } from '@/consts';
+import { latestProPlanId } from '@/consts/subscriptions';
+import FormField from '@/ds-components/FormField';
+import Switch from '@/ds-components/Switch';
+import useApi from '@/hooks/use-api';
+import usePaywall from '@/hooks/use-paywall';
+import { trySubmitSafe } from '@/utils/form';
+
+import PaywallNotification from '../../PaywallNotification';
+
+import styles from './index.module.scss';
+
+type Props = {
+  readonly formData: EmailBlocklistPolicy;
+};
+
+function BlocklistForm({ formData }: Props) {
+  const api = useApi();
+  const { mutate: mutateGlobal } = useSWRConfig();
+  const { isFreeTenant } = usePaywall();
+
+  const { t } = useTranslation(undefined, {
+    keyPrefix: 'admin_console.security',
+  });
+
+  const { t: globalT } = useTranslation(undefined, {
+    keyPrefix: 'admin_console',
+  });
+
+  const {
+    reset,
+    register,
+    handleSubmit,
+    setError,
+    clearErrors,
+    control,
+    formState: { isDirty, isSubmitting, errors },
+  } = useForm<EmailBlocklistPolicy>({
+    defaultValues: formData,
+  });
+
+  const onSubmit = handleSubmit(
+    trySubmitSafe(async (formData: EmailBlocklistPolicy) => {
+      if (isSubmitting) {
+        return;
+      }
+
+      const { emailBlocklistPolicy } = await api
+        .patch('api/sign-in-exp', {
+          json: {
+            emailBlocklistPolicy: formData,
+          },
+        })
+        .json<SignInExperience>();
+
+      // Reset the form with the updated data
+      reset(emailBlocklistPolicy);
+      // Global mutate the SIE data
+      await mutateGlobal('api/sign-in-exp');
+      toast.success(globalT('general.saved'));
+    })
+  );
+
+  return (
+    <>
+      <PaywallNotification className={styles.paywallNotification} />
+      <DetailsForm
+        isDirty={isDirty}
+        isSubmitting={isSubmitting}
+        onSubmit={onSubmit}
+        onDiscard={reset}
+      >
+        <FormCard
+          title="security.blocklist.card_title"
+          description="security.blocklist.card_description"
+          tag={
+            <CombinedAddOnAndFeatureTag
+              hasAddOnTag
+              paywall={latestProPlanId}
+              addOnLabel={addOnLabels.addOnBundle}
+            />
+          }
+          learnMoreLink={{ href: emailBlocklist }}
+        >
+          <FormField title="security.blocklist.disposable_email.title">
+            <Switch
+              disabled={isFreeTenant}
+              label={t('blocklist.disposable_email.description')}
+              {...register('blockDisposableAddresses')}
+            />
+          </FormField>
+          <FormField title="security.blocklist.email_subaddressing.title">
+            <Switch
+              disabled={isFreeTenant}
+              label={t('blocklist.email_subaddressing.description')}
+              {...register('blockSubaddressing')}
+            />
+          </FormField>
+          <FormField title="security.blocklist.custom_email_address.title">
+            <Controller
+              name="customBlocklist"
+              control={control}
+              render={({ field: { onChange, value = [] } }) => (
+                <MultiOptionInput
+                  disabled={isFreeTenant}
+                  values={value}
+                  placeholder={t('blocklist.custom_email_address.placeholder')}
+                  renderValue={(value) => value}
+                  validateInput={(input) => {
+                    if (value.includes(input)) {
+                      return t('blocklist.custom_email_address.duplicate_error');
+                    }
+
+                    if (!emailOrEmailDomainRegex.test(input)) {
+                      return t('blocklist.custom_email_address.invalid_format_error');
+                    }
+
+                    return { value: input };
+                  }}
+                  error={errors.customBlocklist?.message}
+                  onChange={onChange}
+                  onError={(error) => {
+                    setError('customBlocklist', { type: 'custom', message: error });
+                  }}
+                  onClearError={() => {
+                    clearErrors('customBlocklist');
+                  }}
+                />
+              )}
+            />
+          </FormField>
+        </FormCard>
+      </DetailsForm>
+      <UnsavedChangesAlertModal hasUnsavedChanges={isDirty} />
+    </>
+  );
+}
+
+export default BlocklistForm;

packages/console/src/pages/Security/Blocklist/index.module.scss

@@ -0,0 +1,7 @@
+@use '@/scss/underscore' as _;
+
+.content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}

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

@@ -0,0 +1,63 @@
+import { type SignInExperience, type EmailBlocklistPolicy } from '@logto/schemas';
+import { useMemo } from 'react';
+import useSWR from 'swr';
+
+import { FormCardSkeleton } from '@/components/FormCard';
+import PageMeta from '@/components/PageMeta';
+import RequestDataError from '@/components/RequestDataError';
+import { type RequestError } from '@/hooks/use-api';
+
+import BlocklistForm from './BlocklistForm';
+import styles from './index.module.scss';
+
+const defaultBlockListPolicy: EmailBlocklistPolicy = {
+  blockDisposableAddresses: false,
+  blockSubaddressing: false,
+  customBlocklist: [],
+};
+
+const useDataFetch = () => {
+  const { data, error, isLoading, mutate } = useSWR<SignInExperience, RequestError>(
+    'api/sign-in-exp'
+  );
+
+  const formData = useMemo<EmailBlocklistPolicy | undefined>(() => {
+    if (!data) {
+      return;
+    }
+
+    const { emailBlocklistPolicy } = data;
+
+    /**
+     * Since all properties in the {@link EmailBlocklistPolicy} are optional, we need to
+     * provide default values for any missing properties in the response.
+     * This ensures consistency in the form data and prevents unexpected discrepancies.
+     */
+    return {
+      ...defaultBlockListPolicy,
+      ...emailBlocklistPolicy,
+    };
+  }, [data]);
+
+  return {
+    isLoading,
+    formData,
+    error,
+    mutate,
+  };
+};
+
+function Blocklist() {
+  const { isLoading, formData, error, mutate } = useDataFetch();
+
+  return (
+    <div className={styles.content}>
+      <PageMeta titleKey={['security.tabs.blocklist', 'security.page_title']} />
+      {isLoading && <FormCardSkeleton formFieldCount={2} />}
+      {error && <RequestDataError error={error} onRetry={mutate} />}
+      {formData && <BlocklistForm formData={formData} />}
+    </div>
+  );
+}
+
+export default Blocklist;

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

@@ -2,11 +2,13 @@ import classNames from 'classnames';
 import { useTranslation } from 'react-i18next';
 
 import PageMeta from '@/components/PageMeta';
+import { isDevFeaturesEnabled } from '@/consts/env';
 import { security } from '@/consts/external-links';
 import CardTitle from '@/ds-components/CardTitle';
 import TabNav, { TabNavItem } from '@/ds-components/TabNav';
 import pageLayout from '@/scss/page-layout.module.scss';
 
+import Blocklist from './Blocklist';
 import Captcha from './Captcha';
 import General from './General';
 import PasswordPolicy from './PasswordPolicy';
@@ -43,6 +45,15 @@ function Security({ tab }: Props) {
         >
           {t('security.tabs.captcha')}
         </TabNavItem>
+        {/** TODO: @simeng remove dev feature guard */}
+        {isDevFeaturesEnabled && (
+          <TabNavItem
+            href={`/security/${SecurityTabs.Blocklist}`}
+            isActive={tab === SecurityTabs.Blocklist}
+          >
+            {t('security.tabs.blocklist')}
+          </TabNavItem>
+        )}
         <TabNavItem
           href={`/security/${SecurityTabs.General}`}
           isActive={tab === SecurityTabs.General}
@@ -53,6 +64,8 @@ function Security({ tab }: Props) {
       {tab === SecurityTabs.Captcha && <Captcha />}
       {tab === SecurityTabs.PasswordPolicy && <PasswordPolicy />}
       {tab === SecurityTabs.General && <General />}
+      {/** TODO: @simeng remove dev feature guard */}
+      {isDevFeaturesEnabled && tab === SecurityTabs.Blocklist && <Blocklist />}
     </div>
   );
 }

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

@@ -2,4 +2,5 @@ export enum SecurityTabs {
   Captcha = 'captcha',
   PasswordPolicy = 'password-policy',
   General = 'general',
+  Blocklist = 'blocklist',
 }