jiazhizhong/certimate
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Support deploying one certificate to multiple SSH hosts, and support deploying multiple certificates to one SSH host.

Browse Source
This commit is contained in:
yoan
2024-09-14 15:36:15 +08:00
parent 505cfc5c1e
commit 6c1b1fb72b
29 changed files with 2167 additions and 569 deletions
Download Patch File Download Diff File Expand all files Collapse all files

120
ui/src/components/certimate/AccessGroupEdit.tsx Normal file
View 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;

117
ui/src/components/certimate/AccessSSHForm.tsx
View File

@@ -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"

5
ui/src/domain/access.ts
View File

@@ -11,6 +11,10 @@ export const accessTypeMap: Map<string, [string, string]> = new Map([
["webhook", ["Webhook", "/imgs/providers/webhook.svg"]],
]);
export const getProviderInfo = (t: string) => {
return accessTypeMap.get(t);
};
export const accessFormType = z.union(
[
z.literal("aliyun"),
@@ -32,6 +36,7 @@ export type Access = {
name: string;
configType: string;
usage: AccessUsage;
group?: string;
config:
| TencentConfig
| AliyunConfig

10
ui/src/domain/access_groups.ts Normal file
View File

@@ -0,0 +1,10 @@
import { Access } from "./access";
export type AccessGroup = {
id?: string;
name?: string;
access?: string[];
expand?: {
access: Access[];
};
};

4
ui/src/domain/domain.ts
View File

@@ -6,12 +6,14 @@ export type Domain = {
email?: string;
crontab: string;
access: string;
targetAccess: string;
targetAccess?: string;
targetType: string;
expiredAt?: string;
phase?: Pahse;
phaseSuccess?: boolean;
lastDeployedAt?: string;
variables?: string;
group?: string;
enabled?: boolean;
created?: string;
updated?: string;

27
ui/src/pages/DashboardLayout.tsx
View File

@@ -9,6 +9,7 @@ import {
BookOpen,
CircleUser,
Earth,
Group,
History,
Home,
Menu,
@@ -100,6 +101,17 @@ export default function Dashboard() {
授权管理
</Link>
<Link
to="/access_groups"
className={cn(
"flex items-center gap-3 rounded-lg px-3 py-2 transition-all hover:text-primary",
getClass("/access_groups")
)}
>
<Group className="h-4 w-4" />
部署授权组
</Link>
<Link
to="/history"
className={cn(
@@ -161,13 +173,24 @@ export default function Dashboard() {
to="/access"
className={cn(
"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground",
getClass("/dns_provider")
getClass("/access")
)}
>
<Server className="h-5 w-5" />
授权管理
</Link>
<Link
to="/access_groups"
className={cn(
"mx-[-0.65rem] flex items-center gap-4 rounded-xl px-3 py-2 hover:text-foreground",
getClass("/access_groups")
)}
>
<Group className="h-5 w-5" />
部署授权组
</Link>
<Link
to="/history"
className={cn(
@@ -227,7 +250,7 @@ export default function Dashboard() {
href="https://github.com/usual2970/certimate/releases"
target="_blank"
>
Certimate v0.1.5
Certimate v0.1.6
</a>
</div>
</div>

93
ui/src/pages/access/Access.tsx
View File

@@ -23,6 +23,8 @@ const Access = () => {
const page = query.get("page");
const pageNumber = page ? Number(page) : 1;
const accessGroupId = query.get("accessGroupId");
const startIndex = (pageNumber - 1) * perPage;
const endIndex = startIndex + perPage;
@@ -65,51 +67,56 @@ const Access = () => {
<div className="sm:hidden flex text-sm text-muted-foreground">
授权列表
</div>
{accesses.slice(startIndex, endIndex).map((access) => (
<div
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={access.id}
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
{access.name}
</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center space-x-2">
<img
src={accessTypeMap.get(access.configType)?.[1]}
className="w-6"
/>
<div>{accessTypeMap.get(access.configType)?.[0]}</div>
</div>
{accesses
.filter((item) => {
return accessGroupId ? item.group == accessGroupId : true;
})
.slice(startIndex, endIndex)
.map((access) => (
<div
className="flex flex-col sm:flex-row text-secondary-foreground border-b dark:border-stone-500 sm:p-2 hover:bg-muted/50 text-sm"
key={access.id}
>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center">
{access.name}
</div>
<div className="sm:w-48 w-full pt-1 sm:pt-0 flex items-center space-x-2">
<img
src={accessTypeMap.get(access.configType)?.[1]}
className="w-6"
/>
<div>{accessTypeMap.get(access.configType)?.[0]}</div>
</div>
<div className="sm:w-52 w-full pt-1 sm:pt-0 flex items-center">
创建于 {access.created && convertZulu2Beijing(access.created)}
<div className="sm:w-52 w-full pt-1 sm:pt-0 flex items-center">
创建于 {access.created && convertZulu2Beijing(access.created)}
</div>
<div className="sm:w-52 w-full pt-1 sm:pt-0 flex items-center">
更新于 {access.updated && convertZulu2Beijing(access.updated)}
</div>
<div className="flex items-center grow justify-start pt-1 sm:pt-0">
<AccessEdit
trigger={
<Button variant={"link"} className="p-0">
编辑
</Button>
}
op="edit"
data={access}
/>
<Separator orientation="vertical" className="h-4 mx-2" />
<Button
variant={"link"}
className="p-0"
onClick={() => {
handleDelete(access);
}}
>
删除
</Button>
</div>
</div>
<div className="sm:w-52 w-full pt-1 sm:pt-0 flex items-center">
更新于 {access.updated && convertZulu2Beijing(access.updated)}
</div>
<div className="flex items-center grow justify-start pt-1 sm:pt-0">
<AccessEdit
trigger={
<Button variant={"link"} className="p-0">
编辑
</Button>
}
op="edit"
data={access}
/>
<Separator orientation="vertical" className="h-4 mx-2" />
<Button
variant={"link"}
className="p-0"
onClick={() => {
handleDelete(access);
}}
>
删除
</Button>
</div>
</div>
))}
))}
<XPagination
totalPages={totalPages}
currentPage={pageNumber}

219
ui/src/pages/access_groups/AccessGroups.tsx Normal file
View File

@@ -0,0 +1,219 @@
import AccessGroupEdit from "@/components/certimate/AccessGroupEdit";
import Show from "@/components/Show";
import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
AlertDialogTrigger,
} from "@/components/ui/alert-dialog";
import { Button } from "@/components/ui/button";
import {
Card,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import { ScrollArea } from "@/components/ui/scroll-area";
import { getProviderInfo } from "@/domain/access";
import { getErrMessage } from "@/lib/error";
import { useConfig } from "@/providers/config";
import { remove } from "@/repository/access_group";
import { Group } from "lucide-react";
import { useToast } from "@/components/ui/use-toast";
import { Toaster } from "@/components/ui/toaster";
import { useNavigate } from "react-router-dom";
const AccessGroups = () => {
const {
config: { accessGroups },
reloadAccessGroups,
} = useConfig();
const { toast } = useToast();
const navigate = useNavigate();
const handleRemoveClick = async (id: string) => {
try {
await remove(id);
reloadAccessGroups();
} catch (e) {
toast({
title: "删除失败",
description: getErrMessage(e),
variant: "destructive",
});
return;
}
};
const handleAddAccess = () => {
navigate("/access");
};
return (
<div>
<Toaster />
<div className="flex justify-between items-center">
<div className="text-muted-foreground">部署授权组</div>
<AccessGroupEdit trigger={<Button>新增授权组</Button>} />
</div>
<div className="mt-10">
<Show when={accessGroups.length == 0}>
<>
<div className="flex flex-col items-center mt-10">
<span className="bg-orange-100 p-5 rounded-full">
<Group size={40} className="text-primary" />
</span>
<div className="text-center text-sm text-muted-foreground mt-3">
请添加域名开始部署证书吧。
</div>
<AccessGroupEdit
trigger={<Button>新增授权组</Button>}
className="mt-3"
/>
</div>
</>
</Show>
<ScrollArea className="h-[75vh] overflow-hidden">
<div className="flex gap-5 flex-wrap">
{accessGroups.map((accessGroup) => (
<Card className="w-full md:w-[350px]">
<CardHeader>
<CardTitle>{accessGroup.name}</CardTitle>
<CardDescription>
共有
{accessGroup.expand ? accessGroup.expand.access.length : 0}
个部署授权配置
</CardDescription>
</CardHeader>
<CardContent className="min-h-[180px]">
{accessGroup.expand ? (
<>
{accessGroup.expand.access.slice(0, 3).map((access) => (
<div key={access.id} className="flex flex-col mb-3">
<div className="flex items-center">
<div className="">
<img
src={getProviderInfo(access.configType)![1]}
alt="provider"
className="w-8 h-8"
></img>
</div>
<div className="ml-3">
<div className="text-sm font-semibold text-gray-700 dark:text-gray-200">
{access.name}
</div>
<div className="text-xs text-muted-foreground">
{getProviderInfo(access.configType)![0]}
</div>
</div>
</div>
</div>
))}
</>
) : (
<>
<div className="flex text-gray-700 dark:text-gray-200 items-center">
<div>
<Group size={40} />
</div>
<div className="ml-2">
暂无部署授权配置，请添加后开始使用吧
</div>
</div>
</>
)}
</CardContent>
<CardFooter>
<div className="flex justify-end w-full">
<Show
when={
accessGroup.expand &&
accessGroup.expand.access.length > 0
? true
: false
}
>
<div>
<Button
size="sm"
variant={"link"}
onClick={() => {
navigate(`/access?accessGroupId=${accessGroup.id}`);
}}
>
所有授权
</Button>
</div>
</Show>
<Show
when={
!accessGroup.expand ||
accessGroup.expand.access.length == 0
? true
: false
}
>
<div>
<Button size="sm" onClick={handleAddAccess}>
新增授权
</Button>
</div>
</Show>
<div className="ml-3">
<AlertDialog>
<AlertDialogTrigger asChild>
<Button variant={"destructive"} size={"sm"}>
删除
</Button>
</AlertDialogTrigger>
<AlertDialogContent>
<AlertDialogHeader>
<AlertDialogTitle className="dark:text-gray-200">
删除组
</AlertDialogTitle>
<AlertDialogDescription>
确定要删除部署授权组吗？
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="dark:text-gray-200">
取消
</AlertDialogCancel>
<AlertDialogAction
onClick={() => {
handleRemoveClick(
accessGroup.id ? accessGroup.id : ""
);
}}
>
确认
</AlertDialogAction>
</AlertDialogFooter>
</AlertDialogContent>
</AlertDialog>
</div>
</div>
</CardFooter>
</Card>
))}
</div>
</ScrollArea>
</div>
</div>
);
};
export default AccessGroups;

556
ui/src/pages/domains/Edit.tsx
View File

@@ -35,16 +35,22 @@ import { Plus } from "lucide-react";
import { AccessEdit } from "@/components/certimate/AccessEdit";
import { accessTypeMap } from "@/domain/access";
import EmailsEdit from "@/components/certimate/EmailsEdit";
import { Textarea } from "@/components/ui/textarea";
import { cn } from "@/lib/utils";
const Edit = () => {
const {
config: { accesses, emails },
config: { accesses, emails, accessGroups },
} = useConfig();
const [domain, setDomain] = useState<Domain>();
const location = useLocation();
const [tab, setTab] = useState<"base" | "advance">("base");
const [targetType, setTargetType] = useState(domain ? domain.targetType : "");
useEffect(() => {
// Parsing query parameters
const queryParams = new URLSearchParams(location.search);
@@ -53,6 +59,7 @@ const Edit = () => {
const fetchData = async () => {
const data = await get(id);
setDomain(data);
setTargetType(data.targetType);
};
fetchData();
}
@@ -67,12 +74,12 @@ const Edit = () => {
access: z.string().regex(/^[a-zA-Z0-9]+$/, {
message: "请选择DNS服务商授权配置",
}),
targetAccess: z.string().regex(/^[a-zA-Z0-9]+$/, {
message: "请选择部署服务商配置",
}),
targetAccess: z.string().optional(),
targetType: z.string().regex(/^[a-zA-Z0-9-]+$/, {
message: "请选择部署服务类型",
}),
variables: z.string().optional(),
group: z.string().optional(),
});
const form = useForm<z.infer<typeof formSchema>>({
@@ -84,6 +91,8 @@ const Edit = () => {
access: "",
targetAccess: "",
targetType: "",
variables: "",
group: "",
},
});
@@ -96,12 +105,12 @@ const Edit = () => {
access: domain.access,
targetAccess: domain.targetAccess,
targetType: domain.targetType,
variables: domain.variables,
group: domain.group,
});
}
}, [domain, form]);
const [targetType, setTargetType] = useState(domain ? domain.targetType : "");
const targetAccesses = accesses.filter((item) => {
if (item.usage == "apply") {
return false;
@@ -110,7 +119,7 @@ const Edit = () => {
if (targetType == "") {
return true;
}
const types = form.getValues().targetType.split("-");
const types = targetType.split("-");
return item.configType === types[0];
});
@@ -119,14 +128,31 @@ const Edit = () => {
const navigate = useNavigate();
const onSubmit = async (data: z.infer<typeof formSchema>) => {
const group = data.group == "emptyId" ? "" : data.group;
const targetAccess =
data.targetAccess === "emptyId" ? "" : data.targetAccess;
if (group == "" && targetAccess == "") {
form.setError("group", {
type: "manual",
message: "部署授权和部署授权组至少选一个",
});
form.setError("targetAccess", {
type: "manual",
message: "部署授权和部署授权组至少选一个",
});
return;
}
const req: Domain = {
id: data.id as string,
crontab: "0 0 * * *",
domain: data.domain,
email: data.email,
access: data.access,
targetAccess: data.targetAccess,
group: group,
targetAccess: targetAccess,
targetType: data.targetType,
variables: data.variables,
};
try {
@@ -161,109 +187,234 @@ const Edit = () => {
<>
<div className="">
<Toaster />
<div className="border-b dark:border-stone-500 h-10 text-muted-foreground">
<div className=" h-5 text-muted-foreground">
{domain?.id ? "编辑" : "新增"}域名
</div>
<div className="max-w-[35em] mx-auto mt-10">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 dark:text-stone-200"
<div className="mt-5 flex w-full justify-center md:space-x-10 flex-col md:flex-row">
<div className="w-full md:w-[200px] text-muted-foreground space-x-3 md:space-y-3 flex-row md:flex-col flex">
<div
className={cn(
"cursor-pointer text-right",
tab === "base" ? "text-primary" : ""
)}
onClick={() => {
setTab("base");
}}
>
<FormField
control={form.control}
name="domain"
render={({ field }) => (
<FormItem>
<FormLabel>域名</FormLabel>
<FormControl>
<Input placeholder="请输入域名" {...field} />
</FormControl>
基础设置
</div>
<div
className={cn(
"cursor-pointer text-right",
tab === "advance" ? "text-primary" : ""
)}
onClick={() => {
setTab("advance");
}}
>
高级设置
</div>
</div>
<FormMessage />
</FormItem>
)}
/>
<div className="w-full md:w-[35em] bg-gray-100 dark:bg-gray-900 p-5 rounded mt-3 md:mt-0">
<Form {...form}>
<form
onSubmit={form.handleSubmit(onSubmit)}
className="space-y-8 dark:text-stone-200"
>
<FormField
control={form.control}
name="domain"
render={({ field }) => (
<FormItem hidden={tab != "base"}>
<FormLabel>域名</FormLabel>
<FormControl>
<Input placeholder="请输入域名" {...field} />
</FormControl>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem>
<FormLabel className="flex w-full justify-between">
<div>Email（申请证书需要提供邮箱）</div>
<EmailsEdit
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}
onValueChange={(value) => {
form.setValue("email", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择邮箱" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>邮箱列表</SelectLabel>
{emails.content.emails.map((item) => (
<SelectItem key={item} value={item}>
<div>{item}</div>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="email"
render={({ field }) => (
<FormItem hidden={tab != "base"}>
<FormLabel className="flex w-full justify-between">
<div>Email（申请证书需要提供邮箱）</div>
<EmailsEdit
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}
onValueChange={(value) => {
form.setValue("email", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择邮箱" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>邮箱列表</SelectLabel>
{emails.content.emails.map((item) => (
<SelectItem key={item} value={item}>
<div>{item}</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="access"
render={({ field }) => (
<FormItem hidden={tab != "base"}>
<FormLabel className="flex w-full justify-between">
<div>DNS 服务商授权配置</div>
<AccessEdit
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />
新增
</div>
}
op="add"
/>
</FormLabel>
<FormControl>
<Select
{...field}
value={field.value}
onValueChange={(value) => {
form.setValue("access", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择授权配置" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>服务商授权配置</SelectLabel>
{accesses
.filter((item) => item.usage != "deploy")
.map((item) => (
<SelectItem key={item.id} value={item.id}>
<div className="flex items-center space-x-2">
<img
className="w-6"
src={
accessTypeMap.get(
item.configType
)?.[1]
}
/>
<div>{item.name}</div>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="targetType"
render={({ field }) => (
<FormItem hidden={tab != "base"}>
<FormLabel>部署服务类型</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => {
setTargetType(value);
form.setValue("targetType", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择部署服务类型" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>部署服务类型</SelectLabel>
{targetTypeKeys.map((key) => (
<SelectItem key={key} value={key}>
<div className="flex items-center space-x-2">
<img
className="w-6"
src={targetTypeMap.get(key)?.[1]}
/>
<div>{targetTypeMap.get(key)?.[0]}</div>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="targetAccess"
render={({ field }) => (
<FormItem hidden={tab != "base"}>
<FormLabel className="w-full flex justify-between">
<div>部署服务商授权配置</div>
<AccessEdit
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />
新增
</div>
}
op="add"
/>
</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => {
form.setValue("targetAccess", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择授权配置" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>
服务商授权配置{form.getValues().targetAccess}
</SelectLabel>
<SelectItem value="emptyId">
<div className="flex items-center space-x-2">
--
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="access"
render={({ field }) => (
<FormItem>
<FormLabel className="flex w-full justify-between">
<div>DNS 服务商授权配置</div>
<AccessEdit
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />
新增
</div>
}
op="add"
/>
</FormLabel>
<FormControl>
<Select
{...field}
value={field.value}
onValueChange={(value) => {
form.setValue("access", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择授权配置" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>服务商授权配置</SelectLabel>
{accesses
.filter((item) => item.usage != "deploy")
.map((item) => (
{targetAccesses.map((item) => (
<SelectItem key={item.id} value={item.id}>
<div className="flex items-center space-x-2">
<img
@@ -276,115 +427,100 @@ const Edit = () => {
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="targetType"
render={({ field }) => (
<FormItem>
<FormLabel>部署服务类型</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => {
setTargetType(value);
form.setValue("targetType", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择部署服务类型" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>部署服务类型</SelectLabel>
{targetTypeKeys.map((key) => (
<SelectItem key={key} value={key}>
<div className="flex items-center space-x-2">
<img
className="w-6"
src={targetTypeMap.get(key)?.[1]}
/>
<div>{targetTypeMap.get(key)?.[0]}</div>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormField
control={form.control}
name="group"
render={({ field }) => (
<FormItem hidden={tab != "advance" || targetType != "ssh"}>
<FormLabel className="w-full flex justify-between">
<div>
部署配置组(用于将一个域名证书部署到多个 ssh 主机)
</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
.filter((item) => {
return (
item.expand && item.expand?.access.length > 0
);
})
.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>
)}
/>
<FormMessage />
</FormItem>
)}
/>
<FormField
control={form.control}
name="variables"
render={({ field }) => (
<FormItem hidden={tab != "advance"}>
<FormLabel>变量</FormLabel>
<FormControl>
<Textarea
placeholder={`可在SSH部署中使用,形如:\nkey=val;\nkey2=val2;`}
{...field}
className="placeholder:whitespace-pre-wrap"
/>
</FormControl>
<FormField
control={form.control}
name="targetAccess"
render={({ field }) => (
<FormItem>
<FormLabel className="w-full flex justify-between">
<div>部署服务商授权配置</div>
<AccessEdit
trigger={
<div className="font-normal text-primary hover:underline cursor-pointer flex items-center">
<Plus size={14} />
新增
</div>
}
op="add"
/>
</FormLabel>
<FormControl>
<Select
{...field}
onValueChange={(value) => {
form.setValue("targetAccess", value);
}}
>
<SelectTrigger>
<SelectValue placeholder="请选择授权配置" />
</SelectTrigger>
<SelectContent>
<SelectGroup>
<SelectLabel>服务商授权配置</SelectLabel>
{targetAccesses.map((item) => (
<SelectItem key={item.id} value={item.id}>
<div className="flex items-center space-x-2">
<img
className="w-6"
src={
accessTypeMap.get(item.configType)?.[1]
}
/>
<div>{item.name}</div>
</div>
</SelectItem>
))}
</SelectGroup>
</SelectContent>
</Select>
</FormControl>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit">保存</Button>
</div>
</form>
</Form>
<FormMessage />
</FormItem>
)}
/>
<div className="flex justify-end">
<Button type="submit">保存</Button>
</div>
</form>
</Form>
</div>
</div>
</div>
</>

27
ui/src/providers/config/index.tsx
View File

@@ -1,6 +1,6 @@
import { Access } from "@/domain/access";
import { list } from "@/repository/access";
import { list as getAccessGroups } from "@/repository/access_group";
import {
createContext,
ReactNode,
@@ -12,10 +12,12 @@ import {
import { configReducer } from "./reducer";
import { getEmails } from "@/repository/settings";
import { Setting } from "@/domain/settings";
import { AccessGroup } from "@/domain/access_groups";
export type ConfigData = {
accesses: Access[];
emails: Setting;
accessGroups: AccessGroup[];
};
export type ConfigContext = {
@@ -24,6 +26,8 @@ export type ConfigContext = {
addAccess: (access: Access) => void;
updateAccess: (access: Access) => void;
setEmails: (email: Setting) => void;
setAccessGroups: (accessGroups: AccessGroup[]) => void;
reloadAccessGroups: () => void;
};
const Context = createContext({} as ConfigContext);
@@ -38,6 +42,7 @@ export const ConfigProvider = ({ children }: ContainerProps) => {
const [config, dispatchConfig] = useReducer(configReducer, {
accesses: [],
emails: { content: { emails: [] } },
accessGroups: [],
});
useEffect(() => {
@@ -56,6 +61,19 @@ export const ConfigProvider = ({ children }: ContainerProps) => {
featchEmails();
}, []);
useEffect(() => {
const featchAccessGroups = async () => {
const accessGroups = await getAccessGroups();
dispatchConfig({ type: "SET_ACCESS_GROUPS", payload: accessGroups });
};
featchAccessGroups();
}, []);
const reloadAccessGroups = useCallback(async () => {
const accessGroups = await getAccessGroups();
dispatchConfig({ type: "SET_ACCESS_GROUPS", payload: accessGroups });
}, []);
const setEmails = useCallback((emails: Setting) => {
dispatchConfig({ type: "SET_EMAILS", payload: emails });
}, []);
@@ -72,17 +90,24 @@ export const ConfigProvider = ({ children }: ContainerProps) => {
dispatchConfig({ type: "UPDATE_ACCESS", payload: access });
}, []);
const setAccessGroups = useCallback((accessGroups: AccessGroup[]) => {
dispatchConfig({ type: "SET_ACCESS_GROUPS", payload: accessGroups });
}, []);
return (
<Context.Provider
value={{
config: {
accesses: config.accesses,
emails: config.emails,
accessGroups: config.accessGroups,
},
deleteAccess,
addAccess,
setEmails,
updateAccess,
setAccessGroups,
reloadAccessGroups,
}}
>
{children && children}

10
ui/src/providers/config/reducer.ts
View File

@@ -1,6 +1,7 @@
import { Access } from "@/domain/access";
import { ConfigData } from ".";
import { Setting } from "@/domain/settings";
import { AccessGroup } from "@/domain/access_groups";
type Action =
| { type: "ADD_ACCESS"; payload: Access }
@@ -8,7 +9,8 @@ type Action =
| { type: "UPDATE_ACCESS"; payload: Access }
| { type: "SET_ACCESSES"; payload: Access[] }
| { type: "SET_EMAILS"; payload: Setting }
| { type: "ADD_EMAIL"; payload: string };
| { type: "ADD_EMAIL"; payload: string }
| { type: "SET_ACCESS_GROUPS"; payload: AccessGroup[] };
export const configReducer = (
state: ConfigData,
@@ -60,6 +62,12 @@ export const configReducer = (
},
};
}
case "SET_ACCESS_GROUPS": {
return {
...state,
accessGroups: action.payload,
};
}
default:
return state;
}

49
ui/src/repository/access_group.ts Normal file
View File

@@ -0,0 +1,49 @@
import { AccessGroup } from "@/domain/access_groups";
import { getPb } from "./api";
import { Access } from "@/domain/access";
export const list = async () => {
const resp = await getPb()
.collection("access_groups")
.getFullList<AccessGroup>({
sort: "-created",
expand: "access",
});
return resp;
};
export const remove = async (id: string) => {
const pb = getPb();
// 查询有没有关联的access
const accessGroup = await pb.collection("access").getList<Access>(1, 1, {
filter: `group='${id}' && deleted=null`,
});
if (accessGroup.items.length > 0) {
throw new Error("该分组下有授权配置，无法删除");
}
await pb.collection("access_groups").delete(id);
};
export const update = async (accessGroup: AccessGroup) => {
const pb = getPb();
if (accessGroup.id) {
return await pb
.collection("access_groups")
.update(accessGroup.id, accessGroup);
}
return await pb.collection("access_groups").create(accessGroup);
};
type UpdateByIdReq = {
id: string;
[key: string]: string | string[];
};
export const updateById = async (req: UpdateByIdReq) => {
const pb = getPb();
return await pb.collection("access_groups").update(req.id, req);
};

5
ui/src/router.tsx
View File

@@ -10,6 +10,7 @@ import LoginLayout from "./pages/LoginLayout";
import Password from "./pages/setting/Password";
import SettingLayout from "./pages/SettingLayout";
import Dashboard from "./pages/dashboard/Dashboard";
import AccessGroups from "./pages/access_groups/AccessGroups";
export const router = createHashRouter([
{
@@ -32,6 +33,10 @@ export const router = createHashRouter([
path: "/access",
element: <Access />,
},
{
path: "/access_groups",
element: <AccessGroups />,
},
{
path: "/history",
element: <History />,