insforge 0.3.1

package/frontend/src/features/functions/components/SecretsContent.tsx

@@ -0,0 +1,120 @@
+import { useState } from 'react';
+import { Button } from '@/components/radix/Button';
+import { Input } from '@/components/radix/Input';
+import { Skeleton } from '@/components/radix/Skeleton';
+import { SearchInput } from '@/components/SearchInput';
+import { ConfirmDialog } from '@/components/ConfirmDialog';
+import { SecretRow } from './SecretRow';
+import SecretEmptyState from './SecretEmptyState';
+import { useSecrets } from '@/features/secrets/hooks/useSecrets';
+
+export function SecretsContent() {
+  const [newSecretKey, setNewSecretKey] = useState('');
+  const [newSecretValue, setNewSecretValue] = useState('');
+
+  const {
+    filteredSecrets,
+    searchQuery,
+    setSearchQuery,
+    isLoading: loading,
+    createSecret,
+    deleteSecret,
+    confirmDialogProps,
+  } = useSecrets();
+
+  const handleSaveNewSecret = async () => {
+    const success = await createSecret(newSecretKey, newSecretValue);
+    if (success) {
+      setNewSecretKey('');
+      setNewSecretValue('');
+    }
+  };
+
+  return (
+    <>
+      <div className="flex flex-col gap-6 p-4">
+        {/* Header */}
+        <p className="h-7 text-xl text-zinc-950 dark:text-white">Secrets</p>
+
+        {/* Add New Secret Portal */}
+        <div className="bg-white dark:bg-[#333333] rounded-[8px]">
+          <div className="p-6 border-b border-gray-200 dark:border-neutral-700">
+            <p className="text-base text-zinc-950 dark:text-white">Add New Secret</p>
+          </div>
+          <div className="p-6 flex gap-6 items-end">
+            <div className="flex-1">
+              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Key</label>
+              <Input
+                placeholder="e.g CLIENT_KEY"
+                value={newSecretKey}
+                onChange={(e) => setNewSecretKey(e.target.value)}
+                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
+              />
+            </div>
+            <div className="flex-1">
+              <label className="block text-sm text-zinc-950 dark:text-neutral-50 mb-2">Value</label>
+              <Input
+                placeholder="e.g 1234567890"
+                type="text"
+                value={newSecretValue}
+                onChange={(e) => setNewSecretValue(e.target.value)}
+                className="shadow-none w-full dark:bg-neutral-900 dark:text-white dark:placeholder:text-neutral-400 dark:border-neutral-700"
+              />
+            </div>
+            <Button
+              onClick={() => void handleSaveNewSecret()}
+              className="bg-emerald-300 hover:bg-emerald-400 text-black px-3 py-2 w-20 h-9 rounded"
+              disabled={!newSecretKey.trim() || !newSecretValue.trim()}
+            >
+              Save
+            </Button>
+          </div>
+        </div>
+
+        {/* Search Bar */}
+        <SearchInput
+          placeholder="Search secret"
+          value={searchQuery}
+          onChange={setSearchQuery}
+          className="max-w-70 dark:bg-neutral-900 dark:border-neutral-700"
+        />
+
+        {/* Secrets Table */}
+        <div className="flex flex-col gap-2">
+          {/* Table Header */}
+          <div className="grid grid-cols-12 px-3 text-sm text-muted-foreground dark:text-neutral-400">
+            <div className="col-span-8 py-1 px-3">Name</div>
+            {/* <div className="col-span-5 py-1 px-3">Digest</div> */}
+            <div className="col-span-3 py-1 px-3">Updated at</div>
+            <div className="col-span-1 py-1 px-3" />
+          </div>
+
+          {loading ? (
+            <>
+              {[...Array(4)].map((_, i) => (
+                <Skeleton key={i} className="h-14 rounded-[8px] cols-span-full" />
+              ))}
+            </>
+          ) : filteredSecrets.length >= 1 ? (
+            <>
+              {filteredSecrets.map((secret) => (
+                <SecretRow
+                  key={secret.id}
+                  secret={secret}
+                  onDelete={() => void deleteSecret(secret)}
+                  className="cols-span-full"
+                />
+              ))}
+            </>
+          ) : (
+            <div className="cols-span-full">
+              <SecretEmptyState searchQuery={searchQuery} />
+            </div>
+          )}
+        </div>
+      </div>
+
+      <ConfirmDialog {...confirmDialogProps} />
+    </>
+  );
+}

package/frontend/src/features/functions/hooks/useFunctions.ts

@@ -0,0 +1,106 @@
+import { useState, useCallback, useMemo } from 'react';
+import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
+import { functionsService, type EdgeFunction } from '../services/functions.service';
+import { useToast } from '@/lib/hooks/useToast';
+
+export function useFunctions() {
+  const queryClient = useQueryClient();
+  const { showToast } = useToast();
+  const [selectedFunction, setSelectedFunction] = useState<EdgeFunction | null>(null);
+
+  // Query to fetch all functions
+  const {
+    data: functionsData,
+    isLoading,
+    error,
+    refetch,
+  } = useQuery({
+    queryKey: ['functions'],
+    queryFn: () => functionsService.listFunctions(),
+    staleTime: 2 * 60 * 1000, // Cache for 2 minutes
+  });
+
+  // Extract functions and runtime status from response
+  const functions = useMemo(() => functionsData?.functions || [], [functionsData]);
+  const runtimeStatus = useMemo(() => functionsData?.runtime?.status || 'running', [functionsData]);
+
+  // Function to fetch and set selected function details
+  const selectFunction = useCallback(
+    async (func: EdgeFunction) => {
+      try {
+        const data = await functionsService.getFunctionBySlug(func.slug);
+        setSelectedFunction(data);
+      } catch (error) {
+        console.error('Failed to fetch function details:', error);
+        const errorMessage =
+          error instanceof Error ? error.message : 'Failed to load function details';
+        showToast(errorMessage, 'error');
+      }
+    },
+    [showToast]
+  );
+
+  // Function to clear selected function (back to list)
+  const clearSelection = useCallback(() => {
+    setSelectedFunction(null);
+  }, []);
+
+  // Delete function mutation (for future use)
+  const deleteFunctionMutation = useMutation({
+    mutationFn: (slug: string) => functionsService.deleteFunction(slug),
+    onSuccess: (_, slug) => {
+      void queryClient.invalidateQueries({ queryKey: ['functions'] });
+      showToast('Function deleted successfully', 'success');
+      // Clear selection if deleted function was selected
+      if (selectedFunction && selectedFunction.slug === slug) {
+        setSelectedFunction(null);
+      }
+    },
+    onError: (error: Error) => {
+      const errorMessage = error instanceof Error ? error.message : 'Failed to delete function';
+      showToast(errorMessage, 'error');
+    },
+  });
+
+  // Helper to check if a function is selected
+  const isViewingDetail = selectedFunction !== null;
+
+  // Only show functions if runtime is available
+  const displayFunctions = useMemo(
+    () => (runtimeStatus === 'running' ? functions : []),
+    [functions, runtimeStatus]
+  );
+
+  return {
+    // Data
+    functions: displayFunctions,
+    functionsCount: displayFunctions.length,
+    selectedFunction,
+    isViewingDetail,
+
+    // Runtime status
+    runtimeStatus,
+    isRuntimeAvailable: runtimeStatus === 'running',
+
+    // Loading states
+    isLoading,
+    isDeleting: deleteFunctionMutation.isPending,
+
+    // Error
+    error,
+
+    // Actions
+    selectFunction,
+    clearSelection,
+    deleteFunction: deleteFunctionMutation.mutate,
+    refetch,
+
+    // Helpers
+    getFunctionBySlug: useCallback(
+      (slug: string): EdgeFunction | undefined => {
+        return displayFunctions.find((func) => func.slug === slug);
+      },
+      [displayFunctions]
+    ),
+  };
+}

package/frontend/src/features/functions/page/FunctionsPage.tsx

@@ -0,0 +1,28 @@
+import { useState, useEffect } from 'react';
+import { FunctionsSidebar } from '@/features/functions/components/FunctionsSidebar';
+import { FunctionsContent } from '@/features/functions/components/FunctionsContent';
+import { SecretsContent } from '@/features/functions/components/SecretsContent';
+
+export default function FunctionsPage() {
+  // Load selected section from localStorage on mount
+  const [selectedSection, setSelectedSection] = useState<'functions' | 'secrets'>(() => {
+    return (
+      (localStorage.getItem('selectedFunctionSection') as 'functions' | 'secrets') || 'functions'
+    );
+  });
+
+  // Save selected section to localStorage when it changes
+  useEffect(() => {
+    localStorage.setItem('selectedFunctionSection', selectedSection);
+  }, [selectedSection]);
+
+  return (
+    <div className="h-full flex">
+      <FunctionsSidebar selectedSection={selectedSection} onSectionSelect={setSelectedSection} />
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {selectedSection === 'functions' ? <FunctionsContent /> : <SecretsContent />}
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/functions/services/functions.service.ts

@@ -0,0 +1,48 @@
+import { apiClient } from '@/lib/api/client';
+
+export interface EdgeFunction {
+  id: string;
+  slug: string;
+  name: string;
+  description?: string;
+  code?: string;
+  status: 'draft' | 'active' | 'error';
+  created_at: string;
+  updated_at: string;
+  deployed_at?: string;
+}
+
+export interface FunctionsResponse {
+  functions: EdgeFunction[];
+  runtime: {
+    status: 'running' | 'unavailable';
+  };
+}
+
+export class FunctionsService {
+  async listFunctions(): Promise<FunctionsResponse> {
+    const data = await apiClient.request('/functions', {
+      headers: apiClient.withAccessToken(),
+    });
+
+    return {
+      functions: Array.isArray(data.functions) ? data.functions : [],
+      runtime: data.runtime || { status: 'unavailable' },
+    };
+  }
+
+  async getFunctionBySlug(slug: string): Promise<EdgeFunction> {
+    return apiClient.request(`/functions/${slug}`, {
+      headers: apiClient.withAccessToken(),
+    });
+  }
+
+  async deleteFunction(slug: string): Promise<void> {
+    return apiClient.request(`/functions/${slug}`, {
+      method: 'DELETE',
+      headers: apiClient.withAccessToken(),
+    });
+  }
+}
+
+export const functionsService = new FunctionsService();

package/frontend/src/features/login/components/AuthErrorBoundary.tsx

@@ -0,0 +1,87 @@
+import { Component, ReactNode } from 'react';
+import { AlertCircle } from 'lucide-react';
+import { Button } from '@/components/radix/Button';
+import { Alert, AlertDescription, AlertTitle } from '@/components/radix/Alert';
+
+interface Props {
+  children: ReactNode;
+  fallback?: ReactNode;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class AuthErrorBoundary extends Component<Props, State> {
+  public state: State = {
+    hasError: false,
+    error: null,
+  };
+
+  public static getDerivedStateFromError(error: Error): State {
+    return { hasError: true, error };
+  }
+
+  public componentDidCatch(error: Error) {
+    console.error(error);
+  }
+
+  private handleReset = () => {
+    this.setState({ hasError: false, error: null });
+    // Clear auth token and reload to trigger re-authentication
+    localStorage.removeItem('insforge_token');
+    window.location.href = '/';
+  };
+
+  public render() {
+    if (this.state.hasError) {
+      if (this.props.fallback) {
+        return this.props.fallback;
+      }
+
+      const isAuthError =
+        this.state.error?.message?.includes('auth') ||
+        this.state.error?.message?.includes('401') ||
+        this.state.error?.message?.includes('403');
+
+      return (
+        <div className="min-h-screen bg-gray-50 flex items-center justify-center p-4">
+          <div className="max-w-md w-full space-y-4">
+            <Alert variant="destructive">
+              <AlertCircle className="h-4 w-4" />
+              <AlertTitle>
+                {isAuthError ? 'Authentication Error' : 'Something went wrong'}
+              </AlertTitle>
+              <AlertDescription>
+                {isAuthError
+                  ? 'There was a problem with your authentication. Please try logging in again.'
+                  : 'An unexpected error occurred. Please try refreshing the page.'}
+              </AlertDescription>
+            </Alert>
+
+            <div className="flex gap-3">
+              <Button onClick={this.handleReset} className="flex-1">
+                {isAuthError ? 'Login Again' : 'Refresh Page'}
+              </Button>
+              <Button variant="outline" onClick={() => window.location.reload()} className="flex-1">
+                Reload Page
+              </Button>
+            </div>
+
+            {process.env.NODE_ENV === 'development' && (
+              <details className="mt-4 p-4 bg-gray-100 rounded-md">
+                <summary className="cursor-pointer text-sm font-medium">
+                  Error Details (Development Only)
+                </summary>
+                <pre className="mt-2 text-xs overflow-auto">{this.state.error?.stack}</pre>
+              </details>
+            )}
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}

package/frontend/src/features/login/components/PrivateRoute.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { Navigate } from 'react-router-dom';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { LoadingState } from '@/components/LoadingState';
+import { cn } from '@/lib/utils/utils';
+
+interface PrivateRouteProps {
+  classname: string;
+  children: React.ReactNode;
+}
+
+export const PrivateRoute: React.FC<PrivateRouteProps> = ({ classname, children }) => {
+  const { isAuthenticated, isLoading } = useAuth();
+
+  if (isLoading) {
+    return (
+      <div className={cn('min-h-screen flex items-center justify-center', classname)}>
+        <LoadingState />
+      </div>
+    );
+  }
+
+  return isAuthenticated ? <>{children}</> : <Navigate to="/dashboard/login" replace />;
+};

package/frontend/src/features/login/page/CloudLoginPage.tsx

@@ -0,0 +1,93 @@
+import { useEffect, useState } from 'react';
+import { useNavigate, useSearchParams } from 'react-router-dom';
+import { LockIcon } from 'lucide-react';
+import { useAuth } from '@/lib/contexts/AuthContext';
+
+export default function CloudLoginPage() {
+  const navigate = useNavigate();
+  const [searchParams, setSearchParams] = useSearchParams();
+  const { loginWithAuthorizationCode, isAuthenticated } = useAuth();
+  const [authError, setAuthError] = useState<string | null>(null);
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      void navigate('/cloud/dashboard', { replace: true });
+    }
+  }, [isAuthenticated, navigate]);
+
+  // Handle authorization token exchange
+  useEffect(() => {
+    const authorizationCode = searchParams.get('authorizationCode');
+
+    if (authorizationCode) {
+      setAuthError(null);
+      // Exchange the authorization code for an access token
+      loginWithAuthorizationCode(authorizationCode)
+        .then((success) => {
+          if (success) {
+            // Notify parent of success
+            if (window.parent !== window) {
+              window.parent.postMessage(
+                {
+                  type: 'AUTH_SUCCESS',
+                },
+                '*'
+              );
+            }
+          } else {
+            setAuthError('The authorization code may have expired or already been used.');
+            if (window.parent !== window) {
+              window.parent.postMessage(
+                {
+                  type: 'AUTH_ERROR',
+                  message: 'Authorization code validation failed',
+                },
+                '*'
+              );
+            }
+          }
+        })
+        .catch((error) => {
+          console.error('Authorization code exchange failed:', error);
+          setAuthError('The authorization code may have expired or already been used.');
+          if (window.parent !== window) {
+            window.parent.postMessage(
+              {
+                type: 'AUTH_ERROR',
+                message: 'Authorization code validation failed',
+              },
+              '*'
+            );
+          }
+        });
+    } else {
+      setAuthError('No authorization code provided.');
+    }
+  }, [searchParams, setSearchParams, loginWithAuthorizationCode, navigate]);
+
+  // Show error state if authentication failed
+  if (authError) {
+    return (
+      <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+        <div className="text-center text-white">
+          <LockIcon className="h-12 w-12 mx-auto mb-4 text-red-400" />
+          <h2 className="text-xl font-semibold mb-2">Authentication Failed</h2>
+          <p className="text-gray-400 text-sm max-w-md">{authError}</p>
+        </div>
+      </div>
+    );
+  }
+
+  // Show authenticating state
+  return (
+    <div className="min-h-screen bg-neutral-800 flex items-center justify-center px-4">
+      <div className="text-center">
+        <div className="animate-spin mb-4">
+          <LockIcon className="h-12 w-12 text-white mx-auto" />
+        </div>
+        <h2 className="text-xl font-semibold text-white mb-2">Authenticating...</h2>
+        <p className="text-sm text-gray-400">Please wait while we verify your identity</p>
+      </div>
+    </div>
+  );
+}

package/frontend/src/features/login/page/LoginPage.tsx

@@ -0,0 +1,174 @@
+import { useEffect, useCallback, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { Lock, Mail } from 'lucide-react';
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '@/components/radix/Card';
+import {
+  Form,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@/components/radix/Form';
+import { Input } from '@/components/radix/Input';
+import { ButtonWithLoading } from '@/components/ButtonWithLoading';
+import { Alert, AlertDescription } from '@/components/radix/Alert';
+import { useAuth } from '@/lib/contexts/AuthContext';
+import { useOnboardingCompletion } from '@/lib/hooks/useOnboardingCompletion';
+import { loginFormSchema, LoginFormData } from '@/lib/utils/validation-schemas';
+
+export default function LoginPage() {
+  const navigate = useNavigate();
+  const { loginWithPassword, isAuthenticated } = useAuth();
+  const { isCompleted } = useOnboardingCompletion();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const [submitError, setSubmitError] = useState<string | null>(null);
+
+  // Determine where to redirect based on onboarding completion status
+  const getRedirectPath = useCallback(() => {
+    return isCompleted ? '/dashboard' : '/dashboard/onboard';
+  }, [isCompleted]);
+
+  const form = useForm<LoginFormData>({
+    resolver: zodResolver(loginFormSchema),
+    defaultValues: {
+      email: 'admin@example.com',
+      password: 'change-this-password',
+    },
+  });
+
+  const onSubmit = async (data: LoginFormData) => {
+    setIsSubmitting(true);
+    setSubmitError(null);
+
+    try {
+      const success = await loginWithPassword(data.email, data.password);
+
+      if (success) {
+        void navigate(getRedirectPath(), { replace: true });
+      } else {
+        throw new Error('Invalid email or password');
+      }
+    } catch (error) {
+      const errorMessage = error instanceof Error ? error.message : 'An error occurred';
+      setSubmitError(errorMessage);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      void navigate(getRedirectPath(), { replace: true });
+    }
+  }, [isAuthenticated, navigate, getRedirectPath]);
+
+  return (
+    <div className="min-h-screen bg-gray-50 dark:bg-neutral-900 flex items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="w-full max-w-md">
+        {/* Logo and Title */}
+        <div className="text-center mb-8">
+          <div className="inline-flex items-center justify-center w-16 h-16 bg-black dark:bg-emerald-300 rounded-lg mb-4">
+            <Lock className="h-8 w-8 text-white dark:text-black" />
+          </div>
+          <h1 className="text-2xl font-bold tracking-tight dark:text-white">Insforge Admin</h1>
+          <p className="text-sm text-muted-foreground mt-2">Sign in to access your dashboard</p>
+        </div>
+
+        {/* Login Card */}
+        <Card>
+          <Form {...form}>
+            <form onSubmit={(e) => void form.handleSubmit(onSubmit)(e)}>
+              <CardHeader>
+                <CardTitle>Sign In</CardTitle>
+                <CardDescription>Enter your admin credentials to continue</CardDescription>
+              </CardHeader>
+              <CardContent className="space-y-4">
+                <FormField
+                  control={form.control}
+                  name="email"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Email</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Mail className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                          <Input
+                            {...field}
+                            type="email"
+                            placeholder="admin@example.com"
+                            className="pl-10"
+                            autoComplete="email"
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                <FormField
+                  control={form.control}
+                  name="password"
+                  render={({ field }) => (
+                    <FormItem>
+                      <FormLabel>Password</FormLabel>
+                      <FormControl>
+                        <div className="relative">
+                          <Lock className="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+                          <Input
+                            {...field}
+                            type="password"
+                            placeholder="Enter your password"
+                            className="pl-10"
+                            autoComplete="current-password"
+                          />
+                        </div>
+                      </FormControl>
+                      <FormMessage />
+                    </FormItem>
+                  )}
+                />
+
+                {submitError && (
+                  <Alert variant="destructive">
+                    <AlertDescription>{submitError}</AlertDescription>
+                  </Alert>
+                )}
+              </CardContent>
+              <CardFooter className="flex flex-col space-y-4">
+                <ButtonWithLoading
+                  type="submit"
+                  className="w-full"
+                  loading={isSubmitting}
+                  disabled={isSubmitting}
+                >
+                  Sign in
+                </ButtonWithLoading>
+                <p className="text-xs text-center text-muted-foreground">
+                  Use the credentials configured in your .env file
+                </p>
+              </CardFooter>
+            </form>
+          </Form>
+        </Card>
+
+        {/* Footer */}
+        <div className="mt-8 text-center">
+          <p className="text-xs text-muted-foreground">
+            Insforge - Self-hosted Backend as a Service
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}