IdP 연동 기능 devfront 이전 및 클라이언트 종속으로 개편

devfront/src/features/clients/routes/ClientFederationPage.tsx

@@ -0,0 +1,263 @@
+import { useParams } from "react-router-dom";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import {
+  createIdpConfigForClient,
+  listIdpConfigsForClient,
+} from "../../../lib/devApi";
+import type { IdpConfigCreateRequest, IdpConfig } from "../../../lib/devApi";
+import { useState } from "react";
+
+// Proper Modal Component with Form
+const CreateIdpModal = ({
+  isOpen,
+  onClose,
+  clientId,
+}: {
+  isOpen: boolean;
+  onClose: () => void;
+  clientId: string;
+}) => {
+  const queryClient = useQueryClient();
+  const [formData, setFormData] = useState<IdpConfigCreateRequest>({
+    client_id: clientId,
+    provider_type: "oidc",
+    display_name: "",
+    status: "active",
+    issuer_url: "",
+    oidc_client_id: "",
+    oidc_client_secret: "",
+    scopes: "openid email profile",
+  });
+
+  const mutation = useMutation({
+    mutationFn: (newData: IdpConfigCreateRequest) =>
+      createIdpConfigForClient(newData),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["idpConfigs", clientId] });
+      onClose();
+    },
+    onError: (error) => {
+      // Basic error handling
+      alert(`Failed to create configuration: ${error.message}`);
+    },
+  });
+
+  // 이 내용으로 교체해주세요
+  const handleChange = (
+    e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>,
+  ) => {
+    const { name, value } = e.target;
+    setFormData((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    mutation.mutate(formData);
+  };
+
+  if (!isOpen) return null;
+
+  return (
+    <div className="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
+      <div className="bg-white p-6 rounded-lg shadow-xl w-full max-w-lg">
+        <h2 className="text-xl font-bold mb-4">Add New IdP Configuration</h2>
+        <form onSubmit={handleSubmit}>
+          {/* Display Name */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Display Name
+            </label>
+            <input
+              type="text"
+              name="display_name"
+              value={formData.display_name}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Issuer URL */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Issuer URL
+            </label>
+            <input
+              type="url"
+              name="issuer_url"
+              value={formData.issuer_url}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              placeholder="https://accounts.google.com"
+              required
+            />
+          </div>
+
+          {/* Client ID */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Client ID
+            </label>
+            <input
+              type="text"
+              name="oidc_client_id"
+              value={formData.oidc_client_id}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Client Secret */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Client Secret
+            </label>
+            <input
+              type="password"
+              name="oidc_client_secret"
+              value={formData.oidc_client_secret}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+              required
+            />
+          </div>
+
+          {/* Scopes */}
+          <div className="mb-4">
+            <label className="block text-gray-700 text-sm font-bold mb-2">
+              Scopes
+            </label>
+            <input
+              type="text"
+              name="scopes"
+              value={formData.scopes}
+              onChange={handleChange}
+              className="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
+            />
+          </div>
+
+          {/* Action Buttons */}
+          <div className="flex items-center justify-end">
+            <button
+              type="button"
+              onClick={onClose}
+              className="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded mr-2"
+            >
+              Cancel
+            </button>
+            <button
+              type="submit"
+              disabled={mutation.isPending}
+              className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded disabled:opacity-50"
+            >
+              {mutation.isPending ? "Saving..." : "Save Configuration"}
+            </button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export function ClientFederationPage() {
+  const { id: clientId } = useParams<{ id: string }>();
+  const [isCreateModalOpen, setCreateModalOpen] = useState(false);
+
+  if (!clientId) {
+    return <div>Client ID is missing</div>;
+  }
+
+  const { data, isLoading, error } = useQuery({
+    queryKey: ["idpConfigs", clientId],
+    queryFn: () => listIdpConfigsForClient(clientId),
+  });
+
+  return (
+    <div className="p-4">
+      <h1 className="text-2xl font-bold mb-4">Identity Federation Settings</h1>
+      <p className="mb-4 text-gray-600">
+        Manage external identity providers for this application.
+      </p>
+
+      <div className="mb-4">
+        <button
+          onClick={() => setCreateModalOpen(true)}
+          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+        >
+          + Add IdP Configuration
+        </button>
+      </div>
+
+      <CreateIdpModal
+        isOpen={isCreateModalOpen}
+        onClose={() => setCreateModalOpen(false)}
+        clientId={clientId}
+      />
+
+      {isLoading && <div>Loading configurations...</div>}
+      {error && (
+        <div className="text-red-500">
+          Failed to load configurations: {error.message}
+        </div>
+      )}
+
+      {data && (
+        <div className="overflow-x-auto">
+          <table className="min-w-full bg-white">
+            <thead className="bg-gray-200">
+              <tr>
+                <th className="py-2 px-4 border-b">Display Name</th>
+                <th className="py-2 px-4 border-b">Provider Type</th>
+                <th className="py-2 px-4 border-b">Status</th>
+                <th className="py-2 px-4 border-b">Actions</th>
+              </tr>
+            </thead>
+            <tbody>
+              {data.length === 0 ? (
+                <tr>
+                  <td colSpan={4} className="text-center py-4">
+                    No IdP configurations found.
+                  </td>
+                </tr>
+              ) : (
+                data.map((config: IdpConfig) => (
+                  <tr key={config.id}>
+                    <td className="py-2 px-4 border-b">
+                      {config.display_name}
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      {config.provider_type.toUpperCase()}
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <span
+                        className={`px-2 py-1 text-xs font-semibold rounded-full ${
+                          config.status === "active"
+                            ? "bg-green-200 text-green-800"
+                            : "bg-gray-200 text-gray-800"
+                        }`}
+                      >
+                        {config.status}
+                      </span>
+                    </td>
+                    <td className="py-2 px-4 border-b">
+                      <button className="text-blue-500 hover:underline mr-2">
+                        Edit
+                      </button>
+                      <button className="text-red-500 hover:underline">
+                        Delete
+                      </button>
+                    </td>
+                  </tr>
+                ))
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  );
+}

devfront/src/lib/devApi.ts

@@ -59,6 +59,37 @@ export type ConsentListResponse = {
   items: ConsentSummary[];
 };
 
+// --- Federation / IdP Config Types ---
+export type ProviderType = "oidc" | "saml";
+
+export type IdpConfig = {
+  id: string;
+  client_id: string; // Changed from tenant_id
+  provider_type: ProviderType;
+  display_name: string;
+  status: "active" | "inactive";
+  issuer_url?: string;
+  // OIDC specific fields
+  oidc_client_id?: string;
+  oidc_client_secret?: string;
+  scopes?: string;
+  // SAML specific fields
+  metadata_url?: string;
+  metadata_xml?: string;
+  entity_id?: string;
+  acs_url?: string;
+  createdAt: string;
+  updatedAt: string;
+};
+
+export type IdpConfigCreateRequest = Omit<
+  IdpConfig,
+  "id" | "createdAt" | "updatedAt"
+>;
+export type IdpConfigUpdateRequest = Partial<IdpConfigCreateRequest>;
+// --- End Federation Types ---
+
+
 export async function fetchClients() {
   const { data } = await apiClient.get<ClientListResponse>("/clients");
   return data;
@@ -123,3 +154,36 @@ export async function revokeConsent(subject: string, clientId?: string) {
   }
   await apiClient.delete("/consents", { params });
 }
+
+// --- Federation / IdP Config API Calls ---
+
+export async function listIdpConfigsForClient(clientId: string) {
+  const { data } = await apiClient.get<IdpConfig[]>(
+    `/clients/${clientId}/idps`,
+  );
+  return data;
+}
+
+export async function createIdpConfigForClient(payload: IdpConfigCreateRequest) {
+  const { data } = await apiClient.post<IdpConfig>(
+		`/clients/${payload.client_id}/idps`,
+		payload,
+	);
+  return data;
+}
+
+export async function updateIdpConfig(
+  clientId: string,
+  idpId: string,
+  payload: IdpConfigUpdateRequest,
+) {
+  const { data } = await apiClient.put<IdpConfig>(
+    `/clients/${clientId}/idps/${idpId}`,
+    payload,
+  );
+  return data;
+}
+
+export async function deleteIdpConfig(clientId: string, idpId: string) {
+  await apiClient.delete(`/clients/${clientId}/idps/${idpId}`);
+}