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);
+}
 
+.membershipDescription {
+  font: var(--font-body-2);
+  color: var(--color-text-secondary);
+  margin-top: _.unit(1.5);
+}
 
-  .description {
-    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);
-  }
+.emailDomains {
+  margin-top: _.unit(1);
 }
 
 .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,76 +144,58 @@ 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"
-                  />
-                  <Radio
-                    value="true"
-                    title="organization_details.jit.is_enabled_true_description"
-                  />
-                </RadioGroup>
-                {field.value && (
-                  <>
-                    <p className={styles.description}>
-                      {t('organization_details.jit.description')}
-                    </p>
-                    <Controller
-                      name="jitEmailDomains"
-                      control={control}
-                      render={({ field: { onChange, value } }) => (
-                        <MultiOptionInput
-                          className={styles.emailDomains}
-                          values={value}
-                          renderValue={(value) => value}
-                          validateInput={(input) => {
-                            if (!domainRegExp.test(input)) {
-                              return t('organization_details.jit.invalid_domain');
-                            }
-
-                            if (value.includes(input)) {
-                              return t('organization_details.jit.domain_already_added');
-                            }
-
-                            return { value: input };
-                          }}
-                          placeholder={t('organization_details.jit.email_domains_placeholder')}
-                          error={errors.jitEmailDomains?.message}
-                          onChange={onChange}
-                          onError={(error) => {
-                            setError('jitEmailDomains', { type: 'custom', message: error });
-                          }}
-                          onClearError={() => {
-                            clearErrors('jitEmailDomains');
-                          }}
-                        />
-                      )}
-                    />
-                  </>
-                )}
-              </div>
-            )}
-          />
+          <div className={styles.jitContent}>
+            <Switch
+              label={t('organization_details.jit.description')}
+              {...register('isJitEnabled')}
+            />
+          </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"
+              control={control}
+              render={({ field: { onChange, value } }) => (
+                <MultiOptionInput
+                  className={styles.emailDomains}
+                  values={value}
+                  renderValue={(value) => value}
+                  validateInput={(input) => {
+                    if (!domainRegExp.test(input)) {
+                      return t('organization_details.jit.invalid_domain');
+                    }
+
+                    if (value.includes(input)) {
+                      return t('organization_details.jit.domain_already_added');
+                    }
+
+                    return { value: input };
+                  }}
+                  placeholder={t('organization_details.jit.email_domains_placeholder')}
+                  error={errors.jitEmailDomains?.message}
+                  onChange={onChange}
+                  onError={(error) => {
+                    setError('jitEmailDomains', { type: 'custom', message: error });
+                  }}
+                  onClearError={() => {
+                    clearErrors('jitEmailDomains');
+                  }}
+                />
+              )}
+            />
+          </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',