Skip to content

Commit eb14202

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

34 files changed

+148
-120
lines changed

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

+11-17
Original file line numberDiff line numberDiff line change
@@ -8,16 +8,12 @@
88

99
.title {
1010
margin-top: _.unit(8);
11-
text-align: center;
11+
font: var(--font-label-2);
1212
}
1313

1414
.message {
15-
@include _.text-hint;
16-
text-align: center;
17-
}
18-
19-
.support {
20-
margin-top: _.unit(4);
15+
margin-top: _.unit(6);
16+
font: var(--font-body-2);
2117
}
2218

2319
.logo {
@@ -26,7 +22,15 @@
2622
@include _.image-align-center;
2723
}
2824

25+
.userProfile {
26+
width: 100%;
27+
}
28+
2929
.button {
30+
margin-top: _.unit(2);
31+
}
32+
33+
.linkButton {
3034
margin-top: _.unit(6);
3135
}
3236

@@ -35,21 +39,11 @@
3539
@include _.title;
3640
margin-bottom: _.unit(4);
3741
}
38-
39-
.backButton {
40-
@include _.full-width;
41-
margin-bottom: _.unit(4);
42-
}
4342
}
4443

4544
:global(body.desktop) {
4645
.title {
4746
@include _.title-desktop;
4847
margin-bottom: _.unit(2);
4948
}
50-
51-
.backButton {
52-
@include _.full-width;
53-
margin-bottom: _.unit(12);
54-
}
5549
}

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

+58-23
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,67 @@
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';
8-
import NavBar from '@/components/NavBar';
9+
import LoadingLayer from '@/components/LoadingLayer';
910
import PageMeta from '@/components/PageMeta';
11+
import TextLink from '@/components/TextLink';
12+
import useApi from '@/hooks/use-api';
13+
import useErrorHandler from '@/hooks/use-error-handler';
14+
import UserProfile from '@/pages/Consent/UserProfile';
15+
import ErrorPage from '@/pages/ErrorPage';
1016
import { getBrandingLogoUrl } from '@/utils/logo';
1117

12-
import SupportInfo from '../ErrorPage/SupportInfo';
13-
1418
import styles from './index.module.scss';
1519

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

20-
const SwitchAccount = ({ account }: Props) => {
21-
const navigate = useNavigate();
40+
const SwitchAccount = ({ account, onCancel, onSwitch }: Props) => {
2241
const { experienceSettings, theme } = useContext(PageContext);
23-
const searchParams = new URLSearchParams(window.location.search);
24-
const currentAccountName = searchParams.get('account') ?? account;
42+
const handleError = useErrorHandler();
43+
44+
const [consentData, setConsentData] = useState<ConsentInfoResponse>();
45+
const asyncGetConsentInfo = useApi(getConsentInfo);
46+
47+
useEffect(() => {
48+
(async () => {
49+
const [error, result] = await asyncGetConsentInfo();
2550

26-
if (!experienceSettings) {
27-
return null;
51+
if (error) {
52+
await handleError(error);
53+
return;
54+
}
55+
setConsentData(result);
56+
})();
57+
}, [asyncGetConsentInfo, handleError]);
58+
59+
if (!account) {
60+
return <ErrorPage title="error.unknown" message="error.unknown" />;
61+
}
62+
63+
if (!experienceSettings || !consentData) {
64+
return <LoadingLayer />;
2865
}
2966

3067
const {
@@ -36,28 +73,26 @@ const SwitchAccount = ({ account }: Props) => {
3673
return (
3774
<StaticPageLayout>
3875
<PageMeta titleKey="description.switch_account" />
39-
{history.length > 1 && <NavBar />}
4076
<div className={styles.container}>
4177
{logoUrl && <img className={styles.logo} src={logoUrl} alt="app logo" />}
4278
<div className={styles.title}>
43-
<DynamicT
44-
forKey="description.account_mismatch_title"
45-
interpolation={{ account: currentAccountName }}
46-
/>
79+
<DynamicT forKey="description.switch_account_title" interpolation={{ account }} />
4780
</div>
81+
<UserProfile user={consentData.user} className={styles.userProfile} />
4882
<div className={styles.message}>
49-
<DynamicT forKey="description.account_mismatch_description" />
83+
<DynamicT forKey="description.switch_account_description" />
5084
</div>
51-
<SupportInfo />
5285
<Button
5386
className={styles.button}
5487
type="primary"
5588
size="large"
56-
title="description.switch_account"
57-
onClick={() => {
58-
navigate('/sign-in');
59-
}}
89+
title="action.switch_to"
90+
i18nProps={{ method: account }}
91+
onClick={onSwitch}
6092
/>
93+
<div className={styles.linkButton}>
94+
<TextLink text="action.back_to_current_account" onClick={onCancel} />
95+
</div>
6196
</div>
6297
</StaticPageLayout>
6398
);

‎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);

0 commit comments

Comments
 (0)