@hed-hog/core 0.0.356 → 0.0.359

package/hedhog/frontend/app/integration/profiles/page.tsx.ejs

@@ -61,7 +61,7 @@ import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';
 import { usePagination } from '@/hooks/use-pagination';
 import { formatDate } from '@/lib/format-date';
 import { useApp } from '@hed-hog/next-app-provider';
-import { Eye, EyeOff, Pencil, PlugZap, Trash2 } from 'lucide-react';
+import { Check, Copy, Eye, EyeOff, Pencil, PlugZap, Plus, Trash2, X } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import { useEffect, useRef, useState } from 'react';
 import { toast } from 'sonner';
@@ -104,7 +104,7 @@ type ProfileForm = {
   slug: string;
   type_id: string;
   provider_id: string;
-  config: Record<string, string | boolean | number>;
+  config: Record<string, string | boolean | number | string[]>;
   is_active: boolean;
 };
 
@@ -452,13 +452,6 @@ const PROVIDER_FIELDS: Record<string, FieldDef[]> = {
       type: 'password',
       required: true,
     },
-    {
-      key: 'redirect_uri',
-      labelKey: 'fieldRedirectUri',
-      type: 'url',
-      required: true,
-      colSpan: true,
-    },
   ],
   'github-oauth': [
     {
@@ -494,12 +487,39 @@ const PROVIDER_FIELDS: Record<string, FieldDef[]> = {
       required: true,
       placeholder: 'common',
     },
+  ],
+  'facebook-oauth': [
     {
-      key: 'redirect_uri',
-      labelKey: 'fieldRedirectUri',
-      type: 'url',
+      key: 'client_id',
+      labelKey: 'fieldClientId',
+      type: 'text',
+      required: true,
+    },
+    {
+      key: 'client_secret',
+      labelKey: 'fieldClientSecret',
+      type: 'password',
+      required: true,
+    },
+  ],
+  'microsoft-entra-id-oauth': [
+    {
+      key: 'client_id',
+      labelKey: 'fieldClientId',
+      type: 'text',
+      required: true,
+    },
+    {
+      key: 'client_secret',
+      labelKey: 'fieldClientSecret',
+      type: 'password',
+      required: true,
+    },
+    {
+      key: 'tenant_id',
+      labelKey: 'fieldTenantId',
+      type: 'text',
       required: true,
-      colSpan: true,
     },
   ],
 };
@@ -797,6 +817,7 @@ export default function IntegrationProfilesPage() {
   const [visibleFields, setVisibleFields] = useState<Record<string, boolean>>(
     {}
   );
+  const [copiedUrlIndex, setCopiedUrlIndex] = useState<number | null>(null);
   const [selectedProfileIds, setSelectedProfileIds] = useState<Set<number>>(
     new Set()
   );
@@ -826,6 +847,28 @@ export default function IntegrationProfilesPage() {
     ? (PROVIDER_FIELDS[selectedProvider.slug] ?? [])
     : [];
 
+  const isOAuthProvider = (selectedProvider?.slug ?? '').endsWith('-oauth');
+  const oauthProviderName = isOAuthProvider
+    ? selectedProvider!.slug.replace(/-oauth$/, '')
+    : '';
+  const appUrl =
+    typeof window !== 'undefined'
+      ? window.location.origin
+      : String(getSettingValue?.('url') ?? '').replace(/\/+$/, '');
+  const defaultCallbackUrls =
+    isOAuthProvider && appUrl
+      ? [
+          `${appUrl}/callback/${oauthProviderName}/login`,
+          `${appUrl}/callback/${oauthProviderName}/register`,
+          `${appUrl}/callback/${oauthProviderName}/connect`,
+        ]
+      : [];
+  const callbackUrls: string[] = (() => {
+    const saved = formData.config.callback_urls;
+    if (Array.isArray(saved)) return saved as string[];
+    return defaultCallbackUrls;
+  })();
+
   useEffect(() => {
     request<IntegrationType[]>({
       url: '/integration-profile/types',
@@ -868,13 +911,32 @@ export default function IntegrationProfilesPage() {
         url: `/integration-profile/${profile.id}`,
         method: 'GET',
       });
+      const loadedConfig =
+        (data.config as Record<
+          string,
+          string | boolean | number | string[]
+        >) ?? {};
+      const providerSlug =
+        providers.find((p) => p.id === data.provider_id)?.slug ?? '';
+      if (
+        providerSlug.endsWith('-oauth') &&
+        !Array.isArray(loadedConfig.callback_urls)
+      ) {
+        const pName = providerSlug.replace(/-oauth$/, '');
+        if (appUrl) {
+          loadedConfig.callback_urls = [
+            `${appUrl}/callback/${pName}/login`,
+            `${appUrl}/callback/${pName}/register`,
+            `${appUrl}/callback/${pName}/connect`,
+          ];
+        }
+      }
       setFormData({
         name: data.name,
         slug: data.slug,
         type_id: String(data.type_id),
         provider_id: String(data.provider_id),
-        config:
-          (data.config as Record<string, string | boolean | number>) ?? {},
+        config: loadedConfig,
         is_active: data.is_active,
       });
     } catch {
@@ -1082,14 +1144,49 @@ export default function IntegrationProfilesPage() {
   };
 
   const handleProviderChange = (provider_id: string) => {
-    setFormData((p) => ({ ...p, provider_id, config: {} }));
+    const provider = formTypeProviders.find((p) => String(p.id) === provider_id);
+    const initialConfig: Record<string, string | boolean | number | string[]> = {};
+    if (provider?.slug?.endsWith('-oauth')) {
+      const pName = provider.slug.replace(/-oauth$/, '');
+      initialConfig.callback_urls = appUrl
+        ? [
+            `${appUrl}/callback/${pName}/login`,
+            `${appUrl}/callback/${pName}/register`,
+            `${appUrl}/callback/${pName}/connect`,
+          ]
+        : [];
+    }
+    setFormData((p) => ({ ...p, provider_id, config: initialConfig }));
     setVisibleFields({});
   };
 
-  const updateConfig = (key: string, value: string | boolean | number) => {
+  const updateConfig = (key: string, value: string | boolean | number | string[]) => {
     setFormData((p) => ({ ...p, config: { ...p.config, [key]: value } }));
   };
 
+  const updateCallbackUrl = (index: number, value: string) => {
+    const urls = [...callbackUrls];
+    urls[index] = value;
+    setFormData((p) => ({ ...p, config: { ...p.config, callback_urls: urls } }));
+  };
+
+  const addCallbackUrl = () => {
+    setFormData((p) => ({
+      ...p,
+      config: { ...p.config, callback_urls: [...callbackUrls, ''] },
+    }));
+  };
+
+  const removeCallbackUrl = (index: number) => {
+    setFormData((p) => ({
+      ...p,
+      config: {
+        ...p.config,
+        callback_urls: callbackUrls.filter((_, i) => i !== index),
+      },
+    }));
+  };
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     if (!formData.type_id || !formData.provider_id) return;
@@ -1100,7 +1197,9 @@ export default function IntegrationProfilesPage() {
       name: formData.name,
       type_id: Number(formData.type_id),
       provider_id: Number(formData.provider_id),
-      config: formData.config,
+      config: isOAuthProvider
+        ? { ...formData.config, callback_urls: callbackUrls }
+        : formData.config,
       is_active: formData.is_active,
     };
 
@@ -1608,6 +1707,75 @@ export default function IntegrationProfilesPage() {
               </div>
             )}
 
+            {/* ── Callback URLs (OAuth only) ── */}
+            {isOAuthProvider && (
+              <div className="rounded-lg border">
+                <div className="flex items-center justify-between border-b px-4 py-3">
+                  <div>
+                    <p className="text-sm font-semibold">
+                      {t('callbackUrlsSectionTitle')}
+                    </p>
+                    <p className="mt-0.5 text-xs text-muted-foreground">
+                      {t('callbackUrlsDescription')}
+                    </p>
+                  </div>
+                  <Button
+                    type="button"
+                    variant="outline"
+                    size="sm"
+                    onClick={addCallbackUrl}
+                  >
+                    <Plus className="mr-1.5 h-3.5 w-3.5" />
+                    {t('addCallbackUrl')}
+                  </Button>
+                </div>
+                <div className="space-y-2 p-4">
+                  {callbackUrls.length === 0 && (
+                    <p className="py-1 text-center text-sm text-muted-foreground">
+                      {t('noCallbackUrls')}
+                    </p>
+                  )}
+                  {callbackUrls.map((url, index) => (
+                    <div key={index} className="flex gap-2">
+                      <Input
+                        value={url}
+                        onChange={(e) => updateCallbackUrl(index, e.target.value)}
+                        placeholder={t('callbackUrlPlaceholder')}
+                        className="font-mono text-sm"
+                      />
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        className="shrink-0"
+                        disabled={!url}
+                        onClick={() => {
+                          navigator.clipboard.writeText(url);
+                          setCopiedUrlIndex(index);
+                          setTimeout(() => setCopiedUrlIndex(null), 1500);
+                        }}
+                      >
+                        {copiedUrlIndex === index ? (
+                          <Check className="h-4 w-4 text-green-500" />
+                        ) : (
+                          <Copy className="h-4 w-4" />
+                        )}
+                      </Button>
+                      <Button
+                        type="button"
+                        variant="ghost"
+                        size="icon"
+                        onClick={() => removeCallbackUrl(index)}
+                        className="shrink-0"
+                      >
+                        <X className="h-4 w-4" />
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              </div>
+            )}
+
             {/* ── Active ── */}
             <div className="flex items-center justify-between rounded-md border px-4 py-3">
               <p className="text-sm font-medium">{t('isActiveLabel')}</p>