@canmingir/link 1.2.57 → 1.2.59
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/package.json
CHANGED
|
@@ -10,14 +10,20 @@ import React from "react";
|
|
|
10
10
|
import classicLoginLayout from "../layouts/auth/classic";
|
|
11
11
|
import config from "../config/config";
|
|
12
12
|
import modernLoginLayout from "../layouts/auth/modern";
|
|
13
|
+
import specialLoginLayout from "../layouts/auth/special";
|
|
14
|
+
|
|
15
|
+
const loginLayouts = {
|
|
16
|
+
classic: classicLoginLayout,
|
|
17
|
+
modern: modernLoginLayout,
|
|
18
|
+
special: specialLoginLayout,
|
|
19
|
+
};
|
|
13
20
|
|
|
14
21
|
export default function RouteManager({ routes }) {
|
|
15
22
|
const loginConfig = config().template?.login;
|
|
16
23
|
|
|
17
24
|
const isLoginConfigured = config().project && loginConfig;
|
|
18
25
|
|
|
19
|
-
const LoginLayout =
|
|
20
|
-
loginConfig?.variant === "classic" ? classicLoginLayout : modernLoginLayout;
|
|
26
|
+
const LoginLayout = loginLayouts[loginConfig?.variant] || modernLoginLayout;
|
|
21
27
|
|
|
22
28
|
return (
|
|
23
29
|
<HelmetProvider>
|
package/src/config/schemas.js
CHANGED
|
@@ -2,7 +2,7 @@ import Joi from "joi";
|
|
|
2
2
|
|
|
3
3
|
export const ConfigSchema = Joi.object({
|
|
4
4
|
appId: Joi.string().uuid().required(),
|
|
5
|
-
name: Joi.string().
|
|
5
|
+
name: Joi.string().optional().default(""),
|
|
6
6
|
beta: Joi.boolean().optional(),
|
|
7
7
|
base: Joi.string().required(),
|
|
8
8
|
api: Joi.string().uri().required(),
|
|
@@ -105,7 +105,7 @@ export const MenuConfigSchema = Joi.object({
|
|
|
105
105
|
export const TemplateConfigSchema = Joi.object({
|
|
106
106
|
login: Joi.object({
|
|
107
107
|
variant: Joi.string()
|
|
108
|
-
.valid("classic", "modern")
|
|
108
|
+
.valid("classic", "modern", "special")
|
|
109
109
|
.optional()
|
|
110
110
|
.default("classic"),
|
|
111
111
|
image: Joi.string()
|
|
@@ -73,7 +73,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
|
|
|
73
73
|
mt: 3,
|
|
74
74
|
}}
|
|
75
75
|
>
|
|
76
|
-
<Logo sx={{ ml: 4, mb: 1 }} />
|
|
76
|
+
<Logo maxSize={name ? 100 : 200} sx={{ ml: 4, mb: 1 }} />
|
|
77
77
|
<Link to="/" style={{ textDecoration: "none", color: "white" }}>
|
|
78
78
|
<Typography
|
|
79
79
|
sx={{
|
|
@@ -105,7 +105,7 @@ export default function NavVertical({ openNav, onCloseNav }) {
|
|
|
105
105
|
mt: 3,
|
|
106
106
|
}}
|
|
107
107
|
>
|
|
108
|
-
<Logo sx={{ ml: 4 }} />
|
|
108
|
+
<Logo maxSize={name ? 100 : 150} sx={{ ml: name ? 4 : -10 }} />
|
|
109
109
|
<Typography
|
|
110
110
|
sx={{
|
|
111
111
|
ml: 2,
|
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
import {
|
|
2
|
+
ThemeProvider,
|
|
3
|
+
alpha,
|
|
4
|
+
createTheme,
|
|
5
|
+
useTheme,
|
|
6
|
+
} from "@mui/material/styles";
|
|
7
|
+
|
|
8
|
+
import Box from "@mui/material/Box";
|
|
9
|
+
import Logo from "../../components/logo";
|
|
10
|
+
import { Outlet } from "react-router";
|
|
11
|
+
import React from "react";
|
|
12
|
+
import Stack from "@mui/material/Stack";
|
|
13
|
+
import Typography from "@mui/material/Typography";
|
|
14
|
+
import config from "../../config/config";
|
|
15
|
+
import { useResponsive } from "../../hooks/use-responsive";
|
|
16
|
+
|
|
17
|
+
const PAPER = "#e7decb";
|
|
18
|
+
const ACCENT = "#ce4a25";
|
|
19
|
+
const ACCENT_DARK = "#8c2f14";
|
|
20
|
+
const ACCENT_LIGHT = "#e8794f";
|
|
21
|
+
const DISPLAY_FONT = '"Poiret One", cursive';
|
|
22
|
+
const TITLE_FONT = '"DM Mono", monospace';
|
|
23
|
+
|
|
24
|
+
export default function AuthSpecialLayout({ image, title }) {
|
|
25
|
+
const { name } = config();
|
|
26
|
+
|
|
27
|
+
const mdUp = useResponsive("up", "md");
|
|
28
|
+
|
|
29
|
+
const outerTheme = useTheme();
|
|
30
|
+
|
|
31
|
+
const loginTheme = React.useMemo(
|
|
32
|
+
() =>
|
|
33
|
+
createTheme(outerTheme, {
|
|
34
|
+
palette: {
|
|
35
|
+
primary: {
|
|
36
|
+
lighter: "#F7DDD2",
|
|
37
|
+
light: ACCENT_LIGHT,
|
|
38
|
+
main: ACCENT,
|
|
39
|
+
dark: ACCENT_DARK,
|
|
40
|
+
darker: "#5c1c07",
|
|
41
|
+
contrastText: "#FFFFFF",
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
customShadows: { primary: `0 8px 16px 0 ${alpha(ACCENT, 0.24)}` },
|
|
45
|
+
}),
|
|
46
|
+
[outerTheme],
|
|
47
|
+
);
|
|
48
|
+
|
|
49
|
+
const renderSection = (
|
|
50
|
+
<Stack
|
|
51
|
+
spacing={6}
|
|
52
|
+
sx={{
|
|
53
|
+
flexGrow: 1,
|
|
54
|
+
alignItems: "center",
|
|
55
|
+
justifyContent: "center",
|
|
56
|
+
position: "relative",
|
|
57
|
+
overflow: "hidden",
|
|
58
|
+
bgcolor: alpha(ACCENT, 0.06),
|
|
59
|
+
borderRight: `1px solid ${alpha(ACCENT, 0.14)}`,
|
|
60
|
+
}}
|
|
61
|
+
>
|
|
62
|
+
<Box
|
|
63
|
+
sx={{
|
|
64
|
+
position: "absolute",
|
|
65
|
+
inset: 0,
|
|
66
|
+
backgroundImage: `radial-gradient(${alpha(
|
|
67
|
+
ACCENT,
|
|
68
|
+
0.14,
|
|
69
|
+
)} 1px, transparent 1px)`,
|
|
70
|
+
backgroundSize: "18px 18px",
|
|
71
|
+
pointerEvents: "none",
|
|
72
|
+
}}
|
|
73
|
+
/>
|
|
74
|
+
|
|
75
|
+
<Stack
|
|
76
|
+
spacing={2}
|
|
77
|
+
sx={{ px: 6, maxWidth: 520, textAlign: "center", zIndex: 1 }}
|
|
78
|
+
>
|
|
79
|
+
<Typography
|
|
80
|
+
sx={{
|
|
81
|
+
fontFamily: DISPLAY_FONT,
|
|
82
|
+
fontSize: { md: "3.25rem", lg: "4rem" },
|
|
83
|
+
lineHeight: 1.05,
|
|
84
|
+
color: ACCENT_DARK,
|
|
85
|
+
}}
|
|
86
|
+
>
|
|
87
|
+
{title || name}
|
|
88
|
+
</Typography>
|
|
89
|
+
|
|
90
|
+
<Typography
|
|
91
|
+
sx={{
|
|
92
|
+
fontFamily: TITLE_FONT,
|
|
93
|
+
fontSize: "0.8rem",
|
|
94
|
+
letterSpacing: "0.18em",
|
|
95
|
+
textTransform: "uppercase",
|
|
96
|
+
color: alpha(ACCENT, 0.75),
|
|
97
|
+
}}
|
|
98
|
+
>
|
|
99
|
+
Learn · Explore · Grow
|
|
100
|
+
</Typography>
|
|
101
|
+
</Stack>
|
|
102
|
+
|
|
103
|
+
{image && (
|
|
104
|
+
<Box
|
|
105
|
+
component="img"
|
|
106
|
+
alt="auth"
|
|
107
|
+
src={image}
|
|
108
|
+
sx={{
|
|
109
|
+
zIndex: 1,
|
|
110
|
+
maxWidth: { md: 360, lg: 440 },
|
|
111
|
+
width: "100%",
|
|
112
|
+
objectFit: "contain",
|
|
113
|
+
}}
|
|
114
|
+
/>
|
|
115
|
+
)}
|
|
116
|
+
</Stack>
|
|
117
|
+
);
|
|
118
|
+
|
|
119
|
+
const renderContent = (
|
|
120
|
+
<Stack
|
|
121
|
+
sx={{
|
|
122
|
+
width: 1,
|
|
123
|
+
mx: "auto",
|
|
124
|
+
maxWidth: 480,
|
|
125
|
+
justifyContent: "center",
|
|
126
|
+
px: { xs: 3, md: 8 },
|
|
127
|
+
py: { xs: 8, md: 0 },
|
|
128
|
+
position: "relative",
|
|
129
|
+
zIndex: 1,
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
<Logo
|
|
133
|
+
isLogin={true}
|
|
134
|
+
maxSize={120}
|
|
135
|
+
sx={{ mb: 4, alignSelf: { xs: "center", md: "flex-start" } }}
|
|
136
|
+
/>
|
|
137
|
+
|
|
138
|
+
<Box
|
|
139
|
+
sx={{
|
|
140
|
+
p: { xs: 3, md: 4 },
|
|
141
|
+
borderRadius: 3,
|
|
142
|
+
bgcolor: alpha("#ffffff", 0.4),
|
|
143
|
+
border: `1px solid ${alpha(ACCENT, 0.18)}`,
|
|
144
|
+
boxShadow: `0 12px 32px -12px ${alpha(ACCENT_DARK, 0.28)}`,
|
|
145
|
+
"& .MuiTypography-root": { fontFamily: TITLE_FONT, color: ACCENT },
|
|
146
|
+
"& .MuiTypography-h3, & .MuiTypography-h4": {
|
|
147
|
+
fontFamily: DISPLAY_FONT,
|
|
148
|
+
color: ACCENT_DARK,
|
|
149
|
+
},
|
|
150
|
+
"& .MuiButtonBase-root": {
|
|
151
|
+
fontFamily: TITLE_FONT,
|
|
152
|
+
color: PAPER,
|
|
153
|
+
backgroundColor: ACCENT,
|
|
154
|
+
"&:hover": {
|
|
155
|
+
backgroundColor: ACCENT_DARK,
|
|
156
|
+
},
|
|
157
|
+
},
|
|
158
|
+
"& .MuiOutlinedInput-root, & .MuiFilledInput-root": {
|
|
159
|
+
fontFamily: TITLE_FONT,
|
|
160
|
+
},
|
|
161
|
+
}}
|
|
162
|
+
>
|
|
163
|
+
<ThemeProvider theme={loginTheme}>
|
|
164
|
+
<Outlet />
|
|
165
|
+
</ThemeProvider>
|
|
166
|
+
</Box>
|
|
167
|
+
</Stack>
|
|
168
|
+
);
|
|
169
|
+
|
|
170
|
+
return (
|
|
171
|
+
<Stack
|
|
172
|
+
component="main"
|
|
173
|
+
direction="row"
|
|
174
|
+
sx={{ minHeight: "100vh", bgcolor: PAPER }}
|
|
175
|
+
>
|
|
176
|
+
{mdUp && renderSection}
|
|
177
|
+
|
|
178
|
+
{renderContent}
|
|
179
|
+
</Stack>
|
|
180
|
+
);
|
|
181
|
+
}
|