@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/admin/AdminAI.tsx

@@ -0,0 +1,207 @@
+import React, { useState, useEffect, useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import api from '../../api/client';
+import { useToast } from '../ui/Toast';
+import { Save, Sparkles } from 'lucide-react';
+import Button from '../ui/Button';
+import { PageLoadingSkeleton } from '../ui/PageLoadingSkeleton';
+import { Switch } from '../ui/switch';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+import Select from '../ui/Select';
+
+const PROVIDER_OPTIONS = [
+  { value: 'openai', label: 'OpenAI' },
+] as const;
+
+export default function AdminAI() {
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [settings, setSettings] = useState({
+    ai_enabled: false,
+    ai_provider: 'openai',
+    ai_model: 'gpt-4o-mini',
+    ai_api_key: '',
+    ai_api_key_set: false,
+  });
+  const [models, setModels] = useState<{ id: string }[]>([]);
+  const [modelsLoading, setModelsLoading] = useState(false);
+
+  const loadSettings = useCallback(async () => {
+    try {
+      const res = await api.get('/admin/settings/ai');
+      setSettings({
+        ai_enabled: res.data.ai_enabled ?? false,
+        ai_provider: res.data.ai_provider || 'openai',
+        ai_model: res.data.ai_model || 'gpt-4o-mini',
+        ai_api_key: '',
+        ai_api_key_set: res.data.ai_api_key_set ?? false,
+      });
+    } catch (err: unknown) {
+      const e = err as { response?: { status?: number; data?: { error?: string } } };
+      if (e?.response?.status === 403) {
+        setLoading(false);
+        return;
+      }
+      showToast(e?.response?.data?.error || t('common.error'), 'error');
+    } finally {
+      setLoading(false);
+    }
+  }, [showToast, t]);
+
+  useEffect(() => {
+    loadSettings();
+  }, [loadSettings]);
+
+  const loadModels = useCallback(async () => {
+    setModelsLoading(true);
+    try {
+      const res = await api.get<{ models: { id: string }[] }>('/admin/settings/ai/models');
+      setModels(Array.isArray(res.data?.models) ? res.data.models : []);
+    } catch (err: unknown) {
+      const e = err as { response?: { data?: { error?: string } } };
+      showToast(e?.response?.data?.error || t('admin.ai.modelsLoadError'), 'error');
+      setModels([]);
+    } finally {
+      setModelsLoading(false);
+    }
+  }, [showToast, t]);
+
+  useEffect(() => {
+    if (settings.ai_api_key_set && !loading) {
+      loadModels();
+    } else {
+      setModels([]);
+    }
+  }, [settings.ai_api_key_set, loading, loadModels]);
+
+  const providerOptions = PROVIDER_OPTIONS.map((p) => ({
+    value: p.value,
+    label: p.value === 'openai' ? t('admin.ai.providerOpenAI') : p.label,
+  }));
+
+  const modelOptions = models.map((m) => ({ value: m.id, label: m.id }));
+  const currentModelInList = modelOptions.some((o) => o.value === settings.ai_model);
+  const modelOptionsWithCurrent =
+    currentModelInList || !settings.ai_model
+      ? modelOptions
+      : [{ value: settings.ai_model, label: settings.ai_model }, ...modelOptions];
+
+  const handleSave = async (e: React.FormEvent) => {
+    e.preventDefault();
+    setSaving(true);
+    try {
+      await api.post('/admin/settings/ai', {
+        ai_enabled: settings.ai_enabled,
+        ai_provider: settings.ai_provider,
+        ai_model: settings.ai_model,
+        ai_api_key: settings.ai_api_key || undefined,
+      });
+      showToast(t('common.success'), 'success');
+      await loadSettings();
+    } catch (err: unknown) {
+      const e = err as { response?: { data?: { error?: string } } };
+      showToast(e?.response?.data?.error || t('common.error'), 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return <PageLoadingSkeleton lines={8} />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm p-4">
+        <div className="flex items-center gap-2 mb-6">
+          <Sparkles className="h-5 w-5 text-violet-500 dark:text-violet-400" />
+          <div>
+            <h2 className="text-xl font-semibold text-gray-900 dark:text-white">
+              {t('admin.ai.title')}
+            </h2>
+            <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+              {t('admin.ai.description')}
+            </p>
+          </div>
+        </div>
+
+        <form onSubmit={handleSave} className="space-y-4">
+          <div className="flex items-center gap-3">
+            <Switch
+              id="ai-enabled"
+              checked={settings.ai_enabled}
+              onCheckedChange={(checked) =>
+                setSettings({ ...settings, ai_enabled: checked })
+              }
+            />
+            <Label htmlFor="ai-enabled" className="text-sm font-medium text-gray-900 dark:text-white cursor-pointer">
+              {t('admin.ai.enabled')}
+            </Label>
+          </div>
+
+          <div>
+            <Label className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+              {t('admin.ai.provider')}
+            </Label>
+            <Select
+              value={settings.ai_provider}
+              onChange={(value) => setSettings({ ...settings, ai_provider: value })}
+              options={providerOptions}
+              className="max-w-xs"
+            />
+          </div>
+
+          <div>
+            <Label className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+              {t('admin.ai.apiKey')}
+            </Label>
+            <Input
+              type="password"
+              value={settings.ai_api_key}
+              onChange={(e) => setSettings({ ...settings, ai_api_key: e.target.value })}
+              placeholder={settings.ai_api_key_set ? t('admin.ai.apiKeyPlaceholder') : 'sk-...'}
+              className="max-w-md font-mono text-sm"
+            />
+            <p className="mt-1 text-xs text-gray-500 dark:text-gray-400">
+              {settings.ai_api_key_set ? t('admin.ai.apiKeyChangeHint') : t('admin.ai.apiKeyHint')}
+            </p>
+          </div>
+
+          <div>
+            <Label className="block text-sm font-semibold text-gray-900 dark:text-white mb-2">
+              {t('admin.ai.model')}
+            </Label>
+            <Select
+              value={settings.ai_model}
+              onChange={(value) => setSettings({ ...settings, ai_model: value })}
+              options={modelOptionsWithCurrent}
+              placeholder={
+                !settings.ai_api_key_set
+                  ? t('admin.ai.modelPlaceholderNoKey')
+                  : modelsLoading
+                    ? t('admin.ai.modelPlaceholderLoading')
+                    : undefined
+              }
+              disabled={!settings.ai_api_key_set || modelsLoading}
+              className="max-w-xs"
+            />
+          </div>
+
+          <div className="pt-2">
+            <Button type="submit" variant="primary" disabled={saving}>
+              {saving ? t('common.loading') : (
+                <>
+                  <Save className="h-4 w-4 mr-2 inline" />
+                  {t('common.save')}
+                </>
+              )}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}

package/frontend/src/components/admin/AdminOIDCProviders.tsx

@@ -0,0 +1,183 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import api from '../../api/client';
+import ConfirmDialog from '../ui/ConfirmDialog';
+import { useConfirmDialog } from '../../hooks/useConfirmDialog';
+import { Plus, Edit, Trash2, Key, Globe } from 'lucide-react';
+import OIDCProviderModal from '../modals/OIDCProviderModal';
+import Button from '../ui/Button';
+import { PageLoadingSkeleton } from '../ui/PageLoadingSkeleton';
+
+interface OIDCProvider {
+  id: string;
+  provider_key: string;
+  issuer_url: string;
+  authorization_url?: string;
+  token_url?: string;
+  userinfo_url?: string;
+  scopes: string;
+  auto_create_users: boolean;
+  default_role: string;
+  created_at: string;
+  callback_url?: string;
+}
+
+export default function AdminOIDCProviders() {
+  const { t } = useTranslation();
+  const { showConfirm, dialogState } = useConfirmDialog();
+  const [providers, setProviders] = useState<OIDCProvider[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [modalOpen, setModalOpen] = useState(false);
+  const [editingProvider, setEditingProvider] = useState<OIDCProvider | null>(null);
+
+  useEffect(() => {
+    loadProviders();
+  }, []);
+
+  const loadProviders = async () => {
+    try {
+      const response = await api.get('/oidc-providers');
+      setProviders(response.data);
+    } catch (error) {
+      console.error('Failed to load providers:', error);
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const handleEdit = (provider: OIDCProvider) => {
+    setEditingProvider(provider);
+    setModalOpen(true);
+  };
+
+  const handleDelete = (id: string) => {
+    showConfirm(
+      t('admin.confirmDeleteProvider'),
+      t('admin.confirmDeleteProvider'),
+      async () => {
+        try {
+          await api.delete(`/oidc-providers/${id}`);
+          await loadProviders();
+        } catch (error: any) {
+          console.error('Failed to delete provider:', error);
+          alert(error.response?.data?.error || t('common.error'));
+        }
+      },
+      { variant: 'danger', confirmText: t('common.delete'), cancelText: t('common.cancel') }
+    );
+  };
+
+  const handleModalClose = () => {
+    setModalOpen(false);
+    setEditingProvider(null);
+  };
+
+  if (loading) {
+    return <PageLoadingSkeleton lines={6} />;
+  }
+
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold text-gray-900 dark:text-white">
+            {t('admin.oidcProviders')}
+          </h2>
+          <p className="mt-1 text-sm text-gray-500 dark:text-gray-400">
+            {providers.length} {providers.length === 1 ? t('common.provider') : t('common.providers')}
+          </p>
+        </div>
+        <Button onClick={() => setModalOpen(true)} icon={Plus}>
+          {t('admin.addProvider')}
+        </Button>
+      </div>
+
+      {providers.length === 0 ? (
+        <div className="flex flex-col items-center justify-center py-16 px-4 bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700">
+          <Key className="h-12 w-12 text-gray-400 dark:text-gray-500 mb-4" />
+          <p className="text-gray-500 dark:text-gray-400 text-lg mb-4">{t('auth.noProviders')}</p>
+          <Button onClick={() => setModalOpen(true)} variant="primary" size="sm" icon={Plus}>
+            {t('admin.addProvider')}
+          </Button>
+        </div>
+      ) : (
+        <div className="grid grid-cols-1 gap-4 lg:grid-cols-2">
+          {providers.map((provider) => (
+            <div
+              key={provider.id}
+              className="group bg-white dark:bg-gray-800 rounded-lg border border-gray-200 dark:border-gray-700 shadow-sm hover:shadow-md transition-all overflow-hidden"
+            >
+              <div className="p-4 space-y-4">
+                <div className="flex items-start justify-between gap-3">
+                  <div className="flex items-center gap-2 flex-1 min-w-0">
+                    <Key className="h-5 w-5 text-gray-400 dark:text-gray-500 flex-shrink-0" />
+                    <h3 className="text-lg font-semibold text-gray-900 dark:text-white truncate">
+                      {provider.provider_key}
+                    </h3>
+                  </div>
+                </div>
+                <div className="flex items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
+                  <Globe className="h-4 w-4" />
+                  <span className="truncate">{provider.issuer_url}</span>
+                </div>
+                {(provider.authorization_url || provider.token_url || provider.userinfo_url) && (
+                  <div className="text-xs text-gray-500 dark:text-gray-400 space-y-1">
+                    {provider.token_url && (
+                      <div className="truncate">
+                        <span className="font-medium">Token:</span> {provider.token_url}
+                      </div>
+                    )}
+                  </div>
+                )}
+                {provider.callback_url && (
+                  <div className="p-3 bg-gray-50 dark:bg-gray-900/50 rounded-lg border border-gray-200 dark:border-gray-700">
+                    <div className="text-xs font-semibold text-gray-700 dark:text-gray-300 mb-1">
+                      {t('admin.callbackUrl')}:
+                    </div>
+                    <code className="text-xs text-gray-900 dark:text-gray-100 break-all">
+                      {provider.callback_url}
+                    </code>
+                  </div>
+                )}
+                <div className="flex flex-wrap gap-2">
+                  <span className="px-2.5 py-1 text-xs font-medium bg-blue-100 dark:bg-blue-900/30 text-blue-800 dark:text-blue-200 rounded-lg">
+                    {t('admin.autoCreate')}: {provider.auto_create_users ? t('common.yes') : t('common.no')}
+                  </span>
+                  <span className="px-2.5 py-1 text-xs font-medium bg-purple-100 dark:bg-purple-900/30 text-purple-800 dark:text-purple-200 rounded-lg">
+                    {t('admin.defaultRole')}: {provider.default_role}
+                  </span>
+                </div>
+                <div className="flex gap-2 pt-2 border-t border-gray-200 dark:border-gray-700">
+                  <Button
+                    variant="ghost"
+                    size="sm"
+                    icon={Edit}
+                    onClick={() => handleEdit(provider)}
+                    className="flex-1"
+                  >
+                    {t('common.edit')}
+                  </Button>
+                  <Button
+                    variant="danger"
+                    size="sm"
+                    icon={Trash2}
+                    onClick={() => handleDelete(provider.id)}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      )}
+
+      <OIDCProviderModal
+        provider={editingProvider}
+        isOpen={modalOpen}
+        onClose={handleModalClose}
+        onSuccess={loadProviders}
+      />
+
+      <ConfirmDialog {...dialogState} />
+    </div>
+  );
+}