111 lines
4.0 KiB
TypeScript
111 lines
4.0 KiB
TypeScript
import './connection.css'
|
|
import {
|
|
useId,
|
|
Button,
|
|
FieldProps,
|
|
useToastController,
|
|
Toast,
|
|
ToastTitle,
|
|
ToastIntent,
|
|
Toaster
|
|
} from "@fluentui/react-components";
|
|
import {Field, Input} from "@fluentui/react-components";
|
|
import {useNavigate} from "react-router-dom";
|
|
import {useState} from "react";
|
|
import {Dial} from "../../api";
|
|
|
|
|
|
const Connection = (props: Partial<FieldProps>) => {
|
|
|
|
const toasterId = useId("toaster");
|
|
const {dispatchToast} = useToastController(toasterId);
|
|
const navigate = useNavigate();
|
|
const [value, setValue] = useState<{ name: string, endpoint: string, access: string, key: string }>({
|
|
name: '',
|
|
endpoint: '',
|
|
access: '',
|
|
key: ''
|
|
})
|
|
|
|
function test() {
|
|
const val = JSON.stringify(value);
|
|
console.log('[DEBUG] connection.test: value =', val)
|
|
Dial<string>("/api/connection/test", value).then(res => {
|
|
if (res.status === 200) {
|
|
dispatchToast(
|
|
<Toast>
|
|
<ToastTitle>连接成功!</ToastTitle>
|
|
</Toast>,
|
|
{position: "top-end", intent: "success"}
|
|
)
|
|
}
|
|
})
|
|
}
|
|
|
|
return <div className='connection-container'>
|
|
<div className='connection-form'>
|
|
<div className='connection-form-field'>
|
|
<Field
|
|
label="name"
|
|
validationState="success"
|
|
validationMessage="This is a success message."
|
|
{...props}
|
|
>
|
|
<Input placeholder='名称 (example: 测试S3-minio)' value={value.name} onChange={(e) => {
|
|
setValue({...value, name: e.target.value});
|
|
}}/>
|
|
</Field>
|
|
</div>
|
|
<div className='connection-form-field'>
|
|
<Field
|
|
label="endpoint"
|
|
validationState="success"
|
|
validationMessage="This is a success message."
|
|
{...props}
|
|
>
|
|
<Input placeholder='地址 (example: https://ip_or_server-name:port)' value={value.endpoint}
|
|
onChange={(e) => {
|
|
setValue({...value, endpoint: e.target.value});
|
|
}}/>
|
|
</Field>
|
|
</div>
|
|
<div className='connection-form-field'>
|
|
<Field
|
|
label="secret access"
|
|
validationState="success"
|
|
validationMessage="This is a success message."
|
|
{...props}
|
|
>
|
|
<Input placeholder='' value={value.access} onChange={(e) => {
|
|
setValue({...value, access: e.target.value});
|
|
}}/>
|
|
</Field>
|
|
</div>
|
|
<div className='connection-form-field'>
|
|
<Field
|
|
label="secret key"
|
|
validationState="success"
|
|
validationMessage="This is a success message."
|
|
{...props}
|
|
>
|
|
<Input placeholder='' value={value.key} onChange={(e) => {
|
|
setValue({...value, key: e.target.value});
|
|
}}/>
|
|
</Field>
|
|
</div>
|
|
<div className='connection-form-field connection-form-field-actions'>
|
|
<Button appearance='transparent' onClick={() => test()}>测试连接</Button>
|
|
<div style={{marginLeft: 'auto'}}>
|
|
<Button style={{marginRight: '20px'}} className='connection-form-field-actions-cancel'
|
|
onClick={() => {
|
|
navigate("/")
|
|
}}>取消</Button>
|
|
<Button className='connection-form-field-actions-confirm' appearance='primary'>新建</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Toaster toasterId={toasterId}/>
|
|
</div>
|
|
}
|
|
|
|
export default Connection; |