feat: credentials modal

web/src/pages/ApiServices/Create/index.tsx

@@ -1,7 +1,9 @@
 import Breadcrumbs from "@/components/ui/breadcrumbs";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
-import type { FC } from "react";
+import ApiServiceCredentialsModal from "@/feature/ApiServiceCredentialsModal";
+import { useAdmin } from "@/store/admin";
+import { useCallback, type FC } from "react";
 import { useForm } from "react-hook-form";
 import { Link } from "react-router";
 
@@ -26,13 +28,31 @@ const ApiServiceCreatePage: FC = () => {
     },
   });
 
-  const onSubmit = (data: FormData) => {
-    console.log("Form submitted:", data);
-    // handle create logic here (e.g. API call)
-  };
+  const createApiService = useAdmin((state) => state.createApiService);
+
+  const credentials = useAdmin((state) => state.createdCredentials);
+
+  const onSubmit = useCallback(
+    (data: FormData) => {
+      console.log("Form submitted:", data);
+      createApiService({
+        name: data.name,
+        description: data.description ?? "",
+        redirect_uris: data.redirectUris.trim().split("\n"),
+        scopes: data.scopes.trim().split(" "),
+        grant_types: data.grantTypes
+          ? data.grantTypes.trim().split(" ")
+          : ["authorization_code"],
+        is_active: data.enabled,
+      });
+    },
+    [createApiService],
+  );
 
   return (
     <div className="p-4">
+      {credentials !== null && <ApiServiceCredentialsModal />}
+
       <Breadcrumbs
         items={[
           { href: "/admin", label: "Admin" },