feat: certificate key algorithm

2024-10-16 20:20:27 +08:00
parent 71f43c5bd4
commit 1ce2a52d70
15 changed files with 595 additions and 409 deletions
--- a/ui/src/components/ui/collapsible.tsx
+++ b/ui/src/components/ui/collapsible.tsx
@@ -0,0 +1,22 @@
+import * as React from "react";
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+
+import { cn } from "@/lib/utils";
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = React.forwardRef<
+  React.ElementRef<typeof CollapsiblePrimitive.CollapsibleContent>,
+  React.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.CollapsibleContent>
+>(({ className, ...props }, ref) => (
+  <CollapsiblePrimitive.CollapsibleContent
+    ref={ref}
+    className={cn("overflow-y-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down", className)}
+    {...props}
+  />
+));
+CollapsibleContent.displayName = CollapsiblePrimitive.CollapsibleContent.displayName;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };
--- a/ui/src/domain/domain.ts
+++ b/ui/src/domain/domain.ts
@@ -50,8 +50,9 @@ export type DeployConfig = {
 export type ApplyConfig = {
  access: string;
  email: string;
-  timeout?: number;
+  keyAlgorithm?: string;
  nameservers?: string;
+  timeout?: number;
 };

 export type Statistic = {
--- a/ui/src/i18n/locales/en/nls.domain.json
+++ b/ui/src/i18n/locales/en/nls.domain.json
@@ -30,15 +30,17 @@
  "domain.application.form.domain.changed.message": "Domain updated successfully",
  "domain.application.form.email.label": "Email",
  "domain.application.form.email.tips": "(A email is required to apply for a certificate)",
+  "domain.application.form.email.placeholder": "Please select email",
  "domain.application.form.email.add": "Add Email",
  "domain.application.form.email.list": "Email List",
-  "domain.application.form.email.errmsg.empty": "Please select email",
  "domain.application.form.access.label": "DNS Provider Authorization Configuration",
  "domain.application.form.access.placeholder": "Please select DNS provider authorization configuration",
-  "domain.application.form.access.errmsg.empty": "Please select DNS provider authorization configuration",
  "domain.application.form.access.list": "Provider Authorization Configurations",
-  "domain.application.form.timeout.label": "Timeout",
-  "domain.application.form.timeoue.placeholder": "Timeout (seconds)",
+  "domain.application.form.advanced_settings.label": "Advanced Settings",
+  "domain.application.form.key_algorithm.label": "Certificate Key Algorithm",
+  "domain.application.form.key_algorithm.placeholder": "Please select certificate key algorithm",
+  "domain.application.form.timeout.label": "DNS Propagation Timeout (seconds)",
+  "domain.application.form.timeoue.placeholder": "Please enter maximum waiting time for DNS propagation",
  "domain.application.unsaved.message": "Please save applyment configuration first",

  "domain.deployment.tab": "Deploy Settings",
--- a/ui/src/i18n/locales/zh/nls.domain.json
+++ b/ui/src/i18n/locales/zh/nls.domain.json
@@ -30,15 +30,17 @@
  "domain.application.form.domain.changed.message": "域名编辑成功",
  "domain.application.form.email.label": "邮箱",
  "domain.application.form.email.tips": "（申请证书需要提供邮箱）",
+  "domain.application.form.email.placeholder": "请选择邮箱",
  "domain.application.form.email.add": "添加邮箱",
  "domain.application.form.email.list": "邮箱列表",
-  "domain.application.form.email.errmsg.empty": "请选择邮箱",
  "domain.application.form.access.label": "DNS 服务商授权配置",
  "domain.application.form.access.placeholder": "请选择 DNS 服务商授权配置",
-  "domain.application.form.access.errmsg.empty": "请选择 DNS 服务商授权配置",
  "domain.application.form.access.list": "已有的 DNS 服务商授权配置",
-  "domain.application.form.timeout.label": "超时时间",
-  "domain.application.form.timeoue.placeholder": "超时时间（单位：秒）",
+  "domain.application.form.advanced_settings.label": "高级设置",
+  "domain.application.form.key_algorithm.label": "数字证书算法",
+  "domain.application.form.key_algorithm.placeholder": "请选择数字证书算法",
+  "domain.application.form.timeout.label": "DNS 传播检查超时时间（单位：秒）",
+  "domain.application.form.timeoue.placeholder": "请输入 DNS 传播检查超时时间",
  "domain.application.unsaved.message": "请先保存申请配置",

  "domain.deployment.tab": "部署配置",
--- a/ui/src/pages/domains/Edit.tsx
+++ b/ui/src/pages/domains/Edit.tsx
@@ -4,11 +4,12 @@ import { useForm } from "react-hook-form";
 import { useTranslation } from "react-i18next";
 import z from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { Plus } from "lucide-react";
+import { ChevronsUpDown, Plus } from "lucide-react";
 import { ClientResponseError } from "pocketbase";

 import { Button } from "@/components/ui/button";
 import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "@/components/ui/collapsible";
 import { Form, FormControl, FormField, FormItem, FormLabel, FormMessage } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "@/components/ui/select";
@@ -58,8 +59,9 @@ const Edit = () => {
    }),
    email: z.string().email("common.errmsg.email_invalid").optional(),
    access: z.string().regex(/^[a-zA-Z0-9]+$/, {
-      message: "domain.application.form.access.errmsg.empty",
+      message: "domain.application.form.access.placeholder",
    }),
+    keyAlgorithm: z.string().optional(),
    nameservers: z.string().optional(),
    timeout: z.number().optional(),
  });
@@ -71,6 +73,7 @@ const Edit = () => {
      domain: "",
      email: "",
      access: "",
+      keyAlgorithm: "RSA2048",
      nameservers: "",
      timeout: 60,
    },
@@ -83,6 +86,7 @@ const Edit = () => {
        domain: domain.domain,
        email: domain.applyConfig?.email,
        access: domain.applyConfig?.access,
+        keyAlgorithm: domain.applyConfig?.keyAlgorithm,
        nameservers: domain.applyConfig?.nameservers,
        timeout: domain.applyConfig?.timeout,
      });
@@ -101,6 +105,7 @@ const Edit = () => {
      applyConfig: {
        email: data.email ?? "",
        access: data.access,
+        keyAlgorithm: data.keyAlgorithm,
        nameservers: data.nameservers,
        timeout: data.timeout,
      },
@@ -235,6 +240,7 @@ const Edit = () => {
                      </FormItem>
                    )}
                  />
+
                  {/* 邮箱 */}
                  <FormField
                    control={form.control}
@@ -261,7 +267,7 @@ const Edit = () => {
                            }}
                          >
                            <SelectTrigger>
-                              <SelectValue placeholder={t("domain.application.form.email.errmsg.empty")} />
+                              <SelectValue placeholder={t("domain.application.form.email.placeholder")} />
                            </SelectTrigger>
                            <SelectContent>
                              <SelectGroup>
@@ -280,7 +286,8 @@ const Edit = () => {
                      </FormItem>
                    )}
                  />
-                  {/* 授权 */}
+
+                  {/* DNS 服务商授权 */}
                  <FormField
                    control={form.control}
                    name="access"
@@ -332,48 +339,95 @@ const Edit = () => {
                    )}
                  />

-                  {/* 超时时间 */}
-                  <FormField
-                    control={form.control}
-                    name="timeout"
-                    render={({ field }) => (
-                      <FormItem>
-                        <FormLabel>{t("domain.application.form.timeout.label")}</FormLabel>
-                        <FormControl>
-                          <Input
-                            type="number"
-                            placeholder={t("ddomain.application.form.timeout.placeholder")}
-                            {...field}
-                            value={field.value}
-                            onChange={(e) => {
-                              form.setValue("timeout", parseInt(e.target.value));
-                            }}
+                  <div>
+                    <hr />
+                    <Collapsible>
+                      <CollapsibleTrigger className="w-full my-4">
+                        <div className="flex items-center justify-between space-x-4">
+                          <span className="flex-1 text-sm text-gray-600 text-left">{t("domain.application.form.advanced_settings.label")}</span>
+                          <ChevronsUpDown className="h-4 w-4" />
+                        </div>
+                      </CollapsibleTrigger>
+                      <CollapsibleContent>
+                        <div className="flex flex-col space-y-8">
+                          {/* 证书算法 */}
+                          <FormField
+                            control={form.control}
+                            name="keyAlgorithm"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>{t("domain.application.form.key_algorithm.label")}</FormLabel>
+                                <Select
+                                  {...field}
+                                  value={field.value}
+                                  onValueChange={(value) => {
+                                    form.setValue("keyAlgorithm", value);
+                                  }}
+                                >
+                                  <SelectTrigger>
+                                    <SelectValue placeholder={t("domain.application.form.key_algorithm.placeholder")} />
+                                  </SelectTrigger>
+                                  <SelectContent>
+                                    <SelectGroup>
+                                      <SelectItem value="RSA2048">RSA2048</SelectItem>
+                                      <SelectItem value="RSA3072">RSA3072</SelectItem>
+                                      <SelectItem value="RSA4096">RSA4096</SelectItem>
+                                      <SelectItem value="RSA8192">RSA8192</SelectItem>
+                                      <SelectItem value="EC256">EC256</SelectItem>
+                                      <SelectItem value="EC384">EC384</SelectItem>
+                                    </SelectGroup>
+                                  </SelectContent>
+                                </Select>
+                              </FormItem>
+                            )}
                          />
-                        </FormControl>

-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+                          {/* DNS */}
+                          <FormField
+                            control={form.control}
+                            name="nameservers"
+                            render={({ field }) => (
+                              <FormItem>
+                                <StringList
+                                  value={field.value ?? ""}
+                                  onValueChange={(val: string) => {
+                                    form.setValue("nameservers", val);
+                                  }}
+                                  valueType="dns"
+                                ></StringList>

-                  {/* nameservers */}
-                  <FormField
-                    control={form.control}
-                    name="nameservers"
-                    render={({ field }) => (
-                      <FormItem>
-                        <StringList
-                          value={field.value ?? ""}
-                          onValueChange={(val: string) => {
-                            form.setValue("nameservers", val);
-                          }}
-                          valueType="dns"
-                        ></StringList>
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />

-                        <FormMessage />
-                      </FormItem>
-                    )}
-                  />
+                          {/* DNS 超时时间 */}
+                          <FormField
+                            control={form.control}
+                            name="timeout"
+                            render={({ field }) => (
+                              <FormItem>
+                                <FormLabel>{t("domain.application.form.timeout.label")}</FormLabel>
+                                <FormControl>
+                                  <Input
+                                    type="number"
+                                    placeholder={t("domain.application.form.timeout.placeholder")}
+                                    {...field}
+                                    value={field.value}
+                                    onChange={(e) => {
+                                      form.setValue("timeout", parseInt(e.target.value));
+                                    }}
+                                  />
+                                </FormControl>
+
+                                <FormMessage />
+                              </FormItem>
+                            )}
+                          />
+                        </div>
+                      </CollapsibleContent>
+                    </Collapsible>
+                  </div>

                  <div className="flex justify-end">
                    <Button type="submit">{domain?.id ? t("common.save") : t("common.next")}</Button>