refactor(experience): update error page to accept error message from url search params

packages/experience/src/pages/ErrorPage/index.tsx

@@ -1,6 +1,6 @@
 import { Theme } from '@logto/schemas';
 import type { TFuncKey } from 'i18next';
-import { useContext } from 'react';
+import { useContext, useMemo } from 'react';
 
 import StaticPageLayout from '@/Layout/StaticPageLayout';
 import PageContext from '@/Providers/PageContextProvider/PageContext';
@@ -19,22 +19,40 @@ type Props = {
   readonly rawMessage?: string;
 };
 
+const determineErrorKeysBySearchParams = ():
+  | { titleKey: TFuncKey; messageKey: TFuncKey }
+  | undefined => {
+  const searchParams = new URLSearchParams(window.location.search);
+
+  if (searchParams.get('code')?.startsWith('one_time_token.')) {
+    return { titleKey: 'error.invalid_link', messageKey: 'error.invalid_link_description' };
+  }
+
+  return undefined;
+};
+
+/**
+ * Error page that accepts data from other pages or directly from the URL params.
+ */
 const ErrorPage = ({ title = 'description.not_found', message, rawMessage }: Props) => {
   const { theme } = useContext(PageContext);
-  const errorMessage = Boolean(rawMessage ?? message);
+  const { titleKey = title, messageKey = message } = determineErrorKeysBySearchParams() ?? {};
+
+  const errorMessage = useMemo(
+    () => rawMessage ?? <DynamicT forKey={messageKey} />,
+    [rawMessage, messageKey]
+  );
 
   return (
     <StaticPageLayout>
-      <PageMeta titleKey={title} />
+      <PageMeta titleKey={titleKey} />
       {history.length > 1 && <NavBar />}
       <div className={styles.container}>
         {theme === Theme.Light ? <EmptyState /> : <EmptyStateDark />}
         <div className={styles.title}>
-          <DynamicT forKey={title} />
+          <DynamicT forKey={titleKey} />
         </div>
-        {errorMessage && (
-          <div className={styles.message}>{rawMessage ?? <DynamicT forKey={message} />}</div>
-        )}
+        {errorMessage && <div className={styles.message}>{errorMessage}</div>}
         <SupportInfo />
       </div>
     </StaticPageLayout>

packages/phrases-experience/src/locales/ar/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: 'انتهت مهلة الطلب. يرجى المحاولة مرة أخرى لاحقًا.',
   password_rejected,
   sso_not_enabled: 'تسجيل الدخول الموحد غير ممكّن لحساب البريد الإلكتروني هذا.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/de/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: 'Zeitüberschreitung. Bitte melde dich erneut an.',
   password_rejected,
   sso_not_enabled: 'Single Sign-On ist für dieses E-Mail-Konto nicht aktiviert.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/en/error/index.ts

@@ -19,6 +19,9 @@ const error = {
   timeout: 'Request timeout. Please try again later.',
   password_rejected,
   sso_not_enabled: 'Single Sign-On is not enabled for this email account.',
+  invalid_link: 'Invalid link',
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/es/error/index.ts

@@ -21,6 +21,12 @@ const error = {
   password_rejected,
   sso_not_enabled:
     'El inicio de sesión único no está habilitado para esta cuenta de correo electrónico.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/fr/error/index.ts

@@ -21,6 +21,12 @@ const error = {
   timeout: "Délai d'attente de la requête dépassé. Veuillez réessayer plus tard.",
   password_rejected,
   sso_not_enabled: "La authentification unique n'est pas activée pour ce compte de messagerie.",
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/it/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: 'Timeout della richiesta. Si prega di riprovare più tardi.',
   password_rejected,
   sso_not_enabled: 'Single sign-on non abilitato per questo account email.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ja/error/index.ts

@@ -20,6 +20,12 @@ const error = {
   timeout: 'リクエストタイムアウト。後でもう一度お試しください。',
   password_rejected,
   sso_not_enabled: 'このメールアカウントではシングルサインオンが有効になっていません。',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ko/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: '요청 시간이 초과되었어요. 잠시 후에 다시 시도해 주세요.',
   password_rejected,
   sso_not_enabled: '이 이메일 계정에 대해 단일 로그인이 활성화되지 않았어요.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pl-pl/error/index.ts

@@ -20,6 +20,12 @@ const error = {
   timeout: 'Czas żądania upłynął. Proszę spróbuj ponownie później.',
   password_rejected,
   sso_not_enabled: 'Pojedyncze logowanie nie jest włączony dla tego konta e-mail.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pt-br/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: 'Tempo limite excedido. Por favor, tente novamente mais tarde.',
   password_rejected,
   sso_not_enabled: 'O Single Sign-On não está habilitado para esta conta de e-mail.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/pt-pt/error/index.ts

@@ -20,6 +20,12 @@ const error = {
   timeout: 'Tempo limite de sessão. Volte e faça login novamente.',
   password_rejected,
   sso_not_enabled: 'O Single Sign-On não está habilitado para esta conta de e-mail.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/ru/error/index.ts

@@ -20,6 +20,12 @@ const error = {
   timeout: 'Время ожидания истекло. Пожалуйста, повторите попытку позднее.',
   password_rejected,
   sso_not_enabled: 'Односторонняя авторизация не включена для этого аккаунта электронной почты.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/tr-tr/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: 'Oturum zaman aşımına uğradı. Lütfen geri dönüp tekrar giriş yapınız.',
   password_rejected,
   sso_not_enabled: 'Bu e-posta hesabı için tek oturum açma etkin değil.',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-cn/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: '请求超时，请稍后重试。',
   password_rejected,
   sso_not_enabled: '此邮箱账户未启用单点登录。',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-hk/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: '請求超時，請稍後重試。',
   password_rejected,
   sso_not_enabled: '此電子郵件帳戶未啟用單一登錄。',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);

packages/phrases-experience/src/locales/zh-tw/error/index.ts

@@ -19,6 +19,12 @@ const error = {
   timeout: '請求超時，請稍後重試。',
   password_rejected,
   sso_not_enabled: '此郵箱帳戶未啟用單一登錄。',
+  /** UNTRANSLATED */
+  invalid_link: 'Invalid link',
+  /** UNTRANSLATED */
+  invalid_link_description: 'Your magic link may have expired or is no longer valid.',
+  /** UNTRANSLATED */
+  something_went_wrong: 'Something went wrong.',
 };
 
 export default Object.freeze(error);