@antv/dumi-theme-antv
Version:
AntV website theme based on dumi2.
185 lines (181 loc) • 6.19 kB
JavaScript
import { NC_SCENE } from "../utils";
import React, { forwardRef, useEffect, useImperativeHandle, useRef } from 'react'; // 图形验证码资源文件
import { Form, Input } from 'antd';
import cls from 'classnames';
import { useIntl } from 'dumi';
import "./index.less";
// 添加 window.noCaptcha 的类型声明
// 图形验证码资源文件
var NC_CSS_SOURCE = 'https://g.alicdn.com/sd/ncpc/nc.css?t=1514534550478';
var NC_SCRIPT_SOURCE = 'https://g.alicdn.com/sd/ncpc/nc.js?t=1514534550478';
var NC_NAME = 'NoCaptcha';
var Captcha = /*#__PURE__*/forwardRef(function (_ref, ref) {
var _ref$ncName = _ref.ncName,
ncName = _ref$ncName === void 0 ? NC_NAME : _ref$ncName,
_ref$scene = _ref.scene,
scene = _ref$scene === void 0 ? NC_SCENE.login : _ref$scene,
form = _ref.form,
_ref$onCallback = _ref.onCallback,
onCallback = _ref$onCallback === void 0 ? function () {} : _ref$onCallback,
className = _ref.className;
var _useIntl = useIntl(),
formatMessage = _useIntl.formatMessage,
locale = _useIntl.locale;
var ncInstance = useRef(null);
function reset() {
var _ncInstance$current;
form.setFieldsValue({
csessionid: '',
sig: '',
token: '',
scene: '',
captcha: null
});
(_ncInstance$current = ncInstance.current) === null || _ncInstance$current === void 0 || _ncInstance$current.reset(1);
}
function getValues() {
return form.getFieldsValue(['csessionid', 'sig', 'token', 'scene', 'captcha']);
}
useImperativeHandle(ref, function () {
return {
resetCaptcha: function resetCaptcha() {
reset();
},
getCaptchaValues: function getCaptchaValues() {
return getValues();
}
};
});
function loadCaptcha() {
var _document$getElementB, _ncInstance$current2;
if (!ncInstance.current) {
/* eslint no-undef:0 */
/* eslint new-cap:0 */
ncInstance.current = new window.noCaptcha();
window[ncName] = ncInstance.current;
}
var nc_appkey = 'FFFF000000000179A3AD';
var nc_token = [nc_appkey, new Date().getTime(), Math.random()].join(':');
var nc_scene = scene;
var nc_customWidth = ((_document$getElementB = document.getElementById("captcha_render_id_".concat(ncName))) === null || _document$getElementB === void 0 ? void 0 : _document$getElementB.offsetWidth) || 300;
var nc_option = {
renderTo: "#captcha_render_id_".concat(ncName),
appkey: nc_appkey,
scene: nc_scene,
token: nc_token,
language: locale ? 'en' : 'cn',
customWidth: nc_customWidth,
callback: function callback(data) {
// 校验成功回调
var setFieldsValue = form.setFieldsValue;
setFieldsValue({
csessionid: data.csessionid,
sig: data.sig,
token: nc_token,
scene: nc_scene,
captcha: 'true'
});
onCallback === null || onCallback === void 0 || onCallback();
}
};
(_ncInstance$current2 = ncInstance.current) === null || _ncInstance$current2 === void 0 || _ncInstance$current2.init(nc_option);
var lang = {
_startTEXT: formatMessage({
id: 'login.captcha.drag'
}),
_yesTEXT: formatMessage({
id: 'login.captcha.success'
}),
_Loading: formatMessage({
id: 'login.captcha.loading'
}),
_error300: formatMessage({
id: 'login.captcha.error.wrong'
}) + ' <a href="javascript:__nc.reset()">' + formatMessage({
id: 'login.captcha.error.refresh'
}) + '</a>',
_errorNetwork: formatMessage({
id: 'login.captcha.error.network'
}) + ' <a href="javascript:__nc.reset()">' + formatMessage({
id: 'login.captcha.error.refresh'
}) + '</a>'
};
if (locale) {
var _ncInstance$current3;
(_ncInstance$current3 = ncInstance.current) === null || _ncInstance$current3 === void 0 || _ncInstance$current3.upLang('en', lang);
} else {
var _ncInstance$current4;
(_ncInstance$current4 = ncInstance.current) === null || _ncInstance$current4 === void 0 || _ncInstance$current4.upLang('cn', lang);
}
}
useEffect(function () {
var script = document.createElement('script');
script.src = NC_SCRIPT_SOURCE;
var link = document.createElement('link');
script.async = true;
link.href = NC_CSS_SOURCE;
link.rel = 'stylesheet';
link.type = 'text/css';
// 如果资源没有加载过，则添加到head中
document.head.appendChild(link);
if (!window.noCaptcha) {
document.head.appendChild(script);
script.onload = function () {
loadCaptcha();
};
} else {
loadCaptcha();
}
return function () {
try {
script.remove();
link.remove();
if (script.parentNode === document.body) {
document.body.removeChild(script);
}
if (link.parentNode === document.body) {
document.body.removeChild(link);
}
} catch (e) {
// ignore error
}
};
}, []);
return /*#__PURE__*/React.createElement("div", {
className: cls('captcha', className)
}, /*#__PURE__*/React.createElement("div", {
id: "captcha_render_id_".concat(ncName)
}), /*#__PURE__*/React.createElement(Form.Item, {
name: "csessionid",
noStyle: true
}, /*#__PURE__*/React.createElement(Input, {
type: "hidden"
})), /*#__PURE__*/React.createElement(Form.Item, {
name: "sig",
noStyle: true
}, /*#__PURE__*/React.createElement(Input, {
type: "hidden"
})), /*#__PURE__*/React.createElement(Form.Item, {
name: "token",
noStyle: true
}, /*#__PURE__*/React.createElement(Input, {
type: "hidden"
})), /*#__PURE__*/React.createElement(Form.Item, {
name: "scene",
noStyle: true
}, /*#__PURE__*/React.createElement(Input, {
type: "hidden"
})), /*#__PURE__*/React.createElement(Form.Item, {
name: "captcha",
rules: [{
required: true,
message: formatMessage({
id: 'login.captcha.required'
})
}],
className: "captcha-tip"
}, /*#__PURE__*/React.createElement(Input, {
type: "hidden"
})));
});
export default Captcha;