@igstack/app-catalog-frontend-core 0.0.1

package/src/modules/approvalMethod/ApprovalMethodSelector.tsx

@@ -0,0 +1,150 @@
+import { useState } from 'react'
+import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
+import { Check, ChevronsUpDown, Plus } from 'lucide-react'
+import { useTRPC } from '~/api/infra/trpc'
+import { cn } from '~/lib/utils'
+import { Button } from '~/ui/button'
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+} from '~/ui/command'
+import { Popover, PopoverContent, PopoverTrigger } from '~/ui/popover'
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/ui/dialog'
+import { Badge } from '~/ui/badge'
+import { ApprovalMethodForm } from './ApprovalMethodForm'
+import { ApiQueryMagazineApprovalMethod } from './api/ApiQueryMagazineApprovalMethod'
+
+interface ApprovalMethodSelectorProps {
+  value: string | undefined
+  onChange: (value: string | undefined) => void
+  disabled?: boolean
+}
+
+export function ApprovalMethodSelector({
+  value,
+  onChange,
+  disabled = false,
+}: ApprovalMethodSelectorProps) {
+  const [open, setOpen] = useState(false)
+  const [showQuickAdd, setShowQuickAdd] = useState(false)
+
+  const trpc = useTRPC()
+  const queryClient = useQueryClient()
+
+  const { data: methods = [] } = useQuery(ApiQueryMagazineApprovalMethod.list())
+
+  const createMutation = useMutation({
+    ...trpc.approvalMethod.create.mutationOptions(),
+    onSuccess: (newMethod) => {
+      queryClient.invalidateQueries({
+        queryKey: ['approvalMethod'],
+      })
+      onChange(newMethod.slug)
+      setShowQuickAdd(false)
+    },
+  })
+
+  const selectedMethod = methods.find((m) => m.slug === value)
+
+  const TYPE_LABELS: Record<string, string> = {
+    service: 'Service',
+    personTeam: 'Person/Team',
+    custom: 'Custom',
+  }
+
+  return (
+    <>
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button
+            variant="outline"
+            role="combobox"
+            aria-expanded={open}
+            className="w-full justify-between"
+            disabled={disabled}
+          >
+            {selectedMethod ? (
+              <span className="flex items-center gap-2">
+                {selectedMethod.displayName}
+                <Badge variant="secondary" className="text-xs">
+                  {TYPE_LABELS[selectedMethod.type]}
+                </Badge>
+              </span>
+            ) : (
+              <span className="text-muted-foreground">
+                Select approval method...
+              </span>
+            )}
+            <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-[400px] p-0">
+          <Command>
+            <CommandInput placeholder="Search methods..." />
+            <CommandList>
+              <CommandEmpty>No methods found.</CommandEmpty>
+              <CommandGroup>
+                {methods.map((method) => (
+                  <CommandItem
+                    key={method.slug}
+                    value={method.displayName}
+                    onSelect={() => {
+                      onChange(method.slug)
+                      setOpen(false)
+                    }}
+                  >
+                    <Check
+                      className={cn(
+                        'mr-2 h-4 w-4',
+                        value === method.slug ? 'opacity-100' : 'opacity-0',
+                      )}
+                    />
+                    <span className="flex items-center gap-2">
+                      {method.displayName}
+                      <Badge variant="outline" className="text-xs">
+                        {TYPE_LABELS[method.type]}
+                      </Badge>
+                    </span>
+                  </CommandItem>
+                ))}
+              </CommandGroup>
+              <CommandSeparator />
+              <CommandGroup>
+                <CommandItem
+                  onSelect={() => {
+                    setOpen(false)
+                    setShowQuickAdd(true)
+                  }}
+                >
+                  <Plus className="mr-2 h-4 w-4" />
+                  Create new method...
+                </CommandItem>
+              </CommandGroup>
+            </CommandList>
+          </Command>
+        </PopoverContent>
+      </Popover>
+
+      {/* Quick Add Dialog */}
+      <Dialog open={showQuickAdd} onOpenChange={setShowQuickAdd}>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>Create Approval Method</DialogTitle>
+          </DialogHeader>
+          <ApprovalMethodForm
+            mode="create"
+            initialData={null}
+            onSubmit={(data) => createMutation.mutate(data)}
+            onCancel={() => setShowQuickAdd(false)}
+            isPending={createMutation.isPending}
+          />
+        </DialogContent>
+      </Dialog>
+    </>
+  )
+}

package/src/modules/approvalMethod/api/ApiQueryMagazineApprovalMethod.ts

@@ -0,0 +1,34 @@
+import { queryOptions } from '@tanstack/react-query'
+import { getTrpcFromMeta } from '~/util/reactQueryUtils'
+
+/**
+ * Query options for ApprovalMethod data.
+ *
+ * Note: We let tRPC infer the return types directly rather than using
+ * the backend's ApprovalMethod type, because tRPC serializes Date → string
+ * over JSON. This ensures end-to-end type safety without manual casting.
+ */
+export class ApiQueryMagazineApprovalMethod {
+  static list() {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'list'] as const,
+      queryFn: (ctx) => getTrpcFromMeta(ctx).approvalMethod.list.query(),
+    })
+  }
+
+  static getById(slug: string) {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'getById', slug] as const,
+      queryFn: (ctx) =>
+        getTrpcFromMeta(ctx).approvalMethod.getById.query({ slug }),
+    })
+  }
+
+  static listByType(type: 'service' | 'personTeam' | 'custom') {
+    return queryOptions({
+      queryKey: ['approvalMethod', 'listByType', type] as const,
+      queryFn: (ctx) =>
+        getTrpcFromMeta(ctx).approvalMethod.listByType.query({ type }),
+    })
+  }
+}

package/src/modules/auth/AuthContext.tsx

@@ -0,0 +1,130 @@
+import type { Session } from 'better-auth/types'
+import { createContext, use, useEffect, useMemo, useState } from 'react'
+
+interface User {
+  id: string
+  email?: string | null
+  name?: string | null
+  image?: string | null
+  emailVerified?: boolean
+}
+
+interface AuthContextType {
+  session: Session | null
+  user: User | null
+  isLoading: boolean
+  isAuthenticated: boolean
+}
+
+const AuthContext = createContext<AuthContextType | undefined>(undefined)
+
+const STORAGE_KEY = 'eh_auth_user'
+
+/**
+ * Provider component for authentication state
+ * Fetches and manages session from the backend
+ * Uses localStorage for optimistic rendering to avoid flickering
+ */
+export function AuthProvider({ children }: { children: React.ReactNode }) {
+  const [session, setSession] = useState<Session | null>(null)
+  const [user, setUser] = useState<User | null>(() => {
+    // Hydrate from localStorage on mount to avoid flickering
+    if (typeof window === 'undefined') return null
+    try {
+      const stored = localStorage.getItem(STORAGE_KEY)
+      return stored ? JSON.parse(stored) : null
+    } catch {
+      return null
+    }
+  })
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    // Use AbortController to cancel fetch on unmount (e.g., React StrictMode double-mount)
+    const abortController = new AbortController()
+
+    // Fetch session from backend
+    async function fetchSession() {
+      try {
+        const response = await fetch('/api/auth/session', {
+          credentials: 'include',
+          signal: abortController.signal,
+        })
+        if (response.ok) {
+          const data = await response.json()
+          setSession(data)
+          setUser(data?.user || null)
+          if (data?.user) {
+            localStorage.setItem(STORAGE_KEY, JSON.stringify(data.user))
+          } else {
+            localStorage.removeItem(STORAGE_KEY)
+          }
+        } else {
+          setSession(null)
+          setUser(null)
+          localStorage.removeItem(STORAGE_KEY)
+        }
+      } catch (error) {
+        // Ignore abort errors (happens on cleanup)
+        if (error instanceof Error && error.name === 'AbortError') {
+          return
+        }
+        console.error('Failed to fetch session:', error)
+        setSession(null)
+        setUser(null)
+        localStorage.removeItem(STORAGE_KEY)
+      } finally {
+        setIsLoading(false)
+      }
+    }
+
+    fetchSession()
+
+    // Cleanup: abort fetch on unmount
+    return () => {
+      abortController.abort()
+    }
+  }, [])
+
+  const value: AuthContextType = useMemo(
+    () => ({
+      session,
+      user,
+      isLoading,
+      isAuthenticated: !!user,
+    }),
+    [session, user, isLoading],
+  )
+
+  return <AuthContext value={value}>{children}</AuthContext>
+}
+
+/**
+ * Hook to access authentication state
+ * @returns Authentication context containing session, user, and auth state
+ */
+export function useAuth() {
+  const context = use(AuthContext)
+  if (!context) {
+    throw new Error('useAuth must be used within AuthProvider')
+  }
+  return context
+}
+
+/**
+ * Hook to check if user is authenticated
+ * @returns Boolean indicating if user is authenticated
+ */
+export function useIsAuthenticated() {
+  const { isAuthenticated } = useAuth()
+  return isAuthenticated
+}
+
+/**
+ * Hook to get the current user
+ * @returns Current user or null
+ */
+export function useUser() {
+  const { user } = useAuth()
+  return user
+}

package/src/modules/auth/AuthModalContext.tsx

@@ -0,0 +1,49 @@
+import { createContext, use, useMemo, useState } from 'react'
+
+interface AuthModalContextType {
+  isOpen: boolean
+  redirectUrl: string
+  open: (redirectUrl?: string) => void
+  close: () => void
+}
+
+const AuthModalContext = createContext<AuthModalContextType | undefined>(
+  undefined,
+)
+
+/**
+ * Provider for global login modal state
+ * Allows opening/closing modal from anywhere in the app
+ */
+export function AuthModalProvider({ children }: { children: React.ReactNode }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const [redirectUrl, setRedirectUrl] = useState('/')
+
+  const value = useMemo<AuthModalContextType>(() => ({
+    isOpen,
+    redirectUrl,
+    open: (url?: string) => {
+      setRedirectUrl(url || '/')
+      setIsOpen(true)
+    },
+    close: () => setIsOpen(false),
+  }), [isOpen, redirectUrl])
+
+  return (
+    <AuthModalContext value={value}>{children}</AuthModalContext>
+  )
+}
+
+/**
+ * Hook to access and control the login modal
+ * @returns Object with isOpen, open, and close
+ */
+export function useAuthModal() {
+  const context = use(AuthModalContext)
+  if (!context) {
+    throw new Error(
+      'useAuthModal must be used within AuthModalProvider',
+    )
+  }
+  return context
+}

package/src/modules/auth/ProtectedContent.tsx

@@ -0,0 +1,55 @@
+import { useNavigate, useRouterState } from '@tanstack/react-router'
+import { useEffect } from 'react'
+import { useAuth } from './AuthContext'
+
+interface ProtectedProps {
+  children: React.ReactNode
+  fallback?: React.ReactNode
+  requiredRole?: string // For future role-based access control
+}
+
+/**
+ * Component to protect content based on authentication status
+ * Only renders children if user is authenticated
+ * @param children - Content to show when authenticated
+ * @param fallback - Content to show when not authenticated (optional)
+ */
+export function ProtectedContent({
+  children,
+  fallback = null,
+}: ProtectedProps) {
+  const { isAuthenticated, isLoading } = useAuth()
+
+  if (isLoading) {
+    return <div>Loading...</div>
+  }
+
+  return isAuthenticated ? <>{children}</> : <>{fallback}</>
+}
+
+/**
+ * HOC to protect a component
+ * Redirects to login if not authenticated, preserving the original URL
+ * @param Component - Component to protect
+ */
+export function withProtection<TProps extends object>(
+  Component: React.ComponentType<TProps>,
+) {
+  return function ProtectedComponent(props: TProps) {
+    const { isAuthenticated } = useAuth()
+    const navigate = useNavigate()
+    const pathname = useRouterState({ select: (s) => s.location.pathname })
+
+    useEffect(() => {
+      if (!isAuthenticated) {
+        navigate({ to: '/login', search: { redirect: pathname } })
+      }
+    }, [isAuthenticated, navigate, pathname])
+
+    if (!isAuthenticated) {
+      return null
+    }
+
+    return <Component {...props} />
+  }
+}

package/src/modules/auth/authClient.ts

@@ -0,0 +1,9 @@
+import { createAuthClient } from 'better-auth/react'
+
+/**
+ * Better Auth client for frontend authentication
+ * Automatically handles session management and cookies
+ */
+export const authClient = createAuthClient({
+  baseURL: window.location.origin,
+})

package/src/modules/auth/authUtils.ts

@@ -0,0 +1,41 @@
+/**
+ * Extract groups from user object
+ */
+function getUserGroups(user: any): Array<string> {
+  if (!user) {
+    return []
+  }
+
+  // Check common locations for group information
+  const groups =
+    user.groups || // Standard "groups" claim
+    user.env_hopper_groups || // Custom env_hopper_groups claim
+    user.oktaGroups || // Okta-specific
+    user.roles || // Some providers use "roles"
+    []
+
+  return Array.isArray(groups) ? groups : []
+}
+
+/**
+ * Check if user is a member of any of the specified groups
+ */
+function isMemberOfAnyGroup(user: any, allowedGroups: Array<string>): boolean {
+  const userGroups = getUserGroups(user)
+  return allowedGroups.some((group) => userGroups.includes(group))
+}
+
+/**
+ * Check if user has admin permissions
+ * @param user User object
+ * @param adminGroups Admin group names (fetched from backend via authConfig endpoint)
+ */
+export function isAdmin(
+  user: any,
+  adminGroups: Array<string> = ['env_hopper_ui_super_admins'],
+): boolean {
+  if (!user) {
+    return false
+  }
+  return isMemberOfAnyGroup(user, adminGroups)
+}

package/src/modules/auth/index.ts

@@ -0,0 +1,6 @@
+export { authClient } from './authClient'
+export { AuthProvider, useAuth, useIsAuthenticated, useUser } from './AuthContext'
+export { ProtectedContent, withProtection } from './ProtectedContent'
+export { LoginPage } from './ui/LoginPage'
+export { useAuthActions } from './useAuthActions'
+

package/src/modules/auth/ui/LoginModal.tsx

@@ -0,0 +1,36 @@
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from '~/ui/dialog'
+import { useAuthModal } from '../AuthModalContext'
+import { LoginPage } from './LoginPage'
+
+/**
+ * LoginModal renders a dialog with login form
+ * Controlled by AuthModalContext global state
+ * Can be opened from anywhere using useAuthModal hook
+ */
+export function LoginModal() {
+  const { isOpen, close } = useAuthModal()
+
+  return (
+    <Dialog open={isOpen} onOpenChange={(open) => {
+      if (!open) {
+        close()
+      }
+    }}>
+      <DialogContent className="w-full max-w-md">
+        <DialogHeader>
+          <DialogTitle>Sign In</DialogTitle>
+          <DialogDescription>
+            Choose your sign-in method to access EnvHopper
+          </DialogDescription>
+        </DialogHeader>
+        <LoginPage onSuccess={close} />
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/modules/auth/ui/LoginPage.tsx

@@ -0,0 +1,62 @@
+import { useQuery } from '@tanstack/react-query'
+import { useState } from 'react'
+import { useTRPC } from '~/api/infra/trpc'
+import { Button } from '~/ui/button'
+import { authClient } from '../authClient'
+import { useAuthModal } from '../AuthModalContext'
+
+interface LoginPageProps {
+  onSuccess?: () => void
+}
+
+export function LoginPage({ onSuccess }: LoginPageProps) {
+  const [error, setError] = useState<string | null>(null)
+  const { redirectUrl } = useAuthModal()
+
+  const trpc = useTRPC()
+  const { data: providersData } = useQuery(
+    trpc.auth.getProviders.queryOptions(),
+  )
+  const socialProviders = providersData?.providers || []
+
+  const handleSocialSignIn = async (provider: string) => {
+    try {
+      // Close modal before redirect to OAuth
+      onSuccess?.()
+      
+      await authClient.signIn.social({
+        provider,
+        callbackURL: redirectUrl,
+      })
+    } catch (err) {
+      setError(err instanceof Error ? err.message : 'Social sign-in failed')
+    }
+  }
+
+  return (
+    <div className="space-y-4">
+      {error && (
+        <div className="p-3 text-sm bg-destructive/10 text-destructive rounded-md">
+          {error}
+        </div>
+      )}
+      {socialProviders.length > 0 && (
+        <div className="flex flex-col gap-2">
+          {socialProviders.map((provider: string) => (
+            <Button
+              key={provider}
+              variant="outline"
+              onClick={() => handleSocialSignIn(provider)}
+              className="w-full capitalize"
+            >
+              {provider === 'github' && '🔗 '}
+              {provider === 'google' && '🔐 '}
+              {provider === 'okta' && '🏢 '}
+              Sign in with {provider}
+            </Button>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}

package/src/modules/auth/useAuthActions.ts

@@ -0,0 +1,85 @@
+import { useCallback } from 'react'
+
+interface LoginCredentials {
+  email: string
+  password: string
+}
+
+interface SignupCredentials extends LoginCredentials {
+  name: string
+}
+
+/**
+ * Hook for authentication actions (login, signup, logout)
+ */
+export function useAuthActions() {
+  const login = useCallback(async (credentials: LoginCredentials) => {
+    const response = await fetch('/api/auth/sign-in/email', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Login failed')
+    }
+
+    return response.json()
+  }, [])
+
+  const signup = useCallback(async (credentials: SignupCredentials) => {
+    const response = await fetch('/api/auth/sign-up/email', {
+      method: 'POST',
+      credentials: 'include',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(credentials),
+    })
+
+    if (!response.ok) {
+      const error = await response.json()
+      throw new Error(error.message || 'Signup failed')
+    }
+
+    return response.json()
+  }, [])
+
+  const logout = useCallback(async () => {
+    const response = await fetch('/api/auth/sign-out', {
+      method: 'POST',
+      credentials: 'include',
+    })
+
+    if (!response.ok) {
+      throw new Error('Logout failed')
+    }
+
+    // Clear session and reload to update UI
+    window.location.href = '/'
+  }, [])
+
+  const socialLogin = useCallback(async (provider: 'github' | 'google') => {
+    const response = await fetch(`/api/auth/signin/${provider}`, {
+      method: 'POST',
+      credentials: 'include',
+    })
+
+    if (!response.ok) {
+      throw new Error(`${provider} login failed`)
+    }
+
+    const data = await response.json()
+    // Redirect to provider's OAuth flow
+    if (data.redirectUrl) {
+      window.location.href = data.redirectUrl
+    }
+  }, [])
+
+  return {
+    login,
+    signup,
+    logout,
+    socialLogin,
+  }
+}