diff --git a/spug_web/src/pages/host/Form.js b/spug_web/src/pages/host/Form.js index 3a8a9a3..32971f6 100644 --- a/spug_web/src/pages/host/Form.js +++ b/spug_web/src/pages/host/Form.js @@ -6,51 +6,75 @@ import React, { useState, useEffect } from 'react'; import { observer } from 'mobx-react'; import { ExclamationCircleOutlined, UploadOutlined } from '@ant-design/icons'; -import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message } from 'antd'; +import { Modal, Form, Input, TreeSelect, Button, Upload, Alert, message, Select } from 'antd'; import { http, X_TOKEN } from 'libs'; import store from './store'; import styles from './index.module.less'; +const { Option } = Select; + export default observer(function () { const [form] = Form.useForm(); const [loading, setLoading] = useState(false); const [uploading, setUploading] = useState(false); const [fileList, setFileList] = useState([]); + const [connectType, setConnectType] = useState('ssh'); + const [showPasswordField, setShowPasswordField] = useState(false); + + function handleConnectTypeChange(value) { + setConnectType(value); + setShowPasswordField(value === 'telnet'); + if (value === 'telnet') { + setFileList([]); + } + } useEffect(() => { if (store.record.pkey) { setFileList([{uid: '0', name: '独立密钥', data: store.record.pkey}]) } + if (store.record.connect_type) { + setConnectType(store.record.connect_type); + setShowPasswordField(store.record.connect_type === 'telnet'); + } }, []) function handleSubmit() { setLoading(true); const formData = form.getFieldsValue(); formData['id'] = store.record.id; + formData['connect_type'] = connectType; const file = fileList[0]; if (file && file.data) formData['pkey'] = file.data; + + if (connectType === 'telnet' && !formData.password && !showPasswordField) { + setShowPasswordField(true); + setLoading(false); + return; + } + http.post('/api/host/', formData) .then(res => { if (res === 'auth fail') { - setLoading(false) + setLoading(false); if (formData.pkey) { - message.error('独立密钥认证失败') + message.error(connectType === 'ssh' ? '独立密钥认证失败' : 'Telnet认证失败'); } else { const onChange = v => formData.password = v; Modal.confirm({ icon: , - title: '首次验证请输入密码', + title: connectType === 'ssh' ? '首次验证请输入密码' : 'Telnet认证', content: , onOk: () => handleConfirm(formData), - }) + }); } } else { message.success('验证成功'); store.formVisible = false; store.fetchRecords(); - store.fetchExtend(res.id) + store.fetchExtend(res.id); } - }, () => setLoading(false)) + }, () => setLoading(false)); } function handleConfirm(formData) { @@ -117,27 +141,42 @@ export default observer(function () { - - + + - + + + + - - + + + + + {connectType === 'ssh' && ( + + + {fileList.length === 0 ? : null} + - - - - {fileList.length === 0 ? : null} - - + )} + {connectType === 'telnet' && ( + + + + )} - +