feat(ui): add AccessEditDrawer component

ui/src/components/access/AccessEditDrawer.tsx

@@ -0,0 +1,118 @@
+import { useRef, useState } from "react";
+import { useTranslation } from "react-i18next";
+import { useControllableValue } from "ahooks";
+import { Button, Drawer, Space, notification } from "antd";
+
+import { type AccessModel } from "@/domain/access";
+import { useTriggerElement, useZustandShallowSelector } from "@/hooks";
+import { useAccessesStore } from "@/stores/access";
+import { getErrMsg } from "@/utils/error";
+
+import AccessForm, { type AccessFormInstance, type AccessFormProps } from "./AccessForm";
+
+export type AccessEditDrawerProps = {
+  data?: AccessFormProps["initialValues"];
+  loading?: boolean;
+  open?: boolean;
+  range?: AccessFormProps["range"];
+  scene: AccessFormProps["scene"];
+  trigger?: React.ReactNode;
+  onOpenChange?: (open: boolean) => void;
+  afterSubmit?: (record: AccessModel) => void;
+};
+
+const AccessEditDrawer = ({ data, loading, trigger, scene, range, afterSubmit, ...props }: AccessEditDrawerProps) => {
+  const { t } = useTranslation();
+
+  const [notificationApi, NotificationContextHolder] = notification.useNotification();
+
+  const { createAccess, updateAccess } = useAccessesStore(useZustandShallowSelector(["createAccess", "updateAccess"]));
+
+  const [open, setOpen] = useControllableValue<boolean>(props, {
+    valuePropName: "open",
+    defaultValuePropName: "defaultOpen",
+    trigger: "onOpenChange",
+  });
+
+  const triggerEl = useTriggerElement(trigger, { onClick: () => setOpen(true) });
+
+  const formRef = useRef<AccessFormInstance>(null);
+  const [formPending, setFormPending] = useState(false);
+
+  const handleOkClick = async () => {
+    setFormPending(true);
+    try {
+      await formRef.current!.validateFields();
+    } catch (err) {
+      setFormPending(false);
+      throw err;
+    }
+
+    try {
+      let values: AccessModel = formRef.current!.getFieldsValue();
+
+      if (scene === "add") {
+        if (data?.id) {
+          throw "Invalid props: `data`";
+        }
+
+        values = await createAccess(values);
+      } else if (scene === "edit") {
+        if (!data?.id) {
+          throw "Invalid props: `data`";
+        }
+
+        values = await updateAccess({ ...data, ...values });
+      } else {
+        throw "Invalid props: `preset`";
+      }
+
+      afterSubmit?.(values);
+      setOpen(false);
+    } catch (err) {
+      notificationApi.error({ message: t("common.text.request_error"), description: getErrMsg(err) });
+
+      throw err;
+    } finally {
+      setFormPending(false);
+    }
+  };
+
+  const handleCancelClick = () => {
+    if (formPending) return;
+
+    setOpen(false);
+  };
+
+  return (
+    <>
+      {NotificationContextHolder}
+
+      {triggerEl}
+
+      <Drawer
+        afterOpenChange={setOpen}
+        closable={!formPending}
+        destroyOnClose
+        footer={
+          <Space className="w-full justify-end">
+            <Button onClick={handleCancelClick}>{t("common.button.cancel")}</Button>
+            <Button loading={formPending} type="primary" onClick={handleOkClick}>
+              {scene === "edit" ? t("common.button.save") : t("common.button.submit")}
+            </Button>
+          </Space>
+        }
+        loading={loading}
+        maskClosable={!formPending}
+        open={open}
+        title={t(`access.action.${scene}`)}
+        width={720}
+        onClose={() => setOpen(false)}
+      >
+        <AccessForm ref={formRef} initialValues={data} range={range} scene={scene === "add" ? "add" : "edit"} />
+      </Drawer>
+    </>
+  );
+};
+
+export default AccessEditDrawer;

ui/src/i18n/locales/en/nls.access.json

@@ -48,10 +48,10 @@
   "access.form.acmehttpreq_mode.label": "Mode",
   "access.form.acmehttpreq_mode.placeholder": "Please select mode",
   "access.form.acmehttpreq_mode.tooltip": "For more information, see <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
-  "access.form.acmehttpreq_username.label": "HTTP Basic Auth username",
+  "access.form.acmehttpreq_username.label": "HTTP Basic Auth username (Optional)",
   "access.form.acmehttpreq_username.placeholder": "Please enter HTTP Basic Auth username",
   "access.form.acmehttpreq_username.tooltip": "For more information, see <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
-  "access.form.acmehttpreq_password.label": "HTTP Basic Auth password",
+  "access.form.acmehttpreq_password.label": "HTTP Basic Auth password (Optional)",
   "access.form.acmehttpreq_password.placeholder": "Please enter HTTP Basic Auth password",
   "access.form.acmehttpreq_password.tooltip": "For more information, see <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
   "access.form.aliyun_access_key_id.label": "Aliyun AccessKeyId",
@@ -251,14 +251,14 @@
   "access.form.ssh_port.placeholder": "Please enter server port",
   "access.form.ssh_username.label": "Username",
   "access.form.ssh_username.placeholder": "Please enter username",
-  "access.form.ssh_password.label": "Password",
+  "access.form.ssh_password.label": "Password (Optional)",
   "access.form.ssh_password.placeholder": "Please enter password",
   "access.form.ssh_password.tooltip": "Required when using password to connect to SSH.",
-  "access.form.ssh_key.label": "SSH key",
+  "access.form.ssh_key.label": "SSH key (Optional)",
   "access.form.ssh_key.placeholder": "Please enter SSH key",
   "access.form.ssh_key.upload": "Choose file ...",
   "access.form.ssh_key.tooltip": "Required when using key to connect to SSH.",
-  "access.form.ssh_key_passphrase.label": "SSH key passphrase",
+  "access.form.ssh_key_passphrase.label": "SSH key passphrase (Optional)",
   "access.form.ssh_key_passphrase.placeholder": "Please enter SSH key passphrase",
   "access.form.ssh_key_passphrase.tooltip": "Optional when using key to connect to SSH.",
   "access.form.sslcom_eab_kid.label": "ACME EAB KID",

ui/src/i18n/locales/zh/nls.access.json

@@ -48,10 +48,10 @@
   "access.form.acmehttpreq_mode.label": "模式",
   "access.form.acmehttpreq_mode.placeholder": "请选择模式",
   "access.form.acmehttpreq_mode.tooltip": "这是什么？请参阅 <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
-  "access.form.acmehttpreq_username.label": "HTTP 基本认证用户名",
+  "access.form.acmehttpreq_username.label": "HTTP 基本认证用户名（可选）",
   "access.form.acmehttpreq_username.placeholder": "请输入 HTTP 基本认证用户名",
   "access.form.acmehttpreq_username.tooltip": "这是什么？请参阅 <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
-  "access.form.acmehttpreq_password.label": "HTTP 基本认证密码",
+  "access.form.acmehttpreq_password.label": "HTTP 基本认证密码（可选）",
   "access.form.acmehttpreq_password.placeholder": "请输入 HTTP 基本认证密码",
   "access.form.acmehttpreq_password.tooltip": "这是什么？请参阅 <a href=\"https://go-acme.github.io/lego/dns/httpreq/\" target=\"_blank\">https://go-acme.github.io/lego/dns/httpreq/</a>",
   "access.form.aliyun_access_key_id.label": "阿里云 AccessKeyId",
@@ -245,14 +245,14 @@
   "access.form.ssh_port.placeholder": "请输入服务器端口",
   "access.form.ssh_username.label": "用户名",
   "access.form.ssh_username.placeholder": "请输入用户名",
-  "access.form.ssh_password.label": "密码",
+  "access.form.ssh_password.label": "密码（可选）",
   "access.form.ssh_password.placeholder": "请输入密码",
   "access.form.ssh_password.tooltip": "使用密码连接到 SSH 时必填。<br>该字段与密钥文件字段二选一，如果同时填写优先使用 SSH 密钥登录。",
-  "access.form.ssh_key.label": "SSH 密钥",
+  "access.form.ssh_key.label": "SSH 密钥（可选）",
   "access.form.ssh_key.placeholder": "请输入 SSH 密钥文件",
   "access.form.ssh_key.upload": "选择文件",
   "access.form.ssh_key.tooltip": "使用 SSH 密钥连接到 SSH 时必填。<br>该字段与密码字段二选一，如果同时填写优先使用 SSH 密钥登录。",
-  "access.form.ssh_key_passphrase.label": "SSH 密钥口令",
+  "access.form.ssh_key_passphrase.label": "SSH 密钥口令（可选）",
   "access.form.ssh_key_passphrase.placeholder": "请输入 SSH 密钥口令",
   "access.form.ssh_key_passphrase.tooltip": "使用 SSH 密钥连接到 SSH 时选填。",
   "access.form.sslcom_eab_kid.label": "ACME EAB KID",

ui/src/pages/accesses/AccessList.tsx

@@ -14,14 +14,14 @@ import { Avatar, Button, Card, Empty, Flex, Input, Modal, Space, Table, type Tab
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
-import AccessEditModal, { type AccessEditModalProps } from "@/components/access/AccessEditModal";
+import AccessEditDrawer, { type AccessEditDrawerProps } from "@/components/access/AccessEditDrawer";
 import { type AccessModel } from "@/domain/access";
 import { ACCESS_USAGES, accessProvidersMap } from "@/domain/provider";
 import { useZustandShallowSelector } from "@/hooks";
 import { useAccessesStore } from "@/stores/access";
 import { getErrMsg } from "@/utils/error";
 
-type AccessRanges = AccessEditModalProps["range"];
+type AccessRanges = AccessEditDrawerProps["range"];
 
 const AccessList = () => {
   const [searchParams] = useSearchParams();
@@ -85,7 +85,7 @@ const AccessList = () => {
       width: 120,
       render: (_, record) => (
         <Space.Compact>
-          <AccessEditModal
+          <AccessEditDrawer
             data={record}
             range={filters["range"] as AccessRanges}
             scene="edit"
@@ -96,7 +96,7 @@ const AccessList = () => {
             }
           />
 
-          <AccessEditModal
+          <AccessEditDrawer
             data={{ ...record, id: undefined, name: `${record.name}-copy` }}
             range={filters["range"] as AccessRanges}
             scene="add"
@@ -222,7 +222,7 @@ const AccessList = () => {
       <PageHeader
         title={t("access.page.title")}
         extra={[
-          <AccessEditModal
+          <AccessEditDrawer
             key="create"
             range={filters["range"] as AccessRanges}
             scene="add"