feat(console): sign in experience setup others tab (#662)

packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx

@@ -0,0 +1,74 @@
+import { Language } from '@logto/phrases';
+import React, { useMemo } from 'react';
+import { Controller, useFormContext } from 'react-hook-form';
+import { useTranslation } from 'react-i18next';
+
+import FormField from '@/components/FormField';
+import RadioGroup, { Radio } from '@/components/RadioGroup';
+import Select from '@/components/Select';
+
+import { LanguageMode, SignInExperienceForm } from '../types';
+import * as styles from './index.module.scss';
+
+const LanguagesForm = () => {
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
+  const { watch, control } = useFormContext<SignInExperienceForm>();
+  const mode = watch('languageInfo.mode');
+
+  const languageOptions = useMemo(
+    () => [
+      {
+        value: Language.English,
+        title: t('sign_in_exp.others.languages.languages.english'),
+      },
+      {
+        value: Language.Chinese,
+        title: t('sign_in_exp.others.languages.languages.chinese'),
+      },
+    ],
+    [t]
+  );
+
+  return (
+    <>
+      <div className={styles.title}>{t('sign_in_exp.others.languages.title')}</div>
+      <FormField isRequired title="admin_console.sign_in_exp.others.languages.mode">
+        <Controller
+          name="languageInfo.mode"
+          control={control}
+          defaultValue={LanguageMode.Auto}
+          render={({ field: { onChange, value, name } }) => (
+            <RadioGroup value={value} name={name} onChange={onChange}>
+              <Radio value={LanguageMode.Auto} title="sign_in_exp.others.languages.auto" />
+              <Radio value={LanguageMode.Fixed} title="sign_in_exp.others.languages.fixed" />
+            </RadioGroup>
+          )}
+        />
+      </FormField>
+      {mode === LanguageMode.Auto && (
+        <FormField isRequired title="admin_console.sign_in_exp.others.languages.fallback_language">
+          <Controller
+            name="languageInfo.fallbackLanguage"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Select value={value} options={languageOptions} onChange={onChange} />
+            )}
+          />
+        </FormField>
+      )}
+      {mode === LanguageMode.Fixed && (
+        <FormField isRequired title="admin_console.sign_in_exp.others.languages.fixed_language">
+          <Controller
+            name="languageInfo.fixedLanguage"
+            control={control}
+            render={({ field: { value, onChange } }) => (
+              <Select value={value} options={languageOptions} onChange={onChange} />
+            )}
+          />
+        </FormField>
+      )}
+    </>
+  );
+};
+
+export default LanguagesForm;

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

@@ -14,6 +14,7 @@ import useApi, { RequestError } from '@/hooks/use-api';
 import * as detailsStyles from '@/scss/details.module.scss';
 
 import BrandingForm from './components/BrandingForm';
+import LanguagesForm from './components/LanguagesForm';
 import SignInMethodsForm from './components/SignInMethodsForm';
 import TermsForm from './components/TermsForm';
 import * as styles from './index.module.scss';
@@ -44,10 +45,8 @@ const SignInExperience = () => {
     }
 
     const updatedData = await api
-      .patch(`/api/applications/${data.id}`, {
+      .patch('/api/sign-in-exp', {
-        json: {
+        json: signInExperienceParser.toRemoteModel(formData),
-          ...formData,
-        },
       })
       .json<SignInExperienceType>();
     void mutate(updatedData);
@@ -82,6 +81,7 @@ const SignInExperience = () => {
                   </>
                 )}
                 {tab === 'methods' && <SignInMethodsForm />}
+                {tab === 'others' && <LanguagesForm />}
                 <div className={detailsStyles.footer}>
                   <Button
                     isLoading={isSubmitting}

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

@@ -1,6 +1,12 @@
+import { Language } from '@logto/phrases';
 import { SignInExperience, SignInMethods } from '@logto/schemas';
 
-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
+export enum LanguageMode {
+  Auto = 'Auto',
+  Fixed = 'Fixed',
+}
+
+export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'languageInfo'> & {
   signInMethods: {
     primary?: keyof SignInMethods;
     enableSecondary: boolean;
@@ -9,4 +15,9 @@ export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
     email: boolean;
     social: boolean;
   };
+  languageInfo: {
+    mode: LanguageMode;
+    fixedLanguage: Language;
+    fallbackLanguage: Language;
+  };
 };

packages/console/src/pages/SignInExperience/utilities.ts

@@ -5,7 +5,7 @@ import {
   SignInMethodState,
 } from '@logto/schemas';
 
-import { SignInExperienceForm } from './types';
+import { LanguageMode, SignInExperienceForm } from './types';
 
 const findMethodState = (
   setup: SignInExperienceForm,
@@ -34,6 +34,10 @@ export const signInExperienceParser = {
       (key) => signInExperience.signInMethods[key] === SignInMethodState.Secondary
     );
 
+    const {
+      languageInfo: { autoDetect, fallbackLanguage, fixedLanguage },
+    } = signInExperience;
+
     return {
       ...signInExperience,
       signInMethods: {
@@ -44,9 +48,18 @@ export const signInExperienceParser = {
         email: secondaryMethods.includes(SignInMethodKey.Email),
         social: secondaryMethods.includes(SignInMethodKey.Social),
       },
+      languageInfo: {
+        mode: autoDetect ? LanguageMode.Auto : LanguageMode.Fixed,
+        fallbackLanguage,
+        fixedLanguage,
+      },
     };
   },
   toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {
+    const {
+      languageInfo: { mode, fallbackLanguage, fixedLanguage },
+    } = setup;
+
     return {
       ...setup,
       signInMethods: {
@@ -55,6 +68,11 @@ export const signInExperienceParser = {
         email: findMethodState(setup, 'email'),
         social: findMethodState(setup, 'social'),
       },
+      languageInfo: {
+        autoDetect: mode === LanguageMode.Auto,
+        fallbackLanguage,
+        fixedLanguage,
+      },
     };
   },
 };

packages/phrases/src/locales/en.ts

@@ -388,18 +388,13 @@ const translation = {
         },
       },
       others: {
-        forgot_password: {
-          title: 'FORGOT PASSWORD',
-          enable: 'Enable forgot password',
-          enable_description:
-            'Once it’s turned on, you app will support more sign in method(s) besides the primary one. ',
-        },
         languages: {
           title: 'LANGUAGES',
           mode: 'Language mode',
           auto: 'Auto',
           fixed: 'Fixed',
-          fallback: 'Fallback languages',
+          fallback_language: 'Fallback language',
+          fixed_language: 'Fixed language',
           languages: {
             english: 'English',
             chinese: 'Chinese',

packages/phrases/src/locales/zh-cn.ts

@@ -384,18 +384,13 @@ const translation = {
         },
       },
       others: {
-        forgot_password: {
-          title: 'FORGOT PASSWORD',
-          enable: 'Enable forgot password',
-          enable_description:
-            'Once it’s turned on, you app will support more sign in method(s) besides the primary one. ',
-        },
         languages: {
           title: 'LANGUAGES',
           mode: 'Language mode',
           auto: 'Auto',
           fixed: 'Fixed',
-          fallback: 'Fallback languages',
+          fallback_language: 'Fallback language',
+          fixed_language: 'Fixed language',
           languages: {
             english: 'English',
             chinese: 'Chinese',