feat(console): auto detect language setting (#1941)

2024-12-16 20:26:19 -05:00 · 2022-09-26 21:37:35 +08:00 · 2022-09-26 21:37:35 +08:00 · cdfaf8b1c7
commit cdfaf8b1c7
parent ad1d1e3b59
10 changed files with 86 additions and 111 deletions
--- a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
@ -3,58 +3,40 @@ 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 Switch from '@/components/Switch';

-import { LanguageMode, SignInExperienceForm } from '../types';
+import { 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 { watch, control, register } = useFormContext<SignInExperienceForm>();
+  const isAutoDetect = watch('languageInfo.autoDetect');

  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.others.languages.title')}</div>
-      <FormField title="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 title="sign_in_exp.others.languages.enable_auto_detect">
+        <Switch
+          {...register('languageInfo.autoDetect')}
+          label={t('sign_in_exp.others.languages.description')}
        />
      </FormField>
-      {mode === LanguageMode.Auto && (
-        <FormField
-          title="sign_in_exp.others.languages.fallback_language"
-          tooltip="sign_in_exp.others.languages.fallback_language_tip"
-        >
-          <Controller
-            name="languageInfo.fallbackLanguage"
-            control={control}
-            render={({ field: { value, onChange } }) => (
-              <Select value={value} options={languageOptions} onChange={onChange} />
-            )}
-          />
-        </FormField>
-      )}
-      {mode === LanguageMode.Fixed && (
-        <FormField title="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>
-      )}
+      <FormField title="sign_in_exp.others.languages.default_language">
+        <Controller
+          name="languageInfo.fallbackLanguage"
+          control={control}
+          render={({ field: { value, onChange } }) => (
+            <Select value={value} options={languageOptions} onChange={onChange} />
+          )}
+        />
+        <div className={styles.defaultLanguageDescription}>
+          {isAutoDetect
+            ? t('sign_in_exp.others.languages.default_language_description_auto')
+            : t('sign_in_exp.others.languages.default_language_description_fixed')}
+        </div>
+      </FormField>
    </>
  );
 };
--- a/packages/console/src/pages/SignInExperience/components/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/index.module.scss
@ -28,3 +28,9 @@
  font: var(--font-body-medium);
  color: var(--color-caption);
 }
+
+.defaultLanguageDescription {
+  padding-top: _.unit(2);
+  font: var(--font-body-medium);
+  color: var(--color-caption);
+}
--- a/packages/console/src/pages/SignInExperience/types.ts
+++ b/packages/console/src/pages/SignInExperience/types.ts
@ -1,12 +1,6 @@
-import { LanguageKey } from '@logto/core-kit';
 import { SignInExperience, SignInMethodKey } from '@logto/schemas';

-export enum LanguageMode {
-  Auto = 'Auto',
-  Fixed = 'Fixed',
-}
-
-export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'languageInfo'> & {
+export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods'> & {
  signInMethods: {
    primary?: SignInMethodKey;
    enableSecondary: boolean;
@ -15,10 +9,5 @@ export type SignInExperienceForm = Omit<SignInExperience, 'signInMethods' | 'lan
    email: boolean;
    social: boolean;
  };
-  languageInfo: {
-    mode: LanguageMode;
-    fixedLanguage: LanguageKey;
-    fallbackLanguage: LanguageKey;
-  };
  createAccountEnabled: boolean;
 };
--- a/packages/console/src/pages/SignInExperience/utilities.ts
+++ b/packages/console/src/pages/SignInExperience/utilities.ts
@ -7,7 +7,7 @@ import {
 } from '@logto/schemas';
 import { conditional } from '@silverhand/essentials';

-import { LanguageMode, SignInExperienceForm } from './types';
+import { SignInExperienceForm } from './types';

 const findMethodState = (
  setup: SignInExperienceForm,
@ -40,10 +40,7 @@ export const signInExperienceParser = {
      (key) => signInExperience.signInMethods[key] === SignInMethodState.Secondary
    );

-    const {
-      languageInfo: { autoDetect, fallbackLanguage, fixedLanguage },
-      signInMode,
-    } = signInExperience;
+    const { signInMode } = signInExperience;

    return {
      ...signInExperience,
@ -55,20 +52,11 @@ export const signInExperienceParser = {
        email: secondaryMethods.includes(SignInMethodKey.Email),
        social: secondaryMethods.includes(SignInMethodKey.Social),
      },
-      languageInfo: {
-        mode: autoDetect ? LanguageMode.Auto : LanguageMode.Fixed,
-        fallbackLanguage,
-        fixedLanguage,
-      },
      createAccountEnabled: signInMode !== SignInMode.SignIn,
    };
  },
  toRemoteModel: (setup: SignInExperienceForm): SignInExperience => {
-    const {
-      branding,
-      languageInfo: { mode, fallbackLanguage, fixedLanguage },
-      createAccountEnabled,
-    } = setup;
+    const { branding, createAccountEnabled } = setup;

    return {
      ...setup,
@ -84,11 +72,6 @@ export const signInExperienceParser = {
        email: findMethodState(setup, 'email'),
        social: findMethodState(setup, 'social'),
      },
-      languageInfo: {
-        autoDetect: mode === LanguageMode.Auto,
-        fallbackLanguage,
-        fixedLanguage,
-      },
      signInMode: createAccountEnabled ? SignInMode.SignInAndRegister : SignInMode.SignIn,
    };
  },
--- a/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/en/translation/admin-console/sign-in-exp.ts
@ -71,13 +71,15 @@ const sign_in_exp = {
    },
    languages: {
      title: 'LANGUAGES',
-      mode: 'Language mode',
-      auto: 'Auto',
-      fixed: 'Fixed',
-      fallback_language: 'Fallback language',
-      fallback_language_tip:
-        'Which language to fall back if Logto finds no proper language phrase-set.',
-      fixed_language: 'Fixed language',
+      enable_auto_detect: 'Enable auto detect',
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.",
+      manage_language: 'Manage language',
+      default_language: 'Default language',
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.',
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.',
    },
    authentication: {
      title: 'AUTHENTICATION',
--- a/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/fr/translation/admin-console/sign-in-exp.ts
@ -73,13 +73,15 @@ const sign_in_exp = {
    },
    languages: {
      title: 'LANGAGES',
-      mode: 'Mode langue',
-      auto: 'Auto',
-      fixed: 'Fixé',
-      fallback_language: 'Langage par défaut',
-      fallback_language_tip:
-        'La langue de repli si Logto ne trouve pas de jeu de phrases dans la langue appropriée.',
-      fixed_language: 'Langue fixe',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
    },
    authentication: {
      title: 'AUTHENTICATION',
--- a/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/ko-kr/translation/admin-console/sign-in-exp.ts
@ -68,12 +68,15 @@ const sign_in_exp = {
    },
    languages: {
      title: '언어',
-      mode: '언어 모드',
-      auto: '자동',
-      fixed: '고정',
-      fallback_language: '백업 언어',
-      fallback_language_tip: '적절한 언어를 찾을 수 없을 때 백업 언어를 사용해요.',
-      fixed_language: '언어 고정',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
    },
    authentication: {
      title: 'AUTHENTICATION',
--- a/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/pt-pt/translation/admin-console/sign-in-exp.ts
@ -71,12 +71,15 @@ const sign_in_exp = {
    },
    languages: {
      title: 'LÍNGUAS',
-      mode: 'Modo de idioma',
-      auto: 'automático',
-      fixed: 'Fixo',
-      fallback_language: 'Idioma fallback',
-      fallback_language_tip: 'Qual idioma usar se o Logto não encontrar o idioma requisitado.',
-      fixed_language: 'Idioma fixo',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
    },
    authentication: {
      title: 'AUTENTICAÇÃO',
--- a/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/tr-tr/translation/admin-console/sign-in-exp.ts
@ -72,13 +72,15 @@ const sign_in_exp = {
    },
    languages: {
      title: 'DİLLER',
-      mode: 'Dil modu',
-      auto: 'Otomatik',
-      fixed: 'Sabit',
-      fallback_language: 'Yedek dil',
-      fallback_language_tip:
-        'Logto uygun bir dil ifade kümesi bulamazsa hangi dilden vazgeçilecek?',
-      fixed_language: 'Sabitlenmiş dil',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
    },
    authentication: {
      title: 'AUTHENTICATION',
--- a/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
+++ b/packages/phrases/src/locales/zh-cn/translation/admin-console/sign-in-exp.ts
@ -68,12 +68,15 @@ const sign_in_exp = {
    },
    languages: {
      title: '语言',
-      mode: '语言模式',
-      auto: '自动',
-      fixed: '固定',
-      fallback_language: '备用语言',
-      fallback_language_tip: '如果 Logto 找不到合适的语言包，将回退至哪种语言。',
-      fixed_language: '固定语言',
+      enable_auto_detect: 'Enable auto detect', // UNTRANSLATED
+      description:
+        "Your software detects the user's location and switches to the local language. You can add new locales by translating UI from English to another language.", // UNTRANSLATED
+      manage_language: 'Manage language', // UNTRANSLATED
+      default_language: 'Default language', // UNTRANSLATED
+      default_language_description_auto:
+        'The default language will be used when a text segment is missing translation.', // UNTRANSLATED
+      default_language_description_fixed:
+        'When auto detect is off, the default language is the only language your software will show. Turn on auto detect for language customization.', // UNTRANSLATED
    },
    authentication: {
      title: '身份验证',