@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

package/frontend/src/components/modals/OIDCProviderModal.tsx

@@ -0,0 +1,284 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import Select from '../ui/Select';
+import { Key } from 'lucide-react';
+import api from '../../api/client';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '../ui/dialog';
+import { Separator } from '../ui/separator';
+import { FormFieldWrapper } from '../ui/FormFieldWrapper';
+import { ModalSection } from '../ui/ModalSection';
+import { ModalFooterActions } from '../ui/ModalFooterActions';
+import { Switch } from '../ui/switch';
+import { Label } from '../ui/label';
+import { Input } from '../ui/input';
+
+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;
+}
+
+interface OIDCProviderModalProps {
+  provider: OIDCProvider | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function OIDCProviderModal({
+  provider,
+  isOpen,
+  onClose,
+  onSuccess,
+}: OIDCProviderModalProps) {
+  const { t } = useTranslation();
+  const [formData, setFormData] = useState({
+    provider_key: '',
+    client_id: '',
+    client_secret: '',
+    issuer_url: '',
+    authorization_url: '',
+    token_url: '',
+    userinfo_url: '',
+    scopes: 'openid profile email',
+    auto_create_users: true,
+    default_role: 'user',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (provider) {
+      setFormData({
+        provider_key: provider.provider_key,
+        client_id: '',
+        client_secret: '',
+        issuer_url: provider.issuer_url,
+        authorization_url: provider.authorization_url || '',
+        token_url: provider.token_url || '',
+        userinfo_url: provider.userinfo_url || '',
+        scopes: provider.scopes,
+        auto_create_users: provider.auto_create_users,
+        default_role: provider.default_role,
+      });
+    } else {
+      setFormData({
+        provider_key: '',
+        client_id: '',
+        client_secret: '',
+        issuer_url: '',
+        authorization_url: '',
+        token_url: '',
+        userinfo_url: '',
+        scopes: 'openid profile email',
+        auto_create_users: true,
+        default_role: 'user',
+      });
+    }
+    setError('');
+  }, [provider, isOpen]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const payload: any = { ...formData };
+
+      if (provider) {
+        if (!payload.client_id || payload.client_id.trim() === '') {
+          delete payload.client_id;
+        }
+        if (!payload.client_secret || payload.client_secret.trim() === '') {
+          delete payload.client_secret;
+        }
+      } else {
+        if (!payload.client_id || payload.client_id.trim() === '') {
+          setError(t('admin.clientIdRequired'));
+          setLoading(false);
+          return;
+        }
+      }
+
+      if (!payload.authorization_url || payload.authorization_url.trim() === '') {
+        delete payload.authorization_url;
+      }
+      if (!payload.token_url || payload.token_url.trim() === '') {
+        delete payload.token_url;
+      }
+      if (!payload.userinfo_url || payload.userinfo_url.trim() === '') {
+        delete payload.userinfo_url;
+      }
+
+      if (provider) {
+        await api.put(`/oidc-providers/${provider.id}`, payload);
+      } else {
+        await api.post('/oidc-providers', payload);
+      }
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.error || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const roleOptions = [
+    { value: 'user', label: t('admin.user') },
+    { value: 'admin', label: t('admin.admin') },
+  ];
+
+  const isValid = formData.provider_key.trim() && formData.issuer_url.trim() && (provider || formData.client_id.trim());
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{provider ? t('admin.editProvider') : t('admin.addProvider')}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        <form id="oidc-provider-form" onSubmit={handleSubmit} className="space-y-6">
+          <ModalSection>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormFieldWrapper label={t('admin.providerKey')} required error={error}>
+                <div className="flex items-center gap-2">
+                  <Key className="h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="text"
+                    required
+                    value={formData.provider_key}
+                    onChange={(e) => setFormData({ ...formData, provider_key: e.target.value })}
+                    placeholder={t('admin.providerKey')}
+                  />
+                </div>
+              </FormFieldWrapper>
+              <FormFieldWrapper label={t('admin.issuerUrl')} required>
+                <Input
+                  type="url"
+                  required
+                  value={formData.issuer_url}
+                  onChange={(e) => setFormData({ ...formData, issuer_url: e.target.value })}
+                  placeholder={t('admin.issuerUrl')}
+                />
+              </FormFieldWrapper>
+            </div>
+
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <FormFieldWrapper
+                label={provider ? `${t('admin.clientId')} (${t('admin.leaveBlankToKeep')})` : t('admin.clientId')}
+                required={!provider}
+              >
+                <Input
+                  type="text"
+                  required={!provider}
+                  value={formData.client_id}
+                  onChange={(e) => setFormData({ ...formData, client_id: e.target.value })}
+                  placeholder={provider ? t('admin.leaveBlankToKeep') : ''}
+                />
+              </FormFieldWrapper>
+              <FormFieldWrapper
+                label={provider ? `${t('admin.clientSecret')} (${t('admin.leaveBlank')})` : t('admin.clientSecret')}
+                required={!provider}
+              >
+                <Input
+                  type="password"
+                  required={!provider}
+                  value={formData.client_secret}
+                  onChange={(e) => setFormData({ ...formData, client_secret: e.target.value })}
+                />
+              </FormFieldWrapper>
+            </div>
+
+            <FormFieldWrapper label={t('admin.scopes')}>
+              <Input
+                type="text"
+                value={formData.scopes}
+                onChange={(e) => setFormData({ ...formData, scopes: e.target.value })}
+                placeholder="openid profile email"
+              />
+            </FormFieldWrapper>
+          </ModalSection>
+
+          <Separator />
+
+          <ModalSection title={`${t('admin.customEndpoints')} (${t('admin.optional')})`} description={t('admin.customEndpointsDescription')}>
+            <div className="space-y-4">
+              <FormFieldWrapper label={t('admin.authorizationUrl')}>
+                <Input
+                  type="url"
+                  placeholder={`${formData.issuer_url || 'https://issuer.com'}/authorize`}
+                  value={formData.authorization_url}
+                  onChange={(e) => setFormData({ ...formData, authorization_url: e.target.value })}
+                />
+              </FormFieldWrapper>
+              <FormFieldWrapper label={t('admin.tokenUrl')}>
+                <Input
+                  type="url"
+                  placeholder={`${formData.issuer_url || 'https://issuer.com'}/token`}
+                  value={formData.token_url}
+                  onChange={(e) => setFormData({ ...formData, token_url: e.target.value })}
+                />
+              </FormFieldWrapper>
+              <FormFieldWrapper label={t('admin.userinfoUrl')}>
+                <Input
+                  type="url"
+                  placeholder={`${formData.issuer_url || 'https://issuer.com'}/userinfo`}
+                  value={formData.userinfo_url}
+                  onChange={(e) => setFormData({ ...formData, userinfo_url: e.target.value })}
+                />
+              </FormFieldWrapper>
+            </div>
+          </ModalSection>
+
+          <ModalSection>
+            <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
+              <div className="flex items-center justify-between rounded-lg border p-3">
+                <Label htmlFor="auto_create" className="text-sm font-medium cursor-pointer">
+                  {t('admin.autoCreate')}
+                </Label>
+                <Switch
+                  id="auto_create"
+                  checked={formData.auto_create_users}
+                  onCheckedChange={(checked) => setFormData({ ...formData, auto_create_users: checked })}
+                />
+              </div>
+              <FormFieldWrapper label={t('admin.defaultRole')}>
+                <Select
+                  value={formData.default_role}
+                  onChange={(value) => setFormData({ ...formData, default_role: value })}
+                  options={roleOptions}
+                />
+              </FormFieldWrapper>
+            </div>
+          </ModalSection>
+        </form>
+
+        <Separator />
+        <DialogFooter className="flex-row justify-between sm:justify-end gap-2">
+          <ModalFooterActions
+            onCancel={onClose}
+            submitLabel={t('common.save')}
+            loading={loading}
+            submitDisabled={!isValid}
+            formId="oidc-provider-form"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/components/modals/SharingModal.tsx

@@ -0,0 +1,96 @@
+import { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '../ui/dialog';
+import { Separator } from '../ui/separator';
+import { ModalFooterActions } from '../ui/ModalFooterActions';
+import { SharingField } from '../ui/SharingField';
+
+interface Team {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface SharingModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSave: (sharing: { user_ids: string[]; team_ids: string[]; share_all_teams: boolean }) => void;
+  currentShares?: {
+    user_ids?: string[];
+    team_ids?: string[];
+    share_all_teams?: boolean;
+  };
+  teams: Team[];
+  type?: 'bookmark' | 'folder';
+  allowTeamSharing?: boolean;
+}
+
+export default function SharingModal({
+  isOpen,
+  onClose,
+  onSave,
+  currentShares = {},
+  teams,
+  allowTeamSharing = true,
+}: SharingModalProps) {
+  const { t } = useTranslation();
+  const [sharing, setSharing] = useState({
+    user_ids: currentShares.user_ids || [],
+    team_ids: currentShares.team_ids || [],
+    share_all_teams: currentShares.share_all_teams || false,
+  });
+
+  useEffect(() => {
+    if (isOpen) {
+      setSharing({
+        user_ids: currentShares.user_ids || [],
+        team_ids: currentShares.team_ids || [],
+        share_all_teams: currentShares.share_all_teams || false,
+      });
+    }
+  }, [isOpen, currentShares.user_ids, currentShares.team_ids, currentShares.share_all_teams]);
+
+  function handleSave() {
+    onSave({
+      user_ids: sharing.user_ids,
+      team_ids: allowTeamSharing ? (sharing.share_all_teams ? [] : sharing.team_ids) : [],
+      share_all_teams: allowTeamSharing && sharing.share_all_teams,
+    });
+    onClose();
+  }
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t('bookmarks.shareWithTeams')}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        <form id="sharing-form" onSubmit={(e) => { e.preventDefault(); handleSave(); }} className="space-y-6">
+          <SharingField
+            value={sharing}
+            onChange={setSharing}
+            teams={teams}
+            allowTeamSharing={allowTeamSharing}
+          />
+        </form>
+
+        <Separator />
+        <DialogFooter className="flex-row justify-between sm:justify-end gap-2">
+          <ModalFooterActions
+            onCancel={onClose}
+            submitLabel={t('common.save')}
+            formId="sharing-form"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

package/frontend/src/components/modals/TagModal.tsx

@@ -0,0 +1,101 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import api from '../../api/client';
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '../ui/dialog';
+import { Separator } from '../ui/separator';
+import { FormFieldWrapper } from '../ui/FormFieldWrapper';
+import { ModalSection } from '../ui/ModalSection';
+import { ModalFooterActions } from '../ui/ModalFooterActions';
+import { Input } from '../ui/input';
+
+interface Tag {
+  id: string;
+  name: string;
+}
+
+interface TagModalProps {
+  tag: Tag | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function TagModal({ tag, isOpen, onClose, onSuccess }: TagModalProps) {
+  const { t } = useTranslation();
+  const [formData, setFormData] = useState({ name: '' });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (tag) {
+      setFormData({ name: tag.name });
+    } else {
+      setFormData({ name: '' });
+    }
+    setError('');
+  }, [tag, isOpen]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      if (tag) {
+        await api.put(`/tags/${tag.id}`, formData);
+      } else {
+        await api.post('/tags', formData);
+      }
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.error || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const isValid = formData.name.trim();
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-md">
+        <DialogHeader>
+          <DialogTitle>{tag ? t('tags.edit') : t('tags.create')}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        <form id="tag-form" onSubmit={handleSubmit} className="space-y-6">
+          <ModalSection>
+            <FormFieldWrapper label={t('tags.name')} required error={error}>
+              <Input
+                type="text"
+                required
+                value={formData.name}
+                onChange={(e) => setFormData({ name: e.target.value })}
+                placeholder={t('tags.name')}
+              />
+            </FormFieldWrapper>
+          </ModalSection>
+        </form>
+
+        <Separator />
+        <DialogFooter className="flex-row justify-between sm:justify-end gap-2">
+          <ModalFooterActions
+            onCancel={onClose}
+            submitLabel={t('common.save')}
+            loading={loading}
+            submitDisabled={!isValid}
+            formId="tag-form"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}