Skip to content

Commit 3548d1e

Browse files
wangsijiewangsijie
authored
feat(account-center): share components from experience (#7982)
feat(account-center): share compoenents from experience
1 parent fd11535 commit 3548d1e

File tree

195 files changed

+624
-814
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

195 files changed

+624
-814
lines changed

‎packages/account-center/index.html‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,20 @@
99
<body>
1010
<noscript>You need to enable JavaScript to run this app.</noscript>
1111
<div id="app"></div>
12+
<script type="module">
13+
// Dev-only react-refresh preamble. We load the Vite-provided runtime dynamically so
14+
// production builds do not try to resolve /@react-refresh (which breaks rollup) while
15+
// still enabling HMR in development to avoid the “preamble not detected” error.
16+
if (import.meta.env.DEV) {
17+
const base = (import.meta.env.BASE_URL ?? '/').replace(/\/?$/, '/');
18+
const RefreshRuntimeModule = await import(`${base}@react-refresh`);
19+
const RefreshRuntime = RefreshRuntimeModule.default ?? RefreshRuntimeModule;
20+
RefreshRuntime.injectIntoGlobalHook(window);
21+
window.$RefreshReg$ = () => {};
22+
window.$RefreshSig$ = () => (type) => type;
23+
window.__vite_plugin_react_preamble_installed__ = true;
24+
}
25+
</script>
1226
<script type="module" src="src/index.tsx"></script>
1327
</body>
1428

‎packages/account-center/package.json‎

Lines changed: 14 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,29 +21,39 @@
2121
},
2222
"devDependencies": {
2323
"@logto/core-kit": "workspace:^",
24+
"@logto/experience": "workspace:^",
2425
"@logto/language-kit": "workspace:^",
25-
"@logto/phrases-account-center": "workspace:^",
26+
"@logto/phrases-experience": "workspace:^",
2627
"@logto/react": "^4.0.6",
2728
"@logto/schemas": "workspace:^",
28-
"@silverhand/essentials": "^2.9.1",
2929
"@silverhand/eslint-config": "6.0.1",
3030
"@silverhand/eslint-config-react": "6.0.2",
31+
"@silverhand/essentials": "^2.9.1",
3132
"@silverhand/ts-config": "6.0.0",
3233
"@silverhand/ts-config-react": "6.0.0",
34+
"@types/color": "^4.2.0",
3335
"@types/react": "^18.3.3",
3436
"@types/react-dom": "^18.3.0",
37+
"@types/react-helmet": "^6.1.6",
38+
"@types/react-modal": "^3.13.1",
3539
"@vitejs/plugin-react": "^4.3.1",
40+
"classnames": "^2.3.1",
41+
"color": "^4.2.3",
3642
"eslint": "^8.56.0",
3743
"i18next": "^22.4.15",
3844
"i18next-browser-languagedetector": "^8.0.0",
3945
"ky": "^1.2.3",
4046
"lint-staged": "^15.0.0",
4147
"prettier": "^3.5.3",
4248
"react": "^18.3.1",
43-
"stylelint": "^15.0.0",
44-
"react-i18next": "^12.3.1",
4549
"react-dom": "^18.3.1",
50+
"react-helmet": "^6.1.0",
51+
"react-i18next": "^12.3.1",
52+
"react-modal": "^3.15.1",
53+
"react-top-loading-bar": "^2.3.1",
54+
"stylelint": "^15.0.0",
4655
"typescript": "^5.5.3",
56+
"use-debounced-loader": "^0.1.1",
4757
"vite": "^6.3.6",
4858
"vite-plugin-compression": "^0.5.1"
4959
},

‎packages/account-center/src/App.module.scss‎

Lines changed: 50 additions & 174 deletions
Original file line numberDiff line numberDiff line change
@@ -1,191 +1,67 @@
1-
@use '@/scss/underscore' as _;
2-
@use '@logto/core-kit/scss/fonts';
3-
@use '@logto/core-kit/scss/console-themes' as themes;
1+
@use '@experience/shared/scss/_underscore.scss' as _;
42

53
.app {
6-
input {
7-
background-color: var(--color-layer-1);
8-
font: var(--font-body-2);
9-
color: var(--color-text);
10-
padding: 0 _.unit(3);
11-
height: 36px;
12-
border: 1px solid var(--color-border);
13-
outline: 3px solid transparent;
14-
border-radius: 6px;
4+
.layout {
5+
position: absolute;
6+
inset: 0;
7+
overflow: auto;
158
}
9+
}
1610

17-
.button {
18-
display: inline-block;
19-
user-select: none;
20-
border: 1px solid var(--color-border);
21-
background-color: var(--color-layer-1);
22-
border-radius: 8px;
23-
padding: _.unit(3) _.unit(6);
24-
font: var(--font-label-2);
25-
color: var(--color-text);
26-
transition: background ease-in-out 0.2s;
11+
.container {
12+
min-height: 100%;
13+
@include _.flex_column(center, center);
14+
}
2715

28-
&:hover {
29-
cursor: pointer;
30-
background: var(--color-hover);
31-
}
16+
.main {
17+
@include _.flex_column;
18+
}
3219

33-
&:focus {
34-
outline: 3px solid var(--color-focused-variant);
35-
}
20+
:global(body.mobile) {
21+
.container {
22+
padding-bottom: env(safe-area-inset-bottom);
3623
}
3724

38-
.card {
39-
background: var(--color-layer-1);
40-
border-radius: 16px;
41-
display: flex;
42-
flex-direction: column;
43-
font-size: 14px;
44-
line-height: 20px;
45-
46-
.title {
47-
color: var(--color-neutral-10);
48-
font: var(--font-title-2);
49-
}
50-
51-
.text {
52-
font: var(--font-body-2);
53-
color: var(--color-text-secondary);
54-
}
55-
56-
&.congrats {
57-
position: absolute;
58-
left: 50%;
59-
top: 50%;
60-
align-items: center;
61-
text-align: center;
62-
width: 640px;
63-
height: 640px;
64-
transform: translate(-50%, -50%);
65-
66-
.title {
67-
margin-top: _.unit(6);
68-
}
69-
70-
.text {
71-
margin-top: _.unit(1);
72-
}
73-
74-
.button {
75-
margin-top: _.unit(8);
76-
}
77-
}
78-
79-
&.devPanel {
80-
max-width: 800px;
81-
width: 25vw;
82-
position: fixed;
83-
inset-inline-start: _.unit(2);
84-
top: _.unit(2);
85-
padding: _.unit(4);
86-
gap: _.unit(3);
87-
88-
.item {
89-
margin: _.unit(2) 0;
90-
display: flex;
91-
flex-direction: column;
92-
gap: _.unit(1);
93-
}
94-
95-
.button {
96-
align-self: flex-end;
97-
}
98-
99-
.action {
100-
display: flex;
101-
justify-content: space-between;
102-
align-items: center;
103-
}
104-
}
105-
106-
img {
107-
margin-top: _.unit(25);
108-
width: 120px;
109-
height: 120px;
110-
}
111-
112-
.infoCard {
113-
margin-top: _.unit(4);
114-
padding: _.unit(4);
115-
font: var(--font-body-2);
116-
color: var(--color-text);
117-
background: var(--color-layer-2);
118-
border-radius: 8px;
119-
width: 400px;
120-
121-
div {
122-
overflow: hidden;
123-
text-overflow: ellipsis;
124-
white-space: nowrap;
125-
}
126-
127-
span {
128-
font: var(--font-label-2);
129-
}
130-
131-
div + div {
132-
margin-top: _.unit(2.5);
133-
}
134-
}
135-
136-
.continue {
137-
margin-top: _.unit(12);
138-
display: flex;
139-
align-items: center;
140-
column-gap: _.unit(4);
141-
color: var(--color-text-secondary);
142-
143-
.hr {
144-
width: 110px;
145-
border-top: 1px solid var(--color-divider);
146-
}
147-
}
148-
149-
.actions {
150-
display: flex;
151-
align-items: center;
152-
margin-top: _.unit(5);
153-
154-
span {
155-
opacity: 60%;
156-
height: 12px;
157-
width: 1px;
158-
background: var(--color-primary);
159-
margin: 0 _.unit(4);
160-
border-radius: 1px;
161-
}
162-
163-
a {
164-
color: var(--color-primary);
165-
text-decoration: none;
166-
padding: _.unit(0.5) _.unit(1);
25+
.main {
26+
flex: 1;
27+
align-self: stretch;
28+
padding: _.unit(4) _.unit(5);
29+
position: relative;
30+
background: var(--color-bg-body);
31+
}
16732

168-
&:hover {
169-
text-decoration: underline;
170-
}
171-
}
172-
}
33+
.signature {
34+
margin: _.unit(10) 0 _.unit(2);
17335
}
17436
}
17537

176-
.error {
177-
color: var(--color-neutral-10);
178-
margin: _.unit(3);
179-
}
38+
:global(body.desktop) {
39+
.container {
40+
padding: _.unit(5);
41+
}
18042

181-
@media (prefers-color-scheme: light) {
182-
body {
183-
@include themes.light;
43+
.main {
44+
width: 540px;
45+
min-height: 540px;
46+
position: relative;
47+
padding: _.unit(6);
48+
border-radius: 16px;
49+
background: var(--color-bg-float);
50+
box-shadow: var(--color-shadow-2);
18451
}
185-
}
18652

187-
@media (prefers-color-scheme: dark) {
188-
body {
189-
@include themes.dark;
53+
.signature {
54+
position: absolute;
55+
bottom: 0;
56+
transform: translateY(calc(100% + _.unit(7)));
57+
// Have to use padding instead of margin. Overflow margin spacing will be ignored by the browser.
58+
padding-bottom: _.unit(7);
59+
}
60+
61+
@media only screen and (max-width: 580px) {
62+
.main {
63+
align-self: stretch;
64+
width: auto;
65+
}
19066
}
19167
}

‎packages/account-center/src/App.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,16 @@ import { type IdTokenClaims, LogtoProvider, useLogto } from '@logto/react';
22
import { accountCenterApplicationId } from '@logto/schemas';
33
import { useContext, useEffect, useState } from 'react';
44

5+
import AppBoundary from '@ac/Providers/AppBoundary';
6+
57
import styles from './App.module.scss';
68
import Callback from './Callback';
79
import PageContextProvider from './Providers/PageContextProvider';
810
import PageContext from './Providers/PageContextProvider/PageContext';
911
import BrandingHeader from './components/BrandingHeader';
1012
import initI18n from './i18n/init';
1113

12-
import '@/scss/normalized.scss';
14+
import '@experience/shared/scss/normalized.scss';
1315

1416
void initI18n();
1517

@@ -18,7 +20,7 @@ const redirectUri = `${window.location.origin}/account-center`;
1820
const Main = () => {
1921
const params = new URLSearchParams(window.location.search);
2022
const isInCallback = Boolean(params.get('code'));
21-
const { isAuthenticated, isLoading, getIdTokenClaims, signIn, signOut } = useLogto();
23+
const { isAuthenticated, isLoading, getIdTokenClaims, signIn } = useLogto();
2224
const [user, setUser] = useState<Pick<IdTokenClaims, 'sub' | 'username'>>();
2325
const [isLoadingUser, setIsLoadingUser] = useState(false);
2426
const { isLoadingExperience, experienceError } = useContext(PageContext);
@@ -88,18 +90,8 @@ const Main = () => {
8890

8991
return (
9092
<div>
91-
<p>
92-
Signed in as <strong>{user?.username ?? user?.sub ?? 'your account'}</strong>.
93-
</p>
9493
<div>
95-
<button
96-
type="button"
97-
onClick={() => {
98-
void signOut(redirectUri);
99-
}}
100-
>
101-
Sign out
102-
</button>
94+
Signed in as <strong>{user?.username ?? user?.sub ?? 'your account'}</strong>.
10395
</div>
10496
</div>
10597
);
@@ -113,10 +105,18 @@ const App = () => (
113105
}}
114106
>
115107
<PageContextProvider>
116-
<div className={styles.app}>
117-
<BrandingHeader />
118-
<Main />
119-
</div>
108+
<AppBoundary>
109+
<div className={styles.app}>
110+
<BrandingHeader />
111+
<div className={styles.layout}>
112+
<div className={styles.container}>
113+
<main className={styles.main}>
114+
<Main />
115+
</main>
116+
</div>
117+
</div>
118+
</div>
119+
</AppBoundary>
120120
</PageContextProvider>
121121
</LogtoProvider>
122122
);

0 commit comments

Comments
 (0)