refactor(console): replace I18nKey with AdminConsoleKey (#1509)

2025-03-10 22:22:45 -05:00 · 2022-07-11 17:28:51 +08:00 · 2022-07-11 17:28:51 +08:00 · d22d5ea914
commit d22d5ea914
parent 5dcdc62f73
73 changed files with 201 additions and 227 deletions
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android.mdx
@ -209,7 +209,7 @@ logtoClient.signOut(logtoException -> {
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/android_zh-cn.mdx
@ -209,7 +209,7 @@ logtoClient.signOut(logtoException -> {
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express.mdx
@ -371,7 +371,7 @@ block content
  subtitle="4 articles"
  index={6}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/express_zh-cn.mdx
@ -367,7 +367,7 @@ block content
  subtitle="共 4 篇"
  index={6}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios.mdx
@ -127,7 +127,7 @@ await client.signOut()
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/ios_zh-cn.mdx
@ -126,7 +126,7 @@ await client.signOut()
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react.mdx
@ -176,7 +176,7 @@ After signing out, it'll be great to redirect user back to your website. Let's a
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/react_zh-cn.mdx
@ -176,7 +176,7 @@ const Callback = () => {
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla.mdx
@ -139,7 +139,7 @@ After signing out, it'll be great to redirect user back to your website. Let's a
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vanilla_zh-cn.mdx
@ -139,7 +139,7 @@ try {
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue.mdx
@ -184,7 +184,7 @@ const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http
  subtitle="4 articles"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
+++ b/packages/console/src/assets/docs/tutorial/integrate-sdk/vue_zh-cn.mdx
@ -184,7 +184,7 @@ const onClickSignOut = () => signOut('${props.postLogoutRedirectUris[0] ?? 'http
  subtitle="共 4 篇"
  index={4}
  activeIndex={props.activeStepIndex}
-  buttonText="admin_console.general.done"
+  buttonText="general.done"
  buttonType="primary"
  onButtonClick={props.onComplete}
 >
--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';

@ -11,7 +11,7 @@ import * as styles from './index.module.scss';
 type Props = {
  severity?: 'info';
  children?: ReactNode;
-  action?: I18nKey;
+  action?: AdminConsoleKey;
  href?: string;
  onClick?: () => void;
  variant?: 'plain' | 'shadow';
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/hook.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/hook.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import { AppearanceMode } from '@logto/schemas';

 import DiscordDark from '@/assets/images/discord-dark.svg';
@ -11,9 +11,9 @@ import { useTheme } from '@/hooks/use-theme';

 type ContactItem = {
  icon: SvgComponent;
-  title: I18nKey;
-  description: I18nKey;
-  label: I18nKey;
+  title: AdminConsoleKey;
+  description: AdminConsoleKey;
+  label: AdminConsoleKey;
  link: string;
 };

@ -23,24 +23,24 @@ export const useContacts = (): ContactItem[] => {

  return [
    {
-      title: 'admin_console.contact.discord.title',
+      title: 'contact.discord.title',
      icon: isLightMode ? Discord : DiscordDark,
-      description: 'admin_console.contact.discord.description',
-      label: 'admin_console.contact.discord.button',
+      description: 'contact.discord.description',
+      label: 'contact.discord.button',
      link: 'https://discord.gg/UEPaF3j5e6',
    },
    {
-      title: 'admin_console.contact.github.title',
+      title: 'contact.github.title',
      icon: isLightMode ? Github : GithubDark,
-      description: 'admin_console.contact.github.description',
-      label: 'admin_console.contact.github.button',
+      description: 'contact.github.description',
+      label: 'contact.github.button',
      link: 'https://github.com/logto-io/logto',
    },
    {
-      title: 'admin_console.contact.email.title',
+      title: 'contact.email.title',
      icon: isLightMode ? Email : EmailDark,
-      description: 'admin_console.contact.email.description',
-      label: 'admin_console.contact.email.button',
+      description: 'contact.email.description',
+      label: 'contact.email.button',
      link: 'mailto:feedback@logto.io',
    },
  ];
--- a/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
+++ b/packages/console/src/components/AppContent/components/Sidebar/components/Contact/index.tsx
@ -15,7 +15,7 @@ type Props = {
 };

 const Contact = ({ isOpen, onCancel }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const contacts = useContacts();

  return (
--- a/packages/console/src/components/AppContent/components/Topbar/index.tsx
+++ b/packages/console/src/components/AppContent/components/Topbar/index.tsx
@ -14,13 +14,13 @@ type Props = {
 };

 const Topbar = ({ className }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  return (
    <div className={classNames(styles.topbar, className)}>
      <Logo className={styles.logo} />
      <div className={styles.line} />
-      <div className={styles.text}>{t('admin_console.title')}</div>
+      <div className={styles.text}>{t('title')}</div>
      <Spacer />
      <GetStartedProgress />
      <UserInfo />
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { HTMLProps, ReactElement, ReactNode, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -19,12 +19,12 @@ type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> &
 };

 type TitleButtonProps = BaseProps & {
-  title: I18nKey | ReactElement<typeof DangerousRaw>;
+  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
  icon?: ReactNode;
 };

 type IconButtonProps = BaseProps & {
-  title?: I18nKey | ReactElement<typeof DangerousRaw>;
+  title?: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
  icon: ReactNode;
 };

@ -42,7 +42,7 @@ const Button = ({
  onClick,
  ...rest
 }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const [showSpinner, setShowSpinner] = useState(false);
  const timerRef = useRef<number>();

--- a/packages/console/src/components/ConfirmModal/index.tsx
+++ b/packages/console/src/components/ConfirmModal/index.tsx
@ -1,4 +1,4 @@
-import { AdminConsoleKey, I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { ReactNode } from 'react';
 import ReactModal from 'react-modal';
@ -14,8 +14,8 @@ export type ConfirmModalProps = {
  className?: string;
  title?: AdminConsoleKey;
  confirmButtonType?: ButtonType;
-  confirmButtonText?: I18nKey;
-  cancelButtonText?: I18nKey;
+  confirmButtonText?: AdminConsoleKey;
+  cancelButtonText?: AdminConsoleKey;
  isOpen: boolean;
  onCancel: () => void;
  onConfirm: () => void;
@ -26,8 +26,8 @@ const ConfirmModal = ({
  className,
  title = 'general.reminder',
  confirmButtonType = 'danger',
-  confirmButtonText = 'admin_console.general.confirm',
-  cancelButtonText = 'admin_console.general.cancel',
+  confirmButtonText = 'general.confirm',
+  cancelButtonText = 'general.cancel',
  isOpen,
  onCancel,
  onConfirm,
--- a/packages/console/src/components/FormField/index.tsx
+++ b/packages/console/src/components/FormField/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { ReactElement, ReactNode, useRef } from 'react';
 import { useTranslation } from 'react-i18next';
@ -11,15 +11,15 @@ import Tooltip from '../Tooltip';
 import * as styles from './index.module.scss';

 type Props = {
-  title: I18nKey | ReactElement<typeof DangerousRaw>;
+  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
  children: ReactNode;
  isRequired?: boolean;
  className?: string;
-  tooltip?: I18nKey;
+  tooltip?: AdminConsoleKey;
 };

 const FormField = ({ title, children, isRequired, className, tooltip }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const tipRef = useRef<HTMLDivElement>(null);

  return (
@ -33,7 +33,7 @@ const FormField = ({ title, children, isRequired, className, tooltip }: Props) =
          </div>
        )}
        <Spacer />
-        {isRequired && <div className={styles.required}>{t('admin_console.general.required')}</div>}
+        {isRequired && <div className={styles.required}>{t('general.required')}</div>}
      </div>
      {children}
    </div>
--- a/packages/console/src/components/LinkButton/index.tsx
+++ b/packages/console/src/components/LinkButton/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { ReactElement, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
@ -9,13 +9,13 @@ import * as styles from './index.module.scss';

 type Props = {
  to: string;
-  title: I18nKey | ReactElement<typeof DangerousRaw>;
+  title: AdminConsoleKey | ReactElement<typeof DangerousRaw>;
  icon?: ReactNode;
  className?: string;
 };

 const LinkButton = ({ to, title, icon, className }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  return (
    <Link to={to} className={classNames(styles.linkButton, className)}>
--- a/packages/console/src/components/MultiTextInput/index.tsx
+++ b/packages/console/src/components/MultiTextInput/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { KeyboardEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
@ -13,7 +13,7 @@ import * as styles from './index.module.scss';
 import { MultiTextInputError } from './types';

 type Props = {
-  title: I18nKey;
+  title: AdminConsoleKey;
  value?: string[];
  onChange: (value: string[]) => void;
  onKeyPress?: (event: KeyboardEvent<HTMLInputElement>) => void;
@ -22,7 +22,7 @@ type Props = {
 };

 const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  const [deleteFieldIndex, setDeleteFieldIndex] = useState<number>();

@ -86,11 +86,11 @@ const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder
        </div>
      ))}
      <div className={classNames(textButtonStyles.button, styles.addAnother)} onClick={handleAdd}>
-        {t('admin_console.general.add_another')}
+        {t('general.add_another')}
      </div>
      <ConfirmModal
        isOpen={deleteFieldIndex !== undefined}
-        confirmButtonText="admin_console.general.delete"
+        confirmButtonText="general.delete"
        onCancel={() => {
          setDeleteFieldIndex(undefined);
        }}
@ -101,7 +101,7 @@ const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder
          }
        }}
      >
-        {t('admin_console.general.deletion_confirmation', { title: t(title) })}
+        {t('general.deletion_confirmation', { title: t(title) })}
      </ConfirmModal>
    </div>
  );
--- a/packages/console/src/components/Search/index.tsx
+++ b/packages/console/src/components/Search/index.tsx
@ -16,7 +16,7 @@ type Props = {

 const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearch }: Props) => {
  const [inputValue, setInputValue] = useState<string>(defaultValue);
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });

  const handleSearchKeyPress: KeyboardEventHandler<HTMLInputElement> = (event) => {
    if (event.key === 'Enter' && inputValue) {
@ -38,19 +38,14 @@ const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearc
        <TextInput
          value={inputValue}
          icon={<SearchIcon className={styles.searchIcon} />}
-          placeholder={t('admin_console.general.search_placeholder')}
+          placeholder={t('general.search_placeholder')}
          onChange={handleSearchChange}
          onKeyPress={handleSearchKeyPress}
        />
      </div>
-      <Button title="admin_console.general.search" onClick={handleClick} />
+      <Button title="general.search" onClick={handleClick} />
      {isClearable && (
-        <Button
-          size="small"
-          type="plain"
-          title="admin_console.general.clear_result"
-          onClick={onClearSearch}
-        />
+        <Button size="small" type="plain" title="general.clear_result" onClick={onClearSearch} />
      )}
    </div>
  );
--- a/packages/console/src/components/SessionExpired/index.tsx
+++ b/packages/console/src/components/SessionExpired/index.tsx
@ -22,7 +22,7 @@ const SessionExpired = () => {
        className={styles.retryButton}
        size="large"
        type="outline"
-        title="admin_console.session_expired.button"
+        title="session_expired.button"
        onClick={() => {
          void signIn(new URL(href, window.location.origin).toString());
        }}
--- a/packages/console/src/components/Table/TableEmpty.tsx
+++ b/packages/console/src/components/Table/TableEmpty.tsx
@ -17,7 +17,7 @@ type Props = {
 };

 const TableEmpty = ({ title, content, image, children, columns }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const theme = useTheme();

  return (
@ -25,7 +25,7 @@ const TableEmpty = ({ title, content, image, children, columns }: Props) => {
      <td colSpan={columns} className={styles.tableEmptyTableData}>
        <div className={styles.tableEmpty}>
          {image ?? (theme === AppearanceMode.LightMode ? <Empty /> : <EmptyDark />)}
-          <div className={styles.title}>{title ?? t('admin_console.errors.empty')}</div>
+          <div className={styles.title}>{title ?? t('errors.empty')}</div>
          {content && <div className={styles.content}>{content}</div>}
          {children}
        </div>
--- a/packages/console/src/components/Table/TableError.tsx
+++ b/packages/console/src/components/Table/TableError.tsx
@ -17,7 +17,7 @@ type Props = {
 };

 const TableError = ({ title, content, onRetry, columns }: Props) => {
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const theme = useTheme();

  return (
@ -25,13 +25,9 @@ const TableError = ({ title, content, onRetry, columns }: Props) => {
      <td colSpan={columns}>
        <div className={styles.tableError}>
          {theme === AppearanceMode.LightMode ? <Error /> : <ErrorDark />}
-          <div className={styles.title}>
-            {title ?? t('admin_console.errors.something_went_wrong')}
-          </div>
-          <div className={styles.content}>
-            {content ?? t('admin_console.errors.unknown_server_error')}
-          </div>
-          {onRetry && <Button title="admin_console.general.retry" onClick={onRetry} />}
+          <div className={styles.title}>{title ?? t('errors.something_went_wrong')}</div>
+          <div className={styles.content}>{content ?? t('errors.unknown_server_error')}</div>
+          {onRetry && <Button title="general.retry" onClick={onRetry} />}
        </div>
      </td>
    </tr>
--- a/packages/console/src/components/UnsavedChangesAlertModal/index.tsx
+++ b/packages/console/src/components/UnsavedChangesAlertModal/index.tsx
@ -68,8 +68,8 @@ const UnsavedChangesAlertModal = ({ hasUnsavedChanges }: Props) => {
  return (
    <ConfirmModal
      isOpen={displayAlert}
-      confirmButtonText="admin_console.general.leave_page"
-      cancelButtonText="admin_console.general.stay_on_page"
+      confirmButtonText="general.leave_page"
+      cancelButtonText="general.stay_on_page"
      onCancel={stayOnPage}
      onConfirm={leavePage}
    >
--- a/packages/console/src/consts/connectors.ts
+++ b/packages/console/src/consts/connectors.ts
@ -1,17 +1,17 @@
-import { AdminConsoleKey, I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import { ConnectorPlatform, ConnectorType } from '@logto/schemas';

 import EmailConnector from '@/assets/images/connector-email.svg';
 import SmsConnectorIcon from '@/assets/images/connector-sms.svg';

 type TitlePlaceHolder = {
-  [key in ConnectorType]: I18nKey;
+  [key in ConnectorType]: AdminConsoleKey;
 };

 export const connectorTitlePlaceHolder: TitlePlaceHolder = Object.freeze({
-  [ConnectorType.SMS]: 'admin_console.connectors.type.sms',
-  [ConnectorType.Email]: 'admin_console.connectors.type.email',
-  [ConnectorType.Social]: 'admin_console.connectors.type.social',
+  [ConnectorType.SMS]: 'connectors.type.sms',
+  [ConnectorType.Email]: 'connectors.type.email',
+  [ConnectorType.Social]: 'connectors.type.social',
 });

 type ConnectorPlatformLabel = {
--- a/packages/console/src/hooks/use-api.ts
+++ b/packages/console/src/hooks/use-api.ts
@ -21,11 +21,9 @@ export class RequestError extends Error {
 const toastError = async (response: Response) => {
  try {
    const data = await response.json<RequestErrorBody>();
-    toast.error(
-      [data.message, data.details].join('\n') || t('admin_console.errors.unknown_server_error')
-    );
+    toast.error([data.message, data.details].join('\n') || t('errors.unknown_server_error'));
  } catch {
-    toast.error(t('admin_console.errors.unknown_server_error'));
+    toast.error(t('errors.unknown_server_error'));
  }
 };

--- a/packages/console/src/hooks/use-swr-fetcher.ts
+++ b/packages/console/src/hooks/use-swr-fetcher.ts
@ -15,7 +15,7 @@ type useSwrFetcherHook = {

 const useSwrFetcher: useSwrFetcherHook = <T>() => {
  const api = useApi({ hideErrorToast: true });
-  const { t } = useTranslation();
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const fetcher = useCallback<BareFetcher<T | withTotalNumber<T>>>(
    async (resource, init) => {
      try {
@ -29,7 +29,7 @@ const useSwrFetcher: useSwrFetcherHook = <T>() => {
            const number = response.headers.get('Total-Number');

            if (!number) {
-              throw new Error(t('admin_console.errors.missing_total_number'));
+              throw new Error(t('errors.missing_total_number'));
            }

            return [data, Number(number)];
--- a/packages/console/src/mdx-components/Step/index.tsx
+++ b/packages/console/src/mdx-components/Step/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import classNames from 'classnames';
 import React, { PropsWithChildren, useEffect, useRef, useState } from 'react';

@ -18,7 +18,7 @@ type Props = PropsWithChildren<{
  subtitle?: string;
  index: number;
  activeIndex: number;
-  buttonText?: I18nKey;
+  buttonText?: AdminConsoleKey;
  buttonHtmlType?: 'submit' | 'button';
  buttonType?: 'primary' | 'outline';
  isLoading?: boolean;
@ -31,7 +31,7 @@ const Step = ({
  subtitle,
  index,
  activeIndex,
-  buttonText = 'admin_console.general.next',
+  buttonText = 'general.next',
  buttonHtmlType = 'button',
  buttonType = 'outline',
  isLoading,
--- a/packages/console/src/mdx-components/UriInputField/index.tsx
+++ b/packages/console/src/mdx-components/UriInputField/index.tsx
@ -1,4 +1,4 @@
-import { I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import { Application } from '@logto/schemas';
 import React, { useRef, KeyboardEvent } from 'react';
 import { Controller, FormProvider, useForm } from 'react-hook-form';
@ -20,7 +20,7 @@ import * as styles from './index.module.scss';
 type Props = {
  appId: string;
  name: 'redirectUris' | 'postLogoutRedirectUris';
-  title: I18nKey;
+  title: AdminConsoleKey;
  isSingle?: boolean;
 };

@ -120,7 +120,7 @@ const UriInputField = ({ appId, name, title, isSingle = false }: Props) => {
                    className={styles.saveButton}
                    disabled={!isDirty}
                    isLoading={isSubmitting}
-                    title="admin_console.general.save"
+                    title="general.save"
                    type="primary"
                    onClick={handleSubmit(async () => onSubmit(value))}
                  />
--- a/packages/console/src/pages/ApiResourceDetails/components/DeleteForm/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/components/DeleteForm/index.tsx
@ -45,12 +45,12 @@ const DeleteForm = ({ id, name, onClose }: Props) => {
      title="general.reminder"
      footer={
        <>
-          <Button type="outline" title="admin_console.general.cancel" onClick={onClose} />
+          <Button type="outline" title="general.cancel" onClick={onClose} />
          <Button
            disabled={inputMismatched}
            isLoading={loading}
            type="danger"
-            title="admin_console.general.delete"
+            title="general.delete"
            onClick={handleDelete}
          />
        </>
--- a/packages/console/src/pages/ApiResourceDetails/index.tsx
+++ b/packages/console/src/pages/ApiResourceDetails/index.tsx
@ -86,7 +86,7 @@ const ApiResourceDetails = () => {
      <LinkButton
        to="/api-resources"
        icon={<Back />}
-        title="admin_console.api_resource_details.back_to_api_resources"
+        title="api_resource_details.back_to_api_resources"
        className={styles.backLink}
      />
      {isLoading && <DetailsSkeleton />}
@ -139,11 +139,7 @@ const ApiResourceDetails = () => {
            </TabNav>
            <form className={classNames(styles.form, detailsStyles.body)} onSubmit={onSubmit}>
              <div className={styles.fields}>
-                <FormField
-                  isRequired
-                  title="admin_console.api_resources.api_name"
-                  className={styles.textField}
-                >
+                <FormField isRequired title="api_resources.api_name" className={styles.textField}>
                  <TextInput
                    {...register('name', { required: true })}
                    hasError={Boolean(errors.name)}
@ -153,7 +149,7 @@ const ApiResourceDetails = () => {
                </FormField>
                <FormField
                  isRequired
-                  title="admin_console.api_resource_details.token_expiration_time_in_seconds"
+                  title="api_resource_details.token_expiration_time_in_seconds"
                  className={styles.textField}
                >
                  <TextInput
@ -171,7 +167,7 @@ const ApiResourceDetails = () => {
                    isLoading={isSubmitting}
                    htmlType="submit"
                    type="primary"
-                    title="admin_console.general.save_changes"
+                    title="general.save_changes"
                    size="large"
                  />
                </div>
--- a/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/ApiResources/components/CreateForm/index.tsx
@ -45,7 +45,7 @@ const CreateForm = ({ onClose }: Props) => {
        <Button
          isLoading={isSubmitting}
          htmlType="submit"
-          title="admin_console.api_resources.create"
+          title="api_resources.create"
          size="large"
          type="primary"
          onClick={onSubmit}
@ -54,7 +54,7 @@ const CreateForm = ({ onClose }: Props) => {
      onClose={onClose}
    >
      <form>
-        <FormField isRequired title="admin_console.api_resources.api_name">
+        <FormField isRequired title="api_resources.api_name">
          <TextInput
            autoFocus
            {...register('name', { required: true })}
@ -63,8 +63,8 @@ const CreateForm = ({ onClose }: Props) => {
        </FormField>
        <FormField
          isRequired
-          title="admin_console.api_resources.api_identifier"
-          tooltip="admin_console.api_resources.api_identifier_tip"
+          title="api_resources.api_identifier"
+          tooltip="api_resources.api_identifier_tip"
        >
          <TextInput
            {...register('indicator', { required: true })}
--- a/packages/console/src/pages/ApiResources/index.tsx
+++ b/packages/console/src/pages/ApiResources/index.tsx
@ -49,7 +49,7 @@ const ApiResources = () => {
      <div className={styles.headline}>
        <CardTitle title="api_resources.title" subtitle="api_resources.subtitle" />
        <Button
-          title="admin_console.api_resources.create"
+          title="api_resources.create"
          type="primary"
          size="large"
          icon={<Plus />}
@ -100,7 +100,7 @@ const ApiResources = () => {
            {apiResources?.length === 0 && (
              <TableEmpty columns={2}>
                <Button
-                  title="admin_console.api_resources.create"
+                  title="api_resources.create"
                  type="outline"
                  onClick={() => {
                    setIsCreateFormOpen(true);
--- a/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/AdvancedSettings.tsx
@ -29,7 +29,7 @@ const AdvancedSettings = ({ oidcConfig, defaultData }: Props) => {

  return (
    <>
-      <FormField title="admin_console.application_details.token_endpoint">
+      <FormField title="application_details.token_endpoint">
        <CopyToClipboard
          className={styles.textField}
          value={oidcConfig.token_endpoint}
--- a/packages/console/src/pages/ApplicationDetails/components/DeleteForm/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/DeleteForm/index.tsx
@ -45,12 +45,12 @@ const DeleteForm = ({ id, name, onClose }: Props) => {
      title="general.reminder"
      footer={
        <>
-          <Button type="outline" title="admin_console.general.cancel" onClick={onClose} />
+          <Button type="outline" title="general.cancel" onClick={onClose} />
          <Button
            disabled={inputMismatched}
            isLoading={loading}
            type="danger"
-            title="admin_console.general.delete"
+            title="general.delete"
            onClick={handleDelete}
          />
        </>
--- a/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
+++ b/packages/console/src/pages/ApplicationDetails/components/Settings.tsx
@ -48,7 +48,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
    <>
      <FormField
        isRequired
-        title="admin_console.application_details.application_name"
+        title="application_details.application_name"
        className={styles.textField}
      >
        <TextInput
@ -57,16 +57,16 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
          placeholder={t('application_details.application_name_placeholder')}
        />
      </FormField>
-      <FormField title="admin_console.application_details.description" className={styles.textField}>
+      <FormField title="application_details.description" className={styles.textField}>
        <TextInput
          {...register('description')}
          placeholder={t('application_details.description_placeholder')}
        />
      </FormField>
      <FormField
-        title="admin_console.application_details.authorization_endpoint"
+        title="application_details.authorization_endpoint"
        className={styles.textField}
-        tooltip="admin_console.application_details.authorization_endpoint_tip"
+        tooltip="application_details.authorization_endpoint_tip"
      >
        <CopyToClipboard
          className={styles.textField}
@ -76,9 +76,9 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
      </FormField>
      <FormField
        isRequired
-        title="admin_console.application_details.redirect_uri"
+        title="application_details.redirect_uri"
        className={styles.textField}
-        tooltip="admin_console.application_details.redirect_uri_tip"
+        tooltip="application_details.redirect_uri_tip"
      >
        <Controller
          name="oidcClientMetadata.redirectUris"
@ -92,7 +92,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
          }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <MultiTextInput
-              title="admin_console.application_details.redirect_uri"
+              title="application_details.redirect_uri"
              value={value}
              error={convertRhfErrorMessage(error?.message)}
              placeholder={
@ -106,9 +106,9 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
        />
      </FormField>
      <FormField
-        title="admin_console.application_details.post_sign_out_redirect_uri"
+        title="application_details.post_sign_out_redirect_uri"
        className={styles.textField}
-        tooltip="admin_console.application_details.post_sign_out_redirect_uri_tip"
+        tooltip="application_details.post_sign_out_redirect_uri_tip"
      >
        <Controller
          name="oidcClientMetadata.postLogoutRedirectUris"
@ -119,7 +119,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
          }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <MultiTextInput
-              title="admin_console.application_details.post_sign_out_redirect_uri"
+              title="application_details.post_sign_out_redirect_uri"
              value={value}
              error={convertRhfErrorMessage(error?.message)}
              placeholder={t('application_details.post_sign_out_redirect_uri_placeholder')}
@ -129,9 +129,9 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
        />
      </FormField>
      <FormField
-        title="admin_console.application_details.cors_allowed_origins"
+        title="application_details.cors_allowed_origins"
        className={styles.textField}
-        tooltip="admin_console.application_details.cors_allowed_origins_tip"
+        tooltip="application_details.cors_allowed_origins_tip"
      >
        <Controller
          name="customClientMetadata.corsAllowedOrigins"
@ -147,7 +147,7 @@ const Settings = ({ applicationType, oidcConfig, defaultData }: Props) => {
          }}
          render={({ field: { onChange, value }, fieldState: { error } }) => (
            <MultiTextInput
-              title="admin_console.application_details.cors_allowed_origins"
+              title="application_details.cors_allowed_origins"
              value={value}
              error={convertRhfErrorMessage(error?.message)}
              placeholder={t('application_details.cors_allowed_origins_placeholder')}
--- a/packages/console/src/pages/ApplicationDetails/index.tsx
+++ b/packages/console/src/pages/ApplicationDetails/index.tsx
@ -108,7 +108,7 @@ const ApplicationDetails = () => {
      <LinkButton
        to="/applications"
        icon={<Back />}
-        title="admin_console.application_details.back_to_applications"
+        title="application_details.back_to_applications"
        className={styles.backLink}
      />
      {isLoading && <DetailsSkeleton />}
@ -127,7 +127,7 @@ const ApplicationDetails = () => {
            </div>
            <div className={styles.operations}>
              <Button
-                title="admin_console.application_details.check_guide"
+                title="application_details.check_guide"
                size="large"
                onClick={() => {
                  setIsReadmeOpen(true);
@ -195,7 +195,7 @@ const ApplicationDetails = () => {
                      htmlType="submit"
                      type="primary"
                      size="large"
-                      title="admin_console.general.save_changes"
+                      title="general.save_changes"
                    />
                  </div>
                </div>
--- a/packages/console/src/pages/Applications/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Applications/components/CreateForm/index.tsx
@ -69,7 +69,7 @@ const CreateForm = ({ onClose }: Props) => {
        <Button
          isLoading={isSubmitting}
          htmlType="submit"
-          title="admin_console.applications.create"
+          title="applications.create"
          size="large"
          type="primary"
          onClick={onSubmit}
@ -78,7 +78,7 @@ const CreateForm = ({ onClose }: Props) => {
      onClose={onClose}
    >
      <form>
-        <FormField title="admin_console.applications.select_application_type">
+        <FormField title="applications.select_application_type">
          <RadioGroup
            ref={ref}
            className={styles.radioGroup}
@ -101,14 +101,14 @@ const CreateForm = ({ onClose }: Props) => {
            <div className={styles.error}>{t('applications.no_application_type_selected')}</div>
          )}
        </FormField>
-        <FormField isRequired title="admin_console.applications.application_name">
+        <FormField isRequired title="applications.application_name">
          <TextInput
            {...register('name', { required: true })}
            placeholder={t('applications.application_name_placeholder')}
            hasError={Boolean(errors.name)}
          />
        </FormField>
-        <FormField title="admin_console.applications.application_description">
+        <FormField title="applications.application_description">
          <TextInput
            {...register('description')}
            placeholder={t('applications.application_description_placeholder')}
--- a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
@ -83,11 +83,11 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
            subtitle="applications.guide.header_description"
          />
          <Spacer />
-          <Button type="plain" size="small" title="admin_console.general.skip" onClick={onClose} />
+          <Button type="plain" size="small" title="general.skip" onClick={onClose} />
          <Button
            className={styles.getSampleButton}
            type="outline"
-            title="admin_console.applications.guide.get_sample_file"
+            title="applications.guide.get_sample_file"
            onClick={onClickGetSample}
          />
        </>
--- a/packages/console/src/pages/Applications/components/SdkSelector/index.tsx
+++ b/packages/console/src/pages/Applications/components/SdkSelector/index.tsx
@ -84,7 +84,7 @@ const SdkSelector = ({
      <div className={styles.buttonWrapper}>
        <Button
          type="outline"
-          title="admin_console.general.next"
+          title="general.next"
          size="large"
          onClick={() => {
            setIsFolded(true);
--- a/packages/console/src/pages/Applications/index.tsx
+++ b/packages/console/src/pages/Applications/index.tsx
@ -47,7 +47,7 @@ const Applications = () => {
        <CardTitle title="applications.title" subtitle="applications.subtitle" />
        <Button
          icon={<Plus />}
-          title="admin_console.applications.create"
+          title="applications.create"
          type="primary"
          size="large"
          onClick={() => {
@ -95,7 +95,7 @@ const Applications = () => {
            {applications?.length === 0 && (
              <TableEmpty columns={2}>
                <Button
-                  title="admin_console.applications.create"
+                  title="applications.create"
                  type="outline"
                  onClick={() => {
                    navigate('/applications/create');
--- a/packages/console/src/pages/AuditLogDetails/index.tsx
+++ b/packages/console/src/pages/AuditLogDetails/index.tsx
@ -41,7 +41,7 @@ const AuditLogDetails = () => {
      {t('log_details.back_to_user', { name: userData?.name ?? t('users.unnamed') })}
    </DangerousRaw>
  ) : (
-    'admin_console.log_details.back_to_logs'
+    'log_details.back_to_logs'
  );

  return (
@ -104,7 +104,7 @@ const AuditLogDetails = () => {
              </TabNavItem>
            </TabNav>
            <div className={styles.main}>
-              <FormField title="admin_console.log_details.raw_data">
+              <FormField title="log_details.raw_data">
                <CodeEditor language="json" value={JSON.stringify(data.payload, null, 2)} />
              </FormField>
            </div>
--- a/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/ConnectorContent.tsx
@ -88,7 +88,7 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop
  return (
    <>
      <div className={styles.main}>
-        <FormField title="admin_console.connector_details.edit_config_label">
+        <FormField title="connector_details.edit_config_label">
          <CodeEditor
            className={styles.codeEditor}
            language="json"
@ -111,7 +111,7 @@ const ConnectorContent = ({ isDeleted, connectorData, onConnectorUpdated }: Prop
          <Button
            type="primary"
            size="large"
-            title="admin_console.general.save_changes"
+            title="general.save_changes"
            isLoading={isSubmitting}
            onClick={handleSave}
          />
--- a/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/components/SenderTester/index.tsx
@ -83,9 +83,7 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props)
        <FormField
          isRequired
          title={
-            isSms
-              ? 'admin_console.connector_details.test_sms_sender'
-              : 'admin_console.connector_details.test_email_sender'
+            isSms ? 'connector_details.test_sms_sender' : 'connector_details.test_email_sender'
          }
          className={styles.textField}
        >
@ -109,7 +107,7 @@ const SenderTester = ({ connectorId, connectorType, config, className }: Props)
        <div ref={buttonPosReference} className={styles.send}>
          <Button
            isLoading={isSubmitting}
-            title="admin_console.connector_details.send"
+            title="connector_details.send"
            type="outline"
            onClick={onSubmit}
          />
--- a/packages/console/src/pages/ConnectorDetails/index.tsx
+++ b/packages/console/src/pages/ConnectorDetails/index.tsx
@ -75,7 +75,7 @@ const ConnectorDetails = () => {
      <LinkButton
        to={data?.type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
        icon={<Back />}
-        title="admin_console.connector_details.back_to_connectors"
+        title="connector_details.back_to_connectors"
        className={styles.backLink}
      />
      {isLoading && <DetailsSkeleton />}
@ -114,7 +114,7 @@ const ConnectorDetails = () => {
          </div>
          <div className={styles.operations}>
            <Button
-              title="admin_console.connector_details.check_readme"
+              title="connector_details.check_readme"
              size="large"
              onClick={() => {
                setIsReadMeOpen(true);
--- a/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorName/index.tsx
@ -23,7 +23,7 @@ type Props = {
 };

 const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
-  const { t } = useTranslation(undefined);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const enabledConnectors = connectors.filter(({ enabled }) => enabled);
  const connector = enabledConnectors[0];
  const theme = useTheme();
@ -37,7 +37,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
          <div className={styles.previewTitle}>
            <div>{t(connectorTitlePlaceHolder[type])}</div>
            {type !== ConnectorType.Social && (
-              <Button title="admin_console.general.set_up" onClick={onClickSetup} />
+              <Button title="general.set_up" onClick={onClickSetup} />
            )}
          </div>
        }
@ -64,7 +64,7 @@ const ConnectorName = ({ type, connectors, onClickSetup }: Props) => {
                    platform && (
                      <div key={id} className={styles.platform}>
                        <ConnectorPlatformIcon platform={platform} />
-                        {t(`admin_console.${connectorPlatformLabel[platform]}`)}
+                        {t(`${connectorPlatformLabel[platform]}`)}
                      </div>
                    )
                )}
--- a/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
+++ b/packages/console/src/pages/Connectors/components/ConnectorRow/index.tsx
@ -18,7 +18,7 @@ type Props = {
 };

 const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
-  const { t } = useTranslation(undefined);
+  const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' });
  const firstEnabledConnector = connectors.find(({ enabled }) => enabled);
  const inUse = useConnectorInUse(type, firstEnabledConnector?.target);
  const navigate = useNavigate();
@ -41,7 +41,7 @@ const ConnectorRow = ({ type, connectors, onClickSetup }: Props) => {
      <td>
        {inUse !== undefined && (
          <Status status={inUse ? 'enabled' : 'disabled'}>
-            {t('admin_console.connectors.connector_status', {
+            {t('connectors.connector_status', {
              context: inUse ? 'in_use' : 'not_in_use',
            })}
          </Status>
--- a/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Connectors/components/CreateForm/index.tsx
@ -86,7 +86,7 @@ const CreateForm = ({ onClose, isOpen: isFormOpen, type }: Props) => {
        title={cardTitle}
        footer={
          <Button
-            title="admin_console.general.next"
+            title="general.next"
            type="primary"
            disabled={!activeConnectorId}
            onClick={() => {
--- a/packages/console/src/pages/Connectors/components/Guide/index.tsx
+++ b/packages/console/src/pages/Connectors/components/Guide/index.tsx
@ -99,7 +99,7 @@ const Guide = ({ connector, onClose }: Props) => {
                title={t('connector_details.edit_config_label')}
                index={0}
                activeIndex={0}
-                buttonText="admin_console.connectors.save_and_done"
+                buttonText="connectors.save_and_done"
                buttonHtmlType="submit"
                buttonType="primary"
                isLoading={isSubmitting}
--- a/packages/console/src/pages/Connectors/index.tsx
+++ b/packages/console/src/pages/Connectors/index.tsx
@ -63,7 +63,7 @@ const Connectors = () => {
          <CardTitle title="connectors.title" subtitle="connectors.subtitle" />
          {isSocial && (
            <Button
-              title="admin_console.connectors.create"
+              title="connectors.create"
              type="primary"
              size="large"
              icon={<Plus />}
@ -108,7 +108,7 @@ const Connectors = () => {
                  image={isLightMode ? <SocialConnectorEmpty /> : <SocialConnectorEmptyDark />}
                >
                  <Button
-                    title="admin_console.connectors.create"
+                    title="connectors.create"
                    type="outline"
                    onClick={() => {
                      setCreateType(ConnectorType.Social);
--- a/packages/console/src/pages/GetStarted/hook.ts
+++ b/packages/console/src/pages/GetStarted/hook.ts
@ -1,4 +1,4 @@
-import { AdminConsoleKey, I18nKey } from '@logto/phrases';
+import { AdminConsoleKey } from '@logto/phrases';
 import { AppearanceMode, Application } from '@logto/schemas';
 import { demoAppApplicationId } from '@logto/schemas/lib/seeds';
 import { conditionalString } from '@silverhand/essentials';
@ -28,7 +28,7 @@ type GetStartedMetadata = {
  title: AdminConsoleKey;
  subtitle: AdminConsoleKey;
  icon: SvgComponent;
-  buttonText: I18nKey;
+  buttonText: AdminConsoleKey;
  isComplete?: boolean;
  isHidden?: boolean;
  onClick: () => void;
@ -64,7 +64,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card1_title',
        subtitle: 'get_started.card1_subtitle',
        icon: isLightMode ? CheckDemo : CheckDemoDark,
-        buttonText: 'admin_console.general.check_out',
+        buttonText: 'general.check_out',
        isComplete: settings?.demoChecked,
        isHidden: hideDemo,
        onClick: async () => {
@ -77,7 +77,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card2_title',
        subtitle: 'get_started.card2_subtitle',
        icon: isLightMode ? CreateApp : CreateAppDark,
-        buttonText: 'admin_console.general.create',
+        buttonText: 'general.create',
        isComplete: settings?.applicationCreated,
        onClick: () => {
          navigate('/applications/create');
@ -88,7 +88,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card3_title',
        subtitle: 'get_started.card3_subtitle',
        icon: isLightMode ? Customize : CustomizeDark,
-        buttonText: 'admin_console.general.customize',
+        buttonText: 'general.customize',
        isComplete: settings?.signInExperienceCustomized,
        onClick: () => {
          navigate('/sign-in-experience');
@ -99,7 +99,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card4_title',
        subtitle: 'get_started.card4_subtitle',
        icon: isLightMode ? Passwordless : PasswordlessDark,
-        buttonText: 'admin_console.general.set_up',
+        buttonText: 'general.set_up',
        isComplete: settings?.passwordlessConfigured,
        onClick: () => {
          navigate('/connectors');
@ -110,7 +110,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card5_title',
        subtitle: 'get_started.card5_subtitle',
        icon: isLightMode ? OneClick : OneClickDark,
-        buttonText: 'admin_console.general.add',
+        buttonText: 'general.add',
        isComplete: settings?.socialSignInConfigured,
        onClick: () => {
          navigate('/connectors/social');
@ -121,7 +121,7 @@ const useGetStartedMetadata = () => {
        title: 'get_started.card6_title',
        subtitle: 'get_started.card6_subtitle',
        icon: isLightMode ? FurtherReadings : FurtherReadingsDark,
-        buttonText: 'admin_console.general.check_out',
+        buttonText: 'general.check_out',
        isComplete: settings?.furtherReadingsChecked,
        onClick: () => {
          void updateSettings({ furtherReadingsChecked: true });
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@ -68,7 +68,7 @@ const GetStarted = () => {
      <ConfirmModal
        isOpen={showConfirmModal}
        confirmButtonType="primary"
-        confirmButtonText="admin_console.get_started.hide_this"
+        confirmButtonText="get_started.hide_this"
        onConfirm={hideGetStarted}
        onCancel={() => {
          setShowConfirmModal(false);
--- a/packages/console/src/pages/Settings/components/ChangePassword.tsx
+++ b/packages/console/src/pages/Settings/components/ChangePassword.tsx
@ -39,11 +39,11 @@ const ChangePassword = () => {

  return (
    <>
-      <FormField title="admin_console.settings.change_password">
+      <FormField title="settings.change_password">
        <div className={styles.changePassword}>
          <div className={styles.description}>{t('settings.change_password_description')}</div>
          <Button
-            title="admin_console.settings.change_password"
+            title="settings.change_password"
            type="default"
            onClick={() => {
              setIsOpen(true);
@ -62,7 +62,7 @@ const ChangePassword = () => {
          footer={
            <Button
              type="primary"
-              title="admin_console.general.confirm"
+              title="general.confirm"
              disabled={isDisabled || isLoading}
              onClick={onSubmit}
            />
@ -72,10 +72,10 @@ const ChangePassword = () => {
          }}
        >
          <div>
-            <FormField title="admin_console.settings.new_password">
+            <FormField title="settings.new_password">
              <TextInput {...register('password', { required: true })} type="password" />
            </FormField>
-            <FormField title="admin_console.settings.confirm_password">
+            <FormField title="settings.confirm_password">
              <TextInput {...register('confirmPassword', { required: true })} type="password" />
            </FormField>
          </div>
--- a/packages/console/src/pages/Settings/index.tsx
+++ b/packages/console/src/pages/Settings/index.tsx
@ -53,7 +53,7 @@ const Settings = () => {
      {isLoaded && (
        <form className={detailsStyles.body} onSubmit={onSubmit}>
          <div className={styles.fields}>
-            <FormField title="admin_console.settings.language" className={styles.textField}>
+            <FormField title="settings.language" className={styles.textField}>
              <Controller
                name="language"
                control={control}
@ -75,7 +75,7 @@ const Settings = () => {
                )}
              />
            </FormField>
-            <FormField title="admin_console.settings.appearance" className={styles.textField}>
+            <FormField title="settings.appearance" className={styles.textField}>
              <Controller
                name="appearanceMode"
                control={control}
@ -110,7 +110,7 @@ const Settings = () => {
                type="primary"
                htmlType="submit"
                size="large"
-                title="admin_console.general.save_changes"
+                title="general.save_changes"
              />
            </div>
          </div>
--- a/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/BrandingForm.tsx
@ -27,7 +27,7 @@ const BrandingForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.branding.title')}</div>
-      <FormField title="admin_console.sign_in_exp.branding.ui_style">
+      <FormField title="sign_in_exp.branding.ui_style">
        <Controller
          name="branding.style"
          control={control}
@ -43,7 +43,7 @@ const BrandingForm = () => {
          )}
        />
      </FormField>
-      <FormField isRequired title="admin_console.sign_in_exp.branding.logo_image_url">
+      <FormField isRequired title="sign_in_exp.branding.logo_image_url">
        <TextInput
          {...register('branding.logoUrl', {
            required: true,
@ -55,7 +55,7 @@ const BrandingForm = () => {
        />
      </FormField>
      {isDarkModeEnabled && (
-        <FormField title="admin_console.sign_in_exp.branding.dark_logo_image_url">
+        <FormField title="sign_in_exp.branding.dark_logo_image_url">
          <TextInput
            {...register('branding.darkLogoUrl', {
              validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
@ -67,7 +67,7 @@ const BrandingForm = () => {
        </FormField>
      )}
      {isSloganRequired && (
-        <FormField isRequired={isSloganRequired} title="admin_console.sign_in_exp.branding.slogan">
+        <FormField isRequired={isSloganRequired} title="sign_in_exp.branding.slogan">
          <TextInput
            {...register('branding.slogan', { required: isSloganRequired })}
            hasError={Boolean(errors.branding?.slogan)}
--- a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
@ -47,7 +47,7 @@ const ColorForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.color.title')}</div>
-      <FormField title="admin_console.sign_in_exp.color.primary_color">
+      <FormField title="sign_in_exp.color.primary_color">
        <Controller
          name="color.primaryColor"
          control={control}
@ -56,7 +56,7 @@ const ColorForm = () => {
          )}
        />
      </FormField>
-      <FormField title="admin_console.sign_in_exp.color.dark_mode">
+      <FormField title="sign_in_exp.color.dark_mode">
        <Switch
          label={t('sign_in_exp.color.dark_mode_description')}
          {...register('color.isDarkModeEnabled')}
@ -64,7 +64,7 @@ const ColorForm = () => {
      </FormField>
      {isDarkModeEnabled && (
        <>
-          <FormField isRequired title="admin_console.sign_in_exp.color.dark_primary_color">
+          <FormField isRequired title="sign_in_exp.color.dark_primary_color">
            <Controller
              name="color.darkPrimaryColor"
              control={control}
@ -79,7 +79,7 @@ const ColorForm = () => {
              <Button
                type="plain"
                size="small"
-                title="admin_console.sign_in_exp.color.reset"
+                title="sign_in_exp.color.reset"
                onClick={handleResetColor}
              />
            </div>
--- a/packages/console/src/pages/SignInExperience/components/ConnectorSetupWarning.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ConnectorSetupWarning.tsx
@ -40,7 +40,7 @@ const ConnectorSetupWarning = ({ method }: Props) => {

  return (
    <Alert
-      action="admin_console.general.set_up"
+      action="general.set_up"
      href={type === ConnectorType.Social ? '/connectors/social' : '/connectors'}
    >
      {t('sign_in_exp.setup_warning.no_connector', { context: type.toLowerCase() })}
--- a/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
@ -94,7 +94,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
          <Button
            type="plain"
            size="small"
-            title="admin_console.general.skip"
+            title="general.skip"
            isLoading={isLoading}
            onClick={onSkip}
          />
@ -104,11 +104,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
            <form className={styles.form} onSubmit={onSubmit}>
              {!preferences.experienceNoticeConfirmed && (
                <div className={styles.reminder}>
-                  <Alert
-                    action="admin_console.sign_in_exp.welcome.got_it"
-                    variant="shadow"
-                    onClick={onGotIt}
-                  >
+                  <Alert action="sign_in_exp.welcome.got_it" variant="shadow" onClick={onGotIt}>
                    {t('sign_in_exp.welcome.apply_remind')}
                  </Alert>
                </div>
@ -138,7 +134,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
                    isLoading={isSubmitting}
                    type="primary"
                    htmlType="submit"
-                    title="admin_console.general.done"
+                    title="general.done"
                  />
                </div>
              </div>
--- a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
@ -32,7 +32,7 @@ const LanguagesForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.others.languages.title')}</div>
-      <FormField title="admin_console.sign_in_exp.others.languages.mode">
+      <FormField title="sign_in_exp.others.languages.mode">
        <Controller
          name="languageInfo.mode"
          control={control}
@ -47,8 +47,8 @@ const LanguagesForm = () => {
      </FormField>
      {mode === LanguageMode.Auto && (
        <FormField
-          title="admin_console.sign_in_exp.others.languages.fallback_language"
-          tooltip="admin_console.sign_in_exp.others.languages.fallback_language_tip"
+          title="sign_in_exp.others.languages.fallback_language"
+          tooltip="sign_in_exp.others.languages.fallback_language_tip"
        >
          <Controller
            name="languageInfo.fallbackLanguage"
@ -60,7 +60,7 @@ const LanguagesForm = () => {
        </FormField>
      )}
      {mode === LanguageMode.Fixed && (
-        <FormField title="admin_console.sign_in_exp.others.languages.fixed_language">
+        <FormField title="sign_in_exp.others.languages.fixed_language">
          <Controller
            name="languageInfo.fixedLanguage"
            control={control}
--- a/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/SignInMethodsForm.tsx
@ -82,7 +82,7 @@ const SignInMethodsForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.sign_in_methods.title')}</div>
-      <FormField title="admin_console.sign_in_exp.sign_in_methods.primary">
+      <FormField title="sign_in_exp.sign_in_methods.primary">
        <Controller
          name="signInMethods.primary"
          control={control}
@ -114,7 +114,7 @@ const SignInMethodsForm = () => {
          />
        </div>
      )}
-      <FormField title="admin_console.sign_in_exp.sign_in_methods.enable_secondary">
+      <FormField title="sign_in_exp.sign_in_methods.enable_secondary">
        <Switch
          /**
           * DO NOT SET THIS FIELD TO REQUIRED UNLESS YOU KNOW WHAT YOU ARE DOING.
@ -128,7 +128,7 @@ const SignInMethodsForm = () => {
        <>
          {secondaryMethodsFields}
          {social && (
-            <FormField title="admin_console.sign_in_exp.sign_in_methods.define_social_methods">
+            <FormField title="sign_in_exp.sign_in_methods.define_social_methods">
              <Controller
                name="socialSignInConnectorTargets"
                control={control}
--- a/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/TermsForm.tsx
@ -22,7 +22,7 @@ const TermsForm = () => {
  return (
    <>
      <div className={styles.title}>{t('sign_in_exp.terms_of_use.title')}</div>
-      <FormField title="admin_console.sign_in_exp.terms_of_use.enable">
+      <FormField title="sign_in_exp.terms_of_use.enable">
        <Switch
          {...register('termsOfUse.enabled')}
          label={t('sign_in_exp.terms_of_use.description')}
@ -31,8 +31,8 @@ const TermsForm = () => {
      {enabled && (
        <FormField
          isRequired
-          title="admin_console.sign_in_exp.terms_of_use.terms_of_use"
-          tooltip="admin_console.sign_in_exp.terms_of_use.terms_of_use_tip"
+          title="sign_in_exp.terms_of_use.terms_of_use"
+          tooltip="sign_in_exp.terms_of_use.terms_of_use_tip"
        >
          <TextInput
            {...register('termsOfUse.contentUrl', {
--- a/packages/console/src/pages/SignInExperience/components/Welcome.tsx
+++ b/packages/console/src/pages/SignInExperience/components/Welcome.tsx
@ -29,7 +29,7 @@ const Welcome = ({ mutate }: Props) => {
          {theme === AppearanceMode.LightMode ? <WelcomeImage /> : <WelcomeImageDark />}
          <div className={styles.text}>{t('sign_in_exp.welcome.title')}</div>
          <Button
-            title="admin_console.sign_in_exp.welcome.get_started"
+            title="sign_in_exp.welcome.get_started"
            type="primary"
            onClick={() => {
              setIsOpen(true);
--- a/packages/console/src/pages/SignInExperience/index.tsx
+++ b/packages/console/src/pages/SignInExperience/index.tsx
@ -147,7 +147,7 @@ const SignInExperience = () => {
                      type="primary"
                      size="large"
                      htmlType="submit"
-                      title="admin_console.general.save_changes"
+                      title="general.save_changes"
                    />
                  </div>
                </div>
--- a/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
+++ b/packages/console/src/pages/UserDetails/components/CreateSuccess.tsx
@ -46,8 +46,8 @@ const CreateSuccess = ({ username, password, title, onClose, passwordLabel }: Pr
        title={title}
        footer={
          <>
-            <Button title="admin_console.general.done" onClick={onClose} />
-            <Button type="primary" title="admin_console.general.copy" onClick={handleCopy} />
+            <Button title="general.done" onClick={onClose} />
+            <Button type="primary" title="general.copy" onClick={handleCopy} />
          </>
        }
        className={styles.content}
--- a/packages/console/src/pages/UserDetails/components/DeleteForm.tsx
+++ b/packages/console/src/pages/UserDetails/components/DeleteForm.tsx
@ -38,13 +38,8 @@ const DeleteForm = ({ id, onClose }: Props) => {
      title="general.reminder"
      footer={
        <>
-          <Button type="outline" title="admin_console.general.cancel" onClick={onClose} />
-          <Button
-            disabled={loading}
-            type="danger"
-            title="admin_console.general.delete"
-            onClick={handleDelete}
-          />
+          <Button type="outline" title="general.cancel" onClick={onClose} />
+          <Button disabled={loading} type="danger" title="general.delete" onClick={handleDelete} />
        </>
      }
      onClose={onClose}
--- a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
+++ b/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
@ -129,7 +129,7 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
                  </td>
                  <td>
                    <Button
-                      title="admin_console.user_details.connectors.remove"
+                      title="user_details.connectors.remove"
                      type="plain"
                      onClick={() => {
                        setDeletingConnector(connector);
@ -144,7 +144,7 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
      )}
      <ConfirmModal
        isOpen={deletingConnector !== undefined}
-        confirmButtonText="admin_console.general.delete"
+        confirmButtonText="general.delete"
        onCancel={() => {
          setDeletingConnector(undefined);
        }}
--- a/packages/console/src/pages/UserDetails/components/UserSettings.tsx
+++ b/packages/console/src/pages/UserDetails/components/UserSettings.tsx
@ -89,24 +89,24 @@ const UserSettings = ({ userData, userFormData, onUserUpdated }: Props) => {
    <form className={styles.form} onSubmit={onSubmit}>
      <div className={styles.fields}>
        {getValues('primaryEmail') && (
-          <FormField title="admin_console.user_details.field_email" className={styles.textField}>
+          <FormField title="user_details.field_email" className={styles.textField}>
            <TextInput readOnly {...register('primaryEmail')} />
          </FormField>
        )}
        {getValues('primaryPhone') && (
-          <FormField title="admin_console.user_details.field_phone" className={styles.textField}>
+          <FormField title="user_details.field_phone" className={styles.textField}>
            <TextInput readOnly {...register('primaryPhone')} />
          </FormField>
        )}
        {getValues('username') && (
-          <FormField title="admin_console.user_details.field_username" className={styles.textField}>
+          <FormField title="user_details.field_username" className={styles.textField}>
            <TextInput readOnly {...register('username')} />
          </FormField>
        )}
-        <FormField title="admin_console.user_details.field_name" className={styles.textField}>
+        <FormField title="user_details.field_name" className={styles.textField}>
          <TextInput {...register('name')} />
        </FormField>
-        <FormField title="admin_console.user_details.field_avatar" className={styles.textField}>
+        <FormField title="user_details.field_avatar" className={styles.textField}>
          <TextInput
            {...register('avatar', {
              validate: (value) => !value || uriValidator(value) || t('errors.invalid_uri_format'),
@ -116,7 +116,7 @@ const UserSettings = ({ userData, userFormData, onUserUpdated }: Props) => {
            placeholder={t('user_details.field_avatar_placeholder')}
          />
        </FormField>
-        <FormField title="admin_console.user_details.field_connectors" className={styles.textField}>
+        <FormField title="user_details.field_connectors" className={styles.textField}>
          <UserConnectors
            userId={userData.id}
            connectors={userData.identities}
@ -127,9 +127,9 @@ const UserSettings = ({ userData, userFormData, onUserUpdated }: Props) => {
        </FormField>
        <FormField
          isRequired
-          title="admin_console.user_details.field_custom_data"
+          title="user_details.field_custom_data"
          className={styles.textField}
-          tooltip="admin_console.user_details.field_custom_data_tip"
+          tooltip="user_details.field_custom_data_tip"
        >
          <CodeEditor language="json" value={value} onChange={onChange} />
        </FormField>
@ -140,7 +140,7 @@ const UserSettings = ({ userData, userFormData, onUserUpdated }: Props) => {
            isLoading={isSubmitting}
            htmlType="submit"
            type="primary"
-            title="admin_console.general.save_changes"
+            title="general.save_changes"
            size="large"
          />
        </div>
--- a/packages/console/src/pages/UserDetails/index.tsx
+++ b/packages/console/src/pages/UserDetails/index.tsx
@ -59,7 +59,7 @@ const UserDetails = () => {
      <LinkButton
        to="/users"
        icon={<Back />}
-        title="admin_console.user_details.back_to_users"
+        title="user_details.back_to_users"
        className={styles.backLink}
      />
      {isLoading && <DetailsSkeleton />}
--- a/packages/console/src/pages/Users/components/CreateForm/index.tsx
+++ b/packages/console/src/pages/Users/components/CreateForm/index.tsx
@ -48,7 +48,7 @@ const CreateForm = ({ onClose }: Props) => {
        <Button
          disabled={isSubmitting}
          htmlType="submit"
-          title="admin_console.users.create"
+          title="users.create"
          size="large"
          type="primary"
          onClick={onSubmit}
@ -57,7 +57,7 @@ const CreateForm = ({ onClose }: Props) => {
      onClose={onClose}
    >
      <form>
-        <FormField isRequired title="admin_console.users.create_form_username">
+        <FormField isRequired title="users.create_form_username">
          <TextInput
            autoFocus
            {...register('username', {
@ -71,7 +71,7 @@ const CreateForm = ({ onClose }: Props) => {
            errorMessage={errors.username?.message}
          />
        </FormField>
-        <FormField title="admin_console.users.create_form_name">
+        <FormField title="users.create_form_name">
          <TextInput
            {...register('name')}
            hasError={Boolean(errors.name)}
--- a/packages/console/src/pages/Users/index.tsx
+++ b/packages/console/src/pages/Users/index.tsx
@ -49,7 +49,7 @@ const Users = () => {
      <div className={styles.headline}>
        <CardTitle title="users.title" subtitle="users.subtitle" />
        <Button
-          title="admin_console.users.create"
+          title="users.create"
          size="large"
          type="primary"
          icon={<Plus />}
@ -111,7 +111,7 @@ const Users = () => {
            {users?.length === 0 && (
              <TableEmpty columns={3}>
                <Button
-                  title="admin_console.users.create"
+                  title="users.create"
                  type="outline"
                  onClick={() => {
                    setIsCreateFormOpen(true);
--- a/packages/console/src/pages/Welcome/index.tsx
+++ b/packages/console/src/pages/Welcome/index.tsx
@ -48,7 +48,7 @@ const Welcome = () => {
            className={styles.button}
            size="large"
            type="branding"
-            title="admin_console.welcome.create_account"
+            title="welcome.create_account"
            onClick={() => {
              void signIn(new URL(href, window.location.origin).toString());
            }}