feat(ui): new AccessEditForm using antd

ui/src/pages/AuthLayout.tsx

@@ -1,6 +1,6 @@
 import { Navigate, Outlet } from "react-router-dom";
 
-import Version from "@/components/certimate/Version";
+import Version from "@/components/Version";
 import { getPocketBase } from "@/repository/pocketbase";
 
 const AuthLayout = () => {

ui/src/pages/ConsoleLayout.tsx

@@ -15,7 +15,7 @@ import {
   Workflow as WorkflowIcon,
 } from "lucide-react";
 
-import Version from "@/components/certimate/Version";
+import Version from "@/components/Version";
 import { useTheme } from "@/hooks";
 import { getPocketBase } from "@/repository/pocketbase";
 

ui/src/pages/accesses/AccessList.tsx

@@ -6,7 +6,7 @@ import { Copy as CopyIcon, Pencil as PencilIcon, Plus as PlusIcon, Trash2 as Tra
 import dayjs from "dayjs";
 import { ClientResponseError } from "pocketbase";
 
-import AccessEditDialog from "@/components/certimate/AccessEditDialog";
+import AccessEditModal from "@/components/access/AccessEditModal";
 import { accessProvidersMap, type AccessModel } from "@/domain/access";
 import { useAccessStore } from "@/stores/access";
 
@@ -71,24 +71,24 @@ const AccessList = () => {
       render: (_, record) => (
         <>
           <Space size={0}>
-            <AccessEditDialog
+            <AccessEditModal
+              data={record}
+              mode="edit"
               trigger={
                 <Tooltip title={t("access.action.edit")}>
                   <Button type="link" icon={<PencilIcon size={16} />} />
                 </Tooltip>
               }
-              op="edit"
-              data={record}
             />
 
-            <AccessEditDialog
+            <AccessEditModal
+              data={{ ...record, id: undefined, name: `${record.name}-copy` }}
+              mode="copy"
               trigger={
                 <Tooltip title={t("access.action.copy")}>
                   <Button type="link" icon={<CopyIcon size={16} />} />
                 </Tooltip>
               }
-              op="copy"
-              data={record}
             />
 
             <Tooltip title={t("access.action.delete")}>
@@ -113,7 +113,14 @@ const AccessList = () => {
   const [pageSize, setPageSize] = useState<number>(10);
 
   useEffect(() => {
-    fetchAccesses();
+    fetchAccesses().catch((err) => {
+      if (err instanceof ClientResponseError && err.isAbort) {
+        return;
+      }
+
+      console.error(err);
+      notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
+    });
   }, []);
 
   const fetchTableData = useCallback(async () => {
@@ -167,14 +174,14 @@ const AccessList = () => {
       <PageHeader
         title={t("access.page.title")}
         extra={[
-          <AccessEditDialog
+          <AccessEditModal
             key="create"
+            mode="add"
             trigger={
-              <Button key="create" type="primary" icon={<PlusIcon size={16} />}>
+              <Button type="primary" icon={<PlusIcon size={16} />}>
                 {t("access.action.add")}
               </Button>
             }
-            op="add"
           />,
         ]}
       />
@@ -190,6 +197,7 @@ const AccessList = () => {
           current: page,
           pageSize: pageSize,
           total: tableTotal,
+          showSizeChanger: true,
           onChange: (page: number, pageSize: number) => {
             setPage(page);
             setPageSize(pageSize);

ui/src/pages/certificates/CertificateList.tsx

@@ -222,6 +222,7 @@ const CertificateList = () => {
           current: page,
           pageSize: pageSize,
           total: tableTotal,
+          showSizeChanger: true,
           onChange: (page: number, pageSize: number) => {
             setPage(page);
             setPageSize(pageSize);

ui/src/pages/login/Login.tsx

@@ -20,19 +20,18 @@ const Login = () => {
   });
   const formRule = createSchemaFieldRule(formSchema);
   const [form] = Form.useForm<z.infer<typeof formSchema>>();
+  const [formPending, setFormPending] = useState(false);
 
-  const [isPending, setIsPending] = useState(false);
-
-  const onSubmit = async (values: z.infer<typeof formSchema>) => {
-    setIsPending(true);
+  const handleFormFinish = async (fields: z.infer<typeof formSchema>) => {
+    setFormPending(true);
 
     try {
-      await getPocketBase().admins.authWithPassword(values.username, values.password);
+      await getPocketBase().admins.authWithPassword(fields.username, fields.password);
       navigage("/");
     } catch (err) {
       notificationApi.error({ message: t("common.text.request_error"), description: <>{String(err)}</> });
     } finally {
-      setIsPending(false);
+      setFormPending(false);
     }
   };
 
@@ -45,7 +44,7 @@ const Login = () => {
           <img src="/logo.svg" className="w-16" />
         </div>
 
-        <Form form={form} disabled={isPending} layout="vertical" onFinish={onSubmit}>
+        <Form form={form} disabled={formPending} layout="vertical" onFinish={handleFormFinish}>
           <Form.Item name="username" label={t("login.username.label")} rules={[formRule]}>
             <Input placeholder={t("login.username.placeholder")} />
           </Form.Item>
@@ -55,7 +54,7 @@ const Login = () => {
           </Form.Item>
 
           <Form.Item>
-            <Button type="primary" htmlType="submit" block loading={isPending}>
+            <Button type="primary" htmlType="submit" block loading={formPending}>
               {t("login.submit")}
             </Button>
           </Form.Item>

ui/src/pages/workflows/WorkflowList.tsx

@@ -313,6 +313,7 @@ const WorkflowList = () => {
           current: page,
           pageSize: pageSize,
           total: tableTotal,
+          showSizeChanger: true,
           onChange: (page: number, pageSize: number) => {
             setPage(page);
             setPageSize(pageSize);