Merge pull request #6022 from logto-io/gao-update-jit-style

refactor(console): update jit styles

packages/console/src/pages/OrganizationDetails/Settings/index.module.scss

@@ -2,19 +2,16 @@
 
 .jitContent {
   margin-top: _.unit(3);
+}
 
-
-  .description {
+.membershipDescription {
   font: var(--font-body-2);
   color: var(--color-text-secondary);
   margin-top: _.unit(1.5);
-    margin-left: _.unit(6.5);
 }
 
 .emailDomains {
   margin-top: _.unit(1);
-    margin-left: _.unit(6);
-  }
 }
 
 .warning {

packages/console/src/pages/OrganizationDetails/Settings/index.tsx

@@ -14,7 +14,6 @@ import { isDevFeaturesEnabled } from '@/consts/env';
 import CodeEditor from '@/ds-components/CodeEditor';
 import FormField from '@/ds-components/FormField';
 import InlineNotification from '@/ds-components/InlineNotification';
-import RadioGroup, { Radio } from '@/ds-components/RadioGroup';
 import Switch from '@/ds-components/Switch';
 import TextInput from '@/ds-components/TextInput';
 import useApi, { type RequestError } from '@/hooks/use-api';
@@ -66,13 +65,14 @@ function Settings() {
     formState: { isDirty, isSubmitting, errors },
     setError,
     clearErrors,
-    getValues,
+    watch,
   } = useForm<FormData>({
     defaultValues: normalizeData(
       data,
       emailDomains.map(({ emailDomain }) => emailDomain)
     ),
   });
+  const [isJitEnabled, isMfaRequired] = watch(['isJitEnabled', 'isMfaRequired']);
   const api = useApi();
 
   const onSubmit = handleSubmit(
@@ -144,31 +144,17 @@ function Settings() {
         description="organization_details.membership_policies_description"
       >
         <FormField title="organization_details.jit.is_enabled_title">
-          <Controller
-            name="isJitEnabled"
-            control={control}
-            render={({ field }) => (
           <div className={styles.jitContent}>
-                <RadioGroup
-                  name="isJitEnabled"
-                  value={String(field.value)}
-                  onChange={(value) => {
-                    field.onChange(value === 'true');
-                  }}
-                >
-                  <Radio
-                    value="false"
-                    title="organization_details.jit.is_enabled_false_description"
+            <Switch
+              label={t('organization_details.jit.description')}
+              {...register('isJitEnabled')}
             />
-                  <Radio
-                    value="true"
-                    title="organization_details.jit.is_enabled_true_description"
-                  />
-                </RadioGroup>
-                {field.value && (
-                  <>
-                    <p className={styles.description}>
-                      {t('organization_details.jit.description')}
+          </div>
+        </FormField>
+        {isJitEnabled && (
+          <FormField title="organization_details.jit.email_domain_provisioning">
+            <p className={styles.membershipDescription}>
+              {t('organization_details.jit.membership_description')}
             </p>
             <Controller
               name="jitEmailDomains"
@@ -201,19 +187,15 @@ function Settings() {
                 />
               )}
             />
-                  </>
-                )}
-              </div>
-            )}
-          />
           </FormField>
+        )}
         {isDevFeaturesEnabled && (
           <FormField title="organization_details.mfa.title" tip={t('organization_details.mfa.tip')}>
             <Switch
               label={t('organization_details.mfa.description')}
               {...register('isMfaRequired')}
             />
-            {getValues('isMfaRequired') && signInExperience?.mfa.factors.length === 0 && (
+            {isMfaRequired && signInExperience?.mfa.factors.length === 0 && (
               <InlineNotification severity="alert" className={styles.warning}>
                 {t('organization_details.mfa.no_mfa_warning')}
               </InlineNotification>

packages/phrases/src/locales/en/translation/admin-console/organization-details.ts

@@ -31,12 +31,11 @@ const organization_details = {
     'Define how users can join this organization and what requirements they must meet for access.',
   jit: {
     description:
-      'Automatically assign users into this organization when they sign up or are added through the Management API, provided their email addresses match the specified domains.',
+      'Enable automatic membership assignment based on verified email domains and default roles assignment.',
+    membership_description:
+      'Automatically assign users into this organization when they sign up or are added through the Management API, provided their verified email addresses match the specified domains.',
     is_enabled_title: 'Enable just-in-time provisioning',
-    is_enabled_true_description:
-      'New users with verified email domains will automatically join the organization',
-    is_enabled_false_description:
-      'Users can join the organization only if they are invited or added via Management API',
+    email_domain_provisioning: 'Email domain provisioning',
     email_domains_placeholder: 'Enter email domains for just-in-time provisioning',
     invalid_domain: 'Invalid domain',
     domain_already_added: 'Domain already added',