feat: api service edit page

internal/admin/routes.go

@@ -29,7 +29,7 @@ func (h *AdminHandler) RegisterRoutes(router chi.Router) {
 		r.Get("/api-services/{id}", h.GetApiService)
 		r.Post("/api-services", h.AddApiService)
 		r.Patch("/api-services/{id}", h.RegenerateApiServiceSecret)
-		r.Put("/api-services/{id}", h.RegenerateApiServiceSecret)
+		r.Put("/api-services/{id}", h.UpdateApiService)
 		r.Patch("/api-services/toggle/{id}", h.ToggleApiService)
 	})
 }

web/src/App.tsx

@@ -15,6 +15,7 @@ import ApiServiceCreatePage from "./pages/ApiServices/Create";
 import ViewApiServicePage from "./pages/ApiServices/View";
 import NotAllowedPage from "./pages/NotAllowed";
 import NotFoundPage from "./pages/NotFound";
+import ApiServiceEditPage from "./pages/ApiServices/Update";
 
 const router = createBrowserRouter([
   {
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
                     path: "view/:serviceId",
                     element: <ViewApiServicePage />,
                   },
+                  {
+                    path: "edit/:serviceId",
+                    element: <ApiServiceEditPage />,
+                  },
                 ],
               },
             ],

web/src/api/admin/apiServices.ts

@@ -64,3 +64,28 @@ export const patchToggleApiService = async (id: string): Promise<void> => {
 
   return response.data;
 };
+
+export interface UpdateApiServiceRequest {
+  name: string;
+  description: string;
+  redirect_uris: string[];
+  scopes: string[];
+  grant_types: string[];
+}
+
+export type UpdateApiServiceResponse = ApiService;
+
+export const putApiService = async (
+  serviceId: string,
+  req: UpdateApiServiceRequest,
+): Promise<UpdateApiServiceResponse> => {
+  const response = await axios.put<UpdateApiServiceResponse>(
+    `/api/v1/admin/api-services/${serviceId}`,
+    req,
+  );
+
+  if (response.status !== 200 && response.status !== 201)
+    throw await handleApiError(response);
+
+  return response.data;
+};

web/src/feature/ApiServiceUpdatedModal/index.tsx

@@ -0,0 +1,44 @@
+import { createPortal } from "react-dom";
+import { Button } from "@/components/ui/button";
+import { CircleCheckBig, X } from "lucide-react";
+import { useAdmin } from "@/store/admin";
+
+const ApiServiceUpdatedModal = () => {
+  const resetUpdated = useAdmin((state) => state.resetUpdatedApiService);
+
+  const portalRoot = document.getElementById("portal-root");
+  if (!portalRoot) return null;
+
+  return createPortal(
+    <div className="fixed z-50 inset-0 flex items-center justify-center bg-black/30 dark:bg-white/30 px-5">
+      <div className="rounded-2xl flex flex-col items-stretch bg-white dark:bg-black min-w-[300px] max-w-md w-full">
+        <div className="flex flex-row items-center justify-between p-4 border-b dark:border-gray-800 border-gray-300">
+          <p className="text-gray-800 dark:text-gray-200">Service Updated</p>
+          <Button variant="icon" onClick={resetUpdated}>
+            <X />
+          </Button>
+        </div>
+        <div className="p-4">
+          <div className="mb-4 flex flex-col items-center p-4 text-green-400 gap-3">
+            <CircleCheckBig size={64} />
+            <h2 className="text-gray-800 dark:text-gray-200 text-xl">
+              Service has updated successfully!
+            </h2>
+          </div>
+          <div className="mt-4 w-full">
+            <Button
+              variant="outlined"
+              className="w-full"
+              onClick={resetUpdated}
+            >
+              Close
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>,
+    portalRoot,
+  );
+};
+
+export default ApiServiceUpdatedModal;

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

@@ -0,0 +1,199 @@
+import Breadcrumbs from "@/components/ui/breadcrumbs";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import ApiServiceUpdatedModal from "@/feature/ApiServiceUpdatedModal";
+import { useAdmin } from "@/store/admin";
+import { useCallback, useEffect, type FC } from "react";
+import { useForm } from "react-hook-form";
+import { Link, useParams } from "react-router";
+
+interface FormData {
+  name: string;
+  description: string;
+  redirectUris: string;
+  scopes: string;
+  grantTypes: string;
+}
+
+const ApiServiceEditPage: FC = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    setValue,
+  } = useForm<FormData>({
+    defaultValues: {
+      scopes: "openid",
+    },
+  });
+
+  const { serviceId } = useParams();
+  const apiService = useAdmin((state) => state.viewApiService);
+
+  const loadService = useAdmin((state) => state.fetchApiService);
+
+  const updateApiService = useAdmin((state) => state.updateApiService);
+  const updating = useAdmin((state) => state.updatingApiService);
+  const updated = useAdmin((state) => state.updatedApiService);
+
+  const onSubmit = useCallback(
+    (data: FormData) => {
+      console.log("Form submitted:", data);
+      updateApiService({
+        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"],
+      });
+    },
+    [updateApiService],
+  );
+
+  useEffect(() => {
+    if (typeof serviceId === "string") loadService(serviceId);
+  }, [loadService, serviceId]);
+
+  useEffect(() => {
+    if (apiService != null) {
+      setValue("name", apiService.name);
+      setValue("description", apiService.description);
+      setValue("redirectUris", apiService.redirect_uris.join("\n"));
+      setValue("scopes", apiService.scopes.join(" "));
+      setValue("grantTypes", apiService.grant_types.join(" "));
+    }
+  }, [apiService, setValue]);
+
+  return (
+    <div className="p-4">
+      {updated && <ApiServiceUpdatedModal />}
+
+      <Breadcrumbs
+        items={[
+          { href: "/admin", label: "Admin" },
+          { href: "/admin/api-services", label: "API Services" },
+          { label: "Create new API Service" },
+        ]}
+      />
+      <form onSubmit={handleSubmit(onSubmit)}>
+        {/* Service Information */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">
+              Service Information
+            </h2>
+          </div>
+          <div className="p-4">
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">Name</p>
+              <Input
+                placeholder="Display Name"
+                {...register("name", { required: "Name is required" })}
+              />
+              {errors.name && (
+                <span className="text-red-500 text-sm">
+                  {errors.name.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Description
+              </p>
+              <textarea
+                {...register("description", {
+                  required: "Description is required",
+                })}
+                className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Some description goes here..."
+              ></textarea>
+              {errors.description && (
+                <span className="text-red-500 text-sm">
+                  {errors.description.message}
+                </span>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* OpenID Connect */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">OpenID Connect</h2>
+          </div>
+          <div className="p-4">
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Redirect URIs
+              </p>
+              <textarea
+                {...register("redirectUris", {
+                  required: "At least one URI is required",
+                })}
+                className="dark:text-gray-100 border border-gray-300 dark:border-gray-700 rounded placeholder:text-gray-600 text-sm p-2 focus:outline-none focus:ring-2 focus:ring-blue-500"
+                placeholder="Enter multiple URIs separated with new line"
+              ></textarea>
+              {errors.redirectUris && (
+                <span className="text-red-500 text-sm">
+                  {errors.redirectUris.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">Scopes</p>
+              <Input
+                placeholder="Scopes separated with space"
+                {...register("scopes", { required: "Scopes are required" })}
+              />
+              {errors.scopes && (
+                <span className="text-red-500 text-sm">
+                  {errors.scopes.message}
+                </span>
+              )}
+            </div>
+
+            <div className="flex flex-col gap-2 mb-4">
+              <p className="text-gray-600 dark:text-gray-400 text-sm">
+                Grant Types
+              </p>
+              <Input
+                placeholder="Leave empty for 'authorization_code'"
+                {...register("grantTypes")}
+              />
+            </div>
+          </div>
+        </div>
+
+        {/* Final Section */}
+        <div className="border dark:border-gray-800 border-gray-300 rounded mt-4 flex flex-col">
+          <div className="p-4 border-b dark:border-gray-800 border-gray-300">
+            <h2 className="text-gray-800 dark:text-gray-200">
+              Approve & Submit
+            </h2>
+          </div>
+          <div className="p-4">
+            <div className="flex flex-row items-center justify-between gap-2 mt-4">
+              <Button type="submit" loading={updating}>
+                Update
+              </Button>
+              <Link to="/admin/api-services">
+                <Button
+                  variant="text"
+                  className="text-red-400 hover:text-red-500"
+                >
+                  Cancel
+                </Button>
+              </Link>
+            </div>
+          </div>
+        </div>
+      </form>
+    </div>
+  );
+};
+
+export default ApiServiceEditPage;

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

@@ -2,7 +2,7 @@ import Breadcrumbs from "@/components/ui/breadcrumbs";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { useAdmin } from "@/store/admin";
-import { useCallback, useEffect, type FC } from "react";
+import { useEffect, type FC } from "react";
 import { Link, useParams } from "react-router";
 
 const InfoCard = ({
@@ -189,9 +189,12 @@ const ViewApiServicePage: FC = () => {
             >
               {apiService.is_active ? "Disable" : "Enable"}
             </Button>
-            <Button variant="contained" disabled>
-              Edit
-            </Button>
+            <Link
+              to={`/admin/api-services/edit/${serviceId}`}
+              className="hover:underline hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
+            >
+              <Button variant="contained">Edit</Button>
+            </Link>
           </div>
         </div>
       </div>

web/src/store/admin.ts

@@ -3,7 +3,9 @@ import {
   getApiServices,
   patchToggleApiService,
   postApiService,
+  putApiService,
   type CreateApiServiceRequest,
+  type UpdateApiServiceRequest,
 } from "@/api/admin/apiServices";
 import type { ApiService, ApiServiceCredentials } from "@/types";
 import { create } from "zustand";
@@ -25,6 +27,12 @@ interface IAdminState {
 
   togglingApiService: boolean;
   toggleApiService: () => Promise<void>;
+
+  updateApiService: (req: UpdateApiServiceRequest) => Promise<void>;
+  updatingApiService: boolean;
+  updatedApiService: boolean;
+
+  resetUpdatedApiService: () => void;
 }
 
 export const useAdmin = create<IAdminState>((set, get) => ({
@@ -39,6 +47,10 @@ export const useAdmin = create<IAdminState>((set, get) => ({
 
   togglingApiService: false,
 
+  updatingApiService: false,
+  updatedApiService: false,
+  resetUpdatedApiService: () => set({ updatedApiService: false }),
+
   resetCredentials: () => set({ createdCredentials: null }),
 
   fetchApiServices: async () => {
@@ -67,6 +79,23 @@ export const useAdmin = create<IAdminState>((set, get) => ({
     }
   },
 
+  updateApiService: async (req: UpdateApiServiceRequest) => {
+    const viewService = get().viewApiService;
+    if (!viewService) return;
+
+    set({ updatingApiService: true });
+
+    try {
+      await putApiService(viewService.id, req);
+      get().fetchApiService(viewService.id);
+      set({ updatedApiService: true });
+    } catch (err) {
+      console.log("ERR: Failed to toggle service:", err);
+    } finally {
+      set({ updatingApiService: false });
+    }
+  },
+
   toggleApiService: async () => {
     const viewService = get().viewApiService;
     if (!viewService) return;