@mdguggenbichler/slugbase-core 0.0.4 → 0.0.6

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

@@ -0,0 +1,354 @@
+import { 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 { Input } from '../ui/input';
+import Button from '../ui/Button';
+import { UserPlus, X, Users, Search } from 'lucide-react';
+
+interface Team {
+  id: string;
+  name: string;
+  description?: string;
+}
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  is_admin: boolean;
+}
+
+interface TeamAssignmentModalProps {
+  mode: 'user' | 'team';
+  userId?: string;
+  userName?: string;
+  teamId?: string;
+  teamName?: string;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function TeamAssignmentModal({
+  mode,
+  userId,
+  userName,
+  teamId,
+  teamName,
+  isOpen,
+  onClose,
+  onSuccess,
+}: TeamAssignmentModalProps) {
+  const { t } = useTranslation();
+  const [allTeams, setAllTeams] = useState<Team[]>([]);
+  const [allUsers, setAllUsers] = useState<User[]>([]);
+  const [userTeams, setUserTeams] = useState<Team[]>([]);
+  const [teamMembers, setTeamMembers] = useState<User[]>([]);
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+  const [searchQuery, setSearchQuery] = useState('');
+
+  useEffect(() => {
+    if (isOpen) {
+      setSearchQuery('');
+      loadData();
+    }
+  }, [isOpen, mode, userId, teamId]);
+
+  async function loadData() {
+    try {
+      setLoading(true);
+      if (mode === 'user' && userId) {
+        const [teamsRes, userTeamsRes] = await Promise.all([
+          api.get('/admin/teams'),
+          api.get(`/admin/users/${userId}/teams`).catch(() => ({ data: [] })),
+        ]);
+        setAllTeams(teamsRes.data);
+        setUserTeams(userTeamsRes.data || []);
+      } else if (mode === 'team' && teamId) {
+        const [usersRes, teamRes] = await Promise.all([
+          api.get('/admin/users'),
+          api.get(`/admin/teams/${teamId}`),
+        ]);
+        setAllUsers(Array.isArray(usersRes.data) ? usersRes.data : []);
+        setTeamMembers(teamRes.data.members || []);
+      }
+    } catch (error) {
+      console.error('Failed to load data:', error);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  async function handleAdd(userIdToAdd: string, teamIdToAdd: string) {
+    try {
+      setSaving(true);
+      await api.post(`/admin/teams/${teamIdToAdd}/members`, { user_id: userIdToAdd });
+      setSearchQuery('');
+      await loadData();
+      onSuccess();
+    } catch (error: any) {
+      alert(error.response?.data?.error || t('common.error'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  async function handleRemove(userIdToRemove: string, teamIdToRemove: string) {
+    try {
+      setSaving(true);
+      await api.delete(`/admin/teams/${teamIdToRemove}/members/${userIdToRemove}`);
+      setSearchQuery('');
+      await loadData();
+      onSuccess();
+    } catch (error: any) {
+      alert(error.response?.data?.error || t('common.error'));
+    } finally {
+      setSaving(false);
+    }
+  }
+
+  const filterTeams = (teams: Team[]) => {
+    if (!searchQuery.trim()) return teams;
+    const query = searchQuery.toLowerCase();
+    return teams.filter(
+      (team) =>
+        team.name.toLowerCase().includes(query) ||
+        (team.description && team.description.toLowerCase().includes(query))
+    );
+  };
+
+  const filterUsers = (users: User[]) => {
+    if (!searchQuery.trim()) return users;
+    const query = searchQuery.toLowerCase();
+    return users.filter(
+      (user) =>
+        user.name.toLowerCase().includes(query) ||
+        user.email.toLowerCase().includes(query)
+    );
+  };
+
+  if (mode === 'user') {
+    const userTeamIds = new Set(userTeams.map((t) => t.id));
+    const availableTeams = filterTeams(allTeams.filter((t) => !userTeamIds.has(t.id)));
+
+    return (
+      <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+        <DialogContent className="max-w-2xl max-h-[calc(100vh-4rem)] overflow-y-auto">
+          <DialogHeader>
+            <DialogTitle>{t('admin.manageTeamsTitle', { userName })}</DialogTitle>
+          </DialogHeader>
+          <Separator />
+
+          {loading ? (
+            <div className="text-center py-8 text-muted-foreground">{t('common.loading')}</div>
+          ) : (
+            <div className="space-y-6">
+              <div>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                  <Users className="h-4 w-4" />
+                  {t('admin.currentTeams')} ({userTeams.length})
+                </h3>
+                {userTeams.length === 0 ? (
+                  <p className="text-sm text-muted-foreground py-4">{t('admin.noTeams')}</p>
+                ) : (
+                  <div className="space-y-2">
+                    {userTeams.map((team) => (
+                      <div
+                        key={team.id}
+                        className="flex items-center justify-between px-4 py-3 rounded-lg border bg-muted/50"
+                      >
+                        <div>
+                          <p className="text-sm font-medium">{team.name}</p>
+                          {team.description && (
+                            <p className="text-xs text-muted-foreground">{team.description}</p>
+                          )}
+                        </div>
+                        <Button
+                          variant="danger"
+                          size="sm"
+                          icon={X}
+                          onClick={() => userId && handleRemove(userId, team.id)}
+                          disabled={saving}
+                        />
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+
+              <div>
+                <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                  <UserPlus className="h-4 w-4" />
+                  {t('admin.addTeams')} ({availableTeams.length})
+                </h3>
+                <div className="relative mb-3">
+                  <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                  <Input
+                    type="text"
+                    placeholder={t('admin.searchTeams')}
+                    value={searchQuery}
+                    onChange={(e) => setSearchQuery(e.target.value)}
+                    className="pl-9"
+                  />
+                </div>
+                {availableTeams.length === 0 ? (
+                  <p className="text-sm text-muted-foreground py-4 text-center">
+                    {allTeams.filter((t) => !userTeamIds.has(t.id)).length === 0
+                      ? t('admin.noTeamsAvailable')
+                      : t('admin.noSearchResults')}
+                  </p>
+                ) : (
+                  <div className="space-y-2 max-h-64 overflow-y-auto">
+                    {availableTeams.map((team) => (
+                      <div
+                        key={team.id}
+                        className="flex items-center justify-between px-4 py-3 rounded-lg border hover:border-primary/50 transition-colors"
+                      >
+                        <div>
+                          <p className="text-sm font-medium">{team.name}</p>
+                          {team.description && (
+                            <p className="text-xs text-muted-foreground">{team.description}</p>
+                          )}
+                        </div>
+                        <Button
+                          variant="primary"
+                          size="sm"
+                          icon={UserPlus}
+                          onClick={() => userId && handleAdd(userId, team.id)}
+                          disabled={saving}
+                        >
+                          {t('admin.add')}
+                        </Button>
+                      </div>
+                    ))}
+                  </div>
+                )}
+              </div>
+            </div>
+          )}
+
+          <Separator />
+          <DialogFooter className="flex-row justify-end">
+            <Button variant="secondary" onClick={onClose}>
+              {t('common.close')}
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+    );
+  }
+
+  const memberIds = new Set(teamMembers.map((m) => m.id));
+  const availableUsers = filterUsers(allUsers.filter((u) => !memberIds.has(u.id)));
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-2xl max-h-[calc(100vh-4rem)] overflow-y-auto">
+        <DialogHeader>
+          <DialogTitle>{t('admin.manageMembersTitle', { teamName })}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        {loading ? (
+          <div className="text-center py-8 text-muted-foreground">{t('common.loading')}</div>
+        ) : (
+          <div className="space-y-6">
+            <div>
+              <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                <Users className="h-4 w-4" />
+                {t('admin.currentMembers')} ({teamMembers.length})
+              </h3>
+              {teamMembers.length === 0 ? (
+                <p className="text-sm text-muted-foreground py-4">{t('admin.noMembers')}</p>
+              ) : (
+                <div className="space-y-2">
+                  {teamMembers.map((member) => (
+                    <div
+                      key={member.id}
+                      className="flex items-center justify-between px-4 py-3 rounded-lg border bg-muted/50"
+                    >
+                      <div>
+                        <p className="text-sm font-medium">{member.name}</p>
+                        <p className="text-xs text-muted-foreground">{member.email}</p>
+                      </div>
+                      <Button
+                        variant="danger"
+                        size="sm"
+                        icon={X}
+                        onClick={() => teamId && handleRemove(member.id, teamId)}
+                        disabled={saving}
+                      />
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+
+            <div>
+              <h3 className="text-sm font-semibold mb-3 flex items-center gap-2">
+                <UserPlus className="h-4 w-4" />
+                {t('admin.addMembers')} ({availableUsers.length})
+              </h3>
+              <div className="relative mb-3">
+                <Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground" />
+                <Input
+                  type="text"
+                  placeholder={t('admin.searchUsers')}
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  className="pl-9"
+                />
+              </div>
+              {availableUsers.length === 0 ? (
+                <p className="text-sm text-muted-foreground py-4 text-center">
+                  {allUsers.filter((u) => !memberIds.has(u.id)).length === 0
+                    ? t('admin.noUsersAvailable')
+                    : t('admin.noSearchResults')}
+                </p>
+              ) : (
+                <div className="space-y-2 max-h-64 overflow-y-auto">
+                  {availableUsers.map((user) => (
+                    <div
+                      key={user.id}
+                      className="flex items-center justify-between px-4 py-3 rounded-lg border hover:border-primary/50 transition-colors"
+                    >
+                      <div>
+                        <p className="text-sm font-medium">{user.name}</p>
+                        <p className="text-xs text-muted-foreground">{user.email}</p>
+                      </div>
+                      <Button
+                        variant="primary"
+                        size="sm"
+                        icon={UserPlus}
+                        onClick={() => teamId && handleAdd(user.id, teamId)}
+                        disabled={saving}
+                      >
+                        {t('admin.add')}
+                      </Button>
+                    </div>
+                  ))}
+                </div>
+              )}
+            </div>
+          </div>
+        )}
+
+        <Separator />
+        <DialogFooter className="flex-row justify-end">
+          <Button variant="secondary" onClick={onClose}>
+            {t('common.close')}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,117 @@
+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 Team {
+  id: string;
+  name: string;
+  description: string | null;
+}
+
+interface TeamModalProps {
+  team: Team | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+export default function TeamModal({ team, isOpen, onClose, onSuccess }: TeamModalProps) {
+  const { t } = useTranslation();
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+
+  useEffect(() => {
+    if (team) {
+      setFormData({
+        name: team.name,
+        description: team.description || '',
+      });
+    } else {
+      setFormData({ name: '', description: '' });
+    }
+    setError('');
+  }, [team, isOpen]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      if (team) {
+        await api.put(`/admin/teams/${team.id}`, formData);
+      } else {
+        await api.post('/admin/teams', 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-[460px]">
+        <DialogHeader>
+          <DialogTitle>{team ? t('admin.editTeam') : t('admin.addTeam')}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        <form id="team-form" onSubmit={handleSubmit} className="space-y-6">
+          <ModalSection>
+            <FormFieldWrapper label={t('admin.teamName')} required error={error}>
+              <Input
+                type="text"
+                required
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder={t('admin.teamName')}
+              />
+            </FormFieldWrapper>
+            <FormFieldWrapper label={t('admin.description')}>
+              <textarea
+                rows={3}
+                className="flex w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring resize-none"
+                value={formData.description}
+                onChange={(e) => setFormData({ ...formData, description: e.target.value })}
+                placeholder={t('admin.description')}
+              />
+            </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="team-form"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

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

@@ -0,0 +1,225 @@
+import React, { useState, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Shield } 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';
+import { useToast } from '../ui/Toast';
+
+interface User {
+  id: string;
+  email: string;
+  name: string;
+  is_admin: boolean;
+  oidc_provider: string | null;
+}
+
+interface UserModalProps {
+  user: User | null;
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: () => void;
+}
+
+type CreateMode = 'set_password' | 'send_invite';
+
+export default function UserModal({ user, isOpen, onClose, onSuccess }: UserModalProps) {
+  const { t } = useTranslation();
+  const { showToast } = useToast();
+  const [formData, setFormData] = useState({
+    email: '',
+    name: '',
+    password: '',
+    is_admin: false,
+  });
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState('');
+  const [inviteEnabled, setInviteEnabled] = useState(false);
+  const [createMode, setCreateMode] = useState<CreateMode>('set_password');
+
+  useEffect(() => {
+    if (user) {
+      setFormData({
+        email: user.email,
+        name: user.name,
+        password: '',
+        is_admin: user.is_admin,
+      });
+    } else {
+      setFormData({ email: '', name: '', password: '', is_admin: false });
+      setCreateMode('set_password');
+    }
+    setError('');
+  }, [user, isOpen]);
+
+  useEffect(() => {
+    if (!user && isOpen) {
+      api
+        .get('/admin/settings')
+        .then((res) => {
+          setInviteEnabled(res.data?.smtp_enabled === 'true');
+        })
+        .catch(() => setInviteEnabled(false));
+    }
+  }, [user, isOpen]);
+
+  async function handleSubmit(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError('');
+
+    try {
+      const payload: any = { email: formData.email, name: formData.name, is_admin: formData.is_admin };
+      if (user) {
+        if (formData.password) payload.password = formData.password;
+        await api.put(`/admin/users/${user.id}`, payload);
+        showToast(t('common.success'), 'success');
+      } else {
+        if (createMode === 'send_invite') {
+          payload.send_invite = true;
+        } else if (formData.password) {
+          payload.password = formData.password;
+        }
+        const response = await api.post('/admin/users', payload);
+        if (payload.send_invite && response.data?.inviteSent === false) {
+          showToast(t('admin.userCreatedInviteNotSent'), 'warning');
+        } else if (payload.send_invite && response.data?.inviteSent === true) {
+          showToast(t('admin.userCreatedInviteSent'), 'success');
+        } else {
+          showToast(t('common.success'), 'success');
+        }
+      }
+      onSuccess();
+      onClose();
+    } catch (err: any) {
+      setError(err.response?.data?.error || t('common.error'));
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  const isCreate = !user;
+  const useInvite = isCreate && inviteEnabled && createMode === 'send_invite';
+  const isValid =
+    formData.email.trim() &&
+    formData.name.trim() &&
+    (user ? true : useInvite ? true : formData.password.length >= 8);
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => !open && onClose()}>
+      <DialogContent className="max-w-[460px]">
+        <DialogHeader>
+          <DialogTitle>{user ? t('admin.editUser') : t('admin.addUser')}</DialogTitle>
+        </DialogHeader>
+        <Separator />
+
+        <form id="user-form" onSubmit={handleSubmit} className="space-y-6">
+          <ModalSection>
+            <FormFieldWrapper label={t('auth.email')} required error={error}>
+              <Input
+                type="email"
+                required
+                value={formData.email}
+                onChange={(e) => setFormData({ ...formData, email: e.target.value })}
+                placeholder={t('auth.email')}
+              />
+            </FormFieldWrapper>
+            <FormFieldWrapper label={t('setup.name')} required>
+              <Input
+                type="text"
+                required
+                value={formData.name}
+                onChange={(e) => setFormData({ ...formData, name: e.target.value })}
+                placeholder={t('setup.name')}
+              />
+            </FormFieldWrapper>
+            {isCreate && inviteEnabled && (
+              <div className="space-y-3">
+                <Label className="text-sm font-medium">{t('admin.createUserWith')}</Label>
+                <div className="flex flex-col gap-2" role="radiogroup" aria-label="Create user with">
+                  <div className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      id="create-set-password"
+                      name="create-mode"
+                      value="set_password"
+                      checked={createMode === 'set_password'}
+                      onChange={() => setCreateMode('set_password')}
+                      className="h-4 w-4 rounded-full border-input"
+                    />
+                    <Label htmlFor="create-set-password" className="font-normal cursor-pointer">
+                      {t('admin.setPassword')}
+                    </Label>
+                  </div>
+                  <div className="flex items-center space-x-2">
+                    <input
+                      type="radio"
+                      id="create-send-invite"
+                      name="create-mode"
+                      value="send_invite"
+                      checked={createMode === 'send_invite'}
+                      onChange={() => setCreateMode('send_invite')}
+                      className="h-4 w-4 rounded-full border-input"
+                    />
+                    <Label htmlFor="create-send-invite" className="font-normal cursor-pointer">
+                      {t('admin.sendInviteEmail')}
+                    </Label>
+                  </div>
+                </div>
+              </div>
+            )}
+            {!useInvite && (
+              <FormFieldWrapper
+                label={user ? `${t('auth.password')} (${t('admin.leaveBlank')})` : t('auth.password')}
+                required={!user}
+              >
+                <Input
+                  type="password"
+                  minLength={8}
+                  required={!user}
+                  value={formData.password}
+                  onChange={(e) => setFormData({ ...formData, password: e.target.value })}
+                  placeholder={user ? t('admin.leaveBlank') : ''}
+                />
+              </FormFieldWrapper>
+            )}
+            <div className="flex items-center justify-between rounded-lg border p-3">
+              <Label htmlFor="is_admin" className="text-sm font-medium cursor-pointer flex items-center gap-2">
+                <Shield className="h-4 w-4" />
+                {t('admin.admin')}
+              </Label>
+              <Switch
+                id="is_admin"
+                checked={formData.is_admin}
+                onCheckedChange={(checked) => setFormData({ ...formData, is_admin: checked })}
+              />
+            </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="user-form"
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}