message-verify 1.0.1-beta.2 → 1.0.1-beta.21
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/index.d.ts +2 -1
- package/dist/index.js +19 -3
- package/dist/locales/en.d.ts +3 -0
- package/dist/locales/en.js +4 -1
- package/dist/locales/id.d.ts +3 -0
- package/dist/locales/id.js +4 -1
- package/dist/locales/zh.d.ts +3 -0
- package/dist/locales/zh.js +4 -1
- package/dist/main.js +45 -43
- package/dist/relogin-modal.d.ts +2 -2
- package/dist/relogin-modal.js +8 -7
- package/dist/utils/type.d.ts +7 -1
- package/dist/verify-modal.js +27 -18
- package/package.json +3 -2
- package/src/index.tsx +26 -4
- package/src/locales/en.ts +4 -1
- package/src/locales/id.ts +4 -1
- package/src/locales/zh.ts +4 -1
- package/src/main.tsx +51 -46
- package/src/relogin-modal.tsx +11 -10
- package/src/utils/type.ts +8 -1
- package/src/verify-modal.tsx +30 -22
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
-
import { ModalConfig } from './utils/type.js';
|
|
1
|
+
import { ModalConfig, LoginModalConfig } from './utils/type.js';
|
|
2
2
|
export declare const initFingerprint: () => Promise<string>;
|
|
3
3
|
export declare const createMessageVerifyModal: (modalProps: ModalConfig) => void;
|
|
4
|
+
export declare const createReLoginModal: (modalProps: LoginModalConfig) => void;
|
package/dist/index.js
CHANGED
|
@@ -2,16 +2,19 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import ReactDOM from 'react-dom/client';
|
|
3
3
|
import VerifyModal from './verify-modal.js';
|
|
4
4
|
import Fingerprint2 from 'fingerprintjs2';
|
|
5
|
+
import ReLoginModal from './relogin-modal.js';
|
|
5
6
|
let cachedFingerprint = null;
|
|
6
7
|
export const initFingerprint = async () => {
|
|
8
|
+
if (typeof window !== 'undefined') {
|
|
9
|
+
const local = localStorage.getItem('__YQG_FINGERPRINT__');
|
|
10
|
+
if (local)
|
|
11
|
+
return Promise.resolve(local);
|
|
12
|
+
}
|
|
7
13
|
if (cachedFingerprint) {
|
|
8
|
-
// 已有缓存，直接返回 Promise
|
|
9
14
|
return Promise.resolve(cachedFingerprint);
|
|
10
15
|
}
|
|
11
|
-
// 首次异步获取并缓存
|
|
12
16
|
return new Promise((resolve) => {
|
|
13
17
|
Fingerprint2.get(function (components) {
|
|
14
|
-
console.log('components', components);
|
|
15
18
|
const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
|
|
16
19
|
const values = components
|
|
17
20
|
.filter(component => includeKeys.includes(component.key))
|
|
@@ -19,6 +22,9 @@ export const initFingerprint = async () => {
|
|
|
19
22
|
.join('###');
|
|
20
23
|
const fingerprint = Fingerprint2.x64hash128(values, 31);
|
|
21
24
|
cachedFingerprint = fingerprint;
|
|
25
|
+
if (typeof window !== 'undefined') {
|
|
26
|
+
localStorage.setItem('__YQG_FINGERPRINT__', fingerprint);
|
|
27
|
+
}
|
|
22
28
|
resolve(fingerprint);
|
|
23
29
|
});
|
|
24
30
|
});
|
|
@@ -37,6 +43,16 @@ export const createMessageVerifyModal = (modalProps) => {
|
|
|
37
43
|
}
|
|
38
44
|
} }));
|
|
39
45
|
};
|
|
46
|
+
// 新增 relogin 弹窗创建方法
|
|
47
|
+
export const createReLoginModal = (modalProps) => {
|
|
48
|
+
const container = document.createElement('div');
|
|
49
|
+
container.id = 'antd-modal-container';
|
|
50
|
+
document.body.appendChild(container);
|
|
51
|
+
modalRoot = ReactDOM.createRoot(container);
|
|
52
|
+
modalRoot.render(_jsx(ReLoginModal, { props: {
|
|
53
|
+
...modalProps,
|
|
54
|
+
} }));
|
|
55
|
+
};
|
|
40
56
|
const destroyModal = () => {
|
|
41
57
|
if (modalRoot) {
|
|
42
58
|
modalRoot.unmount();
|
package/dist/locales/en.d.ts
CHANGED
package/dist/locales/en.js
CHANGED
|
@@ -6,5 +6,8 @@ export default {
|
|
|
6
6
|
sendSuccess: 'Successfully sent',
|
|
7
7
|
sendFailed: 'Send failed',
|
|
8
8
|
reSend: 'Resend',
|
|
9
|
-
countDownSecound: '{countdown} seconds'
|
|
9
|
+
countDownSecound: '{countdown} seconds',
|
|
10
|
+
accountAlert: 'Account Security Alert',
|
|
11
|
+
alertContent: 'Changes have been detected in your login environment or network information.To ensure account security, please log in again to verify your identity.',
|
|
12
|
+
ok: 'OK'
|
|
10
13
|
};
|
package/dist/locales/id.d.ts
CHANGED
package/dist/locales/id.js
CHANGED
|
@@ -6,5 +6,8 @@ export default {
|
|
|
6
6
|
sendSuccess: 'Berhasil dikirim',
|
|
7
7
|
sendFailed: 'Gagal mengirim',
|
|
8
8
|
reSend: 'Kirim Ulang',
|
|
9
|
-
countDownSecound: '{countdown} detik'
|
|
9
|
+
countDownSecound: '{countdown} detik',
|
|
10
|
+
accountAlert: 'Peringatan Keamanan Akun',
|
|
11
|
+
alertContent: 'Terdeteksi perubahan pada lingkungan login atau informasi jaringan Anda.Untuk menjaga keamanan akun, silakan login kembali untuk memverifikasi identitas Anda.',
|
|
12
|
+
ok: 'Baiklah'
|
|
10
13
|
};
|
package/dist/locales/zh.d.ts
CHANGED
package/dist/locales/zh.js
CHANGED
package/dist/main.js
CHANGED
|
@@ -1,50 +1,52 @@
|
|
|
1
|
-
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
|
|
1
|
+
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { createRoot } from 'react-dom/client';
|
|
3
|
-
import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
|
|
3
|
+
import { createMessageVerifyModal, initFingerprint, createReLoginModal } from './index.js'; // 或 './index'
|
|
4
4
|
import { axios } from '@yqg/resource';
|
|
5
5
|
const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
|
|
6
6
|
const fp = await initFingerprint();
|
|
7
7
|
console.log(fp);
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
8
|
+
const config = {
|
|
9
|
+
"transitional": {
|
|
10
|
+
"silentJSONParsing": true,
|
|
11
|
+
"forcedJSONParsing": true,
|
|
12
|
+
"clarifyTimeoutError": false
|
|
13
|
+
},
|
|
14
|
+
"timeout": 0,
|
|
15
|
+
"xsrfCookieName": "XSRF-TOKEN",
|
|
16
|
+
"xsrfHeaderName": "X-XSRF-TOKEN",
|
|
17
|
+
"maxContentLength": -1,
|
|
18
|
+
"maxBodyLength": -1,
|
|
19
|
+
"headers": {
|
|
20
|
+
"Accept": "application/json, text/plain, */*",
|
|
21
|
+
"X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
|
|
22
|
+
"Content-Type": "application/json"
|
|
23
|
+
},
|
|
24
|
+
"url": "/classification/admin/level/edit",
|
|
25
|
+
"method": "post",
|
|
26
|
+
"dataFormat": "JSON",
|
|
27
|
+
"showRequestData": true,
|
|
28
|
+
"showResponseData": false,
|
|
29
|
+
"showGeneralResponseData": true,
|
|
30
|
+
"headersList": [],
|
|
31
|
+
"requestDataFunc": "\nfunction(formFilterData){\n // 这里写你的处理逻辑\n return {\n ...formFilterData,\n 'classificationLevel': 2 //等级\n }\n}\n",
|
|
32
|
+
"responseDataFunc": "",
|
|
33
|
+
"responseGeneralDataFunc": "function(req, { data, util, window }) {\n return req\n .then((response) => {\n return Promise.resolve({\n status: {\n code: 0,\n }\n })\n })\n .catch((error) => {\n // 检查是否有响应数据\n if (error.response && error.response.data) {\n const responseData = error.response.data;\n const detail = responseData.body?.status?.detail || responseData.status?.detail;\n if (detail) {\n util.message.error(detail);\n } else {\n util.message.error('编辑失败，请重试');\n }\n } else {\n util.message.error('编辑失败，请重试');\n }\n console.error('Error during deletion:', error);\n });\n}",
|
|
34
|
+
"formInstance": {},
|
|
35
|
+
"data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
|
|
36
|
+
"baseURL": "http://localhost:62888"
|
|
37
|
+
};
|
|
38
|
+
createRoot(document.getElementById('root')).render(_jsxs(_Fragment, { children: [_jsx("button", { onClick: () => createMessageVerifyModal({
|
|
39
|
+
data,
|
|
40
|
+
config,
|
|
41
|
+
lang: 'en',
|
|
42
|
+
http: axios,
|
|
43
|
+
apiReject: () => {
|
|
15
44
|
},
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
],
|
|
22
|
-
"timeout": 0,
|
|
23
|
-
"xsrfCookieName": "XSRF-TOKEN",
|
|
24
|
-
"xsrfHeaderName": "X-XSRF-TOKEN",
|
|
25
|
-
"maxContentLength": -1,
|
|
26
|
-
"maxBodyLength": -1,
|
|
27
|
-
"headers": {
|
|
28
|
-
"Accept": "application/json, text/plain, */*",
|
|
29
|
-
"X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
|
|
30
|
-
"Content-Type": "application/json",
|
|
31
|
-
"sms-code": "121212",
|
|
32
|
-
"sms-code-key": "212190c7-2f5e-4cc1-82ec-a242c2ab5425"
|
|
45
|
+
apiResolve: () => {
|
|
46
|
+
}
|
|
47
|
+
}), children: "Show verify Modal" }), _jsx("button", { onClick: () => createReLoginModal({
|
|
48
|
+
goLogin: () => {
|
|
49
|
+
console.log('goLogin');
|
|
33
50
|
},
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
"dataFormat": "JSON",
|
|
37
|
-
"showRequestData": true,
|
|
38
|
-
"showResponseData": false,
|
|
39
|
-
"showGeneralResponseData": true,
|
|
40
|
-
"headersList": [],
|
|
41
|
-
"requestDataFunc": "\nfunction(formFilterData){\n // 这里写你的处理逻辑\n return {\n ...formFilterData,\n 'classificationLevel': 2 //等级\n }\n}\n",
|
|
42
|
-
"responseDataFunc": "",
|
|
43
|
-
"responseGeneralDataFunc": "function(req, { data, util, window }) {\n return req\n .then((response) => {\n return Promise.resolve({\n status: {\n code: 0,\n }\n })\n })\n .catch((error) => {\n // 检查是否有响应数据\n if (error.response && error.response.data) {\n const responseData = error.response.data;\n const detail = responseData.body?.status?.detail || responseData.status?.detail;\n if (detail) {\n util.message.error(detail);\n } else {\n util.message.error('编辑失败，请重试');\n }\n } else {\n util.message.error('编辑失败，请重试');\n }\n console.error('Error during deletion:', error);\n });\n}",
|
|
44
|
-
"formInstance": {},
|
|
45
|
-
"data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
|
|
46
|
-
"baseURL": "http://localhost:62888"
|
|
47
|
-
},
|
|
48
|
-
lang: 'en',
|
|
49
|
-
http: axios,
|
|
50
|
-
}), children: "Show verify Modal" }) }));
|
|
51
|
+
lang: 'zh',
|
|
52
|
+
}), children: "Show login Modal" })] }));
|
package/dist/relogin-modal.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { LoginModalConfig } from './utils/type.js';
|
|
2
2
|
declare const ReLoginModal: ({ props }: {
|
|
3
|
-
props:
|
|
3
|
+
props: LoginModalConfig;
|
|
4
4
|
}) => import("react/jsx-runtime.js").JSX.Element;
|
|
5
5
|
export default ReLoginModal;
|
package/dist/relogin-modal.js
CHANGED
|
@@ -1,22 +1,23 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useState } from 'react';
|
|
3
3
|
import { Modal, Button } from './compoments/index.js';
|
|
4
|
+
import t from './utils/i18n.js';
|
|
4
5
|
const ReLoginModal = ({ props }) => {
|
|
5
|
-
|
|
6
|
+
const { goLogin, lang } = props || {};
|
|
6
7
|
const [visible, setVisible] = useState(true);
|
|
7
8
|
const onClose = () => {
|
|
8
9
|
setVisible(false);
|
|
10
|
+
goLogin();
|
|
9
11
|
};
|
|
10
|
-
return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children:
|
|
12
|
+
return (_jsxs(Modal, { visible: visible, onClose: onClose, width: 420, children: [_jsx("div", { style: { fontWeight: 500, fontSize: 20, marginBottom: 24 }, children: t('accountAlert', lang) }), _jsx("div", { style: { color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }, children: t('alertContent', lang) }), _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Button, { style: {
|
|
11
13
|
background: '#1677ff',
|
|
12
14
|
color: '#fff',
|
|
13
15
|
border: 'none',
|
|
14
|
-
width:
|
|
15
|
-
height:
|
|
16
|
-
fontSize:
|
|
17
|
-
fontWeight: 500,
|
|
16
|
+
width: 80,
|
|
17
|
+
height: 36,
|
|
18
|
+
fontSize: 14,
|
|
18
19
|
borderRadius: 8,
|
|
19
20
|
boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
|
|
20
|
-
}, onClick: onClose, children:
|
|
21
|
+
}, onClick: onClose, children: t('ok', lang) }) })] }));
|
|
21
22
|
};
|
|
22
23
|
export default ReLoginModal;
|
package/dist/utils/type.d.ts
CHANGED
|
@@ -7,7 +7,7 @@ export type ModalConfig = {
|
|
|
7
7
|
};
|
|
8
8
|
[key: string]: unknown;
|
|
9
9
|
};
|
|
10
|
-
lang
|
|
10
|
+
lang?: 'zh' | 'en' | 'id';
|
|
11
11
|
http: {
|
|
12
12
|
(params: object): Promise<unknown>;
|
|
13
13
|
defaults: {
|
|
@@ -19,4 +19,10 @@ export type ModalConfig = {
|
|
|
19
19
|
};
|
|
20
20
|
};
|
|
21
21
|
api?: string;
|
|
22
|
+
apiReject: any;
|
|
23
|
+
apiResolve: any;
|
|
24
|
+
};
|
|
25
|
+
export type LoginModalConfig = {
|
|
26
|
+
goLogin: () => void;
|
|
27
|
+
lang?: 'zh' | 'en' | 'id';
|
|
22
28
|
};
|
package/dist/verify-modal.js
CHANGED
|
@@ -11,7 +11,7 @@ const CreateMessageVerifyModal = ({ props }) => {
|
|
|
11
11
|
const [captchaImage, setCaptchaImage] = useState('');
|
|
12
12
|
const [captchCode, setCaptchCode] = useState('');
|
|
13
13
|
const [captchaKey, setCaptchaKey] = useState('');
|
|
14
|
-
const { data,
|
|
14
|
+
const { data, http, lang, api = '/admin/sms/send', config, apiResolve, apiReject } = props || {};
|
|
15
15
|
const dataObj = JSON.parse(data || '{}');
|
|
16
16
|
const { mobile, verifyCodeKey } = dataObj || {};
|
|
17
17
|
const getKey = async () => {
|
|
@@ -58,7 +58,9 @@ const CreateMessageVerifyModal = ({ props }) => {
|
|
|
58
58
|
return;
|
|
59
59
|
}
|
|
60
60
|
message.success(t('sendSuccess', lang));
|
|
61
|
+
// 重置倒计时、验证码
|
|
61
62
|
setCountdown(60);
|
|
63
|
+
setOtp('');
|
|
62
64
|
};
|
|
63
65
|
return (_jsxs(Modal, { width: 420, visible: visible, onClose: () => {
|
|
64
66
|
setVisible(false);
|
|
@@ -66,24 +68,31 @@ const CreateMessageVerifyModal = ({ props }) => {
|
|
|
66
68
|
}, children: [_jsx("div", { style: { fontSize: 14, color: '#666' }, children: t('alreadySend', lang, { phone: mobile }) }), _jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 8, marginTop: 12 }, children: [_jsx(Input.OTP, { length: 6, value: otp, onChange: async (val) => {
|
|
67
69
|
setOtp(val);
|
|
68
70
|
if (val.length === 6) {
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
71
|
+
try {
|
|
72
|
+
const res = await http({
|
|
73
|
+
...config,
|
|
74
|
+
headers: {
|
|
75
|
+
...http.defaults.headers.common,
|
|
76
|
+
'sms-code': val,
|
|
77
|
+
'sms-code-key': verifyCodeKey,
|
|
78
|
+
'Content-Type': config.headers['Content-Type'],
|
|
79
|
+
}
|
|
80
|
+
});
|
|
81
|
+
console.log('res', res);
|
|
82
|
+
if (!res) {
|
|
83
|
+
message.error('验证失败');
|
|
84
|
+
apiReject();
|
|
76
85
|
}
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
86
|
+
else {
|
|
87
|
+
apiResolve(res);
|
|
88
|
+
}
|
|
89
|
+
setVisible(false);
|
|
90
|
+
}
|
|
91
|
+
catch (error) {
|
|
92
|
+
message.error('验证失败');
|
|
93
|
+
apiReject(error);
|
|
94
|
+
setVisible(false);
|
|
95
|
+
}
|
|
87
96
|
}
|
|
88
97
|
} }), _jsx(Button, { disabled: countdown > 0 || !captchCode, onClick: handleResend, style: { padding: '8px' }, children: countdown > 0 ? t('countDownSecound', lang, { countdown }) : t('reSend', lang) })] }), countdown > 0 ? null :
|
|
89
98
|
_jsxs("div", { style: { marginTop: 12, display: 'flex', alignItems: 'center' }, children: [_jsx(Input, { placeholder: t('pleaseEnterPicVerifyCode', lang), onChange: (e) => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "message-verify",
|
|
3
|
-
"version": "1.0.1-beta.
|
|
3
|
+
"version": "1.0.1-beta.21",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"dependencies": {
|
|
@@ -29,6 +29,7 @@
|
|
|
29
29
|
"build": "tsc -b",
|
|
30
30
|
"analyze": "vite build",
|
|
31
31
|
"lint": "eslint .",
|
|
32
|
-
"preview": "vite preview"
|
|
32
|
+
"preview": "vite preview",
|
|
33
|
+
"release:beta": "pnpm version prerelease --preid=beta && pnpm run build && pnpm publish"
|
|
33
34
|
}
|
|
34
35
|
}
|
package/src/index.tsx
CHANGED
|
@@ -1,18 +1,21 @@
|
|
|
1
1
|
import ReactDOM from 'react-dom/client'
|
|
2
2
|
import VerifyModal from './verify-modal.js'
|
|
3
3
|
import Fingerprint2 from 'fingerprintjs2';
|
|
4
|
-
import
|
|
4
|
+
import ReLoginModal from './relogin-modal.js';
|
|
5
|
+
import { ModalConfig, LoginModalConfig } from './utils/type.js';
|
|
5
6
|
|
|
6
7
|
let cachedFingerprint: string | null = null;
|
|
8
|
+
|
|
7
9
|
export const initFingerprint = async (): Promise<string> => {
|
|
10
|
+
if (typeof window !== 'undefined') {
|
|
11
|
+
const local = localStorage.getItem('__YQG_FINGERPRINT__');
|
|
12
|
+
if (local) return Promise.resolve(local);
|
|
13
|
+
}
|
|
8
14
|
if (cachedFingerprint) {
|
|
9
|
-
// 已有缓存，直接返回 Promise
|
|
10
15
|
return Promise.resolve(cachedFingerprint);
|
|
11
16
|
}
|
|
12
|
-
// 首次异步获取并缓存
|
|
13
17
|
return new Promise((resolve) => {
|
|
14
18
|
Fingerprint2.get(function (components) {
|
|
15
|
-
console.log('components', components);
|
|
16
19
|
const includeKeys = ['userAgent', 'deviceMemory', 'cpuClass', 'hardwareConcurrency', 'platform'];
|
|
17
20
|
const values = components
|
|
18
21
|
.filter(component => includeKeys.includes(component.key))
|
|
@@ -20,6 +23,9 @@ export const initFingerprint = async (): Promise<string> => {
|
|
|
20
23
|
.join('###');
|
|
21
24
|
const fingerprint = Fingerprint2.x64hash128(values, 31);
|
|
22
25
|
cachedFingerprint = fingerprint;
|
|
26
|
+
if (typeof window !== 'undefined') {
|
|
27
|
+
localStorage.setItem('__YQG_FINGERPRINT__', fingerprint);
|
|
28
|
+
}
|
|
23
29
|
resolve(fingerprint);
|
|
24
30
|
});
|
|
25
31
|
});
|
|
@@ -46,6 +52,22 @@ export const createMessageVerifyModal = (modalProps: ModalConfig) => {
|
|
|
46
52
|
)
|
|
47
53
|
}
|
|
48
54
|
|
|
55
|
+
// 新增 relogin 弹窗创建方法
|
|
56
|
+
export const createReLoginModal = (modalProps: LoginModalConfig) => {
|
|
57
|
+
const container = document.createElement('div')
|
|
58
|
+
container.id = 'antd-modal-container'
|
|
59
|
+
document.body.appendChild(container)
|
|
60
|
+
|
|
61
|
+
modalRoot = ReactDOM.createRoot(container)
|
|
62
|
+
modalRoot.render(
|
|
63
|
+
<ReLoginModal
|
|
64
|
+
props={{
|
|
65
|
+
...modalProps,
|
|
66
|
+
}}
|
|
67
|
+
/>
|
|
68
|
+
)
|
|
69
|
+
}
|
|
70
|
+
|
|
49
71
|
const destroyModal = () => {
|
|
50
72
|
if (modalRoot) {
|
|
51
73
|
modalRoot.unmount()
|
package/src/locales/en.ts
CHANGED
|
@@ -6,5 +6,8 @@ export default {
|
|
|
6
6
|
sendSuccess: 'Successfully sent',
|
|
7
7
|
sendFailed: 'Send failed',
|
|
8
8
|
reSend: 'Resend',
|
|
9
|
-
countDownSecound: '{countdown} seconds'
|
|
9
|
+
countDownSecound: '{countdown} seconds',
|
|
10
|
+
accountAlert: 'Account Security Alert',
|
|
11
|
+
alertContent: 'Changes have been detected in your login environment or network information.To ensure account security, please log in again to verify your identity.',
|
|
12
|
+
ok: 'OK'
|
|
10
13
|
};
|
package/src/locales/id.ts
CHANGED
|
@@ -6,5 +6,8 @@ export default {
|
|
|
6
6
|
sendSuccess: 'Berhasil dikirim',
|
|
7
7
|
sendFailed: 'Gagal mengirim',
|
|
8
8
|
reSend: 'Kirim Ulang',
|
|
9
|
-
countDownSecound: '{countdown} detik'
|
|
9
|
+
countDownSecound: '{countdown} detik',
|
|
10
|
+
accountAlert: 'Peringatan Keamanan Akun',
|
|
11
|
+
alertContent: 'Terdeteksi perubahan pada lingkungan login atau informasi jaringan Anda.Untuk menjaga keamanan akun, silakan login kembali untuk memverifikasi identitas Anda.',
|
|
12
|
+
ok: 'Baiklah'
|
|
10
13
|
};
|
package/src/locales/zh.ts
CHANGED
package/src/main.tsx
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createRoot } from 'react-dom/client';
|
|
2
|
-
import { createMessageVerifyModal, initFingerprint } from './index.js'; // 或 './index'
|
|
2
|
+
import { createMessageVerifyModal, initFingerprint, createReLoginModal } from './index.js'; // 或 './index'
|
|
3
3
|
import { axios } from '@yqg/resource';
|
|
4
4
|
|
|
5
5
|
const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0-950d-6beb776d043f\",\"needValid\":true,\"step\":2,\"message\":\"需要填写验证码\"}";
|
|
@@ -7,51 +7,56 @@ const data = "{\"mobile\":\"188****4035\",\"verifyCodeKey\":\"3f025b33-988e-47c0
|
|
|
7
7
|
const fp = await initFingerprint();
|
|
8
8
|
console.log(fp);
|
|
9
9
|
|
|
10
|
+
const config = {
|
|
11
|
+
"transitional": {
|
|
12
|
+
"silentJSONParsing": true,
|
|
13
|
+
"forcedJSONParsing": true,
|
|
14
|
+
"clarifyTimeoutError": false
|
|
15
|
+
},
|
|
16
|
+
"timeout": 0,
|
|
17
|
+
"xsrfCookieName": "XSRF-TOKEN",
|
|
18
|
+
"xsrfHeaderName": "X-XSRF-TOKEN",
|
|
19
|
+
"maxContentLength": -1,
|
|
20
|
+
"maxBodyLength": -1,
|
|
21
|
+
"headers": {
|
|
22
|
+
"Accept": "application/json, text/plain, */*",
|
|
23
|
+
"X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
|
|
24
|
+
"Content-Type": "application/json"
|
|
25
|
+
},
|
|
26
|
+
"url": "/classification/admin/level/edit",
|
|
27
|
+
"method": "post",
|
|
28
|
+
"dataFormat": "JSON",
|
|
29
|
+
"showRequestData": true,
|
|
30
|
+
"showResponseData": false,
|
|
31
|
+
"showGeneralResponseData": true,
|
|
32
|
+
"headersList": [],
|
|
33
|
+
"requestDataFunc": "\nfunction(formFilterData){\n // 这里写你的处理逻辑\n return {\n ...formFilterData,\n 'classificationLevel': 2 //等级\n }\n}\n",
|
|
34
|
+
"responseDataFunc": "",
|
|
35
|
+
"responseGeneralDataFunc": "function(req, { data, util, window }) {\n return req\n .then((response) => {\n return Promise.resolve({\n status: {\n code: 0,\n }\n })\n })\n .catch((error) => {\n // 检查是否有响应数据\n if (error.response && error.response.data) {\n const responseData = error.response.data;\n const detail = responseData.body?.status?.detail || responseData.status?.detail;\n if (detail) {\n util.message.error(detail);\n } else {\n util.message.error('编辑失败，请重试');\n }\n } else {\n util.message.error('编辑失败，请重试');\n }\n console.error('Error during deletion:', error);\n });\n}",
|
|
36
|
+
"formInstance": {},
|
|
37
|
+
"data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
|
|
38
|
+
"baseURL": "http://localhost:62888"
|
|
39
|
+
};
|
|
10
40
|
createRoot(document.getElementById('root')!).render(
|
|
11
41
|
<>
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
"Accept": "application/json, text/plain, */*",
|
|
33
|
-
"X-Device-Fingerprint": "185fcce88c629725321adf29daa5e444",
|
|
34
|
-
"Content-Type": "application/json",
|
|
35
|
-
"sms-code": "121212",
|
|
36
|
-
"sms-code-key": "212190c7-2f5e-4cc1-82ec-a242c2ab5425"
|
|
37
|
-
},
|
|
38
|
-
"url": "/classification/admin/level/edit",
|
|
39
|
-
"method": "post",
|
|
40
|
-
"dataFormat": "JSON",
|
|
41
|
-
"showRequestData": true,
|
|
42
|
-
"showResponseData": false,
|
|
43
|
-
"showGeneralResponseData": true,
|
|
44
|
-
"headersList": [],
|
|
45
|
-
"requestDataFunc": "\nfunction(formFilterData){\n // 这里写你的处理逻辑\n return {\n ...formFilterData,\n 'classificationLevel': 2 //等级\n }\n}\n",
|
|
46
|
-
"responseDataFunc": "",
|
|
47
|
-
"responseGeneralDataFunc": "function(req, { data, util, window }) {\n return req\n .then((response) => {\n return Promise.resolve({\n status: {\n code: 0,\n }\n })\n })\n .catch((error) => {\n // 检查是否有响应数据\n if (error.response && error.response.data) {\n const responseData = error.response.data;\n const detail = responseData.body?.status?.detail || responseData.status?.detail;\n if (detail) {\n util.message.error(detail);\n } else {\n util.message.error('编辑失败，请重试');\n }\n } else {\n util.message.error('编辑失败，请重试');\n }\n console.error('Error during deletion:', error);\n });\n}",
|
|
48
|
-
"formInstance": {},
|
|
49
|
-
"data": "{\"id\":1,\"classificationName\":\"个人基本概况信息\",\"classificationLevel\":2}",
|
|
50
|
-
"baseURL": "http://localhost:62888"
|
|
51
|
-
},
|
|
52
|
-
lang: 'en',
|
|
53
|
-
http: axios,
|
|
54
|
-
})}>
|
|
55
|
-
Show verify Modal
|
|
56
|
-
</button>
|
|
42
|
+
<button onClick={() => createMessageVerifyModal({
|
|
43
|
+
data,
|
|
44
|
+
config,
|
|
45
|
+
lang: 'en',
|
|
46
|
+
http: axios,
|
|
47
|
+
apiReject: () => {
|
|
48
|
+
},
|
|
49
|
+
apiResolve: () => {
|
|
50
|
+
}
|
|
51
|
+
})}>
|
|
52
|
+
Show verify Modal
|
|
53
|
+
</button>
|
|
54
|
+
<button onClick={() => createReLoginModal({
|
|
55
|
+
goLogin: () => {
|
|
56
|
+
console.log('goLogin');
|
|
57
|
+
},
|
|
58
|
+
lang: 'zh',
|
|
59
|
+
})}>
|
|
60
|
+
Show login Modal
|
|
61
|
+
</button>
|
|
57
62
|
</>);
|
package/src/relogin-modal.tsx
CHANGED
|
@@ -1,20 +1,22 @@
|
|
|
1
1
|
import { useState } from 'react'
|
|
2
2
|
import { Modal, Button } from './compoments/index.js'
|
|
3
|
-
import {
|
|
3
|
+
import { LoginModalConfig } from './utils/type.js';
|
|
4
|
+
import t from './utils/i18n.js'
|
|
4
5
|
|
|
5
|
-
const ReLoginModal = ({ props }: { props:
|
|
6
|
-
|
|
6
|
+
const ReLoginModal = ({ props }: { props: LoginModalConfig }) => {
|
|
7
|
+
const { goLogin, lang } = props || {};
|
|
7
8
|
const [visible, setVisible] = useState(true);
|
|
8
9
|
const onClose = () => {
|
|
9
10
|
setVisible(false);
|
|
11
|
+
goLogin();
|
|
10
12
|
};
|
|
11
13
|
return (
|
|
12
14
|
<Modal visible={visible} onClose={onClose} width={420}>
|
|
13
15
|
<div style={{ fontWeight: 500, fontSize: 20, marginBottom: 24 }}>
|
|
14
|
-
|
|
16
|
+
{t('accountAlert', lang)}
|
|
15
17
|
</div>
|
|
16
18
|
<div style={{ color: '#222', fontSize: 16, marginBottom: 40, lineHeight: '24px' }}>
|
|
17
|
-
|
|
19
|
+
{t('alertContent', lang)}
|
|
18
20
|
</div>
|
|
19
21
|
<div style={{ display: 'flex', justifyContent: 'center' }}>
|
|
20
22
|
<Button
|
|
@@ -22,16 +24,15 @@ const ReLoginModal = ({ props }: { props: ModalConfig }) => {
|
|
|
22
24
|
background: '#1677ff',
|
|
23
25
|
color: '#fff',
|
|
24
26
|
border: 'none',
|
|
25
|
-
width:
|
|
26
|
-
height:
|
|
27
|
-
fontSize:
|
|
28
|
-
fontWeight: 500,
|
|
27
|
+
width: 80,
|
|
28
|
+
height: 36,
|
|
29
|
+
fontSize: 14,
|
|
29
30
|
borderRadius: 8,
|
|
30
31
|
boxShadow: '0 2px 8px rgba(22,119,255,0.08)',
|
|
31
32
|
}}
|
|
32
33
|
onClick={onClose}
|
|
33
34
|
>
|
|
34
|
-
|
|
35
|
+
{t('ok', lang)}
|
|
35
36
|
</Button>
|
|
36
37
|
</div>
|
|
37
38
|
</Modal>
|
package/src/utils/type.ts
CHANGED
|
@@ -8,7 +8,7 @@ export type ModalConfig = {
|
|
|
8
8
|
};
|
|
9
9
|
[key: string]: unknown;
|
|
10
10
|
};
|
|
11
|
-
lang
|
|
11
|
+
lang?: 'zh' | 'en' | 'id';
|
|
12
12
|
http: {
|
|
13
13
|
(params: object): Promise<unknown>;
|
|
14
14
|
defaults: {
|
|
@@ -20,4 +20,11 @@ export type ModalConfig = {
|
|
|
20
20
|
}
|
|
21
21
|
};
|
|
22
22
|
api?: string;
|
|
23
|
+
apiReject: any;
|
|
24
|
+
apiResolve: any;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
export type LoginModalConfig = {
|
|
28
|
+
goLogin: () => void;
|
|
29
|
+
lang?: 'zh' | 'en' | 'id';
|
|
23
30
|
}
|
package/src/verify-modal.tsx
CHANGED
|
@@ -12,7 +12,7 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
|
|
|
12
12
|
const [captchaImage, setCaptchaImage] = useState<string>('');
|
|
13
13
|
const [captchCode, setCaptchCode] = useState<string>('');
|
|
14
14
|
const [captchaKey, setCaptchaKey] = useState<string>('');
|
|
15
|
-
const { data,
|
|
15
|
+
const { data, http, lang, api = '/admin/sms/send', config, apiResolve, apiReject } = props || {};
|
|
16
16
|
const dataObj = JSON.parse(data || '{}');
|
|
17
17
|
const { mobile, verifyCodeKey } = dataObj || {};
|
|
18
18
|
|
|
@@ -25,10 +25,11 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
|
|
|
25
25
|
const image = Api.getCaptchaImgUrl(key) as unknown;
|
|
26
26
|
setCaptchaImage(image as string);
|
|
27
27
|
}
|
|
28
|
-
} catch (err) {
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
28
|
+
} catch (err) {
|
|
29
|
+
const msg =
|
|
30
|
+
typeof err === 'object' && err !== null && 'message' in err
|
|
31
|
+
? (err as { message: string }).message
|
|
32
|
+
: String(err);
|
|
32
33
|
message.error(msg as React.ReactNode);
|
|
33
34
|
}
|
|
34
35
|
}
|
|
@@ -60,7 +61,9 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
|
|
|
60
61
|
return;
|
|
61
62
|
}
|
|
62
63
|
message.success(t('sendSuccess', lang));
|
|
64
|
+
// 重置倒计时、验证码
|
|
63
65
|
setCountdown(60);
|
|
66
|
+
setOtp('');
|
|
64
67
|
}
|
|
65
68
|
|
|
66
69
|
return (
|
|
@@ -81,24 +84,29 @@ const CreateMessageVerifyModal = ({ props }: { props: ModalConfig }) => {
|
|
|
81
84
|
onChange={async (val) => {
|
|
82
85
|
setOtp(val);
|
|
83
86
|
if (val.length === 6) {
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
87
|
+
try {
|
|
88
|
+
const res = await http({
|
|
89
|
+
...config,
|
|
90
|
+
headers: {
|
|
91
|
+
...http.defaults.headers.common,
|
|
92
|
+
'sms-code': val,
|
|
93
|
+
'sms-code-key': verifyCodeKey,
|
|
94
|
+
'Content-Type': config.headers['Content-Type'],
|
|
95
|
+
}
|
|
96
|
+
})
|
|
97
|
+
console.log('res', res);
|
|
98
|
+
if (!res) {
|
|
99
|
+
message.error('验证失败');
|
|
100
|
+
apiReject();
|
|
101
|
+
} else {
|
|
102
|
+
apiResolve(res);
|
|
91
103
|
}
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
// } else {
|
|
99
|
-
// message.success(t('verifySuccess', lang));
|
|
100
|
-
// setVisible(false);
|
|
101
|
-
// }
|
|
104
|
+
setVisible(false);
|
|
105
|
+
} catch (error) {
|
|
106
|
+
message.error('验证失败');
|
|
107
|
+
apiReject(error);
|
|
108
|
+
setVisible(false);
|
|
109
|
+
}
|
|
102
110
|
}
|
|
103
111
|
}} />
|
|
104
112
|
<Button
|