insforge 0.3.1

package/frontend/src/features/auth/components/UsersDataGrid.tsx

@@ -0,0 +1,183 @@
+import { useMemo } from 'react';
+import {
+  DataGrid,
+  createDefaultCellRenderer,
+  type DataGridProps,
+  type DataGridColumn,
+  type RenderCellProps,
+  ConvertedValue,
+} from '@/components/datagrid';
+import { Badge } from '@/components/radix/Badge';
+import { cn } from '@/lib/utils/utils';
+import type { UserSchema } from '@insforge/shared-schemas';
+
+// Create a type that makes UserSchema compatible with DataGrid requirements
+// We bypass the strict DatabaseRecord constraint since UserSchema has its own structure
+type UserDataGridRow = UserSchema & {
+  [key: string]: ConvertedValue | { [key: string]: string }[];
+};
+
+// Provider icon component
+const ProviderIcon = ({ provider }: { provider: string }) => {
+  const getProviderInfo = (provider: string) => {
+    switch (provider.toLowerCase()) {
+      case 'google':
+        return {
+          label: 'Google',
+          color:
+            'bg-red-100 text-red-700 dark:bg-neutral-800 dark:text-red-300 dark:border-red-500',
+        };
+      case 'github':
+        return {
+          label: 'GitHub',
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
+      case 'email':
+        return {
+          label: 'Email',
+          color:
+            'bg-green-100 text-green-700 dark:bg-neutral-800 dark:text-green-300 dark:border-green-500',
+        };
+      default:
+        return {
+          label: provider,
+          color:
+            'bg-gray-100 text-gray-700 dark:bg-neutral-800 dark:text-zinc-300 dark:border-gray-500',
+        };
+    }
+  };
+
+  const { label, color } = getProviderInfo(provider);
+
+  return (
+    <Badge
+      variant="secondary"
+      className={cn('text-xs font-medium px-2 py-1 border border-transparent', color)}
+    >
+      {label}
+    </Badge>
+  );
+};
+
+const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
+  const identities = row.identities;
+
+  if (!identities || !Array.isArray(identities) || identities.length === 0) {
+    return <span className="text-sm text-black dark:text-zinc-300">null</span>;
+  }
+
+  // Get unique providers to avoid duplicates
+  const uniqueProviders = [
+    ...new Set(identities.map((identity: { provider: string }) => identity.provider)),
+  ];
+
+  return (
+    <div
+      className="flex flex-wrap gap-1"
+      title={identities.map((identity: { provider: string }) => identity.provider).join(', ')}
+    >
+      {uniqueProviders.slice(0, 2).map((provider: string, index: number) => (
+        <ProviderIcon key={index} provider={provider} />
+      ))}
+      {uniqueProviders.length > 2 && (
+        <Badge
+          variant="secondary"
+          className="text-xs bg-gray-100 text-gray-600 dark:bg-neutral-800 dark:text-zinc-300 dark:border-neutral-700"
+        >
+          +{uniqueProviders.length - 2}
+        </Badge>
+      )}
+    </div>
+  );
+};
+
+// Convert users data to DataGrid columns
+export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
+  const cellRenderers = createDefaultCellRenderer<UserDataGridRow>();
+
+  return [
+    {
+      key: 'id',
+      name: 'ID',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.id,
+    },
+    {
+      key: 'email',
+      name: 'Email',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.email,
+    },
+    {
+      key: 'name',
+      name: 'Name',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.text,
+    },
+    {
+      key: 'identities',
+      name: 'Identities',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: IdentitiesCellRenderer,
+    },
+    {
+      key: 'providerType',
+      name: 'Provider Type',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.text,
+    },
+    {
+      key: 'createdAt',
+      name: 'Created',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.datetime,
+    },
+    {
+      key: 'updatedAt',
+      name: 'Updated',
+      width: '1fr',
+      resizable: true,
+      sortable: true,
+      renderCell: cellRenderers.datetime,
+    },
+  ];
+}
+
+// Users-specific DataGrid props
+export type UsersDataGridProps = Omit<DataGridProps<UserDataGridRow>, 'columns'>;
+
+// Specialized DataGrid for users
+export function UsersDataGrid({
+  emptyStateTitle = 'No users available',
+  emptyStateActionText,
+  onEmptyStateAction,
+  ...props
+}: UsersDataGridProps) {
+  const columns = useMemo(() => createUsersColumns(), []);
+
+  return (
+    <DataGrid<UserDataGridRow>
+      {...props}
+      columns={columns}
+      emptyStateTitle={emptyStateTitle}
+      emptyStateActionText={emptyStateActionText}
+      onEmptyStateAction={onEmptyStateAction}
+      showSelection={true}
+      showPagination={true}
+      showTypeBadge={false}
+    />
+  );
+}

package/frontend/src/features/auth/components/UsersTab.tsx

@@ -0,0 +1,114 @@
+import { useEffect, useMemo, useState } from 'react';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+import { UsersDataGrid } from './UsersDataGrid';
+import { SortColumn } from 'react-data-grid';
+import { UserSchema } from '@insforge/shared-schemas';
+
+interface UsersTabProps {
+  searchQuery?: string;
+  selectedRows?: Set<string>;
+  onSelectedRowsChange?: (selectedRows: Set<string>) => void;
+}
+
+export function UsersTab({
+  searchQuery: externalSearchQuery = '',
+  selectedRows: externalSelectedRows,
+  onSelectedRowsChange: externalOnSelectedRowsChange,
+}: UsersTabProps) {
+  // Default page size of 20 records per page
+  const pageSize = 20;
+  const { users, totalUsers, isLoading, currentPage, setCurrentPage, totalPages, refetch } =
+    useUsers({ searchQuery: externalSearchQuery, pageSize });
+
+  // Multi-select state - use external state if provided, otherwise internal
+  const [internalSelectedRows, setInternalSelectedRows] = useState<Set<string>>(new Set());
+  const selectedRows = externalSelectedRows || internalSelectedRows;
+  const setSelectedRows = externalOnSelectedRowsChange || setInternalSelectedRows;
+
+  // Sorting state
+  const [sortColumns, setSortColumns] = useState<SortColumn[]>([]);
+
+  // Listen for refresh events
+  useEffect(() => {
+    const handleRefresh = () => {
+      // Reset sorting columns
+      setSortColumns([]);
+      // Reset selected rows
+      setSelectedRows(new Set());
+      // Refetch data
+      void refetch();
+    };
+    window.addEventListener('refreshUsers', handleRefresh);
+    return () => window.removeEventListener('refreshUsers', handleRefresh);
+  }, [refetch, setSelectedRows]);
+
+  // Clear selection when page changes or search changes
+  useEffect(() => {
+    setSelectedRows(new Set());
+  }, [currentPage, externalSearchQuery, setSelectedRows]);
+
+  // Apply sorting to users data
+  const sortedUsers = useMemo(() => {
+    if (!sortColumns.length) {
+      return users;
+    }
+
+    return [...users].sort((a, b) => {
+      for (const sort of sortColumns) {
+        const { columnKey, direction } = sort;
+        let aVal = a[columnKey as keyof UserSchema];
+        let bVal = b[columnKey as keyof UserSchema];
+
+        // Handle null/undefined values
+        if ((aVal === null || aVal === undefined) && (bVal === null || bVal === undefined)) {
+          continue;
+        }
+        if (aVal === null || aVal === undefined) {
+          return direction === 'ASC' ? -1 : 1;
+        }
+        if (bVal === null || bVal === undefined) {
+          return direction === 'ASC' ? 1 : -1;
+        }
+
+        // Convert to comparable values
+        if (typeof aVal === 'string') {
+          aVal = aVal.toLowerCase();
+        }
+        if (typeof bVal === 'string') {
+          bVal = bVal.toLowerCase();
+        }
+
+        if (aVal < bVal) {
+          return direction === 'ASC' ? -1 : 1;
+        }
+        if (aVal > bVal) {
+          return direction === 'ASC' ? 1 : -1;
+        }
+      }
+      return 0;
+    });
+  }, [users, sortColumns]);
+
+  return (
+    <div className="relative flex-1 flex flex-col overflow-hidden">
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <UsersDataGrid
+          data={sortedUsers}
+          loading={isLoading}
+          selectedRows={selectedRows}
+          onSelectedRowsChange={setSelectedRows}
+          sortColumns={sortColumns}
+          onSortColumnsChange={setSortColumns}
+          currentPage={currentPage}
+          totalPages={totalPages}
+          pageSize={pageSize}
+          totalRecords={totalUsers}
+          onPageChange={setCurrentPage}
+          emptyStateTitle={
+            externalSearchQuery ? 'No users match your search criteria' : 'No users found'
+          }
+        />
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/auth/hooks/useOAuthConfig.ts

@@ -0,0 +1,129 @@
+import { useState, useCallback } from 'react';
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
+import {
+  OAuthConfigSchema,
+  CreateOAuthConfigRequest,
+  UpdateOAuthConfigRequest,
+  ListOAuthConfigsResponse,
+} from '@insforge/shared-schemas';
+import { oauthConfigService } from '../services/oauth.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+export function useOAuthConfig() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const [selectedProvider, setSelectedProvider] = useState<string | null>(null);
+
+  // Query to fetch all OAuth configurations
+  const {
+    data: configs,
+    isLoading: isLoadingConfigs,
+    error: configsError,
+    refetch: refetchConfigs,
+  } = useQuery<ListOAuthConfigsResponse>({
+    queryKey: ['oauth-configs'],
+    queryFn: () => oauthConfigService.getAllConfigs(),
+  });
+
+  // Query to fetch specific provider config
+  const {
+    data: providerConfig,
+    isLoading: isLoadingProvider,
+    error: providerError,
+    refetch: refetchProvider,
+  } = useQuery<OAuthConfigSchema & { clientSecret?: string }>({
+    queryKey: ['oauth-config', selectedProvider],
+    queryFn: () => oauthConfigService.getConfigByProvider(selectedProvider ?? ''),
+    enabled: configs && configs.data.some((config) => config.provider === selectedProvider),
+  });
+
+  // Mutation to create OAuth configuration
+  const createConfigMutation = useMutation({
+    mutationFn: (config: CreateOAuthConfigRequest) => oauthConfigService.createConfig(config),
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({ queryKey: ['oauth-configs'] });
+      void queryClient.invalidateQueries({ queryKey: ['oauth-config', data.provider] });
+      showToast(`OAuth configuration for ${data.provider} created successfully`, 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to create OAuth configuration', 'error');
+    },
+  });
+
+  // Mutation to update OAuth configuration
+  const updateConfigMutation = useMutation({
+    mutationFn: ({ provider, config }: { provider: string; config: UpdateOAuthConfigRequest }) =>
+      oauthConfigService.updateConfig(provider, config),
+    onSuccess: (data) => {
+      void queryClient.invalidateQueries({ queryKey: ['oauth-configs'] });
+      void queryClient.invalidateQueries({ queryKey: ['oauth-config', data.provider] });
+      showToast(`OAuth configuration for ${data.provider} updated successfully`, 'success');
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to update OAuth configuration', 'error');
+    },
+  });
+
+  // Mutation to delete OAuth configuration
+  const deleteConfigMutation = useMutation({
+    mutationFn: (provider: string) => oauthConfigService.deleteConfig(provider),
+    onSuccess: (_, provider) => {
+      queryClient.removeQueries({ queryKey: ['oauth-configs'] });
+      queryClient.removeQueries({ queryKey: ['oauth-config', provider] });
+      showToast(`OAuth configuration for ${provider} deleted successfully`, 'success');
+      if (selectedProvider === provider) {
+        setSelectedProvider(null);
+      }
+    },
+    onError: (error: Error) => {
+      showToast(error.message || 'Failed to delete OAuth configuration', 'error');
+    },
+  });
+
+  // Helper to check if a provider is configured
+  const isProviderConfigured = useCallback(
+    (provider: string): boolean => {
+      return configs?.data?.some((config) => config.provider === provider) ?? false;
+    },
+    [configs]
+  );
+
+  // Helper to get config for a specific provider from the list
+  const getProviderConfig = useCallback(
+    (provider: string): OAuthConfigSchema | undefined => {
+      return configs?.data?.find((config) => config.provider === provider);
+    },
+    [configs]
+  );
+
+  return {
+    // State
+    configs: configs?.data ?? [],
+    configsCount: configs?.count ?? 0,
+    selectedProvider,
+    setSelectedProvider,
+    providerConfig,
+
+    // Loading states
+    isLoadingConfigs,
+    isLoadingProvider,
+    isCreating: createConfigMutation.isPending,
+    isUpdating: updateConfigMutation.isPending,
+    isDeleting: deleteConfigMutation.isPending,
+
+    // Errors
+    configsError,
+    providerError,
+
+    // Actions
+    createConfig: createConfigMutation.mutate,
+    updateConfig: updateConfigMutation.mutate,
+    deleteConfig: deleteConfigMutation.mutate,
+    refetchConfigs,
+    refetchProvider,
+
+    // Helpers
+    isProviderConfigured,
+    getProviderConfig,
+  };
+}

package/frontend/src/features/auth/hooks/useUsers.ts

@@ -0,0 +1,57 @@
+import { useState } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { authService } from '@/features/auth/services/auth.service';
+
+interface UseUsersOptions {
+  pageSize?: number;
+  enabled?: boolean;
+  searchQuery?: string;
+}
+
+export function useUsers(options: UseUsersOptions = {}) {
+  const { pageSize = 20, enabled = true, searchQuery = '' } = options;
+  const [currentPage, setCurrentPage] = useState(1);
+
+  // Fetch users data
+  const {
+    data: usersData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['users', currentPage, searchQuery],
+    queryFn: () => {
+      const params = new URLSearchParams({
+        limit: pageSize.toString(),
+        offset: ((currentPage - 1) * pageSize).toString(),
+      });
+      // Use the auth service to get users with search, backend handles filtering
+      return authService.getUsers(params.toString(), searchQuery);
+    },
+    enabled: enabled,
+    placeholderData: (previousData) => previousData, // Keep previous data while loading
+  });
+
+  // Pagination calculations
+  const totalPages = Math.ceil((usersData?.pagination.total || 0) / pageSize);
+
+  return {
+    // Data
+    users: usersData?.users || [],
+    totalUsers: usersData?.pagination.total || 0,
+    isLoading,
+    error,
+
+    // Pagination
+    currentPage,
+    setCurrentPage,
+    totalPages,
+    pageSize,
+
+    // Search
+    searchQuery,
+
+    // Operations
+    refetch,
+  };
+}

package/frontend/src/features/auth/index.ts

@@ -0,0 +1,9 @@
+// Components
+export { UserFormDialog } from './components/UserFormDialog';
+export { UsersTab } from './components/UsersTab';
+
+// Hooks
+export { useUsers } from './hooks/useUsers';
+
+// Services
+export { authService } from './services/auth.service';

package/frontend/src/features/auth/page/AuthenticationPage.tsx

@@ -0,0 +1,169 @@
+import { useState } from 'react';
+import { useLocation } from 'react-router-dom';
+import { UserPlus, Users, Key } from 'lucide-react';
+import { Button, SearchInput, SelectionClearButton, DeleteActionButton } from '@/components';
+import { UsersTab } from '@/features/auth/components/UsersTab';
+import { Tooltip, TooltipContent, TooltipProvider } from '@/components/radix/Tooltip';
+import { UserFormDialog } from '@/features/auth/components/UserFormDialog';
+import { AuthMethodTab } from '@/features/auth/components/AuthMethodTab';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { authService } from '@/features/auth/services/auth.service';
+import { useToast } from '@/lib/hooks/useToast';
+import { cn } from '@/lib/utils/utils';
+import { useUsers } from '@/features/auth/hooks/useUsers';
+
+export default function AuthenticationPage() {
+  const location = useLocation();
+  const [selectedSection, setSelectedSection] = useState<string>(
+    location.state?.initialTab || 'users'
+  );
+  const [searchQuery, setSearchQuery] = useState('');
+  const [addDialogOpen, setAddDialogOpen] = useState(false);
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false);
+  const [selectedRows, setSelectedRows] = useState<Set<string>>(new Set());
+
+  const { showToast } = useToast();
+  const { refetch } = useUsers();
+
+  const handleBulkDelete = async () => {
+    if (selectedRows.size === 0) {
+      return;
+    }
+
+    try {
+      const userIds = Array.from(selectedRows);
+      await authService.deleteUsers(userIds);
+      void refetch();
+      setSelectedRows(new Set());
+      showToast(
+        `${userIds.length} user${userIds.length > 1 ? 's' : ''} deleted successfully`,
+        'success'
+      );
+    } catch (error) {
+      showToast(error instanceof Error ? error.message : 'Failed to delete users', 'error');
+    }
+  };
+
+  const authSections = [
+    {
+      id: 'users',
+      name: 'Users',
+      icon: Users,
+      description: 'Manage user accounts',
+    },
+    {
+      id: 'auth-methods',
+      name: 'Auth Methods',
+      icon: Key,
+      description: 'Configure authentication',
+    },
+  ];
+
+  return (
+    <div className="h-full bg-slate-50 dark:bg-neutral-800 flex flex-col overflow-hidden">
+      {/* Tab Navigation */}
+      <div className="h-12 flex items-center gap-6 px-6 border-b border-border-gray dark:border-neutral-700 relative">
+        {authSections.map((section) => (
+          <button
+            key={section.id}
+            onClick={() => setSelectedSection(section.id)}
+            className={cn(
+              'flex h-full items-center gap-2 px-0 text-base font-semibold transition-colors relative',
+              selectedSection === section.id
+                ? 'text-black dark:text-white'
+                : 'text-zinc-500 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300'
+            )}
+          >
+            {section.name}
+            {selectedSection === section.id && (
+              <div className="absolute bottom-0 left-0 right-0 h-0.5 bg-black dark:bg-white" />
+            )}
+          </button>
+        ))}
+      </div>
+
+      {/* Content Area */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Users Section Header */}
+        {selectedSection === 'users' && (
+          <div className="px-3 py-4 dark:bg-neutral-800">
+            <div className="flex items-center justify-between">
+              {selectedRows.size > 0 ? (
+                <div className="flex items-center gap-3">
+                  <SelectionClearButton
+                    selectedCount={selectedRows.size}
+                    itemType="user"
+                    onClear={() => setSelectedRows(new Set())}
+                  />
+                  <DeleteActionButton
+                    selectedCount={selectedRows.size}
+                    itemType="user"
+                    onDelete={() => setConfirmDeleteOpen(true)}
+                  />
+                </div>
+              ) : (
+                <SearchInput
+                  value={searchQuery}
+                  onChange={setSearchQuery}
+                  placeholder="Search Users by Name or Email"
+                  className="flex-1 max-w-80 dark:bg-neutral-800 dark:text-white dark:border-neutral-700"
+                  debounceTime={300}
+                />
+              )}
+              <div className="flex items-center gap-2">
+                {selectedRows.size === 0 && (
+                  <>
+                    <TooltipProvider>
+                      <Tooltip>
+                        <TooltipContent>
+                          <p>Refresh</p>
+                        </TooltipContent>
+                      </Tooltip>
+                    </TooltipProvider>
+                    <Button
+                      className="h-10 px-4 font-medium dark:bg-emerald-300 dark:text-black"
+                      onClick={() => setAddDialogOpen(true)}
+                    >
+                      <UserPlus className="h-4 w-4 mr-2" />
+                      New User
+                    </Button>
+                  </>
+                )}
+              </div>
+            </div>
+          </div>
+        )}
+
+        {/* Main Content */}
+
+        {selectedSection === 'users' && (
+          <UsersTab
+            searchQuery={searchQuery}
+            selectedRows={selectedRows}
+            onSelectedRowsChange={setSelectedRows}
+          />
+        )}
+
+        {selectedSection === 'auth-methods' && <AuthMethodTab />}
+      </div>
+
+      <UserFormDialog open={addDialogOpen} onOpenChange={setAddDialogOpen} />
+
+      <ConfirmDialog
+        open={confirmDeleteOpen}
+        onOpenChange={setConfirmDeleteOpen}
+        title={`Delete ${selectedRows.size} ${selectedRows.size === 1 ? 'User' : 'Users'}`}
+        description={
+          <span>
+            Are you sure to <strong>permanently delete {selectedRows.size}</strong>{' '}
+            {selectedRows.size === 1 ? 'user' : 'users'}? This action cannot be undone.
+          </span>
+        }
+        confirmText="Delete"
+        cancelText="Cancel"
+        destructive
+        onConfirm={handleBulkDelete}
+      />
+    </div>
+  );
+}