feat: rebuild frontend with react
This commit is contained in:
liumangmang
@@ -0,0 +1,179 @@
|
||||
import { useEffect, useState } from 'react'
|
||||
import type { Connection, ConnectionCreateRequest } from '../types'
|
||||
import Modal from './Modal'
|
||||
|
||||
const emptyForm: ConnectionCreateRequest = {
|
||||
name: '',
|
||||
host: '',
|
||||
port: 22,
|
||||
username: 'root',
|
||||
authType: 'PASSWORD',
|
||||
password: '',
|
||||
privateKey: '',
|
||||
passphrase: '',
|
||||
setupMode: 'NONE',
|
||||
bootstrapPassword: '',
|
||||
}
|
||||
|
||||
export default function ConnectionModal({
|
||||
open,
|
||||
connection,
|
||||
onClose,
|
||||
onSubmit,
|
||||
}: {
|
||||
open: boolean
|
||||
connection?: Connection | null
|
||||
onClose: () => void
|
||||
onSubmit: (payload: ConnectionCreateRequest) => Promise<void>
|
||||
}) {
|
||||
const [form, setForm] = useState<ConnectionCreateRequest>(emptyForm)
|
||||
const [submitting, setSubmitting] = useState(false)
|
||||
const [error, setError] = useState<string | null>(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (!open) return
|
||||
if (connection) {
|
||||
setForm({
|
||||
name: connection.name,
|
||||
host: connection.host,
|
||||
port: connection.port,
|
||||
username: connection.username,
|
||||
authType: connection.authType,
|
||||
password: '',
|
||||
privateKey: '',
|
||||
passphrase: '',
|
||||
setupMode: 'NONE',
|
||||
bootstrapPassword: '',
|
||||
})
|
||||
} else {
|
||||
setForm(emptyForm)
|
||||
}
|
||||
setError(null)
|
||||
}, [connection, open])
|
||||
|
||||
if (!open) return null
|
||||
|
||||
const useBootstrap = form.setupMode === 'PASSWORD_BOOTSTRAP'
|
||||
const isPassword = form.authType === 'PASSWORD'
|
||||
|
||||
async function handleSave() {
|
||||
setSubmitting(true)
|
||||
setError(null)
|
||||
try {
|
||||
await onSubmit({
|
||||
...form,
|
||||
port: Number(form.port || 22),
|
||||
})
|
||||
onClose()
|
||||
} catch (err) {
|
||||
const message =
|
||||
(err as { response?: { data?: { message?: string; error?: string } } }).response?.data?.message || '保存连接失败'
|
||||
setError(message)
|
||||
} finally {
|
||||
setSubmitting(false)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<Modal
|
||||
title={connection ? '编辑 SSH 连接' : '新建 SSH 连接'}
|
||||
onClose={onClose}
|
||||
maxWidth="max-w-2xl"
|
||||
footer={
|
||||
<>
|
||||
<button className="rounded-xl bg-slate-700 px-4 py-2 text-sm text-slate-200 transition hover:bg-slate-600" onClick={onClose}>
|
||||
取消
|
||||
</button>
|
||||
<button
|
||||
className="rounded-xl bg-blue-600 px-4 py-2 text-sm text-white transition hover:bg-blue-500 disabled:opacity-60"
|
||||
disabled={submitting}
|
||||
onClick={handleSave}
|
||||
>
|
||||
{submitting ? '保存中...' : connection ? '保存修改' : '保存并连接'}
|
||||
</button>
|
||||
</>
|
||||
}
|
||||
>
|
||||
<div className="grid gap-4 md:grid-cols-2">
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">连接名称</span>
|
||||
<input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.name} onChange={(e) => setForm((prev) => ({ ...prev, name: e.target.value }))} />
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">主机 IP</span>
|
||||
<input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.host} onChange={(e) => setForm((prev) => ({ ...prev, host: e.target.value }))} />
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">端口</span>
|
||||
<input type="number" className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.port ?? 22} onChange={(e) => setForm((prev) => ({ ...prev, port: Number(e.target.value) }))} />
|
||||
</label>
|
||||
<label className="space-y-2">
|
||||
<span className="text-sm text-slate-300">用户名</span>
|
||||
<input className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white" value={form.username} onChange={(e) => setForm((prev) => ({ ...prev, username: e.target.value }))} />
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div className="mt-5 space-y-4 border-t border-slate-800 pt-5">
|
||||
<div className="flex flex-wrap gap-3">
|
||||
<button
|
||||
className={`rounded-xl border px-4 py-2 text-sm ${isPassword ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
|
||||
onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'PASSWORD_BOOTSTRAP' : 'NONE' }))}
|
||||
>
|
||||
密码认证
|
||||
</button>
|
||||
<button
|
||||
className={`rounded-xl border px-4 py-2 text-sm ${form.authType === 'PRIVATE_KEY' ? 'border-blue-500 bg-blue-500/10 text-blue-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
|
||||
onClick={() => setForm((prev) => ({ ...prev, authType: 'PRIVATE_KEY', setupMode: 'NONE' }))}
|
||||
>
|
||||
私钥认证
|
||||
</button>
|
||||
<button
|
||||
className={`rounded-xl border px-4 py-2 text-sm ${useBootstrap ? 'border-emerald-500 bg-emerald-500/10 text-emerald-300' : 'border-slate-700 bg-slate-900 text-slate-300'}`}
|
||||
onClick={() => setForm((prev) => ({ ...prev, authType: 'PASSWORD', setupMode: prev.setupMode === 'PASSWORD_BOOTSTRAP' ? 'NONE' : 'PASSWORD_BOOTSTRAP' }))}
|
||||
>
|
||||
一键免密部署
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{form.authType === 'PASSWORD' ? (
|
||||
<label className="block space-y-2">
|
||||
<span className="text-sm text-slate-300">{useBootstrap ? '引导密码' : '密码'}</span>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white"
|
||||
value={useBootstrap ? form.bootstrapPassword ?? '' : form.password ?? ''}
|
||||
onChange={(e) =>
|
||||
setForm((prev) =>
|
||||
useBootstrap ? { ...prev, bootstrapPassword: e.target.value } : { ...prev, password: e.target.value },
|
||||
)
|
||||
}
|
||||
/>
|
||||
</label>
|
||||
) : (
|
||||
<>
|
||||
<label className="block space-y-2">
|
||||
<span className="text-sm text-slate-300">私钥内容</span>
|
||||
<textarea
|
||||
rows={6}
|
||||
className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 font-mono text-sm text-white"
|
||||
value={form.privateKey ?? ''}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, privateKey: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
<label className="block space-y-2">
|
||||
<span className="text-sm text-slate-300">私钥口令</span>
|
||||
<input
|
||||
type="password"
|
||||
className="w-full rounded-xl border border-slate-700 bg-slate-950 px-4 py-3 text-white"
|
||||
value={form.passphrase ?? ''}
|
||||
onChange={(e) => setForm((prev) => ({ ...prev, passphrase: e.target.value }))}
|
||||
/>
|
||||
</label>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{error ? <div className="mt-4 rounded-xl border border-red-500/20 bg-red-500/10 px-4 py-3 text-sm text-red-300">{error}</div> : null}
|
||||
</Modal>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user