Support deploying one certificate to multiple SSH hosts, and support deploying multiple certificates to one SSH host.
This commit is contained in:
yoan
120
ui/src/components/certimate/AccessGroupEdit.tsx
Normal file
120
ui/src/components/certimate/AccessGroupEdit.tsx
Normal file
@@ -0,0 +1,120 @@
|
||||
import { cn } from "@/lib/utils";
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
DialogTrigger,
|
||||
} from "../ui/dialog";
|
||||
|
||||
import { z } from "zod";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
import {
|
||||
Form,
|
||||
FormControl,
|
||||
FormField,
|
||||
FormItem,
|
||||
FormLabel,
|
||||
FormMessage,
|
||||
} from "../ui/form";
|
||||
import { Input } from "../ui/input";
|
||||
import { Button } from "../ui/button";
|
||||
import { useConfig } from "@/providers/config";
|
||||
import { update } from "@/repository/access_group";
|
||||
import { ClientResponseError } from "pocketbase";
|
||||
import { PbErrorData } from "@/domain/base";
|
||||
import { useState } from "react";
|
||||
|
||||
type AccessGroupEditProps = {
|
||||
className?: string;
|
||||
trigger: React.ReactNode;
|
||||
};
|
||||
|
||||
const AccessGroupEdit = ({ className, trigger }: AccessGroupEditProps) => {
|
||||
const { reloadAccessGroups } = useConfig();
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
const formSchema = z.object({
|
||||
name: z.string().min(1).max(64),
|
||||
});
|
||||
|
||||
const form = useForm<z.infer<typeof formSchema>>({
|
||||
resolver: zodResolver(formSchema),
|
||||
defaultValues: {
|
||||
name: "",
|
||||
},
|
||||
});
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
try {
|
||||
await update({
|
||||
name: data.name,
|
||||
});
|
||||
|
||||
// 更新本地状态
|
||||
reloadAccessGroups();
|
||||
|
||||
setOpen(false);
|
||||
} catch (e) {
|
||||
const err = e as ClientResponseError;
|
||||
|
||||
Object.entries(err.response.data as PbErrorData).forEach(
|
||||
([key, value]) => {
|
||||
form.setError(key as keyof z.infer<typeof formSchema>, {
|
||||
type: "manual",
|
||||
message: value.message,
|
||||
});
|
||||
}
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog onOpenChange={setOpen} open={open}>
|
||||
<DialogTrigger asChild className={cn(className)}>
|
||||
{trigger}
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[600px] w-full dark:text-stone-200">
|
||||
<DialogHeader>
|
||||
<DialogTitle>添加分组</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="container py-3">
|
||||
<Form {...form}>
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
console.log(e);
|
||||
e.stopPropagation();
|
||||
form.handleSubmit(onSubmit)(e);
|
||||
}}
|
||||
className="space-y-8"
|
||||
>
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="name"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel>组名</FormLabel>
|
||||
<FormControl>
|
||||
<Input placeholder="请输入组名" {...field} type="text" />
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<div className="flex justify-end">
|
||||
<Button type="submit">保存</Button>
|
||||
</div>
|
||||
</form>
|
||||
</Form>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
export default AccessGroupEdit;
|
||||
@@ -1,4 +1,9 @@
|
||||
import { Access, accessFormType, getUsageByConfigType, SSHConfig } from "@/domain/access";
|
||||
import {
|
||||
Access,
|
||||
accessFormType,
|
||||
getUsageByConfigType,
|
||||
SSHConfig,
|
||||
} from "@/domain/access";
|
||||
import { useConfig } from "@/providers/config";
|
||||
import { zodResolver } from "@hookform/resolvers/zod";
|
||||
import { useForm } from "react-hook-form";
|
||||
@@ -19,6 +24,17 @@ import { ClientResponseError } from "pocketbase";
|
||||
import { PbErrorData } from "@/domain/base";
|
||||
import { readFileContent } from "@/lib/file";
|
||||
import { useRef, useState } from "react";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "../ui/select";
|
||||
import { cn } from "@/lib/utils";
|
||||
import AccessGroupEdit from "./AccessGroupEdit";
|
||||
import { Plus } from "lucide-react";
|
||||
import { updateById } from "@/repository/access_group";
|
||||
|
||||
const AccessSSHForm = ({
|
||||
data,
|
||||
@@ -27,12 +43,19 @@ const AccessSSHForm = ({
|
||||
data?: Access;
|
||||
onAfterReq: () => void;
|
||||
}) => {
|
||||
const { addAccess, updateAccess } = useConfig();
|
||||
const {
|
||||
addAccess,
|
||||
updateAccess,
|
||||
reloadAccessGroups,
|
||||
config: { accessGroups },
|
||||
} = useConfig();
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
const [fileName, setFileName] = useState("");
|
||||
|
||||
const originGroup = data ? (data.group ? data.group : "") : "";
|
||||
|
||||
const formSchema = z.object({
|
||||
id: z.string().optional(),
|
||||
name: z.string().min(1).max(64),
|
||||
@@ -40,6 +63,7 @@ const AccessSSHForm = ({
|
||||
host: z.string().ip({
|
||||
message: "请输入合法的IP地址",
|
||||
}),
|
||||
group: z.string().optional(),
|
||||
port: z.string().min(1).max(5),
|
||||
username: z.string().min(1).max(64),
|
||||
password: z.string().min(0).max(64),
|
||||
@@ -69,6 +93,7 @@ const AccessSSHForm = ({
|
||||
id: data?.id,
|
||||
name: data?.name,
|
||||
configType: "ssh",
|
||||
group: data?.group,
|
||||
host: config.host,
|
||||
port: config.port,
|
||||
username: config.username,
|
||||
@@ -83,11 +108,15 @@ const AccessSSHForm = ({
|
||||
|
||||
const onSubmit = async (data: z.infer<typeof formSchema>) => {
|
||||
console.log(data);
|
||||
let group = data.group;
|
||||
if (group == "emptyId") group = "";
|
||||
|
||||
const req: Access = {
|
||||
id: data.id as string,
|
||||
name: data.name,
|
||||
configType: data.configType,
|
||||
usage: getUsageByConfigType(data.configType),
|
||||
group: group,
|
||||
config: {
|
||||
host: data.host,
|
||||
port: data.port,
|
||||
@@ -110,9 +139,28 @@ const AccessSSHForm = ({
|
||||
req.updated = rs.updated;
|
||||
if (data.id) {
|
||||
updateAccess(req);
|
||||
return;
|
||||
} else {
|
||||
addAccess(req);
|
||||
}
|
||||
addAccess(req);
|
||||
|
||||
// 同步更新授权组
|
||||
if (group != originGroup) {
|
||||
if (originGroup) {
|
||||
await updateById({
|
||||
id: originGroup,
|
||||
"access-": req.id,
|
||||
});
|
||||
}
|
||||
|
||||
if (group) {
|
||||
await updateById({
|
||||
id: group,
|
||||
"access+": req.id,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
reloadAccessGroups();
|
||||
} catch (e) {
|
||||
const err = e as ClientResponseError;
|
||||
|
||||
@@ -172,6 +220,67 @@ const AccessSSHForm = ({
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="group"
|
||||
render={({ field }) => (
|
||||
<FormItem>
|
||||
<FormLabel className="w-full flex justify-between">
|
||||
<div>授权配置组(用于将一个域名证书部署到多个 ssh 主机)</div>
|
||||
<AccessGroupEdit
|
||||
trigger={
|
||||
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
|
||||
<Plus size={14} />
|
||||
新增
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</FormLabel>
|
||||
<FormControl>
|
||||
<Select
|
||||
{...field}
|
||||
value={field.value}
|
||||
defaultValue="emptyId"
|
||||
onValueChange={(value) => {
|
||||
form.setValue("group", value);
|
||||
}}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择分组" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="emptyId">
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center space-x-2 rounded cursor-pointer"
|
||||
)}
|
||||
>
|
||||
--
|
||||
</div>
|
||||
</SelectItem>
|
||||
{accessGroups.map((item) => (
|
||||
<SelectItem
|
||||
value={item.id ? item.id : ""}
|
||||
key={item.id}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"flex items-center space-x-2 rounded cursor-pointer"
|
||||
)}
|
||||
>
|
||||
{item.name}
|
||||
</div>
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
)}
|
||||
/>
|
||||
|
||||
<FormField
|
||||
control={form.control}
|
||||
name="id"
|
||||
|
||||
Reference in New Issue
Block a user