Skip to content

Commit f4ae114

Browse files
charIeszhaocharIeszhao
committed
refactor(experience): update account switch page
1 parent dbee0a4 commit f4ae114

34 files changed

+141
-109
lines changed

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

+5-14
Original file line numberDiff line numberDiff line change
@@ -14,10 +14,7 @@
1414
.message {
1515
@include _.text-hint;
1616
text-align: center;
17-
}
18-
19-
.support {
20-
margin-top: _.unit(4);
17+
margin-top: _.unit(6);
2118
}
2219

2320
.logo {
@@ -27,6 +24,10 @@
2724
}
2825

2926
.button {
27+
margin-top: _.unit(2);
28+
}
29+
30+
.linkButton {
3031
margin-top: _.unit(6);
3132
}
3233

@@ -35,21 +36,11 @@
3536
@include _.title;
3637
margin-bottom: _.unit(4);
3738
}
38-
39-
.backButton {
40-
@include _.full-width;
41-
margin-bottom: _.unit(4);
42-
}
4339
}
4440

4541
:global(body.desktop) {
4642
.title {
4743
@include _.title-desktop;
4844
margin-bottom: _.unit(2);
4945
}
50-
51-
.backButton {
52-
@include _.full-width;
53-
margin-bottom: _.unit(12);
54-
}
5546
}

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

+57-15
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,70 @@
1-
import { useContext } from 'react';
2-
import { useNavigate } from 'react-router-dom';
1+
import { type ConsentInfoResponse } from '@logto/schemas';
2+
import { useContext, useEffect, useState } from 'react';
33

44
import StaticPageLayout from '@/Layout/StaticPageLayout';
55
import PageContext from '@/Providers/PageContextProvider/PageContext';
6+
import { getConsentInfo } from '@/apis/consent';
67
import Button from '@/components/Button';
78
import DynamicT from '@/components/DynamicT';
9+
import LoadingLayer from '@/components/LoadingLayer';
810
import NavBar from '@/components/NavBar';
911
import PageMeta from '@/components/PageMeta';
12+
import TextLink from '@/components/TextLink';
13+
import useApi from '@/hooks/use-api';
14+
import useErrorHandler from '@/hooks/use-error-handler';
15+
import UserProfile from '@/pages/Consent/UserProfile';
16+
import ErrorPage from '@/pages/ErrorPage';
1017
import { getBrandingLogoUrl } from '@/utils/logo';
1118

12-
import SupportInfo from '../ErrorPage/SupportInfo';
13-
1419
import styles from './index.module.scss';
1520

21+
/**
22+
* This component is only used when there's an active session, and then the user
23+
* is trying to sign-in with another account (e.g., using a magic link).
24+
*/
25+
1626
type Props = {
27+
/**
28+
* The account name of the current active session
29+
*/
1730
readonly account?: string;
31+
/**
32+
* The callback function to be called after clicking the "Go back" link
33+
*/
34+
readonly onCancel: () => Promise<void>;
35+
/**
36+
* The callback function to be called after clicking the "Switch" button
37+
*/
38+
readonly onSwitch: () => Promise<void>;
1839
};
1940

20-
const SwitchAccount = ({ account }: Props) => {
21-
const navigate = useNavigate();
41+
const SwitchAccount = ({ account, onCancel, onSwitch }: Props) => {
2242
const { experienceSettings, theme } = useContext(PageContext);
2343
const searchParams = new URLSearchParams(window.location.search);
2444
const currentAccountName = searchParams.get('account') ?? account;
45+
const handleError = useErrorHandler();
46+
47+
const [consentData, setConsentData] = useState<ConsentInfoResponse>();
48+
const asyncGetConsentInfo = useApi(getConsentInfo);
49+
50+
useEffect(() => {
51+
(async () => {
52+
const [error, result] = await asyncGetConsentInfo();
2553

26-
if (!experienceSettings) {
27-
return null;
54+
if (error) {
55+
await handleError(error);
56+
return;
57+
}
58+
setConsentData(result);
59+
})();
60+
}, [asyncGetConsentInfo, handleError]);
61+
62+
if (!currentAccountName) {
63+
return <ErrorPage title="error.unknown" message="error.unknown" />;
64+
}
65+
66+
if (!experienceSettings || !consentData) {
67+
return <LoadingLayer />;
2868
}
2969

3070
const {
@@ -41,23 +81,25 @@ const SwitchAccount = ({ account }: Props) => {
4181
{logoUrl && <img className={styles.logo} src={logoUrl} alt="app logo" />}
4282
<div className={styles.title}>
4383
<DynamicT
44-
forKey="description.account_mismatch_title"
84+
forKey="description.switch_account_title"
4585
interpolation={{ account: currentAccountName }}
4686
/>
4787
</div>
88+
<UserProfile user={consentData.user} />
4889
<div className={styles.message}>
49-
<DynamicT forKey="description.account_mismatch_description" />
90+
<DynamicT forKey="description.switch_account_description" />
5091
</div>
51-
<SupportInfo />
5292
<Button
5393
className={styles.button}
5494
type="primary"
5595
size="large"
56-
title="description.switch_account"
57-
onClick={() => {
58-
navigate('/sign-in');
59-
}}
96+
title="action.switch_to"
97+
i18nProps={{ method: currentAccountName }}
98+
onClick={onSwitch}
6099
/>
100+
<div className={styles.linkButton}>
101+
<TextLink text="action.back_to_current_account" onClick={onCancel} />
102+
</div>
61103
</div>
62104
</StaticPageLayout>
63105
);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'تسجيل الدخول الموحد',
3232
authorize: 'التفويض',
3333
use_another_account: 'استخدام حساب آخر',
34+
back_to_current_account: 'الرجوع إلى الحساب الحالي',
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'تسجيل الدخول',
1111
privacy_policy: 'سياسة الخصوصية',
1212
create_account: 'إنشاء حساب',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'تبديل الحساب',
1514
or: 'أو',
1615
and: 'و',
1716
enter_passcode: 'تم إرسال رمز التحقق إلى {{address}} {{target}} الخاص بك',
@@ -104,11 +103,9 @@ const description = {
104103
back_to_sign_in: 'العودة إلى تسجيل الدخول',
105104
support_email: 'البريد الإلكتروني للدعم: <link></link>',
106105
support_website: 'موقع الدعم: <link></link>',
107-
/** UNTRANSLATED */
108-
account_mismatch_title: 'You are currently signed in as {{account}}',
109-
/** UNTRANSLATED */
110-
account_mismatch_description:
111-
'Please switch to the account that associated with this magic link, and try again.',
106+
switch_account_title: 'أنت حاليًا مسجل الدخول كـ {{account}}',
107+
switch_account_description:
108+
'للمتابعة، سيتم تسجيل الخروج من الحساب الحالي، والتبديل تلقائيًا إلى الحساب الجديد.',
112109
};
113110

114111
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'Single Sign-On',
3232
authorize: 'Autorisieren',
3333
use_another_account: 'Anderes Konto verwenden',
34+
back_to_current_account: 'Zurück zum aktuellen Konto',
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'Anmelden',
1111
privacy_policy: 'Datenschutzrichtlinien',
1212
create_account: 'Konto erstellen',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'Konto wechseln',
1514
or: 'oder',
1615
and: 'und',
1716
enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',
@@ -110,11 +109,9 @@ const description = {
110109
back_to_sign_in: 'Zurück zur Anmeldung',
111110
support_email: 'Support-E-Mail: <link></link>',
112111
support_website: 'Support-Website: <link></link>',
113-
/** UNTRANSLATED */
114-
account_mismatch_title: 'You are currently signed in as {{account}}',
115-
/** UNTRANSLATED */
116-
account_mismatch_description:
117-
'Please switch to the account that associated with this magic link, and try again.',
112+
switch_account_title: 'Du bist derzeit als {{account}} angemeldet',
113+
switch_account_description:
114+
'Um fortzufahren, wirst du vom aktuellen Konto abgemeldet und automatisch zum neuen Konto gewechselt.',
118115
};
119116

120117
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'Single Sign-On',
3232
authorize: 'Authorize',
3333
use_another_account: 'Use another account',
34+
back_to_current_account: 'Back to current account',
3435
};
3536

3637
export default Object.freeze(action);

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -106,9 +106,9 @@ const description = {
106106
back_to_sign_in: 'Back to sign in',
107107
support_email: 'Support email: <link></link>',
108108
support_website: 'Support website: <link></link>',
109-
account_mismatch_title: 'You are currently signed in as {{account}}',
110-
account_mismatch_description:
111-
'Please switch to the account that associated with this magic link, and try again.',
109+
switch_account_title: 'You are currently signed in as {{account}}',
110+
switch_account_description:
111+
'To continue, you will be signed out of the current account, and switch to the new account automatically.',
112112
};
113113

114114
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'Inicio de sesión único',
3232
authorize: 'Autorizar',
3333
use_another_account: 'Usar otra cuenta',
34+
back_to_current_account: 'Regresar a la cuenta actual',
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'Iniciar sesión',
1111
privacy_policy: 'Política de privacidad',
1212
create_account: 'Crear cuenta',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'Cambiar cuenta',
1514
or: 'o',
1615
and: 'y',
1716
enter_passcode: 'El código de verificación ha sido enviado a su {{address}} {{target}}',
@@ -110,11 +109,9 @@ const description = {
110109
back_to_sign_in: 'Volver a iniciar sesión',
111110
support_email: 'Correo electrónico de soporte: <link></link>',
112111
support_website: 'Sitio web de soporte: <link></link>',
113-
/** UNTRANSLATED */
114-
account_mismatch_title: 'You are currently signed in as {{account}}',
115-
/** UNTRANSLATED */
116-
account_mismatch_description:
117-
'Please switch to the account that associated with this magic link, and try again.',
112+
switch_account_title: 'Actualmente has iniciado sesión como {{account}}',
113+
switch_account_description:
114+
'Para continuar, se cerrará la sesión de la cuenta actual, y se cambiará automáticamente a la nueva cuenta.',
118115
};
119116

120117
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'Connexion unique',
3232
authorize: 'Autoriser',
3333
use_another_account: 'Utiliser un autre compte',
34+
back_to_current_account: 'Retour au compte actuel',
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'Connexion',
1111
privacy_policy: 'Politique de confidentialité',
1212
create_account: 'Créer un compte',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'Changer de compte',
1514
or: 'ou',
1615
and: 'et',
1716
enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
@@ -110,11 +109,9 @@ const description = {
110109
back_to_sign_in: 'Retour à la connexion',
111110
support_email: 'Email de support: <link></link>',
112111
support_website: 'Site web de support: <link></link>',
113-
/** UNTRANSLATED */
114-
account_mismatch_title: 'You are currently signed in as {{account}}',
115-
/** UNTRANSLATED */
116-
account_mismatch_description:
117-
'Please switch to the account that associated with this magic link, and try again.',
112+
switch_account_title: 'Vous êtes actuellement connecté en tant que {{account}}',
113+
switch_account_description:
114+
'Pour continuer, vous serez déconnecté du compte actuel, et le passage au nouveau compte se fera automatiquement.',
118115
};
119116

120117
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'Single Sign-On',
3232
authorize: 'Autorizza',
3333
use_another_account: 'Usa un altro account',
34+
back_to_current_account: "Torna all'account attuale",
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'Accedi',
1111
privacy_policy: 'Informativa sulla privacy',
1212
create_account: 'Crea account',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'Cambia account',
1514
or: 'o',
1615
and: 'e',
1716
enter_passcode: 'Il codice di verifica è stato inviato alla tua {{address}} {{target}}',
@@ -108,11 +107,9 @@ const description = {
108107
back_to_sign_in: 'Torna al login',
109108
support_email: 'Email di supporto: <link></link>',
110109
support_website: 'Sito web di supporto: <link></link>',
111-
/** UNTRANSLATED */
112-
account_mismatch_title: 'You are currently signed in as {{account}}',
113-
/** UNTRANSLATED */
114-
account_mismatch_description:
115-
'Please switch to the account that associated with this magic link, and try again.',
110+
switch_account_title: 'Attualmente sei connesso come {{account}}',
111+
switch_account_description:
112+
"Per continuare, verrai disconnesso dall'account attuale e passerai automaticamente al nuovo account.",
116113
};
117114

118115
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: 'シングルサインオン',
3232
authorize: '認証する',
3333
use_another_account: '別のアカウントを使用する',
34+
back_to_current_account: '現在のアカウントに戻る',
3435
};
3536

3637
export default Object.freeze(action);

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

+4-7
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,7 @@ const description = {
1010
sign_in: 'サインイン',
1111
privacy_policy: 'プライバシーポリシー',
1212
create_account: 'アカウントを作成する',
13-
/** UNTRANSLATED */
14-
switch_account: 'Switch account',
13+
switch_account: 'アカウントを切り替える',
1514
or: 'または',
1615
and: '及び',
1716
enter_passcode: '確認コードが{{address}} {{target}}に送信されました',
@@ -103,11 +102,9 @@ const description = {
103102
back_to_sign_in: 'サインインに戻る',
104103
support_email: 'サポートメール: <link></link>',
105104
support_website: 'サポートウェブサイト: <link></link>',
106-
/** UNTRANSLATED */
107-
account_mismatch_title: 'You are currently signed in as {{account}}',
108-
/** UNTRANSLATED */
109-
account_mismatch_description:
110-
'Please switch to the account that associated with this magic link, and try again.',
105+
switch_account_title: '現在 {{account}} としてサインインしています',
106+
switch_account_description:
107+
'続行するには、現在のアカウントからサインアウトし、新しいアカウントに自動的に切り替わります。',
111108
};
112109

113110
export default Object.freeze(description);

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

+1
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,7 @@ const action = {
3131
single_sign_on: '단일 로그인',
3232
authorize: '권한 부여',
3333
use_another_account: '다른 계정 사용',
34+
back_to_current_account: '현재 계정으로 돌아가기',
3435
};
3536

3637
export default Object.freeze(action);

0 commit comments

Comments
 (0)