add webhook deployer

This commit is contained in:
yoan
2024-08-28 18:53:33 +08:00
parent 4b8fa3502c
commit 1861e73531
13 changed files with 366 additions and 31 deletions

View File

File diff suppressed because one or more lines are too long

1
ui/dist/imgs/providers/webhook.svg vendored Normal file
View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#059669" d="M7 20.5q-1.864 0-3.182-1.318T2.5 16q0-1.246.608-2.268t1.617-1.615q.275-.165.525-.026q.25.14.25.459q0 .121-.064.24q-.065.12-.169.181q-.776.452-1.272 1.258T3.5 16q0 1.442 1.029 2.471T7 19.5q1.404 0 2.414-.961q1.009-.962 1.086-2.347q.02-.31.199-.5q.18-.192.47-.192h4.725q.142-.321.44-.526q.297-.205.666-.205q.51 0 .87.36q.36.361.36.871t-.36.87t-.87.36q-.388 0-.676-.194q-.288-.196-.43-.536h-4.417q-.235 1.84-1.54 2.92T7 20.5m0-3.27q-.51 0-.87-.36T5.77 16q0-.512.378-.892q.379-.381.994-.314l2.562-4.265q-.84-.656-1.272-1.574T8 7q0-1.864 1.318-3.182T12.5 2.5q1.73 0 2.991 1.14t1.455 2.802q.048.225-.108.392q-.155.166-.386.166q-.171 0-.315-.132t-.185-.309q-.16-1.296-1.136-2.177Q13.838 3.5 12.5 3.5q-1.442 0-2.471 1.029T9 7q0 .883.393 1.618t1.101 1.251q.235.162.303.423q.069.262-.068.485l-2.727 4.542q.108.144.168.321t.06.36q0 .51-.36.87t-.87.36m10 3.27q-.708 0-1.34-.201t-1.195-.591q-.329-.221-.268-.58q.06-.359.474-.359q.106 0 .208.05t.188.106q.402.271.903.423T17 19.5q1.442 0 2.471-1.029T20.5 16t-1.029-2.471T17 12.5q-.25 0-.475.038t-.45.093q-.285.086-.558-.017t-.41-.32l-2.459-4.088q-.525.073-.952-.279T11.27 7q0-.51.36-.87q.362-.36.871-.36t.87.36t.36.87q0 .183-.057.357t-.165.299l2.367 3.977q.258-.05.53-.092q.274-.041.595-.041q1.864 0 3.182 1.318T21.5 16t-1.318 3.182T17 20.5"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

2
ui/dist/index.html vendored
View File

@@ -5,7 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Certimate - Your Trusted SSL Automation Partner</title>
<script type="module" crossorigin src="/assets/index-vWJSQP8e.js"></script>
<script type="module" crossorigin src="/assets/index-D-MCicNE.js"></script>
<link rel="stylesheet" crossorigin href="/assets/index-VYJgHfoP.css">
</head>
<body class="bg-background">

View File

@@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="128" height="128" viewBox="0 0 24 24"><path fill="#059669" d="M7 20.5q-1.864 0-3.182-1.318T2.5 16q0-1.246.608-2.268t1.617-1.615q.275-.165.525-.026q.25.14.25.459q0 .121-.064.24q-.065.12-.169.181q-.776.452-1.272 1.258T3.5 16q0 1.442 1.029 2.471T7 19.5q1.404 0 2.414-.961q1.009-.962 1.086-2.347q.02-.31.199-.5q.18-.192.47-.192h4.725q.142-.321.44-.526q.297-.205.666-.205q.51 0 .87.36q.36.361.36.871t-.36.87t-.87.36q-.388 0-.676-.194q-.288-.196-.43-.536h-4.417q-.235 1.84-1.54 2.92T7 20.5m0-3.27q-.51 0-.87-.36T5.77 16q0-.512.378-.892q.379-.381.994-.314l2.562-4.265q-.84-.656-1.272-1.574T8 7q0-1.864 1.318-3.182T12.5 2.5q1.73 0 2.991 1.14t1.455 2.802q.048.225-.108.392q-.155.166-.386.166q-.171 0-.315-.132t-.185-.309q-.16-1.296-1.136-2.177Q13.838 3.5 12.5 3.5q-1.442 0-2.471 1.029T9 7q0 .883.393 1.618t1.101 1.251q.235.162.303.423q.069.262-.068.485l-2.727 4.542q.108.144.168.321t.06.36q0 .51-.36.87t-.87.36m10 3.27q-.708 0-1.34-.201t-1.195-.591q-.329-.221-.268-.58q.06-.359.474-.359q.106 0 .208.05t.188.106q.402.271.903.423T17 19.5q1.442 0 2.471-1.029T20.5 16t-1.029-2.471T17 12.5q-.25 0-.475.038t-.45.093q-.285.086-.558-.017t-.41-.32l-2.459-4.088q-.525.073-.952-.279T11.27 7q0-.51.36-.87q.362-.36.871-.36t.87.36t.36.87q0 .183-.057.357t-.165.299l2.367 3.977q.258-.05.53-.092q.274-.041.595-.041q1.864 0 3.182 1.318T21.5 16t-1.318 3.182T17 20.5"/></svg>

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@@ -18,6 +18,7 @@ import { cn } from "@/lib/utils";
import { RadioGroup, RadioGroupItem } from "../ui/radio-group";
import AccessSSHForm from "./AccessSSHForm";
import WebhookForm from "./AccessWebhookFrom";
type TargetConfigEditProps = {
op: "add" | "edit";
@@ -69,6 +70,15 @@ export function AccessEdit({
/>
);
break;
case "webhook":
form = (
<WebhookForm
data={data}
onAfterReq={() => {
setOpen(false);
}}
/>
);
}
const getOptionCls = (val: string) => {

View File

@@ -0,0 +1,173 @@
import { Input } from "@/components/ui/input";
import { useForm } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import z from "zod";
import {
Form,
FormControl,
FormField,
FormItem,
FormLabel,
FormMessage,
} from "@/components/ui/form";
import { Button } from "@/components/ui/button";
import { Access, accessFormType, WebhookConfig } from "@/domain/access";
import { save } from "@/repository/access";
import { useConfig } from "@/providers/config";
import { ClientResponseError } from "pocketbase";
import { PbErrorData } from "@/domain/base";
const WebhookForm = ({
data,
onAfterReq,
}: {
data?: Access;
onAfterReq: () => void;
}) => {
const { addAccess, updateAccess } = useConfig();
const formSchema = z.object({
id: z.string().optional(),
name: z.string().min(1).max(64),
configType: accessFormType,
url: z.string().url(),
});
let config: WebhookConfig = {
url: "",
};
if (data) config = data.config as WebhookConfig;
const form = useForm<z.infer<typeof formSchema>>({
resolver: zodResolver(formSchema),
defaultValues: {
id: data?.id,
name: data?.name,
configType: "webhook",
url: config.url,
},
});
const onSubmit = async (data: z.infer<typeof formSchema>) => {
console.log(data);
const req: Access = {
id: data.id as string,
name: data.name,
configType: data.configType,
config: {
url: data.url,
},
};
try {
const rs = await save(req);
onAfterReq();
req.id = rs.id;
req.created = rs.created;
req.updated = rs.updated;
if (data.id) {
updateAccess(req);
return;
}
addAccess(req);
} 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 (
<>
<div className="max-w-[35em] mx-auto mt-10">
<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} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="id"
render={({ field }) => (
<FormItem className="hidden">
<FormLabel></FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="configType"
render={({ field }) => (
<FormItem className="hidden">
<FormLabel></FormLabel>
<FormControl>
<Input {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="url"
render={({ field }) => (
<FormItem>
<FormLabel>Webhook Url</FormLabel>
<FormControl>
<Input placeholder="请输入Webhook Url" {...field} />
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit"></Button>
</div>
</form>
</Form>
</div>
</>
);
};
export default WebhookForm;

View File

@@ -4,10 +4,16 @@ export const accessTypeMap: Map<string, [string, string]> = new Map([
["tencent", ["腾讯云", "/imgs/providers/tencent.svg"]],
["aliyun", ["阿里云", "/imgs/providers/aliyun.svg"]],
["ssh", ["SSH部署", "/imgs/providers/ssh.png"]],
["webhook", ["Webhook", "/imgs/providers/webhook.svg"]],
]);
export const accessFormType = z.union(
[z.literal("aliyun"), z.literal("tencent"), z.literal("ssh")],
[
z.literal("aliyun"),
z.literal("tencent"),
z.literal("ssh"),
z.literal("webhook"),
],
{ message: "请选择云服务商" }
);
@@ -15,12 +21,16 @@ export type Access = {
id: string;
name: string;
configType: string;
config: TencentConfig | AliyunConfig | SSHConfig;
config: TencentConfig | AliyunConfig | SSHConfig | WebhookConfig;
deleted?: string;
created?: string;
updated?: string;
};
export type WebhookConfig = {
url: string;
};
export type TencentConfig = {
secretId: string;
secretKey: string;

View File

@@ -31,6 +31,7 @@ export const targetTypeMap: Map<string, [string, string]> = new Map([
["aliyun-cdn", ["阿里云-CDN", "/imgs/providers/aliyun.svg"]],
["aliyun-oss", ["阿里云-OSS", "/imgs/providers/aliyun.svg"]],
["ssh", ["SSH部署", "/imgs/providers/ssh.png"]],
["webhook", ["Webhook", "/imgs/providers/webhook.svg"]],
]);
export const targetTypeKeys = Array.from(targetTypeMap.keys());