Skip to content

Commit 985eb02

Browse files
charIeszhaocharIeszhao
committed
feat(experience): add switch account page
1 parent bf7cf5b commit 985eb02

33 files changed

+275
-15
lines changed

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

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@use '@/scss/underscore' as _;
2+
3+
.container {
4+
flex: 1;
5+
@include _.flex-column;
6+
@include _.full-width;
7+
}
8+
9+
.title {
10+
margin-top: _.unit(8);
11+
text-align: center;
12+
}
13+
14+
.message {
15+
@include _.text-hint;
16+
text-align: center;
17+
}
18+
19+
.support {
20+
margin-top: _.unit(4);
21+
}
22+
23+
.logo {
24+
height: 40px;
25+
width: auto;
26+
@include _.image-align-center;
27+
}
28+
29+
.button {
30+
margin-top: _.unit(6);
31+
}
32+
33+
:global(body.mobile) {
34+
.title {
35+
@include _.title;
36+
margin-bottom: _.unit(4);
37+
}
38+
39+
.backButton {
40+
@include _.full-width;
41+
margin-bottom: _.unit(4);
42+
}
43+
}
44+
45+
:global(body.desktop) {
46+
.title {
47+
@include _.title-desktop;
48+
margin-bottom: _.unit(2);
49+
}
50+
51+
.backButton {
52+
@include _.full-width;
53+
margin-bottom: _.unit(12);
54+
}
55+
}

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

+66
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
import { useContext } from 'react';
2+
import { useNavigate } from 'react-router-dom';
3+
4+
import StaticPageLayout from '@/Layout/StaticPageLayout';
5+
import PageContext from '@/Providers/PageContextProvider/PageContext';
6+
import Button from '@/components/Button';
7+
import DynamicT from '@/components/DynamicT';
8+
import NavBar from '@/components/NavBar';
9+
import PageMeta from '@/components/PageMeta';
10+
import { getBrandingLogoUrl } from '@/utils/logo';
11+
12+
import SupportInfo from '../ErrorPage/SupportInfo';
13+
14+
import styles from './index.module.scss';
15+
16+
type Props = {
17+
readonly account?: string;
18+
};
19+
20+
const SwitchAccount = ({ account }: Props) => {
21+
const navigate = useNavigate();
22+
const { experienceSettings, theme } = useContext(PageContext);
23+
const searchParams = new URLSearchParams(window.location.search);
24+
const currentAccountName = searchParams.get('account') ?? account;
25+
26+
if (!experienceSettings) {
27+
return null;
28+
}
29+
30+
const {
31+
color: { isDarkModeEnabled },
32+
branding,
33+
} = experienceSettings;
34+
const logoUrl = getBrandingLogoUrl({ theme, branding, isDarkModeEnabled });
35+
36+
return (
37+
<StaticPageLayout>
38+
<PageMeta titleKey="description.switch_account" />
39+
{history.length > 1 && <NavBar />}
40+
<div className={styles.container}>
41+
{logoUrl && <img className={styles.logo} src={logoUrl} alt="app logo" />}
42+
<div className={styles.title}>
43+
<DynamicT
44+
forKey="description.account_mismatch_title"
45+
interpolation={{ account: currentAccountName }}
46+
/>
47+
</div>
48+
<div className={styles.message}>
49+
<DynamicT forKey="description.account_mismatch_description" />
50+
</div>
51+
<SupportInfo />
52+
<Button
53+
className={styles.button}
54+
type="primary"
55+
size="large"
56+
title="description.switch_account"
57+
onClick={() => {
58+
navigate('/sign-in');
59+
}}
60+
/>
61+
</div>
62+
</StaticPageLayout>
63+
);
64+
};
65+
66+
export default SwitchAccount;

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'تسجيل الدخول',
1111
privacy_policy: 'سياسة الخصوصية',
1212
create_account: 'إنشاء حساب',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'أو',
1416
and: 'و',
1517
enter_passcode: 'تم إرسال رمز التحقق إلى {{address}} {{target}} الخاص بك',
@@ -99,6 +101,11 @@ const description = {
99101
support_email: 'Support email: <link></link>',
100102
/** UNTRANSLATED */
101103
support_website: 'Support website: <link></link>',
104+
/** UNTRANSLATED */
105+
account_mismatch_title: 'You are currently signed in as {{account}}',
106+
/** UNTRANSLATED */
107+
account_mismatch_description:
108+
'Please switch to the account that associated with this magic link, and try again.',
102109
};
103110

104111
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const ar = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(ar);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Anmelden',
1111
privacy_policy: 'Datenschutzrichtlinien',
1212
create_account: 'Konto erstellen',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'oder',
1416
and: 'und',
1517
enter_passcode: 'Der Bestätigungscode wurde an deine {{address}} gesendet',
@@ -111,6 +113,11 @@ const description = {
111113
back_to_sign_in: 'Zurück zur Anmeldung',
112114
support_email: 'Support-E-Mail: <link></link>',
113115
support_website: 'Support-Website: <link></link>',
116+
/** UNTRANSLATED */
117+
account_mismatch_title: 'You are currently signed in as {{account}}',
118+
/** UNTRANSLATED */
119+
account_mismatch_description:
120+
'Please switch to the account that associated with this magic link, and try again.',
114121
};
115122

116123
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const de = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(de);

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

+4
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ const description = {
1010
sign_in: 'Sign in',
1111
privacy_policy: 'Privacy Policy',
1212
create_account: 'Create account',
13+
switch_account: 'Switch account',
1314
or: 'or',
1415
and: 'and',
1516
enter_passcode: 'The verification code has been sent to your {{address}} {{target}}',
@@ -96,6 +97,9 @@ const description = {
9697
back_to_sign_in: 'Back to sign in',
9798
support_email: 'Support email: <link></link>',
9899
support_website: 'Support website: <link></link>',
100+
account_mismatch_title: 'You are currently signed in as {{account}}',
101+
account_mismatch_description:
102+
'Please switch to the account that associated with this magic link, and try again.',
99103
};
100104

101105
export default Object.freeze(description);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ 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',
1315
or: 'o',
1416
and: 'y',
1517
enter_passcode: 'El código de verificación ha sido enviado a su {{address}} {{target}}',
@@ -111,6 +113,11 @@ const description = {
111113
back_to_sign_in: 'Volver a iniciar sesión',
112114
support_email: 'Correo electrónico de soporte: <link></link>',
113115
support_website: 'Sitio web de soporte: <link></link>',
116+
/** UNTRANSLATED */
117+
account_mismatch_title: 'You are currently signed in as {{account}}',
118+
/** UNTRANSLATED */
119+
account_mismatch_description:
120+
'Please switch to the account that associated with this magic link, and try again.',
114121
};
115122

116123
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const es = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(es);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ 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',
1315
or: 'ou',
1416
and: 'et',
1517
enter_passcode: 'Le code a été envoyé à {{address}} {{target}}',
@@ -111,6 +113,11 @@ const description = {
111113
back_to_sign_in: 'Retour à la connexion',
112114
support_email: 'Email de support: <link></link>',
113115
support_website: 'Site web de support: <link></link>',
116+
/** UNTRANSLATED */
117+
account_mismatch_title: 'You are currently signed in as {{account}}',
118+
/** UNTRANSLATED */
119+
account_mismatch_description:
120+
'Please switch to the account that associated with this magic link, and try again.',
114121
};
115122

116123
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const fr = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(fr);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'Accedi',
1111
privacy_policy: 'Informativa sulla privacy',
1212
create_account: 'Crea account',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'o',
1416
and: 'e',
1517
enter_passcode: 'Il codice di verifica è stato inviato alla tua {{address}} {{target}}',
@@ -108,6 +110,11 @@ const description = {
108110
back_to_sign_in: 'Torna al login',
109111
support_email: 'Email di supporto: <link></link>',
110112
support_website: 'Sito web di supporto: <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.',
111118
};
112119

113120
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const it = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(it);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: 'サインイン',
1111
privacy_policy: 'プライバシーポリシー',
1212
create_account: 'アカウントを作成する',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: 'または',
1416
and: '及び',
1517
enter_passcode: '確認コードが{{address}} {{target}}に送信されました',
@@ -107,6 +109,11 @@ const description = {
107109
back_to_sign_in: 'サインインに戻る',
108110
support_email: 'サポートメール: <link></link>',
109111
support_website: 'サポートウェブサイト: <link></link>',
112+
/** UNTRANSLATED */
113+
account_mismatch_title: 'You are currently signed in as {{account}}',
114+
/** UNTRANSLATED */
115+
account_mismatch_description:
116+
'Please switch to the account that associated with this magic link, and try again.',
110117
};
111118

112119
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const ja = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(ja);

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

+7
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ const description = {
1010
sign_in: '로그인',
1111
privacy_policy: '개인정보처리방침',
1212
create_account: '계정 생성',
13+
/** UNTRANSLATED */
14+
switch_account: 'Switch account',
1315
or: '또는',
1416
and: '그리고',
1517
enter_passcode: '{{address}} {{target}} 으로 비밀번호가 전송되었어요.',
@@ -102,6 +104,11 @@ const description = {
102104
back_to_sign_in: '로그인으로 돌아가기',
103105
support_email: '지원 이메일: <link></link>',
104106
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.',
105112
};
106113

107114
export default Object.freeze(description);

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

+3-1
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import { type DeepPartial } from '@silverhand/essentials';
2+
13
import type { LocalePhrase } from '../../types.js';
24

35
import action from './action.js';
@@ -22,6 +24,6 @@ const ko = {
2224
development_tenant,
2325
user_scopes,
2426
},
25-
} satisfies LocalePhrase;
27+
} satisfies DeepPartial<LocalePhrase>;
2628

2729
export default Object.freeze(ko);

0 commit comments

Comments
 (0)