feat: add huaweicloud provider

2024-10-11 09:30:14 +08:00
parent dc16294b3d
commit a007c81e9a
15 changed files with 691 additions and 272 deletions
--- a/ui/src/components/certimate/AccessEdit.tsx
+++ b/ui/src/components/certimate/AccessEdit.tsx
@@ -10,16 +10,10 @@ import { ScrollArea } from "@/components/ui/scroll-area";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";

-import AccessTencentForm from "./AccessTencentForm";
-
-import { Label } from "../ui/label";
-
 import { Access, accessTypeMap } from "@/domain/access";
-import AccessAliyunForm from "./AccessAliyunForm";
 import { cn } from "@/lib/utils";

-import AccessSSHForm from "./AccessSSHForm";
-import WebhookForm from "./AccessWebhookFrom";
+import { Label } from "../ui/label";
 import {
  Select,
  SelectContent,
@@ -29,11 +23,16 @@ import {
  SelectTrigger,
  SelectValue,
 } from "../ui/select";
-import AccessCloudflareForm from "./AccessCloudflareForm";
+import AccessAliyunForm from "./AccessAliyunForm";
+import AccessTencentForm from "./AccessTencentForm";
+import AccessHuaweicloudForm from "./AccessHuaweicloudForm";
 import AccessQiniuForm from "./AccessQiniuForm";
+import AccessCloudflareForm from "./AccessCloudflareForm";
 import AccessNamesiloForm from "./AccessNamesiloForm";
 import AccessGodaddyFrom from "./AccessGodaddyForm";
 import AccessLocalForm from "./AccessLocalForm";
+import AccessSSHForm from "./AccessSSHForm";
+import AccessWebhookForm from "./AccessWebhookFrom";

 type TargetConfigEditProps = {
  op: "add" | "edit" | "copy";
@@ -56,17 +55,6 @@ export function AccessEdit({

  let form = <> </>;
  switch (configType) {
-    case "tencent":
-      form = (
-        <AccessTencentForm
-          data={data}
-          op={op}
-          onAfterReq={() => {
-            setOpen(false);
-          }}
-        />
-      );
-      break;
    case "aliyun":
      form = (
        <AccessAliyunForm
@@ -78,9 +66,9 @@ export function AccessEdit({
        />
      );
      break;
-    case "ssh":
+    case "tencent":
      form = (
-        <AccessSSHForm
+        <AccessTencentForm
          data={data}
          op={op}
          onAfterReq={() => {
@@ -89,20 +77,9 @@ export function AccessEdit({
        />
      );
      break;
-    case "webhook":
+    case "huaweicloud":
      form = (
-        <WebhookForm
-          data={data}
-          op={op}
-          onAfterReq={() => {
-            setOpen(false);
-          }}
-        />
-      );
-      break;
-    case "cloudflare":
-      form = (
-        <AccessCloudflareForm
+        <AccessHuaweicloudForm
          data={data}
          op={op}
          onAfterReq={() => {
@@ -122,6 +99,17 @@ export function AccessEdit({
        />
      );
      break;
+    case "cloudflare":
+      form = (
+        <AccessCloudflareForm
+          data={data}
+          op={op}
+          onAfterReq={() => {
+            setOpen(false);
+          }}
+        />
+      );
+      break;
    case "namesilo":
      form = (
        <AccessNamesiloForm
@@ -155,6 +143,28 @@ export function AccessEdit({
        />
      );
      break;
+    case "ssh":
+      form = (
+        <AccessSSHForm
+          data={data}
+          op={op}
+          onAfterReq={() => {
+            setOpen(false);
+          }}
+        />
+      );
+      break;
+    case "webhook":
+      form = (
+        <AccessWebhookForm
+          data={data}
+          op={op}
+          onAfterReq={() => {
+            setOpen(false);
+          }}
+        />
+      );
+      break;
  }

  const getOptionCls = (val: string) => {
@@ -168,11 +178,17 @@ export function AccessEdit({
      </DialogTrigger>
      <DialogContent className="sm:max-w-[600px] w-full dark:text-stone-200">
        <DialogHeader>
-          <DialogTitle>{op == "add" ? t('access.add') : op == "edit" ? t('access.edit') : t('access.copy')}</DialogTitle>
+          <DialogTitle>
+            {op == "add"
+              ? t("access.add")
+              : op == "edit"
+              ? t("access.edit")
+              : t("access.copy")}
+          </DialogTitle>
        </DialogHeader>
        <ScrollArea className="max-h-[80vh]">
          <div className="container py-3">
-            <Label>{t('access.type')}</Label>
+            <Label>{t("access.type")}</Label>

            <Select
              onValueChange={(val) => {
@@ -181,11 +197,11 @@ export function AccessEdit({
              defaultValue={configType}
            >
              <SelectTrigger className="mt-3">
-                <SelectValue placeholder={t('access.type.not.empty')} />
+                <SelectValue placeholder={t("access.type.not.empty")} />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
-                  <SelectLabel>{t('access.type')}</SelectLabel>
+                  <SelectLabel>{t("access.type")}</SelectLabel>
                  {typeKeys.map((key) => (
                    <SelectItem value={key} key={key}>
                      <div
@@ -198,7 +214,7 @@ export function AccessEdit({
                          src={accessTypeMap.get(key)?.[1]}
                          className="h-6 w-6"
                        />
-                        <div>{t(accessTypeMap.get(key)?.[0] || '')}</div>
+                        <div>{t(accessTypeMap.get(key)?.[0] || "")}</div>
                      </div>
                    </SelectItem>
                  ))}
--- a/ui/src/components/certimate/AccessHuaweicloudForm.tsx
+++ b/ui/src/components/certimate/AccessHuaweicloudForm.tsx
@@ -0,0 +1,221 @@
+import { Input } from "@/components/ui/input";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+
+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, HuaweicloudConfig, getUsageByConfigType } from "@/domain/access";
+import { save } from "@/repository/access";
+import { useConfig } from "@/providers/config";
+
+import { ClientResponseError } from "pocketbase";
+import { PbErrorData } from "@/domain/base";
+
+const AccessHuaweicloudForm = ({
+  data,
+  op,
+  onAfterReq,
+}: {
+  data?: Access;
+  op: "add" | "edit" | "copy";
+  onAfterReq: () => void;
+}) => {
+  const { addAccess, updateAccess } = useConfig();
+  const { t } = useTranslation();
+  const formSchema = z.object({
+    id: z.string().optional(),
+    name: z.string().min(1, 'access.form.name.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
+    configType: accessFormType,
+    region: z.string().min(1, 'access.form.region.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
+    accessKeyId: z.string().min(1, 'access.form.access.key.id.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
+    secretAccessKey: z.string().min(1, 'access.form.access.key.secret.not.empty').max(64, t('zod.rule.string.max', { max: 64 })),
+  });
+
+  let config: HuaweicloudConfig = {
+    region: "cn-north-1",
+    accessKeyId: "",
+    secretAccessKey: "",
+  };
+  if (data) config = data.config as HuaweicloudConfig;
+
+  const form = useForm<z.infer<typeof formSchema>>({
+    resolver: zodResolver(formSchema),
+    defaultValues: {
+      id: data?.id,
+      name: data?.name || '',
+      configType: "huaweicloud",
+      region: config.region,
+      accessKeyId: config.accessKeyId,
+      secretAccessKey: config.secretAccessKey,
+    },
+  });
+
+  const onSubmit = async (data: z.infer<typeof formSchema>) => {
+    const req: Access = {
+      id: data.id as string,
+      name: data.name,
+      configType: data.configType,
+      usage: getUsageByConfigType(data.configType),
+      config: {
+        region: data.region,
+        accessKeyId: data.accessKeyId,
+        secretAccessKey: data.secretAccessKey,
+      },
+    };
+
+    try {
+      req.id =  op == "copy" ? "" : req.id;
+      const rs = await save(req);
+
+      onAfterReq();
+
+      req.id = rs.id;
+      req.created = rs.created;
+      req.updated = rs.updated;
+      if (data.id && op == "edit") {
+        updateAccess(req);
+        return;
+      }
+      console.log(req);
+      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;
+    }
+  };
+
+  return (
+    <>
+      <div className="max-w-[35em] mx-auto mt-10">
+        <Form {...form}>
+          <form
+            onSubmit={(e) => {
+              e.stopPropagation();
+              form.handleSubmit(onSubmit)(e);
+            }}
+            className="space-y-8"
+          >
+            <FormField
+              control={form.control}
+              name="name"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('name')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('access.form.name.not.empty')} {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="id"
+              render={({ field }) => (
+                <FormItem className="hidden">
+                  <FormLabel>{t('access.form.config.field')}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="configType"
+              render={({ field }) => (
+                <FormItem className="hidden">
+                  <FormLabel>{t('access.form.config.field')}</FormLabel>
+                  <FormControl>
+                    <Input {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="region"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('access.form.region')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('access.form.region.not.empty')} {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="accessKeyId"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('access.form.access.key.id')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('access.form.access.key.id.not.empty')} {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="secretAccessKey"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>{t('access.form.access.key.secret')}</FormLabel>
+                  <FormControl>
+                    <Input placeholder={t('access.form.access.key.secret.not.empty')} {...field} />
+                  </FormControl>
+
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormMessage />
+
+            <div className="flex justify-end">
+              <Button type="submit">{t('save')}</Button>
+            </div>
+          </form>
+        </Form>
+      </div>
+    </>
+  );
+};
+
+export default AccessHuaweicloudForm;
--- a/ui/src/domain/access.ts
+++ b/ui/src/domain/access.ts
@@ -1,15 +1,16 @@
 import { z } from "zod";

 export const accessTypeMap: Map<string, [string, string]> = new Map([
-  ["tencent", ["tencent", "/imgs/providers/tencent.svg"]],
  ["aliyun", ["aliyun", "/imgs/providers/aliyun.svg"]],
+  ["tencent", ["tencent", "/imgs/providers/tencent.svg"]],
+  ["huaweicloud", ["huaweicloud", "/imgs/providers/huaweicloud.svg"]],
+  ["qiniu", ["qiniu", "/imgs/providers/qiniu.svg"]],
  ["cloudflare", ["cloudflare", "/imgs/providers/cloudflare.svg"]],
  ["namesilo", ["namesilo", "/imgs/providers/namesilo.svg"]],
  ["godaddy", ["go.daddy", "/imgs/providers/godaddy.svg"]],
-  ["qiniu", ["qiniu", "/imgs/providers/qiniu.svg"]],
+  ["local", ["local.deployment", "/imgs/providers/local.svg"]],
  ["ssh", ["ssh", "/imgs/providers/ssh.svg"]],
  ["webhook", ["webhook", "/imgs/providers/webhook.svg"]],
-  ["local", ["local.deployment", "/imgs/providers/local.svg"]],
 ]);

 export const getProviderInfo = (t: string) => {
@@ -20,13 +21,14 @@ export const accessFormType = z.union(
  [
    z.literal("aliyun"),
    z.literal("tencent"),
-    z.literal("ssh"),
-    z.literal("webhook"),
-    z.literal("cloudflare"),
+    z.literal("huaweicloud"),
    z.literal("qiniu"),
+    z.literal("cloudflare"),
    z.literal("namesilo"),
    z.literal("godaddy"),
    z.literal("local"),
+    z.literal("ssh"),
+    z.literal("webhook"),
  ],
  { message: "access.not.empty" }
 );
@@ -40,52 +42,61 @@ export type Access = {
  usage: AccessUsage;
  group?: string;
  config:
-    | TencentConfig
    | AliyunConfig
-    | SSHConfig
-    | WebhookConfig
-    | CloudflareConfig
+    | TencentConfig
+    | HuaweicloudConfig
    | QiniuConfig
+    | CloudflareConfig
    | NamesiloConfig
    | GodaddyConfig
-    | LocalConfig;
-
+    | LocalConfig
+    | SSHConfig
+    | WebhookConfig;
  deleted?: string;
  created?: string;
  updated?: string;
 };

-export type QiniuConfig = {
-  accessKey: string;
-  secretKey: string;
-};
-
-export type WebhookConfig = {
-  url: string;
-};
-
-export type CloudflareConfig = {
-  dnsApiToken: string;
-};
-
-export type TencentConfig = {
-  secretId: string;
-  secretKey: string;
-};
-
 export type AliyunConfig = {
  accessKeyId: string;
  accessKeySecret: string;
 };

+export type TencentConfig = {
+  secretId: string;
+  secretKey: string;
+};
+
+export type HuaweicloudConfig = {
+  region: string;
+  accessKeyId: string;
+  secretAccessKey: string;
+};
+
+export type QiniuConfig = {
+  accessKey: string;
+  secretKey: string;
+};
+
+export type CloudflareConfig = {
+  dnsApiToken: string;
+};
+
 export type NamesiloConfig = {
  apiKey: string;
 };
+
 export type GodaddyConfig = {
  apiKey: string;
  apiSecret: string;
 };

+export type LocalConfig = {
+  command: string;
+  certPath: string;
+  keyPath: string;
+};
+
 export type SSHConfig = {
  host: string;
  port: string;
@@ -99,27 +110,28 @@ export type SSHConfig = {
  keyPath: string;
 };

-export type LocalConfig = {
-  command: string;
-  certPath: string;
-  keyPath: string;
+export type WebhookConfig = {
+  url: string;
 };

 export const getUsageByConfigType = (configType: string): AccessUsage => {
  switch (configType) {
    case "aliyun":
    case "tencent":
+    case "huaweicloud":
      return "all";
-    case "ssh":
-    case "webhook":
+
    case "qiniu":
    case "local":
+    case "ssh":
+    case "webhook":
      return "deploy";

    case "cloudflare":
    case "namesilo":
    case "godaddy":
      return "apply";
+
    default:
      return "all";
  }
--- a/ui/src/i18n/locales/en.json
+++ b/ui/src/i18n/locales/en.json
@@ -50,6 +50,7 @@
  "aliyun.cdn": "Alibaba Cloud-CDN",
  "aliyun.oss": "Alibaba Cloud-OSS",
  "aliyun.dcdn": "Alibaba Cloud-DCDN",
+  "huaweicloud": "Huawei Cloud",
  "qiniu": "Qiniu",
  "qiniu.cdn": "Qiniu-CDN",
  "cloudflare": "Cloudflare",
@@ -194,6 +195,8 @@
  "access.form.secret.key.not.empty": "Please enter SecretKey",
  "access.form.access.key": "AccessKey",
  "access.form.access.key.not.empty": "Please enter AccessKey",
+  "access.form.region": "Region",
+  "access.form.region.not.empty": "Please enter Region",
  "access.form.webhook.url": "Webhook URL",
  "access.form.webhook.url.not.empty": "Please enter Webhook URL",
  "access.form.ssh.group.label": "Authorization Configuration Group (used to deploy a single domain certificate to multiple SSH hosts)",
--- a/ui/src/i18n/locales/zh.json
+++ b/ui/src/i18n/locales/zh.json
@@ -50,6 +50,7 @@
  "aliyun.cdn": "阿里云-CDN",
  "aliyun.oss": "阿里云-OSS",
  "aliyun.dcdn": "阿里云-DCDN",
+  "huaweicloud": "华为云",
  "qiniu": "七牛云",
  "qiniu.cdn": "七牛云-CDN",
  "cloudflare": "Cloudflare",
@@ -194,6 +195,8 @@
  "access.form.secret.key.not.empty": "请输入 SecretKey",
  "access.form.access.key": "AccessKey",
  "access.form.access.key.not.empty": "请输入 AccessKey",
+  "access.form.region": "Region",
+  "access.form.region.not.empty": "请输入区域",
  "access.form.webhook.url": "Webhook URL",
  "access.form.webhook.url.not.empty": "请输入 Webhook URL",
  "access.form.ssh.group.label": "授权配置组（用于将一个域名证书部署到多个 ssh 主机）",