insforge 1.3.0 → 1.4.8

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

@@ -1,96 +1,96 @@
-import { useState, useEffect } from 'react';
-import { SignInForm, SignUpForm, ForgotPasswordForm } from '@insforge/react';
-import { useAuthConfig } from '../hooks/useAuthConfig';
-import { useOAuthConfig } from '../hooks/useOAuthConfig';
-
-type AuthView = 'sign-in' | 'sign-up' | 'forgot-password';
-
-export function AuthPreview() {
-  const { config } = useAuthConfig();
-  const { configs: oAuthConfigs } = useOAuthConfig();
-  const [view, setView] = useState<AuthView>('sign-in');
-  const [email, setEmail] = useState('');
-  const [password, setPassword] = useState('');
-
-  // Listen to hash changes
-  useEffect(() => {
-    const handleHashChange = () => {
-      const hash = window.location.hash.slice(1); // Remove the #
-      if (
-        hash === 'preview=sign-in' ||
-        hash === 'preview=sign-up' ||
-        hash === 'preview=forgot-password'
-      ) {
-        setView(hash.replace('preview=', '') as AuthView);
-      }
-    };
-
-    // Set initial view from hash
-    handleHashChange();
-
-    // Listen for hash changes
-    window.addEventListener('hashchange', handleHashChange);
-    return () => window.removeEventListener('hashchange', handleHashChange);
-  }, []);
-
-  const authConfig = {
-    oAuthProviders: oAuthConfigs.map((provider) => provider.provider) ?? [],
-    passwordMinLength: config?.passwordMinLength ?? 6,
-    requireEmailVerification: !!config?.requireEmailVerification,
-    requireLowercase: !!config?.requireLowercase,
-    requireNumber: !!config?.requireNumber,
-    requireSpecialChar: !!config?.requireSpecialChar,
-    requireUppercase: !!config?.requireUppercase,
-    resetPasswordMethod: config?.resetPasswordMethod ?? ('code' as const),
-    verifyEmailMethod: config?.verifyEmailMethod ?? ('code' as const),
-  };
-
-  const handleSubmit = (e: React.FormEvent) => {
-    e.preventDefault();
-    // Preview mode - do nothing
-  };
-
-  const handleOAuthClick = () => {
-    // Preview mode - do nothing
-  };
-
-  return (
-    <div className="w-[400px]">
-      {view === 'sign-in' && (
-        <SignInForm
-          email={email}
-          password={password}
-          onEmailChange={setEmail}
-          onPasswordChange={setPassword}
-          onSubmit={handleSubmit}
-          authConfig={authConfig}
-          onOAuthClick={handleOAuthClick}
-          forgotPasswordUrl="#preview=forgot-password"
-          signUpUrl="#preview=sign-up"
-        />
-      )}
-
-      {view === 'sign-up' && (
-        <SignUpForm
-          email={email}
-          password={password}
-          onEmailChange={setEmail}
-          onPasswordChange={setPassword}
-          onSubmit={handleSubmit}
-          authConfig={authConfig}
-          onOAuthClick={handleOAuthClick}
-          signInUrl="#preview=sign-in"
-        />
-      )}
-
-      {view === 'forgot-password' && (
-        <ForgotPasswordForm
-          email={email}
-          onEmailChange={setEmail}
-          onSubmit={handleSubmit}
-          backToSignInUrl="#preview=sign-in"
-        />
-      )}
-    </div>
-  );
-}
+import { useState, useEffect } from 'react';
+import { SignInForm, SignUpForm, ForgotPasswordForm } from '@insforge/react';
+import { useAuthConfig } from '../hooks/useAuthConfig';
+import { useOAuthConfig } from '../hooks/useOAuthConfig';
+
+type AuthView = 'sign-in' | 'sign-up' | 'forgot-password';
+
+export function AuthPreview() {
+  const { config } = useAuthConfig();
+  const { configs: oAuthConfigs } = useOAuthConfig();
+  const [view, setView] = useState<AuthView>('sign-in');
+  const [email, setEmail] = useState('');
+  const [password, setPassword] = useState('');
+
+  // Listen to hash changes
+  useEffect(() => {
+    const handleHashChange = () => {
+      const hash = window.location.hash.slice(1); // Remove the #
+      if (
+        hash === 'preview=sign-in' ||
+        hash === 'preview=sign-up' ||
+        hash === 'preview=forgot-password'
+      ) {
+        setView(hash.replace('preview=', '') as AuthView);
+      }
+    };
+
+    // Set initial view from hash
+    handleHashChange();
+
+    // Listen for hash changes
+    window.addEventListener('hashchange', handleHashChange);
+    return () => window.removeEventListener('hashchange', handleHashChange);
+  }, []);
+
+  const authConfig = {
+    oAuthProviders: oAuthConfigs.map((provider) => provider.provider) ?? [],
+    passwordMinLength: config?.passwordMinLength ?? 6,
+    requireEmailVerification: !!config?.requireEmailVerification,
+    requireLowercase: !!config?.requireLowercase,
+    requireNumber: !!config?.requireNumber,
+    requireSpecialChar: !!config?.requireSpecialChar,
+    requireUppercase: !!config?.requireUppercase,
+    resetPasswordMethod: config?.resetPasswordMethod ?? ('code' as const),
+    verifyEmailMethod: config?.verifyEmailMethod ?? ('code' as const),
+  };
+
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    // Preview mode - do nothing
+  };
+
+  const handleOAuthClick = () => {
+    // Preview mode - do nothing
+  };
+
+  return (
+    <div className="w-[400px]">
+      {view === 'sign-in' && (
+        <SignInForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          forgotPasswordUrl="#preview=forgot-password"
+          signUpUrl="#preview=sign-up"
+        />
+      )}
+
+      {view === 'sign-up' && (
+        <SignUpForm
+          email={email}
+          password={password}
+          onEmailChange={setEmail}
+          onPasswordChange={setPassword}
+          onSubmit={handleSubmit}
+          authConfig={authConfig}
+          onOAuthClick={handleOAuthClick}
+          signInUrl="#preview=sign-in"
+        />
+      )}
+
+      {view === 'forgot-password' && (
+        <ForgotPasswordForm
+          email={email}
+          onEmailChange={setEmail}
+          onSubmit={handleSubmit}
+          backToSignInUrl="#preview=sign-in"
+        />
+      )}
+    </div>
+  );
+}

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

@@ -1,18 +1,23 @@
 import { useMemo } from 'react';
+import { User } from 'lucide-react';
 import {
+  Avatar,
+  AvatarImage,
+  AvatarFallback,
   Badge,
+  Checkbox,
   DataGrid,
   createDefaultCellRenderer,
   type DataGridProps,
   type DataGridColumn,
   type RenderCellProps,
+  type SelectionCellProps,
   ConvertedValue,
 } from '@/components';
 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 }[];
 };
@@ -96,23 +101,18 @@ const ProviderIcon = ({ provider }: { provider: string }) => {
   );
 };
 
-const IdentitiesCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
-  const identities = row.identities;
+const ProvidersCellRenderer = ({ row }: RenderCellProps<UserDataGridRow>) => {
+  const providers = row.providers;
 
-  if (!identities || !Array.isArray(identities) || !identities.length) {
+  if (!providers || !Array.isArray(providers) || !providers.length) {
     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)),
-  ];
+  const uniqueProviders = [...new Set(providers)];
 
   return (
-    <div
-      className="flex flex-wrap gap-1"
-      title={identities.map((identity: { provider: string }) => identity.provider).join(', ')}
-    >
+    <div className="flex flex-wrap gap-1" title={providers.join(', ')}>
       {uniqueProviders.slice(0, 2).map((provider: string, index: number) => (
         <ProviderIcon key={index} provider={provider} />
       ))}
@@ -150,28 +150,12 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
       renderCell: cellRenderers.email,
     },
     {
-      key: 'name',
-      name: 'Name',
-      width: '1fr',
-      resizable: true,
-      sortable: true,
-      renderCell: cellRenderers.text,
-    },
-    {
-      key: 'identities',
-      name: 'Identities',
-      width: '1.5fr',
-      resizable: true,
-      sortable: true,
-      renderCell: IdentitiesCellRenderer,
-    },
-    {
-      key: 'providerType',
-      name: 'Provider Type',
+      key: 'providers',
+      name: 'Providers',
       width: '1fr',
       resizable: true,
       sortable: true,
-      renderCell: cellRenderers.text,
+      renderCell: ProvidersCellRenderer,
     },
     {
       key: 'emailVerified',
@@ -201,7 +185,45 @@ export function createUsersColumns(): DataGridColumn<UserDataGridRow>[] {
 }
 
 // Users-specific DataGrid props
-export type UsersDataGridProps = Omit<DataGridProps<UserDataGridRow>, 'columns'>;
+export type UsersDataGridProps = Omit<
+  DataGridProps<UserDataGridRow>,
+  'columns' | 'selectionColumnWidth' | 'renderSelectionCell'
+>;
+
+// Custom selection cell with avatar and name
+const UserSelectionCell = ({
+  row,
+  isSelected,
+  onToggle,
+  tabIndex,
+}: SelectionCellProps<UserDataGridRow>) => {
+  const profile = row.profile as Record<string, unknown> | null;
+  const avatarUrl = profile?.avatar_url as string | undefined;
+  const name = profile?.name as string | undefined;
+
+  return (
+    <div className="flex items-center gap-2 w-full h-full">
+      <Checkbox checked={isSelected} onChange={onToggle} tabIndex={tabIndex} />
+      <div className="flex items-center gap-2 min-w-0 flex-1">
+        <Avatar className="w-6 h-6 rounded-full flex-shrink-0">
+          <AvatarImage src={avatarUrl} alt={name || 'User avatar'} className="object-cover" />
+          <AvatarFallback className="bg-gray-200 dark:bg-neutral-700 rounded-full">
+            <User className="w-4 h-4 text-gray-500 dark:text-neutral-400" />
+          </AvatarFallback>
+        </Avatar>
+        <span
+          className={cn(
+            'text-sm truncate',
+            name ? 'text-black dark:text-zinc-300' : 'text-gray-400 dark:text-neutral-500'
+          )}
+          title={name || 'null'}
+        >
+          {name || 'null'}
+        </span>
+      </div>
+    </div>
+  );
+};
 
 // Specialized DataGrid for users
 export function UsersDataGrid(props: UsersDataGridProps) {
@@ -214,6 +236,8 @@ export function UsersDataGrid(props: UsersDataGridProps) {
       showSelection={true}
       showPagination={true}
       showTypeBadge={false}
+      selectionColumnWidth={180}
+      renderSelectionCell={UserSelectionCell}
     />
   );
 }

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

@@ -1,5 +1,5 @@
-export { AuthPreview } from './AuthPreview';
-export { OAuthConfigDialog } from './OAuthConfigDialog';
-export { OAuthEmptyState } from './OAuthEmptyState';
-export { default as UserFormDialog } from './UserFormDialog';
-export { createUsersColumns, UsersDataGrid, type UsersDataGridProps } from './UsersDataGrid';
+export { AuthPreview } from './AuthPreview';
+export { OAuthConfigDialog } from './OAuthConfigDialog';
+export { OAuthEmptyState } from './OAuthEmptyState';
+export { default as UserFormDialog } from './UserFormDialog';
+export { createUsersColumns, UsersDataGrid, type UsersDataGridProps } from './UsersDataGrid';