import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import CryptoJS from 'crypto-js'
|
import { Input, Modal, Form, notification } from 'antd'
|
import { EditOutlined, DeleteOutlined } from '@ant-design/icons'
|
|
import './index.scss'
|
|
const { TextArea } = Input
|
const { confirm } = Modal
|
|
class KeyInterface extends Component {
|
static propTpyes = {
|
type: PropTypes.string,
|
onChange: PropTypes.func
|
}
|
|
state = {
|
url: '',
|
key: '',
|
visible: false,
|
setting: null
|
}
|
|
componentDidMount() {
|
const { value, type } = this.props
|
|
if (value) {
|
let content = value
|
try {
|
content = JSON.parse(content)
|
} catch (e) {
|
content = {}
|
}
|
|
this.setState({setting: content.message || null, url: content.url || ''})
|
}
|
|
if (type === 'develop') {
|
this.setState({key: window.GLOB.appkey.slice(-16)})
|
}
|
}
|
|
editKey = () => {
|
let _setting = this.state.setting
|
|
if (this.state.key && _setting && typeof(_setting) === 'string') {
|
_setting = this.decrypt(this.state.key, _setting)
|
|
if (!_setting) {
|
notification.warning({
|
top: 92,
|
message: '信息解析失败!',
|
duration: 5
|
})
|
this.props.onChange('')
|
}
|
}
|
|
this.setState({visible: true, setting: _setting || {ssoInterface: 'http://sso.mk9h.cn/cloud/webapi/dostars'}})
|
}
|
|
decrypt = (token, value) => {
|
let setting = null
|
try {
|
const key = CryptoJS.enc.Utf8.parse(token)
|
const iv = CryptoJS.enc.Utf8.parse('mksoft')
|
|
let encryptedHexStr = CryptoJS.enc.Hex.parse(value)
|
let _srcs = CryptoJS.enc.Base64.stringify(encryptedHexStr)
|
let decrypt = CryptoJS.AES.decrypt(_srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
|
let decryptedStr = decrypt.toString(CryptoJS.enc.Utf8)
|
setting = decryptedStr.toString()
|
|
setting = JSON.parse(window.decodeURIComponent(window.atob(setting)))
|
} catch (e) {
|
setting = null
|
}
|
|
return setting
|
}
|
|
handleConfirm = () => {
|
this.props.form.validateFieldsAndScroll((err, values) => {
|
if (err) return
|
|
if (values.apptoken) {
|
let key = values.apptoken.slice(-16)
|
let _setting = this.state.setting
|
if (_setting && typeof(_setting) === 'string') {
|
_setting = this.decrypt(key, _setting)
|
|
if (!_setting) {
|
const that = this
|
confirm({
|
title: '信息解析失败!',
|
content: '点击确定会清除配置信息，点击取消可重新输入appkey。',
|
onOk() {
|
that.setState({key: key, setting: {}, url: ''})
|
that.props.onChange('')
|
},
|
onCancel() {}
|
})
|
return
|
}
|
}
|
this.setState({key: key, setting: _setting})
|
return
|
}
|
|
if (!/\/dostars$/.test(values.interface)) {
|
notification.warning({
|
top: 92,
|
message: '接口地址请填写dostars接口!',
|
duration: 5
|
})
|
return
|
} else if (values.ssoInterface && !/\/dostars$/.test(values.ssoInterface)) {
|
notification.warning({
|
top: 92,
|
message: 'sso地址请填写dostars接口!',
|
duration: 5
|
})
|
return
|
}
|
|
let _values = window.btoa(window.encodeURIComponent(JSON.stringify(values)))
|
|
const key = CryptoJS.enc.Utf8.parse(this.state.key)
|
const iv = CryptoJS.enc.Utf8.parse('mksoft')
|
|
let srcs = CryptoJS.enc.Utf8.parse(_values)
|
let encrypted = CryptoJS.AES.encrypt(srcs, key, { iv: iv, mode: CryptoJS.mode.CBC, padding: CryptoJS.pad.Pkcs7 })
|
let message = encrypted.ciphertext.toString()
|
let content = JSON.stringify({message: message, url: values.interface})
|
|
this.props.onChange(content)
|
|
this.setState({setting: message, url: values.interface, visible: false})
|
|
if (this.props.type !== 'develop') {
|
this.setState({key: ''})
|
}
|
})
|
}
|
|
delKey = () => {
|
const { url } = this.state
|
const { type } = this.props
|
|
if (!url) return
|
|
if (type === 'develop') {
|
this.setState({setting: null, url: ''})
|
} else {
|
this.setState({key: '', setting: null, url: ''})
|
}
|
|
this.props.onChange('')
|
}
|
|
cancel = () => {
|
const { type } = this.props
|
|
if (type !== 'develop') {
|
this.setState({key: ''})
|
}
|
this.setState({visible: false})
|
}
|
|
render() {
|
const { getFieldDecorator } = this.props.form
|
const { url, visible, setting, key } = this.state
|
|
return (
|
<div className="mk-key-wrap">
|
<TextArea value={url} rows={2} readOnly={true}/>
|
<div className="mk-key-edit">
|
<EditOutlined onClick={this.editKey}/>
|
<DeleteOutlined className={!url ? 'disable' : ''} onClick={this.delKey}/>
|
</div>
|
<Modal
|
wrapClassName='mk-key-modal'
|
visible={visible}
|
closable={false}
|
maskClosable={false}
|
width={650}
|
onOk={this.handleConfirm}
|
onCancel={this.cancel}
|
destroyOnClose
|
>
|
{key && setting ?
|
<Form>
|
<Form.Item label="接口地址">
|
{getFieldDecorator('interface', {
|
initialValue: setting.interface || 'http://******/webapi/dostars',
|
rules: [
|
{
|
required: true,
|
message: '请输入接口地址!'
|
},
|
{
|
pattern: /^[0-9a-zA-Z:_./]+$/,
|
message: '只可使用英文、数字以及:_./'
|
}
|
]
|
})(<TextArea placeholder="http://******/webapi/dostars" rows={2}/>)}
|
</Form.Item>
|
<Form.Item label="sso地址">
|
{getFieldDecorator('ssoInterface', {
|
initialValue: setting.ssoInterface || '',
|
rules: [
|
{
|
pattern: /^[0-9a-zA-Z:_./]+$/,
|
message: '只可使用英文、数字以及:_./'
|
}
|
]
|
})(<TextArea placeholder="http://sso.mk9h.cn/cloud/webapi/dostars" rows={2}/>)}
|
</Form.Item>
|
<Form.Item label="appkey">
|
{getFieldDecorator('appkey', {
|
initialValue: setting.appkey || '',
|
rules: [
|
{
|
required: true,
|
message: '请输入appkey!'
|
},
|
{
|
pattern: /^[0-9a-zA-Z]+$/,
|
message: '只可输入英文及数字。'
|
},
|
{
|
min: 16,
|
message: '不可小于16位！'
|
}
|
]
|
})(<Input placeholder="请输入目标系统appkey" autoComplete="off" />)}
|
</Form.Item>
|
<Form.Item label="用户名">
|
{getFieldDecorator('username', {
|
initialValue: setting.username,
|
rules: [
|
{
|
required: true,
|
message: '请输入用户名!'
|
}
|
]
|
})(<Input placeholder="请输入用户名" autoComplete="off" />)}
|
</Form.Item>
|
<Form.Item label="密码">
|
{getFieldDecorator('password', {
|
initialValue: setting.password,
|
rules: [
|
{
|
required: true,
|
message: '请输入密码!'
|
}
|
]
|
})(<Input.Password placeholder="请输入密码" />)}
|
</Form.Item>
|
<Form.Item label="公钥">
|
{getFieldDecorator('publicKey', {
|
initialValue: setting.publicKey,
|
rules: [
|
{
|
required: true,
|
message: '请输入公钥!'
|
}
|
]
|
})(<Input.Password placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
<Form.Item label="私钥">
|
{getFieldDecorator('privateKey', {
|
initialValue: setting.privateKey,
|
rules: [
|
{
|
required: true,
|
message: '请输入私钥!'
|
}
|
]
|
})(<Input.Password placeholder={''} autoComplete="off" />)}
|
</Form.Item>
|
</Form> : null}
|
{!key ? <Form style={{marginTop: '20px', marginBottom: '50px'}}>
|
<Form.Item label="appkey">
|
{getFieldDecorator('apptoken', {
|
initialValue: '',
|
rules: [
|
{
|
required: true,
|
message: '请输入正式系统appkey!'
|
},
|
{
|
pattern: /^[0-9a-zA-Z]+$/,
|
message: '只可输入英文及数字。'
|
},
|
{
|
min: 16,
|
message: '不可小于16位！'
|
}
|
]
|
})(<Input placeholder="请输入正式系统appkey" autoComplete="off" />)}
|
</Form.Item>
|
</Form> : null}
|
</Modal>
|
</div>
|
)
|
}
|
}
|
|
export default Form.create()(KeyInterface)
|
