@refinedev/antd 5.36.18 → 5.37.0
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/CHANGELOG.md +25 -0
- package/README.md +15 -29
- package/dist/components/autoSaveIndicator/index.d.ts.map +1 -1
- package/dist/components/pages/auth/components/forgotPassword/index.d.ts.map +1 -1
- package/dist/components/pages/auth/components/login/index.d.ts.map +1 -1
- package/dist/components/pages/auth/components/register/index.d.ts.map +1 -1
- package/dist/components/pages/auth/components/updatePassword/index.d.ts.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/iife/index.js +30 -49
- package/dist/iife/index.js.map +1 -1
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/package.json +4 -4
- package/src/components/autoSaveIndicator/index.tsx +58 -26
- package/src/components/pages/auth/components/forgotPassword/index.tsx +4 -3
- package/src/components/pages/auth/components/login/index.tsx +121 -103
- package/src/components/pages/auth/components/register/index.tsx +129 -93
- package/src/components/pages/auth/components/updatePassword/index.tsx +4 -3
- package/src/components/undoableNotification/index.tsx +1 -1
- package/src/hooks/import/index.tsx +1 -1
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@refinedev/antd",
|
|
3
|
-
"version": "5.
|
|
3
|
+
"version": "5.37.0",
|
|
4
4
|
"description": "refine is a React-based framework for building internal tools, rapidly. It ships with Ant Design System, an enterprise-level UI toolkit.",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": [
|
|
@@ -26,9 +26,9 @@
|
|
|
26
26
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
27
27
|
},
|
|
28
28
|
"devDependencies": {
|
|
29
|
-
"@refinedev/cli": "^2.16.
|
|
30
|
-
"@refinedev/ui-tests": "^1.
|
|
31
|
-
"@refinedev/core": "^4.
|
|
29
|
+
"@refinedev/cli": "^2.16.20",
|
|
30
|
+
"@refinedev/ui-tests": "^1.14.0",
|
|
31
|
+
"@refinedev/core": "^4.46.0",
|
|
32
32
|
"@esbuild-plugins/node-resolve": "^0.1.4",
|
|
33
33
|
"@testing-library/jest-dom": "^5.16.4",
|
|
34
34
|
"@testing-library/react": "^13.1.1",
|
|
@@ -1,5 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import {
|
|
2
|
+
import {
|
|
3
|
+
AutoSaveIndicatorProps,
|
|
4
|
+
useTranslate,
|
|
5
|
+
AutoSaveIndicator as AutoSaveIndicatorCore,
|
|
6
|
+
} from "@refinedev/core";
|
|
3
7
|
import { Typography, theme } from "antd";
|
|
4
8
|
import {
|
|
5
9
|
EllipsisOutlined,
|
|
@@ -10,35 +14,63 @@ import {
|
|
|
10
14
|
|
|
11
15
|
export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
|
|
12
16
|
status,
|
|
17
|
+
elements: {
|
|
18
|
+
success = (
|
|
19
|
+
<Message
|
|
20
|
+
key="autoSave.success"
|
|
21
|
+
defaultMessage="saved"
|
|
22
|
+
icon={<CheckCircleOutlined />}
|
|
23
|
+
/>
|
|
24
|
+
),
|
|
25
|
+
error = (
|
|
26
|
+
<Message
|
|
27
|
+
key="autoSave.error"
|
|
28
|
+
defaultMessage="auto save failure"
|
|
29
|
+
icon={<ExclamationCircleOutlined />}
|
|
30
|
+
/>
|
|
31
|
+
),
|
|
32
|
+
loading = (
|
|
33
|
+
<Message
|
|
34
|
+
key="autoSave.loading"
|
|
35
|
+
defaultMessage="saving..."
|
|
36
|
+
icon={<SyncOutlined />}
|
|
37
|
+
/>
|
|
38
|
+
),
|
|
39
|
+
idle = (
|
|
40
|
+
<Message
|
|
41
|
+
key="autoSave.idle"
|
|
42
|
+
defaultMessage="waiting for changes"
|
|
43
|
+
icon={<EllipsisOutlined />}
|
|
44
|
+
/>
|
|
45
|
+
),
|
|
46
|
+
} = {},
|
|
47
|
+
}) => {
|
|
48
|
+
return (
|
|
49
|
+
<AutoSaveIndicatorCore
|
|
50
|
+
status={status}
|
|
51
|
+
elements={{
|
|
52
|
+
success,
|
|
53
|
+
error,
|
|
54
|
+
loading,
|
|
55
|
+
idle,
|
|
56
|
+
}}
|
|
57
|
+
/>
|
|
58
|
+
);
|
|
59
|
+
};
|
|
60
|
+
|
|
61
|
+
const Message = ({
|
|
62
|
+
key,
|
|
63
|
+
defaultMessage,
|
|
64
|
+
icon,
|
|
65
|
+
}: {
|
|
66
|
+
key: string;
|
|
67
|
+
defaultMessage: string;
|
|
68
|
+
icon: React.ReactNode;
|
|
13
69
|
}) => {
|
|
14
70
|
const translate = useTranslate();
|
|
15
71
|
const { useToken } = theme;
|
|
16
72
|
const { token } = useToken();
|
|
17
73
|
|
|
18
|
-
let message = null;
|
|
19
|
-
let icon = <EllipsisOutlined />;
|
|
20
|
-
|
|
21
|
-
switch (status) {
|
|
22
|
-
case "success":
|
|
23
|
-
message = translate("autoSave.success", "saved");
|
|
24
|
-
icon = <CheckCircleOutlined />;
|
|
25
|
-
break;
|
|
26
|
-
case "error":
|
|
27
|
-
message = translate("autoSave.error", "auto save failure");
|
|
28
|
-
icon = <ExclamationCircleOutlined />;
|
|
29
|
-
|
|
30
|
-
break;
|
|
31
|
-
case "loading":
|
|
32
|
-
message = translate("autoSave.loading", "saving...");
|
|
33
|
-
icon = <SyncOutlined />;
|
|
34
|
-
|
|
35
|
-
break;
|
|
36
|
-
default:
|
|
37
|
-
// for idle
|
|
38
|
-
message = translate("autoSave.idle", "waiting for changes");
|
|
39
|
-
break;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
74
|
return (
|
|
43
75
|
<Typography.Text
|
|
44
76
|
style={{
|
|
@@ -47,7 +79,7 @@ export const AutoSaveIndicator: React.FC<AutoSaveIndicatorProps> = ({
|
|
|
47
79
|
fontSize: ".8rem",
|
|
48
80
|
}}
|
|
49
81
|
>
|
|
50
|
-
{
|
|
82
|
+
{translate(key, defaultMessage)}
|
|
51
83
|
<span style={{ marginLeft: ".2rem" }}>{icon}</span>
|
|
52
84
|
</Typography.Text>
|
|
53
85
|
);
|
|
@@ -32,7 +32,7 @@ import {
|
|
|
32
32
|
headStyles,
|
|
33
33
|
bodyStyles,
|
|
34
34
|
} from "../styles";
|
|
35
|
-
import {
|
|
35
|
+
import { ThemedTitleV2 } from "@components";
|
|
36
36
|
|
|
37
37
|
type ResetPassworProps = ForgotPasswordPageProps<
|
|
38
38
|
LayoutProps,
|
|
@@ -78,7 +78,7 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
|
|
|
78
78
|
fontSize: "20px",
|
|
79
79
|
}}
|
|
80
80
|
>
|
|
81
|
-
{title ?? <
|
|
81
|
+
{title ?? <ThemedTitleV2 collapsed={false} />}
|
|
82
82
|
</div>
|
|
83
83
|
);
|
|
84
84
|
|
|
@@ -195,7 +195,8 @@ export const ForgotPasswordPage: React.FC<ResetPassworProps> = ({
|
|
|
195
195
|
justify="center"
|
|
196
196
|
align="middle"
|
|
197
197
|
style={{
|
|
198
|
-
|
|
198
|
+
padding: "16px 0",
|
|
199
|
+
minHeight: "100dvh",
|
|
199
200
|
}}
|
|
200
201
|
>
|
|
201
202
|
<Col xs={22}>
|
|
@@ -31,7 +31,7 @@ import {
|
|
|
31
31
|
layoutStyles,
|
|
32
32
|
titleStyles,
|
|
33
33
|
} from "../styles";
|
|
34
|
-
import {
|
|
34
|
+
import { ThemedTitleV2 } from "@components";
|
|
35
35
|
|
|
36
36
|
const { Text, Title } = Typography;
|
|
37
37
|
const { useToken } = theme;
|
|
@@ -52,6 +52,7 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
52
52
|
renderContent,
|
|
53
53
|
formProps,
|
|
54
54
|
title,
|
|
55
|
+
hideForm,
|
|
55
56
|
}) => {
|
|
56
57
|
const { token } = useToken();
|
|
57
58
|
const [form] = Form.useForm<LoginFormTypes>();
|
|
@@ -77,7 +78,7 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
77
78
|
fontSize: "20px",
|
|
78
79
|
}}
|
|
79
80
|
>
|
|
80
|
-
{title ?? <
|
|
81
|
+
{title ?? <ThemedTitleV2 collapsed={false} />}
|
|
81
82
|
</div>
|
|
82
83
|
);
|
|
83
84
|
|
|
@@ -121,15 +122,17 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
121
122
|
</Button>
|
|
122
123
|
);
|
|
123
124
|
})}
|
|
124
|
-
|
|
125
|
-
<
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
125
|
+
{!hideForm && (
|
|
126
|
+
<Divider>
|
|
127
|
+
<Text
|
|
128
|
+
style={{
|
|
129
|
+
color: token.colorTextLabel,
|
|
130
|
+
}}
|
|
131
|
+
>
|
|
132
|
+
{translate("pages.login.divider", "or")}
|
|
133
|
+
</Text>
|
|
134
|
+
</Divider>
|
|
135
|
+
)}
|
|
133
136
|
</>
|
|
134
137
|
);
|
|
135
138
|
}
|
|
@@ -148,104 +151,117 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
148
151
|
{...(contentProps ?? {})}
|
|
149
152
|
>
|
|
150
153
|
{renderProviders()}
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
{...formProps}
|
|
160
|
-
>
|
|
161
|
-
<Form.Item
|
|
162
|
-
name="email"
|
|
163
|
-
label={translate("pages.login.fields.email", "Email")}
|
|
164
|
-
rules={[
|
|
165
|
-
{ required: true },
|
|
166
|
-
{
|
|
167
|
-
type: "email",
|
|
168
|
-
message: translate(
|
|
169
|
-
"pages.login.errors.validEmail",
|
|
170
|
-
"Invalid email address",
|
|
171
|
-
),
|
|
172
|
-
},
|
|
173
|
-
]}
|
|
174
|
-
>
|
|
175
|
-
<Input
|
|
176
|
-
size="large"
|
|
177
|
-
placeholder={translate(
|
|
178
|
-
"pages.login.fields.email",
|
|
179
|
-
"Email",
|
|
180
|
-
)}
|
|
181
|
-
/>
|
|
182
|
-
</Form.Item>
|
|
183
|
-
<Form.Item
|
|
184
|
-
name="password"
|
|
185
|
-
label={translate("pages.login.fields.password", "Password")}
|
|
186
|
-
rules={[{ required: true }]}
|
|
187
|
-
>
|
|
188
|
-
<Input
|
|
189
|
-
type="password"
|
|
190
|
-
placeholder="●●●●●●●●"
|
|
191
|
-
size="large"
|
|
192
|
-
/>
|
|
193
|
-
</Form.Item>
|
|
194
|
-
<div
|
|
195
|
-
style={{
|
|
196
|
-
display: "flex",
|
|
197
|
-
justifyContent: "space-between",
|
|
198
|
-
marginBottom: "24px",
|
|
154
|
+
{!hideForm && (
|
|
155
|
+
<Form<LoginFormTypes>
|
|
156
|
+
layout="vertical"
|
|
157
|
+
form={form}
|
|
158
|
+
onFinish={(values) => login(values)}
|
|
159
|
+
requiredMark={false}
|
|
160
|
+
initialValues={{
|
|
161
|
+
remember: false,
|
|
199
162
|
}}
|
|
163
|
+
{...formProps}
|
|
200
164
|
>
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
165
|
+
<Form.Item
|
|
166
|
+
name="email"
|
|
167
|
+
label={translate("pages.login.fields.email", "Email")}
|
|
168
|
+
rules={[
|
|
169
|
+
{ required: true },
|
|
170
|
+
{
|
|
171
|
+
type: "email",
|
|
172
|
+
message: translate(
|
|
173
|
+
"pages.login.errors.validEmail",
|
|
174
|
+
"Invalid email address",
|
|
175
|
+
),
|
|
176
|
+
},
|
|
177
|
+
]}
|
|
178
|
+
>
|
|
179
|
+
<Input
|
|
180
|
+
size="large"
|
|
181
|
+
placeholder={translate(
|
|
182
|
+
"pages.login.fields.email",
|
|
183
|
+
"Email",
|
|
184
|
+
)}
|
|
185
|
+
/>
|
|
186
|
+
</Form.Item>
|
|
187
|
+
<Form.Item
|
|
188
|
+
name="password"
|
|
189
|
+
label={translate(
|
|
190
|
+
"pages.login.fields.password",
|
|
191
|
+
"Password",
|
|
192
|
+
)}
|
|
193
|
+
rules={[{ required: true }]}
|
|
194
|
+
>
|
|
195
|
+
<Input
|
|
196
|
+
type="password"
|
|
197
|
+
autoComplete="current-password"
|
|
198
|
+
placeholder="●●●●●●●●"
|
|
199
|
+
size="large"
|
|
200
|
+
/>
|
|
201
|
+
</Form.Item>
|
|
202
|
+
<div
|
|
203
|
+
style={{
|
|
204
|
+
display: "flex",
|
|
205
|
+
justifyContent: "space-between",
|
|
206
|
+
marginBottom: "24px",
|
|
207
|
+
}}
|
|
208
|
+
>
|
|
209
|
+
{rememberMe ?? (
|
|
210
|
+
<Form.Item
|
|
211
|
+
name="remember"
|
|
212
|
+
valuePropName="checked"
|
|
213
|
+
noStyle
|
|
214
|
+
>
|
|
215
|
+
<Checkbox
|
|
216
|
+
style={{
|
|
217
|
+
fontSize: "12px",
|
|
218
|
+
}}
|
|
219
|
+
>
|
|
220
|
+
{translate(
|
|
221
|
+
"pages.login.buttons.rememberMe",
|
|
222
|
+
"Remember me",
|
|
223
|
+
)}
|
|
224
|
+
</Checkbox>
|
|
225
|
+
</Form.Item>
|
|
226
|
+
)}
|
|
227
|
+
{forgotPasswordLink ?? (
|
|
228
|
+
<ActiveLink
|
|
208
229
|
style={{
|
|
230
|
+
color: token.colorPrimaryTextHover,
|
|
209
231
|
fontSize: "12px",
|
|
232
|
+
marginLeft: "auto",
|
|
210
233
|
}}
|
|
234
|
+
to="/forgot-password"
|
|
211
235
|
>
|
|
212
236
|
{translate(
|
|
213
|
-
"pages.login.buttons.
|
|
214
|
-
"
|
|
237
|
+
"pages.login.buttons.forgotPassword",
|
|
238
|
+
"Forgot password?",
|
|
215
239
|
)}
|
|
216
|
-
</
|
|
240
|
+
</ActiveLink>
|
|
241
|
+
)}
|
|
242
|
+
</div>
|
|
243
|
+
{!hideForm && (
|
|
244
|
+
<Form.Item>
|
|
245
|
+
<Button
|
|
246
|
+
type="primary"
|
|
247
|
+
size="large"
|
|
248
|
+
htmlType="submit"
|
|
249
|
+
loading={isLoading}
|
|
250
|
+
block
|
|
251
|
+
>
|
|
252
|
+
{translate("pages.login.signin", "Sign in")}
|
|
253
|
+
</Button>
|
|
217
254
|
</Form.Item>
|
|
218
255
|
)}
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
{translate(
|
|
229
|
-
"pages.login.buttons.forgotPassword",
|
|
230
|
-
"Forgot password?",
|
|
231
|
-
)}
|
|
232
|
-
</ActiveLink>
|
|
233
|
-
)}
|
|
234
|
-
</div>
|
|
235
|
-
<Form.Item>
|
|
236
|
-
<Button
|
|
237
|
-
type="primary"
|
|
238
|
-
size="large"
|
|
239
|
-
htmlType="submit"
|
|
240
|
-
loading={isLoading}
|
|
241
|
-
block
|
|
242
|
-
>
|
|
243
|
-
{translate("pages.login.signin", "Sign in")}
|
|
244
|
-
</Button>
|
|
245
|
-
</Form.Item>
|
|
246
|
-
</Form>
|
|
247
|
-
<div style={{ marginTop: 8 }}>
|
|
248
|
-
{registerLink ?? (
|
|
256
|
+
</Form>
|
|
257
|
+
)}
|
|
258
|
+
|
|
259
|
+
{registerLink ?? (
|
|
260
|
+
<div
|
|
261
|
+
style={{
|
|
262
|
+
marginTop: hideForm ? 16 : 8,
|
|
263
|
+
}}
|
|
264
|
+
>
|
|
249
265
|
<Text style={{ fontSize: 12 }}>
|
|
250
266
|
{translate(
|
|
251
267
|
"pages.login.buttons.noAccount",
|
|
@@ -261,8 +277,8 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
261
277
|
{translate("pages.login.signup", "Sign up")}
|
|
262
278
|
</ActiveLink>
|
|
263
279
|
</Text>
|
|
264
|
-
|
|
265
|
-
|
|
280
|
+
</div>
|
|
281
|
+
)}
|
|
266
282
|
</Card>
|
|
267
283
|
);
|
|
268
284
|
|
|
@@ -270,9 +286,11 @@ export const LoginPage: React.FC<LoginProps> = ({
|
|
|
270
286
|
<Layout style={layoutStyles} {...(wrapperProps ?? {})}>
|
|
271
287
|
<Row
|
|
272
288
|
justify="center"
|
|
273
|
-
align="middle"
|
|
289
|
+
align={hideForm ? "top" : "middle"}
|
|
274
290
|
style={{
|
|
275
|
-
|
|
291
|
+
padding: "16px 0",
|
|
292
|
+
minHeight: "100dvh",
|
|
293
|
+
paddingTop: hideForm ? "15dvh" : "16px",
|
|
276
294
|
}}
|
|
277
295
|
>
|
|
278
296
|
<Col xs={22}>
|