feat(experience): add switch account page

packages/experience/src/pages/SwitchAccount/index.module.scss

@@ -0,0 +1,49 @@
+@use '@/scss/underscore' as _;
+
+.container {
+  flex: 1;
+  @include _.flex-column;
+  @include _.full-width;
+}
+
+.title {
+  margin-top: _.unit(8);
+  font: var(--font-label-2);
+}
+
+.message {
+  margin-top: _.unit(6);
+  font: var(--font-body-2);
+}
+
+.logo {
+  height: 40px;
+  width: auto;
+  @include _.image-align-center;
+}
+
+.userProfile {
+  width: 100%;
+}
+
+.button {
+  margin-top: _.unit(2);
+}
+
+.linkButton {
+  margin-top: _.unit(6);
+}
+
+:global(body.mobile) {
+  .title {
+    @include _.title;
+    margin-bottom: _.unit(4);
+  }
+}
+
+:global(body.desktop) {
+  .title {
+    @include _.title-desktop;
+    margin-bottom: _.unit(2);
+  }
+}

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

@@ -0,0 +1,101 @@
+import { type ConsentInfoResponse } from '@logto/schemas';
+import { useContext, useEffect, useState } from 'react';
+
+import StaticPageLayout from '@/Layout/StaticPageLayout';
+import PageContext from '@/Providers/PageContextProvider/PageContext';
+import { getConsentInfo } from '@/apis/consent';
+import Button from '@/components/Button';
+import DynamicT from '@/components/DynamicT';
+import LoadingLayer from '@/components/LoadingLayer';
+import PageMeta from '@/components/PageMeta';
+import TextLink from '@/components/TextLink';
+import useApi from '@/hooks/use-api';
+import useErrorHandler from '@/hooks/use-error-handler';
+import UserProfile from '@/pages/Consent/UserProfile';
+import ErrorPage from '@/pages/ErrorPage';
+import { getBrandingLogoUrl } from '@/utils/logo';
+
+import styles from './index.module.scss';
+
+/**
+ * This component is only used when there's an active session, and then the user
+ * is trying to sign-in with another account (e.g., using a magic link).
+ */
+
+type Props = {
+  /**
+   * The account name of the current active session
+   */
+  readonly account: string;
+  /**
+   * The callback function to be called after clicking the "Go back" link
+   */
+  readonly onCancel: () => Promise<void>;
+  /**
+   * The callback function to be called after clicking the "Switch" button
+   */
+  readonly onSwitch: () => Promise<void>;
+};
+
+const SwitchAccount = ({ account, onCancel, onSwitch }: Props) => {
+  const { experienceSettings, theme } = useContext(PageContext);
+  const handleError = useErrorHandler();
+
+  const [consentData, setConsentData] = useState<ConsentInfoResponse>();
+  const asyncGetConsentInfo = useApi(getConsentInfo);
+
+  useEffect(() => {
+    (async () => {
+      const [error, result] = await asyncGetConsentInfo();
+
+      if (error) {
+        await handleError(error);
+        return;
+      }
+      setConsentData(result);
+    })();
+  }, [asyncGetConsentInfo, handleError]);
+
+  if (!account) {
+    return <ErrorPage title="error.unknown" message="error.unknown" />;
+  }
+
+  if (!experienceSettings || !consentData) {
+    return <LoadingLayer />;
+  }
+
+  const {
+    color: { isDarkModeEnabled },
+    branding,
+  } = experienceSettings;
+  const logoUrl = getBrandingLogoUrl({ theme, branding, isDarkModeEnabled });
+
+  return (
+    <StaticPageLayout>
+      <PageMeta titleKey="description.switch_account" />
+      <div className={styles.container}>
+        {logoUrl && <img className={styles.logo} src={logoUrl} alt="app logo" />}
+        <div className={styles.title}>
+          <DynamicT forKey="description.switch_account_title" interpolation={{ account }} />
+        </div>
+        <UserProfile user={consentData.user} className={styles.userProfile} />
+        <div className={styles.message}>
+          <DynamicT forKey="description.switch_account_description" />
+        </div>
+        <Button
+          className={styles.button}
+          type="primary"
+          size="large"
+          title="action.switch_to"
+          i18nProps={{ method: account }}
+          onClick={onSwitch}
+        />
+        <div className={styles.linkButton}>
+          <TextLink text="action.back_to_current_account" onClick={onCancel} />
+        </div>
+      </div>
+    </StaticPageLayout>
+  );
+};
+
+export default SwitchAccount;

packages/phrases-experience/src/locales/ar/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'تسجيل الدخول الموحد',
   authorize: 'التفويض',
   use_another_account: 'استخدام حساب آخر',
+  back_to_current_account: 'الرجوع إلى الحساب الحالي',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/ar/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'تسجيل الدخول',
   privacy_policy: 'سياسة الخصوصية',
   create_account: 'إنشاء حساب',
+  switch_account: 'تبديل الحساب',
   or: 'أو',
   and: 'و',
   enter_passcode: 'تم إرسال رمز التحقق إلى {{address}} {{target}} الخاص بك',
@@ -102,6 +103,9 @@ const description = {
   back_to_sign_in: 'العودة إلى تسجيل الدخول',
   support_email: 'البريد الإلكتروني للدعم: <link></link>',
   support_website: 'موقع الدعم: <link></link>',
+  switch_account_title: 'أنت حاليًا مسجل الدخول كـ {{account}}',
+  switch_account_description:
+    'للمتابعة، سيتم تسجيل الخروج من الحساب الحالي، والتبديل تلقائيًا إلى الحساب الجديد.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/de/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Single Sign-On',
   authorize: 'Autorisieren',
   use_another_account: 'Anderes Konto verwenden',
+  back_to_current_account: 'Zurück zum aktuellen Konto',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/de/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Anmelden',
   privacy_policy: 'Datenschutzrichtlinien',
   create_account: 'Konto erstellen',
+  switch_account: 'Konto wechseln',
   or: 'oder',
   and: 'und',
   enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',
@@ -108,6 +109,9 @@ const description = {
   back_to_sign_in: 'Zurück zur Anmeldung',
   support_email: 'Support-E-Mail: <link></link>',
   support_website: 'Support-Website: <link></link>',
+  switch_account_title: 'Du bist derzeit als {{account}} angemeldet',
+  switch_account_description:
+    'Um fortzufahren, wirst du vom aktuellen Konto abgemeldet und automatisch zum neuen Konto gewechselt.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/en/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Single Sign-On',
   authorize: 'Authorize',
   use_another_account: 'Use another account',
+  back_to_current_account: 'Back to current account',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/en/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Sign in',
   privacy_policy: 'Privacy Policy',
   create_account: 'Create account',
+  switch_account: 'Switch account',
   or: 'or',
   and: 'and',
   enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',
@@ -105,6 +106,9 @@ const description = {
   back_to_sign_in: 'Back to sign in',
   support_email: 'Support email: <link></link>',
   support_website: 'Support website: <link></link>',
+  switch_account_title: 'You are currently signed in as {{account}}',
+  switch_account_description:
+    'To continue, you will be signed out of the current account, and switch to the new account automatically.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/es/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Inicio de sesión único',
   authorize: 'Autorizar',
   use_another_account: 'Usar otra cuenta',
+  back_to_current_account: 'Regresar a la cuenta actual',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/es/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Iniciar sesión',
   privacy_policy: 'Política de privacidad',
   create_account: 'Crear cuenta',
+  switch_account: 'Cambiar cuenta',
   or: 'o',
   and: 'y',
   enter_passcode: 'El código de verificación ha sido enviado a su {{address}} {{target}}',
@@ -108,6 +109,9 @@ const description = {
   back_to_sign_in: 'Volver a iniciar sesión',
   support_email: 'Correo electrónico de soporte: <link></link>',
   support_website: 'Sitio web de soporte: <link></link>',
+  switch_account_title: 'Actualmente has iniciado sesión como {{account}}',
+  switch_account_description:
+    'Para continuar, se cerrará la sesión de la cuenta actual, y se cambiará automáticamente a la nueva cuenta.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/fr/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Connexion unique',
   authorize: 'Autoriser',
   use_another_account: 'Utiliser un autre compte',
+  back_to_current_account: 'Retour au compte actuel',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/fr/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Connexion',
   privacy_policy: 'Politique de confidentialité',
   create_account: 'Créer un compte',
+  switch_account: 'Changer de compte',
   or: 'ou',
   and: 'et',
   enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
@@ -108,6 +109,9 @@ const description = {
   back_to_sign_in: 'Retour à la connexion',
   support_email: 'Email de support: <link></link>',
   support_website: 'Site web de support: <link></link>',
+  switch_account_title: 'Vous êtes actuellement connecté en tant que {{account}}',
+  switch_account_description:
+    'Pour continuer, vous serez déconnecté du compte actuel, et le passage au nouveau compte se fera automatiquement.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/it/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Single Sign-On',
   authorize: 'Autorizza',
   use_another_account: 'Usa un altro account',
+  back_to_current_account: "Torna all'account attuale",
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/it/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Accedi',
   privacy_policy: 'Informativa sulla privacy',
   create_account: 'Crea account',
+  switch_account: 'Cambia account',
   or: 'o',
   and: 'e',
   enter_passcode: 'Il codice di verifica è stato inviato alla tua {{address}} {{target}}',
@@ -106,6 +107,9 @@ const description = {
   back_to_sign_in: 'Torna al login',
   support_email: 'Email di supporto: <link></link>',
   support_website: 'Sito web di supporto: <link></link>',
+  switch_account_title: 'Attualmente sei connesso come {{account}}',
+  switch_account_description:
+    "Per continuare, verrai disconnesso dall'account attuale e passerai automaticamente al nuovo account.",
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/ja/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'シングルサインオン',
   authorize: '認証する',
   use_another_account: '別のアカウントを使用する',
+  back_to_current_account: '現在のアカウントに戻る',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/ja/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'サインイン',
   privacy_policy: 'プライバシーポリシー',
   create_account: 'アカウントを作成する',
+  switch_account: 'アカウントを切り替える',
   or: 'または',
   and: '及び',
   enter_passcode: '確認コードが{{address}} {{target}}に送信されました',
@@ -101,6 +102,9 @@ const description = {
   back_to_sign_in: 'サインインに戻る',
   support_email: 'サポートメール: <link></link>',
   support_website: 'サポートウェブサイト: <link></link>',
+  switch_account_title: '現在 {{account}} としてサインインしています',
+  switch_account_description:
+    '続行するには、現在のアカウントからサインアウトし、新しいアカウントに自動的に切り替わります。',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/ko/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: '단일 로그인',
   authorize: '권한 부여',
   use_another_account: '다른 계정 사용',
+  back_to_current_account: '현재 계정으로 돌아가기',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/ko/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: '로그인',
   privacy_policy: '개인정보처리방침',
   create_account: '계정 생성',
+  switch_account: '계정 전환',
   or: '또는',
   and: '그리고',
   enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',
@@ -96,6 +97,9 @@ const description = {
   back_to_sign_in: '로그인으로 돌아가기',
   support_email: '지원 이메일: <link></link>',
   support_website: '지원 웹사이트: <link></link>',
+  switch_account_title: '현재 {{account}}으로 로그인 중입니다',
+  switch_account_description:
+    '계속 진행하려면 현재 계정에서 로그아웃되고 새 계정으로 자동 전환됩니다.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/pl-pl/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Pojedyncze logowanie',
   authorize: 'Autoryzować',
   use_another_account: 'Użyj innego konta',
+  back_to_current_account: 'Powróć do bieżącego konta',
 };
 
 export default Object.freeze(action);

packages/phrases-experience/src/locales/pl-pl/description.ts

@@ -10,6 +10,7 @@ const description = {
   sign_in: 'Zaloguj się',
   privacy_policy: 'Polityka prywatności',
   create_account: 'Utwórz konto',
+  switch_account: 'Przełącz konto',
   or: 'lub',
   and: 'i',
   enter_passcode: 'Kod weryfikacyjny został wysłany na twoje {{address}} {{target}}',
@@ -106,6 +107,9 @@ const description = {
   back_to_sign_in: 'Wróć do logowania',
   support_email: 'Email wsparcia: <link></link>',
   support_website: 'Strona wsparcia: <link></link>',
+  switch_account_title: 'Jesteś obecnie zalogowany jako {{account}}',
+  switch_account_description:
+    'Aby kontynuować, zostaniesz wylogowany z obecnego konta i automatycznie przełączony na nowe konto.',
 };
 
 export default Object.freeze(description);

packages/phrases-experience/src/locales/pt-br/action.ts

@@ -31,6 +31,7 @@ const action = {
   single_sign_on: 'Single Sign-On',
   authorize: '授权',
   use_another_account: '使用其他帐户',
+  back_to_current_account: 'Voltar para a conta atual',
 };
 
 export default Object.freeze(action);