@dashadmin/dash-app-common 1.3.51 → 1.3.52
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/defaults/extensions/router/dashDefaultSharedRoutes.js +7 -5
- package/dist/defaults/pages/Account/DashDefaultSignUp.js +29 -7
- package/dist/defaults/pages/Account/DashDefaultSignUpSuccess.js +9 -3
- package/dist/defaults/pages/DashDefaultLogin.js +15 -13
- package/dist/defaults/pages/Misc/DashDefaultNotFound.js +3 -1
- package/dist/defaults/pages/Misc/DashDefaultServerError.js +3 -1
- package/dist/defaults/pages/Misc/DashDefaultUnauthorized.js +3 -1
- package/package.json +1 -1
- package/src/defaults/extensions/router/dashDefaultSharedRoutes.tsx +7 -6
- package/src/defaults/pages/Account/DashDefaultSignUp.tsx +15 -3
- package/src/defaults/pages/Account/DashDefaultSignUpSuccess.tsx +9 -3
- package/src/defaults/pages/DashDefaultLogin.tsx +22 -20
- package/src/defaults/pages/Misc/DashDefaultNotFound.tsx +3 -1
- package/src/defaults/pages/Misc/DashDefaultServerError.tsx +3 -1
- package/src/defaults/pages/Misc/DashDefaultUnauthorized.tsx +3 -1
|
@@ -5,11 +5,13 @@ import { Box } from "@mui/material";
|
|
|
5
5
|
const DashDefaultRouteLoader = () => /* @__PURE__ */ jsx(
|
|
6
6
|
Box,
|
|
7
7
|
{
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
8
|
+
sx: {
|
|
9
|
+
display: "flex",
|
|
10
|
+
justifyContent: "center",
|
|
11
|
+
alignItems: "center",
|
|
12
|
+
minHeight: "200px",
|
|
13
|
+
color: "var(--text-color, inherit)"
|
|
14
|
+
},
|
|
13
15
|
children: "Loading..."
|
|
14
16
|
}
|
|
15
17
|
);
|
|
@@ -265,7 +265,17 @@ const DefaultSignUpPage = (props) => {
|
|
|
265
265
|
] }),
|
|
266
266
|
/* @__PURE__ */ jsx("div", { className: "dash-app-form-item", children: /* @__PURE__ */ jsxs(FormControl, { component: "fieldset", fullWidth: true, children: [
|
|
267
267
|
/* @__PURE__ */ jsx(FormLabel, { component: "legend", children: /* @__PURE__ */ jsx(Typography, { variant: isMobile ? "h6" : "h5", gutterBottom: true, children: "Choose Your Plan" }) }),
|
|
268
|
-
plansLoading ? /* @__PURE__ */ jsx(
|
|
268
|
+
plansLoading ? /* @__PURE__ */ jsx(
|
|
269
|
+
Box,
|
|
270
|
+
{
|
|
271
|
+
sx: {
|
|
272
|
+
display: "flex",
|
|
273
|
+
justifyContent: "center",
|
|
274
|
+
p: 2
|
|
275
|
+
},
|
|
276
|
+
children: /* @__PURE__ */ jsx(Typography, { children: "Loading plans..." })
|
|
277
|
+
}
|
|
278
|
+
) : /* @__PURE__ */ jsx(Grid, { container: true, spacing: 2, children: plans.map((plan) => /* @__PURE__ */ jsx(Grid, { size: { xs: 12, sm: 6, md: 4 }, children: /* @__PURE__ */ jsx(
|
|
269
279
|
Card,
|
|
270
280
|
{
|
|
271
281
|
variant: selectedPlan === plan.id ? "outlined" : "elevation",
|
|
@@ -278,10 +288,20 @@ const DefaultSignUpPage = (props) => {
|
|
|
278
288
|
},
|
|
279
289
|
onClick: () => handlePlanSelection(plan.id),
|
|
280
290
|
children: /* @__PURE__ */ jsxs(CardContent, { children: [
|
|
281
|
-
/* @__PURE__ */ jsxs(
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
|
|
291
|
+
/* @__PURE__ */ jsxs(
|
|
292
|
+
Box,
|
|
293
|
+
{
|
|
294
|
+
sx: {
|
|
295
|
+
display: "flex",
|
|
296
|
+
alignItems: "center",
|
|
297
|
+
mb: 2
|
|
298
|
+
},
|
|
299
|
+
children: [
|
|
300
|
+
/* @__PURE__ */ jsx(Typography, { variant: "h6", children: plan.name }),
|
|
301
|
+
selectedPlan === plan.id && /* @__PURE__ */ jsx(CheckCircleIcon, { color: "primary", sx: { ml: "auto" } })
|
|
302
|
+
]
|
|
303
|
+
}
|
|
304
|
+
),
|
|
285
305
|
/* @__PURE__ */ jsxs(Typography, { variant: "h4", color: "primary", gutterBottom: true, children: [
|
|
286
306
|
"$",
|
|
287
307
|
formatPrice(plan.price, plan.billing_cycle)
|
|
@@ -301,9 +321,11 @@ const DefaultSignUpPage = (props) => {
|
|
|
301
321
|
required: true,
|
|
302
322
|
fullWidth: true
|
|
303
323
|
}, register("email", { required: "Email is required" })), {
|
|
304
|
-
inputProps: { type: "email" },
|
|
305
324
|
error: !!errors.email,
|
|
306
|
-
helperText: (_a = errors.email) == null ? void 0 : _a.message
|
|
325
|
+
helperText: (_a = errors.email) == null ? void 0 : _a.message,
|
|
326
|
+
slotProps: {
|
|
327
|
+
htmlInput: { type: "email" }
|
|
328
|
+
}
|
|
307
329
|
})
|
|
308
330
|
) }),
|
|
309
331
|
/* @__PURE__ */ jsx("div", { className: "dash-app-form-item", children: /* @__PURE__ */ jsx(
|
|
@@ -39,7 +39,9 @@ const DefaultSignUpSuccessPage = (props) => {
|
|
|
39
39
|
}
|
|
40
40
|
),
|
|
41
41
|
/* @__PURE__ */ jsx(Typography, { variant: "h4", component: "h1", gutterBottom: true, children: "Account Created Successfully!" }),
|
|
42
|
-
/* @__PURE__ */ jsxs(Typography, { variant: "body1", color: "textSecondary",
|
|
42
|
+
/* @__PURE__ */ jsxs(Typography, { variant: "body1", color: "textSecondary", sx: {
|
|
43
|
+
marginBottom: "16px"
|
|
44
|
+
}, children: [
|
|
43
45
|
"Thank you for signing up",
|
|
44
46
|
(state == null ? void 0 : state.planName) ? ` for the ${state.planName} plan` : "",
|
|
45
47
|
"."
|
|
@@ -58,7 +60,9 @@ const DefaultSignUpSuccessPage = (props) => {
|
|
|
58
60
|
},
|
|
59
61
|
children: [
|
|
60
62
|
/* @__PURE__ */ jsx(EmailIcon, { sx: { mr: 1, color: "info.dark" } }),
|
|
61
|
-
/* @__PURE__ */ jsxs(Typography, { variant: "body2",
|
|
63
|
+
/* @__PURE__ */ jsxs(Typography, { variant: "body2", sx: {
|
|
64
|
+
color: "info.dark"
|
|
65
|
+
}, children: [
|
|
62
66
|
"We've sent a verification email to ",
|
|
63
67
|
/* @__PURE__ */ jsx("strong", { children: (state == null ? void 0 : state.email) || "your email address" }),
|
|
64
68
|
". Please check your inbox and verify your email to complete the registration."
|
|
@@ -66,7 +70,9 @@ const DefaultSignUpSuccessPage = (props) => {
|
|
|
66
70
|
]
|
|
67
71
|
}
|
|
68
72
|
),
|
|
69
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary",
|
|
73
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body2", color: "textSecondary", sx: {
|
|
74
|
+
marginBottom: "16px"
|
|
75
|
+
}, children: "If you don't see the email, please check your spam folder or request a new verification email." }),
|
|
70
76
|
/* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", flexDirection: "column", gap: 2 }, children: [
|
|
71
77
|
/* @__PURE__ */ jsx(
|
|
72
78
|
Button,
|
|
@@ -164,19 +164,21 @@ const LoginPage = () => {
|
|
|
164
164
|
placeholder: "Contrase\xF1a"
|
|
165
165
|
}, register("password")), {
|
|
166
166
|
className: "dash-app-form-item-input",
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
|
|
175
|
-
|
|
176
|
-
|
|
177
|
-
|
|
178
|
-
|
|
179
|
-
|
|
167
|
+
slotProps: {
|
|
168
|
+
input: {
|
|
169
|
+
autoComplete: "password",
|
|
170
|
+
type: showPassword ? "text" : "password",
|
|
171
|
+
endAdornment: /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx(
|
|
172
|
+
IconButton,
|
|
173
|
+
{
|
|
174
|
+
"aria-label": "toggle password visibility",
|
|
175
|
+
onClick: handleClickShowPassword,
|
|
176
|
+
onMouseDown: handleMouseDownPassword,
|
|
177
|
+
edge: "end",
|
|
178
|
+
children: showPassword ? /* @__PURE__ */ jsx(VisibilityOff, {}) : /* @__PURE__ */ jsx(Visibility, {})
|
|
179
|
+
}
|
|
180
|
+
) })
|
|
181
|
+
}
|
|
180
182
|
}
|
|
181
183
|
})
|
|
182
184
|
),
|
|
@@ -42,7 +42,9 @@ const DefaultNotFound = ({
|
|
|
42
42
|
),
|
|
43
43
|
/* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "404" }),
|
|
44
44
|
/* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
|
|
45
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary",
|
|
45
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
|
|
46
|
+
marginBottom: "16px"
|
|
47
|
+
}, children: message }),
|
|
46
48
|
/* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
|
|
47
49
|
showBackButton && /* @__PURE__ */ jsx(
|
|
48
50
|
Button,
|
|
@@ -47,7 +47,9 @@ const DefaultServerError = ({
|
|
|
47
47
|
),
|
|
48
48
|
/* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "500" }),
|
|
49
49
|
/* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
|
|
50
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary",
|
|
50
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
|
|
51
|
+
marginBottom: "16px"
|
|
52
|
+
}, children: message }),
|
|
51
53
|
/* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
|
|
52
54
|
showRetryButton && /* @__PURE__ */ jsx(
|
|
53
55
|
Button,
|
|
@@ -48,7 +48,9 @@ const DefaultUnauthorized = ({
|
|
|
48
48
|
),
|
|
49
49
|
/* @__PURE__ */ jsx(Typography, { variant: "h1", component: "h1", sx: { fontWeight: "bold", mb: 2 }, children: "403" }),
|
|
50
50
|
/* @__PURE__ */ jsx(Typography, { variant: "h5", component: "h2", gutterBottom: true, children: title }),
|
|
51
|
-
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary",
|
|
51
|
+
/* @__PURE__ */ jsx(Typography, { variant: "body1", color: "textSecondary", sx: {
|
|
52
|
+
marginBottom: "16px"
|
|
53
|
+
}, children: message }),
|
|
52
54
|
/* @__PURE__ */ jsxs(Box, { sx: { mt: 4, display: "flex", justifyContent: "center", gap: 2, flexWrap: "wrap" }, children: [
|
|
53
55
|
showBackButton && /* @__PURE__ */ jsx(
|
|
54
56
|
Button,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dashadmin/dash-app-common",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.52",
|
|
4
4
|
"description": "Common defaults and utilities for Dash applications - provides pre-configured components, extensions, pages, filters, and schemas",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"type": "module",
|
|
@@ -11,12 +11,13 @@ import { Box } from '@mui/material';
|
|
|
11
11
|
// Loading fallback component
|
|
12
12
|
const DashDefaultRouteLoader = () => (
|
|
13
13
|
<Box
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
14
|
+
sx={{
|
|
15
|
+
display: "flex",
|
|
16
|
+
justifyContent: "center",
|
|
17
|
+
alignItems: "center",
|
|
18
|
+
minHeight: "200px",
|
|
19
|
+
color: 'var(--text-color, inherit)'
|
|
20
|
+
}}>
|
|
20
21
|
Loading...
|
|
21
22
|
</Box>
|
|
22
23
|
);
|
|
@@ -301,7 +301,12 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
|
|
|
301
301
|
</FormLabel>
|
|
302
302
|
|
|
303
303
|
{plansLoading ? (
|
|
304
|
-
<Box
|
|
304
|
+
<Box
|
|
305
|
+
sx={{
|
|
306
|
+
display: "flex",
|
|
307
|
+
justifyContent: "center",
|
|
308
|
+
p: 2
|
|
309
|
+
}}>
|
|
305
310
|
<Typography>Loading plans...</Typography>
|
|
306
311
|
</Box>
|
|
307
312
|
) : (
|
|
@@ -320,7 +325,12 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
|
|
|
320
325
|
onClick={() => handlePlanSelection(plan.id)}
|
|
321
326
|
>
|
|
322
327
|
<CardContent>
|
|
323
|
-
<Box
|
|
328
|
+
<Box
|
|
329
|
+
sx={{
|
|
330
|
+
display: "flex",
|
|
331
|
+
alignItems: "center",
|
|
332
|
+
mb: 2
|
|
333
|
+
}}>
|
|
324
334
|
<Typography variant="h6">{plan.name}</Typography>
|
|
325
335
|
{selectedPlan === plan.id && (
|
|
326
336
|
<CheckCircleIcon color="primary" sx={{ ml: 'auto' }} />
|
|
@@ -359,9 +369,11 @@ const DefaultSignUpPage: React.FC<DefaultSignUpPageProps> = (props) => {
|
|
|
359
369
|
required
|
|
360
370
|
fullWidth
|
|
361
371
|
{...register('email', { required: 'Email is required' })}
|
|
362
|
-
inputProps={{ type: 'email' }}
|
|
363
372
|
error={!!errors.email}
|
|
364
373
|
helperText={errors.email?.message}
|
|
374
|
+
slotProps={{
|
|
375
|
+
htmlInput: { type: 'email' }
|
|
376
|
+
}}
|
|
365
377
|
/>
|
|
366
378
|
</div>
|
|
367
379
|
|
|
@@ -59,7 +59,9 @@ const DefaultSignUpSuccessPage: React.FC<DefaultSignUpSuccessPageProps> = (props
|
|
|
59
59
|
Account Created Successfully!
|
|
60
60
|
</Typography>
|
|
61
61
|
|
|
62
|
-
<Typography variant="body1" color="textSecondary"
|
|
62
|
+
<Typography variant="body1" color="textSecondary" sx={{
|
|
63
|
+
marginBottom: "16px"
|
|
64
|
+
}}>
|
|
63
65
|
Thank you for signing up{state?.planName ? ` for the ${state.planName} plan` : ''}.
|
|
64
66
|
</Typography>
|
|
65
67
|
|
|
@@ -75,13 +77,17 @@ const DefaultSignUpSuccessPage: React.FC<DefaultSignUpSuccessPageProps> = (props
|
|
|
75
77
|
}}
|
|
76
78
|
>
|
|
77
79
|
<EmailIcon sx={{ mr: 1, color: 'info.dark' }} />
|
|
78
|
-
<Typography variant="body2"
|
|
80
|
+
<Typography variant="body2" sx={{
|
|
81
|
+
color: "info.dark"
|
|
82
|
+
}}>
|
|
79
83
|
We've sent a verification email to <strong>{state?.email || 'your email address'}</strong>.
|
|
80
84
|
Please check your inbox and verify your email to complete the registration.
|
|
81
85
|
</Typography>
|
|
82
86
|
</Box>
|
|
83
87
|
|
|
84
|
-
<Typography variant="body2" color="textSecondary"
|
|
88
|
+
<Typography variant="body2" color="textSecondary" sx={{
|
|
89
|
+
marginBottom: "16px"
|
|
90
|
+
}}>
|
|
85
91
|
If you don't see the email, please check your spam folder or request a new verification email.
|
|
86
92
|
</Typography>
|
|
87
93
|
|
|
@@ -119,11 +119,11 @@ const LoginPage: React.FC = () => {
|
|
|
119
119
|
const banner = AuthPersistenceService.getTenantImages()?.banner?.original;
|
|
120
120
|
|
|
121
121
|
return (
|
|
122
|
-
|
|
122
|
+
<FullLayoutMarkup
|
|
123
123
|
logo={horizontal_logo}
|
|
124
124
|
loginBackground={banner}
|
|
125
125
|
>
|
|
126
|
-
|
|
126
|
+
<>
|
|
127
127
|
{!loggedIn ? (
|
|
128
128
|
<form
|
|
129
129
|
onSubmit={handleSubmit(onSubmit)}
|
|
@@ -154,22 +154,24 @@ const LoginPage: React.FC = () => {
|
|
|
154
154
|
placeholder='Contraseña'
|
|
155
155
|
{...register('password')}
|
|
156
156
|
className='dash-app-form-item-input'
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
|
|
157
|
+
slotProps={{
|
|
158
|
+
input: {
|
|
159
|
+
autoComplete: 'password',
|
|
160
|
+
type: showPassword ? 'text' : 'password',
|
|
161
|
+
endAdornment: (
|
|
162
|
+
<InputAdornment position='end'>
|
|
163
|
+
<IconButton
|
|
164
|
+
aria-label='toggle password visibility'
|
|
165
|
+
onClick={handleClickShowPassword}
|
|
166
|
+
onMouseDown={handleMouseDownPassword}
|
|
167
|
+
edge='end'
|
|
168
|
+
>
|
|
169
|
+
{showPassword ? <VisibilityOff /> : <Visibility />}
|
|
170
|
+
</IconButton>
|
|
171
|
+
</InputAdornment>
|
|
172
|
+
),
|
|
173
|
+
}
|
|
174
|
+
}}
|
|
173
175
|
/>
|
|
174
176
|
{errors.password && (
|
|
175
177
|
<span style={{ color: 'red' }}>
|
|
@@ -217,8 +219,8 @@ const LoginPage: React.FC = () => {
|
|
|
217
219
|
</>
|
|
218
220
|
)}
|
|
219
221
|
</>
|
|
220
|
-
|
|
221
|
-
|
|
222
|
+
</FullLayoutMarkup>
|
|
223
|
+
);
|
|
222
224
|
};
|
|
223
225
|
|
|
224
226
|
export default LoginPage;
|
|
@@ -62,7 +62,9 @@ const DefaultNotFound: React.FC<DefaultNotFoundProps> = ({
|
|
|
62
62
|
{title}
|
|
63
63
|
</Typography>
|
|
64
64
|
|
|
65
|
-
<Typography variant="body1" color="textSecondary"
|
|
65
|
+
<Typography variant="body1" color="textSecondary" sx={{
|
|
66
|
+
marginBottom: "16px"
|
|
67
|
+
}}>
|
|
66
68
|
{message}
|
|
67
69
|
</Typography>
|
|
68
70
|
|
|
@@ -68,7 +68,9 @@ const DefaultServerError: React.FC<DefaultServerErrorProps> = ({
|
|
|
68
68
|
{title}
|
|
69
69
|
</Typography>
|
|
70
70
|
|
|
71
|
-
<Typography variant="body1" color="textSecondary"
|
|
71
|
+
<Typography variant="body1" color="textSecondary" sx={{
|
|
72
|
+
marginBottom: "16px"
|
|
73
|
+
}}>
|
|
72
74
|
{message}
|
|
73
75
|
</Typography>
|
|
74
76
|
|
|
@@ -71,7 +71,9 @@ const DefaultUnauthorized: React.FC<DefaultUnauthorizedProps> = ({
|
|
|
71
71
|
{title}
|
|
72
72
|
</Typography>
|
|
73
73
|
|
|
74
|
-
<Typography variant="body1" color="textSecondary"
|
|
74
|
+
<Typography variant="body1" color="textSecondary" sx={{
|
|
75
|
+
marginBottom: "16px"
|
|
76
|
+
}}>
|
|
75
77
|
{message}
|
|
76
78
|
</Typography>
|
|
77
79
|
|