matt/inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More permissions setup, simplify to one component

Browse Source
This commit is contained in:
Matt
2025-03-23 16:04:32 -04:00
parent f421154c1d
commit 7eae4a0b29
17 changed files with 781 additions and 404 deletions
Download Patch File Download Diff File Expand all files Collapse all files

172
docs/PERMISSIONS.md Normal file
View File

@@ -0,0 +1,172 @@
# Permission System Documentation
This document outlines the permission system implemented in the Inventory Manager application.
## Permission Structure
Permissions follow this naming convention:
- Page access: `access:{page_name}`
- Actions: `{action}:{resource}`
Examples:
- `access:products` - Can access the Products page
- `create:products` - Can create new products
- `edit:users` - Can edit user accounts
## Permission Components
### PermissionGuard
The core component that conditionally renders content based on permissions.
```tsx
<PermissionGuard
permission="create:products"
fallback={<p>No permission</p>}
>
<button>Create Product</button>
</PermissionGuard>
```
Options:
- `permission`: Single permission code
- `anyPermissions`: Array of permissions (ANY match grants access)
- `allPermissions`: Array of permissions (ALL required)
- `adminOnly`: For admin-only sections
- `page`: Page name (checks `access:{page}` permission)
- `fallback`: Content to show if permission check fails
### PermissionProtectedRoute
Protects entire pages based on page access permissions.
```tsx
<Route path="/products" element={
<PermissionProtectedRoute page="products">
<Products />
</PermissionProtectedRoute>
} />
```
### ProtectedSection
Protects sections within a page based on action permissions.
```tsx
<ProtectedSection page="products" action="create">
<button>Add Product</button>
</ProtectedSection>
```
### PermissionButton
Button that automatically handles permissions.
```tsx
<PermissionButton
page="products"
action="create"
onClick={handleCreateProduct}
>
Add Product
</PermissionButton>
```
### SettingsSection
Specific component for settings with built-in permission checks.
```tsx
<SettingsSection
title="System Settings"
description="Configure global settings"
permission="edit:system_settings"
>
{/* Settings content */}
</SettingsSection>
```
## Permission Hooks
### usePermissions
Core hook for checking any permission.
```tsx
const { hasPermission, hasPageAccess, isAdmin } = usePermissions();
if (hasPermission('delete:products')) {
// Can delete products
}
```
### usePagePermission
Specialized hook for page-level permissions.
```tsx
const { canView, canCreate, canEdit, canDelete } = usePagePermission('products');
if (canEdit()) {
// Can edit products
}
```
## Database Schema
Permissions are stored in the database:
- `permissions` table: Stores all available permissions
- `user_permissions` junction table: Maps permissions to users
Admin users automatically have all permissions.
## Common Permission Codes
| Code | Description |
|------|-------------|
| `access:dashboard` | Access to Dashboard page |
| `access:products` | Access to Products page |
| `create:products` | Create new products |
| `edit:products` | Edit existing products |
| `delete:products` | Delete products |
| `view:users` | View user accounts |
| `edit:users` | Edit user accounts |
| `manage:permissions` | Assign permissions to users |
## Implementation Examples
### Page Protection
In `App.tsx`:
```tsx
<Route path="/products" element={
<PermissionProtectedRoute page="products">
<Products />
</PermissionProtectedRoute>
} />
```
### Component Level Protection
```tsx
const { canEdit } = usePagePermission('products');
function handleEdit() {
if (!canEdit()) {
toast.error("You don't have permission");
return;
}
// Edit logic
}
```
### UI Element Protection
```tsx
<PermissionButton
page="products"
action="delete"
onClick={handleDelete}
>
Delete
</PermissionButton>
```

102
inventory-server/auth/routes.js
View File

@@ -189,6 +189,14 @@ router.post('/users', authenticate, requirePermission('create:users'), async (re
try {
const { username, email, password, is_admin, is_active, permissions } = req.body;
console.log("Create user request:", {
username,
email,
is_admin,
is_active,
permissions: permissions || []
});
// Validate required fields
if (!username || !password) {
return res.status(400).json({ error: 'Username and password are required' });
@@ -222,15 +230,52 @@ router.post('/users', authenticate, requirePermission('create:users'), async (re
// Assign permissions if provided and not admin
if (!is_admin && Array.isArray(permissions) && permissions.length > 0) {
const permissionValues = permissions
.map(permId => `(${userId}, ${parseInt(permId, 10)})`)
console.log("Adding permissions for new user:", userId);
console.log("Permissions received:", permissions);
// Check permission format
const permissionIds = permissions.map(p => {
if (typeof p === 'object' && p.id) {
console.log("Permission is an object with ID:", p.id);
return parseInt(p.id, 10);
} else if (typeof p === 'number') {
console.log("Permission is a number:", p);
return p;
} else if (typeof p === 'string' && !isNaN(parseInt(p, 10))) {
console.log("Permission is a string that can be parsed as a number:", p);
return parseInt(p, 10);
} else {
console.log("Unknown permission format:", typeof p, p);
// If it's a permission code, we need to look up the ID
return null;
}
}).filter(id => id !== null);
console.log("Filtered permission IDs:", permissionIds);
if (permissionIds.length > 0) {
const permissionValues = permissionIds
.map(permId => `(${userId}, ${permId})`)
.join(',');
console.log("Inserting permission values:", permissionValues);
try {
await client.query(`
INSERT INTO user_permissions (user_id, permission_id)
VALUES ${permissionValues}
ON CONFLICT DO NOTHING
`);
console.log("Successfully inserted permissions for new user:", userId);
} catch (err) {
console.error("Error inserting permissions for new user:", err);
throw err;
}
} else {
console.log("No valid permission IDs found to insert for new user");
}
} else {
console.log("Not adding permissions: is_admin =", is_admin, "permissions array:", Array.isArray(permissions), "length:", permissions ? permissions.length : 0);
}
await client.query('COMMIT');
@@ -256,6 +301,15 @@ router.put('/users/:id', authenticate, requirePermission('edit:users'), async (r
const userId = req.params.id;
const { username, email, password, is_admin, is_active, permissions } = req.body;
console.log("Update user request:", {
userId,
username,
email,
is_admin,
is_active,
permissions: permissions || []
});
// Check if user exists
const userExists = await client.query(
'SELECT id FROM users WHERE id = $1',
@@ -315,25 +369,65 @@ router.put('/users/:id', authenticate, requirePermission('edit:users'), async (r
// Update permissions if provided
if (Array.isArray(permissions)) {
console.log("Updating permissions for user:", userId);
console.log("Permissions received:", permissions);
// First remove existing permissions
await client.query(
'DELETE FROM user_permissions WHERE user_id = $1',
[userId]
);
console.log("Deleted existing permissions for user:", userId);
// Add new permissions if any and not admin
const newIsAdmin = is_admin !== undefined ? is_admin : (await client.query('SELECT is_admin FROM users WHERE id = $1', [userId])).rows[0].is_admin;
console.log("User is admin:", newIsAdmin);
if (!newIsAdmin && permissions.length > 0) {
const permissionValues = permissions
.map(permId => `(${userId}, ${parseInt(permId, 10)})`)
console.log("Adding permissions:", permissions);
// Check permission format
const permissionIds = permissions.map(p => {
if (typeof p === 'object' && p.id) {
console.log("Permission is an object with ID:", p.id);
return parseInt(p.id, 10);
} else if (typeof p === 'number') {
console.log("Permission is a number:", p);
return p;
} else if (typeof p === 'string' && !isNaN(parseInt(p, 10))) {
console.log("Permission is a string that can be parsed as a number:", p);
return parseInt(p, 10);
} else {
console.log("Unknown permission format:", typeof p, p);
// If it's a permission code, we need to look up the ID
return null;
}
}).filter(id => id !== null);
console.log("Filtered permission IDs:", permissionIds);
if (permissionIds.length > 0) {
const permissionValues = permissionIds
.map(permId => `(${userId}, ${permId})`)
.join(',');
console.log("Inserting permission values:", permissionValues);
try {
await client.query(`
INSERT INTO user_permissions (user_id, permission_id)
VALUES ${permissionValues}
ON CONFLICT DO NOTHING
`);
console.log("Successfully inserted permissions for user:", userId);
} catch (err) {
console.error("Error inserting permissions:", err);
throw err;
}
} else {
console.log("No valid permission IDs found to insert");
}
}
}

61
inventory/src/App.tsx
View File

@@ -17,6 +17,7 @@ import { Categories } from '@/pages/Categories';
import { Import } from '@/pages/Import';
import { AiValidationDebug } from "@/pages/AiValidationDebug"
import { AuthProvider } from './contexts/AuthContext';
import { Protected } from './components/auth/Protected';
const queryClient = new QueryClient();
@@ -77,16 +78,56 @@ function App() {
<MainLayout />
</RequireAuth>
}>
<Route path="/" element={<Dashboard />} />
<Route path="/products" element={<Products />} />
<Route path="/import" element={<Import />} />
<Route path="/categories" element={<Categories />} />
<Route path="/vendors" element={<Vendors />} />
<Route path="/purchase-orders" element={<PurchaseOrders />} />
<Route path="/analytics" element={<Analytics />} />
<Route path="/settings" element={<Settings />} />
<Route path="/forecasting" element={<Forecasting />} />
<Route path="/ai-validation/debug" element={<AiValidationDebug />} />
<Route path="/" element={
<Protected page="dashboard">
<Dashboard />
</Protected>
} />
<Route path="/products" element={
<Protected page="products">
<Products />
</Protected>
} />
<Route path="/import" element={
<Protected page="import">
<Import />
</Protected>
} />
<Route path="/categories" element={
<Protected page="categories">
<Categories />
</Protected>
} />
<Route path="/vendors" element={
<Protected page="vendors">
<Vendors />
</Protected>
} />
<Route path="/purchase-orders" element={
<Protected page="purchase_orders">
<PurchaseOrders />
</Protected>
} />
<Route path="/analytics" element={
<Protected page="analytics">
<Analytics />
</Protected>
} />
<Route path="/settings" element={
<Protected page="settings">
<Settings />
</Protected>
} />
<Route path="/forecasting" element={
<Protected page="forecasting">
<Forecasting />
</Protected>
} />
<Route path="/ai-validation/debug" element={
<Protected page="ai_validation_debug">
<AiValidationDebug />
</Protected>
} />
<Route path="*" element={<Navigate to="/" replace />} />
</Route>
</Routes>

104
inventory/src/components/auth/PERMISSIONS.md Normal file
View File

@@ -0,0 +1,104 @@
# Permission System Documentation
This document outlines the simplified permission system implemented in the Inventory Manager application.
## Permission Structure
Permissions follow this naming convention:
- Page access: `access:{page_name}`
- Actions: `{action}:{resource}`
Examples:
- `access:products` - Can access the Products page
- `create:products` - Can create new products
- `edit:users` - Can edit user accounts
## Permission Component
### Protected
The core component that conditionally renders content based on permissions.
```tsx
<Protected
permission="create:products"
fallback={<p>No permission</p>}
>
<button>Create Product</button>
</Protected>
```
Options:
- `permission`: Single permission code (e.g., "create:products")
- `page`: Page name (checks `access:{page}` permission)
- `resource` + `action`: Resource and action (checks `{action}:{resource}` permission)
- `adminOnly`: For admin-only sections
- `fallback`: Content to show if permission check fails
### RequireAuth
Used for basic authentication checks (is user logged in?).
```tsx
<Route element={
<RequireAuth>
<MainLayout />
</RequireAuth>
}>
{/* Protected routes */}
</Route>
```
## Common Permission Codes
| Code | Description |
|------|-------------|
| `access:dashboard` | Access to Dashboard page |
| `access:products` | Access to Products page |
| `create:products` | Create new products |
| `edit:products` | Edit existing products |
| `delete:products` | Delete products |
| `view:users` | View user accounts |
| `edit:users` | Edit user accounts |
| `manage:permissions` | Assign permissions to users |
## Implementation Examples
### Page Protection
In `App.tsx`:
```tsx
<Route path="/products" element={
<Protected page="products" fallback={<Navigate to="/" />}>
<Products />
</Protected>
} />
```
### Component Level Protection
```tsx
<Protected permission="edit:products">
<form>
{/* Form fields */}
<button type="submit">Save Changes</button>
</form>
</Protected>
```
### Button Protection
```tsx
<Button
onClick={handleDelete}
disabled={!hasPermission('delete:products')}
>
Delete
</Button>
// With Protected component
<Protected permission="delete:products" fallback={null}>
<Button onClick={handleDelete}>Delete</Button>
</Protected>
```

82
inventory/src/components/auth/Protected.tsx Normal file
View File

@@ -0,0 +1,82 @@
import { ReactNode, useContext } from "react";
import { AuthContext } from "@/contexts/AuthContext";
interface ProtectedProps {
// For specific permission code
permission?: string;
// For page access permission format: access:{page}
page?: string;
// For action permission format: {action}:{resource}
resource?: string;
action?: "view" | "create" | "edit" | "delete" | string;
// For admin-only access
adminOnly?: boolean;
// Content to render if permission check passes
children: ReactNode;
// Optional fallback content
fallback?: ReactNode;
}
/**
* A simplified component that conditionally renders content based on user permissions
*/
export function Protected({
permission,
page,
resource,
action,
adminOnly,
children,
fallback = null
}: ProtectedProps) {
const { user } = useContext(AuthContext);
// If user isn't loaded yet, don't render anything
if (!user) {
return null;
}
// Admin check - admins always have access to everything
if (user.is_admin) {
return <>{children}</>;
}
// Admin-only check
if (adminOnly) {
return <>{fallback}</>;
}
// Check permissions array exists
if (!user.permissions) {
return <>{fallback}</>;
}
// Page access check (access:page)
if (page) {
const pagePermission = `access:${page.toLowerCase()}`;
if (!user.permissions.includes(pagePermission)) {
return <>{fallback}</>;
}
}
// Resource action check (action:resource)
if (resource && action) {
const resourcePermission = `${action}:${resource.toLowerCase()}`;
if (!user.permissions.includes(resourcePermission)) {
return <>{fallback}</>;
}
}
// Single permission check
if (permission && !user.permissions.includes(permission)) {
return <>{fallback}</>;
}
// If all checks pass, render children
return <>{children}</>;
}

28
inventory/src/components/auth/RequireAuth.tsx
View File

@@ -1,11 +1,30 @@
import { Navigate, useLocation } from "react-router-dom"
import { useContext, useEffect } from "react"
import { useContext, useEffect, useState } from "react"
import { AuthContext } from "@/contexts/AuthContext"
export function RequireAuth({ children }: { children: React.ReactNode }) {
const isLoggedIn = sessionStorage.getItem("isLoggedIn") === "true"
const { token, fetchCurrentUser } = useContext(AuthContext)
const { token, user, fetchCurrentUser } = useContext(AuthContext)
const location = useLocation()
const [isLoading, setIsLoading] = useState(!!token && !user)
// This will make sure the user data is loaded the first time
useEffect(() => {
const loadUserData = async () => {
if (token && !user) {
setIsLoading(true)
try {
await fetchCurrentUser()
} catch (error) {
console.error("Failed to fetch user data:", error)
} finally {
setIsLoading(false)
}
}
}
loadUserData()
}, [token, user, fetchCurrentUser])
// Check if token exists but we're not logged in
useEffect(() => {
@@ -17,6 +36,11 @@ export function RequireAuth({ children }: { children: React.ReactNode }) {
}
}, [token, isLoggedIn, fetchCurrentUser])
// If still loading user data, show nothing yet
if (isLoading) {
return <div className="p-8 flex justify-center items-center h-screen">Loading...</div>
}
if (!isLoggedIn) {
// Redirect to login with the current path in the redirect parameter
return <Navigate

82
inventory/src/components/common/PermissionGuard.tsx
View File

@@ -1,82 +0,0 @@
import { ReactNode } from "react";
import { usePermissions } from "@/hooks/usePermissions";
interface PermissionGuardProps {
/**
* Permission code required to render children
*/
permission?: string;
/**
* Array of permission codes - if ANY are matched, children will render
*/
anyPermissions?: string[];
/**
* Array of permission codes - ALL must match to render children
*/
allPermissions?: string[];
/**
* If true, renders children if the user is an admin
*/
adminOnly?: boolean;
/**
* If true, renders children if the user can access the specified page
*/
page?: string;
/**
* Fallback component to render if permissions check fails
*/
fallback?: ReactNode;
/**
* Children to render if permissions check passes
*/
children: ReactNode;
}
/**
* Component that conditionally renders its children based on user permissions
*/
export function PermissionGuard({
permission,
anyPermissions,
allPermissions,
adminOnly,
page,
fallback = null,
children
}: PermissionGuardProps) {
const { hasPermission, hasAnyPermission, hasAllPermissions, hasPageAccess, isAdmin } = usePermissions();
// Admin check
if (adminOnly && !isAdmin) {
return <>{fallback}</>;
}
// Page access check
if (page && !hasPageAccess(page)) {
return <>{fallback}</>;
}
// Single permission check
if (permission && !hasPermission(permission)) {
return <>{fallback}</>;
}
// Any permissions check
if (anyPermissions && !hasAnyPermission(anyPermissions)) {
return <>{fallback}</>;
}
// All permissions check
if (allPermissions && !hasAllPermissions(allPermissions)) {
return <>{fallback}</>;
}
// If all checks pass, render children
return <>{children}</>;
}

12
inventory/src/components/layout/AppSidebar.tsx
View File

@@ -24,7 +24,7 @@ import {
SidebarSeparator,
} from "@/components/ui/sidebar";
import { useLocation, useNavigate, Link } from "react-router-dom";
import { PermissionGuard } from "@/components/common/PermissionGuard";
import { Protected } from "@/components/auth/Protected";
const items = [
{
@@ -67,7 +67,7 @@ const items = [
title: "Purchase Orders",
icon: ClipboardList,
url: "/purchase-orders",
permission: "access:purchase-orders"
permission: "access:purchase_orders"
},
{
title: "Analytics",
@@ -107,7 +107,7 @@ export function AppSidebar() {
location.pathname === item.url ||
(item.url !== "/" && location.pathname.startsWith(item.url));
return (
<PermissionGuard
<Protected
key={item.title}
permission={item.permission}
fallback={null}
@@ -126,7 +126,7 @@ export function AppSidebar() {
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</PermissionGuard>
</Protected>
);
})}
</SidebarMenu>
@@ -137,7 +137,7 @@ export function AppSidebar() {
<SidebarGroup>
<SidebarGroupContent>
<SidebarMenu>
<PermissionGuard
<Protected
permission="access:settings"
fallback={null}
>
@@ -155,7 +155,7 @@ export function AppSidebar() {
</Link>
</SidebarMenuButton>
</SidebarMenuItem>
</PermissionGuard>
</Protected>
</SidebarMenu>
</SidebarGroupContent>
</SidebarGroup>

2
inventory/src/components/layout/MainLayout.tsx
View File

@@ -1,7 +1,7 @@
import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
import { AppSidebar } from "./AppSidebar";
import { Outlet } from "react-router-dom";
import { motion } from "motion/react";
import { motion } from "framer-motion";
export function MainLayout() {
return (

112
inventory/src/components/settings/UserForm.tsx
View File

@@ -16,7 +16,6 @@ import { Button } from "@/components/ui/button";
import { Switch } from "@/components/ui/switch";
import { PermissionSelector } from "./PermissionSelector";
import { Alert, AlertDescription } from "@/components/ui/alert";
import { ControllerRenderProps } from "react-hook-form";
interface Permission {
id: number;
@@ -58,6 +57,32 @@ const userFormSchema = z.object({
type FormValues = z.infer<typeof userFormSchema>;
// Helper function to get all permission IDs from all categories
const getAllPermissionIds = (permissionCategories: PermissionCategory[]): number[] => {
const allIds: number[] = [];
if (permissionCategories && permissionCategories.length > 0) {
permissionCategories.forEach(category => {
category.permissions.forEach(permission => {
allIds.push(permission.id);
});
});
}
return allIds;
};
// User save data interface (represents the data structure for saving users)
interface UserSaveData {
id?: number;
username: string;
email?: string;
password?: string;
is_admin: boolean;
is_active: boolean;
permissions: Permission[];
}
export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps) {
const [selectedPermissions, setSelectedPermissions] = useState<number[]>([]);
const [formError, setFormError] = useState<string | null>(null);
@@ -76,9 +101,15 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
// Initialize selected permissions
useEffect(() => {
if (user?.permissions && user.permissions.length > 0) {
setSelectedPermissions(user.permissions.map(p => p.id));
console.log("User permissions:", user?.permissions);
if (user?.permissions && Array.isArray(user.permissions) && user.permissions.length > 0) {
// Extract IDs from the permissions
const permissionIds = user.permissions.map(p => p.id);
console.log("Setting selected permissions:", permissionIds);
setSelectedPermissions(permissionIds);
} else {
console.log("No permissions found or empty permissions array");
setSelectedPermissions([]);
}
}, [user]);
@@ -87,6 +118,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
const onSubmit = (data: FormValues) => {
try {
setFormError(null);
console.log("Form submitted with permissions:", selectedPermissions);
// Validate
if (!user && !data.password) {
@@ -95,10 +127,10 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
}
// Prepare the data
const userData = {
const userData: UserSaveData = {
...data,
id: user?.id, // Include ID if editing existing user
permissions: data.is_admin ? [] : selectedPermissions,
permissions: [] // Initialize with empty array
};
// If editing and password is empty, remove it
@@ -106,6 +138,30 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
delete userData.password;
}
// Add permissions if not admin
if (!data.is_admin) {
// Find the actual permission objects from selectedPermissions IDs
const selectedPermissionObjects: Permission[] = [];
if (permissions && permissions.length > 0) {
// Loop through all available permissions to find the selected ones
permissions.forEach(category => {
category.permissions.forEach(permission => {
// If this permission's ID is in the selectedPermissions array, add it
if (selectedPermissions.includes(permission.id)) {
selectedPermissionObjects.push(permission);
}
});
});
}
userData.permissions = selectedPermissionObjects;
} else {
// For admin users, don't send permissions as they're implied
userData.permissions = [];
}
console.log("Saving user data:", userData);
onSave(userData);
} catch (error) {
const errorMessage = error instanceof Error ? error.message : "An error occurred";
@@ -113,6 +169,12 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
}
};
// For debugging
console.log("Current form state:", form.getValues());
console.log("Available permissions categories:", permissions);
console.log("Selected permissions:", selectedPermissions);
console.log("Is admin:", form.watch("is_admin"));
return (
<div className="space-y-6">
<div>
@@ -133,7 +195,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
<FormField
control={form.control}
name="username"
render={({ field }: { field: ControllerRenderProps<FormValues, "username"> }) => (
render={({ field }) => (
<FormItem>
<FormLabel>Username</FormLabel>
<FormControl>
@@ -147,7 +209,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
<FormField
control={form.control}
name="email"
render={({ field }: { field: ControllerRenderProps<FormValues, "email"> }) => (
render={({ field }) => (
<FormItem>
<FormLabel>Email</FormLabel>
<FormControl>
@@ -161,7 +223,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
<FormField
control={form.control}
name="password"
render={({ field }: { field: ControllerRenderProps<FormValues, "password"> }) => (
render={({ field }) => (
<FormItem>
<FormLabel>{user ? "New Password" : "Password"}</FormLabel>
<FormControl>
@@ -185,7 +247,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
<FormField
control={form.control}
name="is_admin"
render={({ field }: { field: ControllerRenderProps<FormValues, "is_admin"> }) => (
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between p-4 border rounded-md">
<div>
<FormLabel>Administrator</FormLabel>
@@ -206,7 +268,7 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
<FormField
control={form.control}
name="is_active"
render={({ field }: { field: ControllerRenderProps<FormValues, "is_active"> }) => (
render={({ field }) => (
<FormItem className="flex flex-row items-center justify-between p-4 border rounded-md">
<div>
<FormLabel>Active</FormLabel>
@@ -225,12 +287,40 @@ export function UserForm({ user, permissions, onSave, onCancel }: UserFormProps)
/>
</div>
{!form.watch("is_admin") && (
{permissions && permissions.length > 0 && (
<>
{form.watch("is_admin") ? (
<div className="space-y-4">
<h3 className="text-lg font-medium">Permissions</h3>
<Alert>
<AlertDescription>
Administrators have access to all permissions by default. Individual permissions cannot be edited for admin users.
</AlertDescription>
</Alert>
<PermissionSelector
permissionsByCategory={permissions}
selectedPermissions={getAllPermissionIds(permissions)}
onChange={() => {}}
disabled={true}
/>
</div>
) : (
<>
<PermissionSelector
permissionsByCategory={permissions}
selectedPermissions={selectedPermissions}
onChange={setSelectedPermissions}
/>
{selectedPermissions.length === 0 && (
<Alert>
<AlertDescription>
Warning: This user has no permissions selected. They won't be able to access anything.
</AlertDescription>
</Alert>
)}
</>
)}
</>
)}
<div className="flex justify-end space-x-4">

2
inventory/src/components/settings/UserList.tsx
View File

@@ -20,6 +20,8 @@ interface UserListProps {
}
export function UserList({ users, onEdit, onDelete }: UserListProps) {
console.log("Rendering user list with users:", users);
if (users.length === 0) {
return (
<div className="text-center py-8">

95
inventory/src/components/settings/UserManagement.tsx
View File

@@ -6,7 +6,6 @@ import { UserList } from "./UserList";
import { UserForm } from "./UserForm";
import config from "@/config";
import { AuthContext } from "@/contexts/AuthContext";
import { usePermissions } from "@/hooks/usePermissions";
import { ShieldAlert } from "lucide-react";
interface User {
@@ -33,8 +32,7 @@ interface PermissionCategory {
}
export function UserManagement() {
const { token, fetchCurrentUser } = useContext(AuthContext);
const { hasPermission } = usePermissions();
const { token, fetchCurrentUser, user } = useContext(AuthContext);
const [users, setUsers] = useState<User[]>([]);
const [selectedUser, setSelectedUser] = useState<User | null>(null);
const [isAddingUser, setIsAddingUser] = useState(false);
@@ -137,10 +135,47 @@ export function UserManagement() {
});
if (!response.ok) {
throw new Error('Failed to fetch user details');
if (response.status === 401) {
throw new Error('Authentication failed. Please log in again.');
} else if (response.status === 403) {
throw new Error('You don\'t have permission to edit users.');
} else {
throw new Error(`Failed to fetch user details (${response.status})`);
}
}
const userData = await response.json();
console.log("Fetched user data for editing:", userData);
// Ensure permissions is always an array
if (!userData.permissions) {
userData.permissions = [];
}
// Make sure the permissions are in the right format for the form
// The server might send either an array of permission objects or just permission codes
if (userData.permissions && userData.permissions.length > 0) {
// Check if permissions are objects with id property
if (typeof userData.permissions[0] === 'string') {
// If we just have permission codes, we need to convert them to objects with ids
// by looking them up in the permissions data
const permissionObjects = [];
// Go through each permission category
for (const category of permissions) {
// For each permission in the category
for (const permission of category.permissions) {
// If this permission's code is in the user's permission codes
if (userData.permissions.includes(permission.code)) {
permissionObjects.push(permission);
}
}
}
userData.permissions = permissionObjects;
}
}
setSelectedUser(userData);
setIsAddingUser(false);
} catch (err) {
@@ -155,38 +190,68 @@ export function UserManagement() {
};
const handleSaveUser = async (userData: any) => {
try {
console.log("Saving user data:", userData);
// Format permissions for the API - convert from permission objects to IDs
let formattedUserData = { ...userData };
if (userData.permissions && Array.isArray(userData.permissions)) {
// Check if permissions are objects (from the form) and convert to IDs for the API
if (userData.permissions.length > 0 && typeof userData.permissions[0] === 'object') {
// The backend expects permission IDs, not just the code strings
formattedUserData.permissions = userData.permissions.map(p => p.id);
}
}
console.log("Formatted user data for API:", formattedUserData);
setLoading(true);
try {
// Use PUT for updating, POST for creating
const method = userData.id ? 'PUT' : 'POST';
const endpoint = userData.id
? `${config.authUrl}/users/${userData.id}`
: `${config.authUrl}/users`;
const method = userData.id ? 'PUT' : 'POST';
console.log(`${method} request to ${endpoint}`);
const response = await fetch(endpoint, {
method,
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
'Content-Type': 'application/json',
'Authorization': `Bearer ${token}`
},
body: JSON.stringify(userData)
body: JSON.stringify(formattedUserData)
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error || 'Failed to save user');
let responseData;
try {
responseData = await response.json();
} catch (e) {
console.error("Error parsing response JSON:", e);
throw new Error("Invalid response from server");
}
// Refresh user list after a successful save
await fetchData();
if (!response.ok) {
console.error("Error response from server:", responseData);
throw new Error(responseData.error || responseData.message || `Failed to save user (${response.status})`);
}
// Reset form state
console.log("Server response after saving user:", responseData);
// Reset the form state
setSelectedUser(null);
setIsAddingUser(false);
// Refresh the user list
fetchData();
} catch (err) {
const errorMessage = err instanceof Error ? err.message : 'Failed to save user';
setError(errorMessage);
} finally {
setLoading(false);
}
};

5
inventory/src/contexts/AuthContext.tsx
View File

@@ -64,6 +64,9 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}
const userData = await response.json();
console.log("Fetched current user data:", userData);
console.log("User permissions:", userData.permissions);
setUser(userData);
// Ensure we have the sessionStorage isLoggedIn flag set
sessionStorage.setItem('isLoggedIn', 'true');
@@ -113,6 +116,8 @@ export function AuthProvider({ children }: { children: ReactNode }) {
}
const data = await response.json();
console.log("Login successful, received data:", data);
console.log("User permissions:", data.user?.permissions);
localStorage.setItem('token', data.token);
sessionStorage.setItem('isLoggedIn', 'true');

101
inventory/src/hooks/usePagePermission.ts
View File

@@ -1,101 +0,0 @@
import { usePermissions } from './usePermissions';
import { useNavigate } from 'react-router-dom';
import { useEffect, useState } from 'react';
interface PagePermissionConfig {
// The permission required to access the specific page
permission?: string;
// Array of permissions where ANY must be present
anyPermissions?: string[];
// Array of permissions where ALL must be present
allPermissions?: string[];
// Whether this page is admin-only
adminOnly?: boolean;
// Page identifier for page-specific access check
page?: string;
// Redirect path if permission check fails
redirectTo?: string;
}
/**
* Hook to check if a user has permission to access a specific page
* Will automatically redirect if permission is denied
*/
export function usePagePermission(config: PagePermissionConfig) {
const {
permission,
anyPermissions,
allPermissions,
adminOnly = false,
page,
redirectTo = '/'
} = config;
const navigate = useNavigate();
const {
hasPermission,
hasPageAccess,
hasAnyPermission,
hasAllPermissions,
isAdmin
} = usePermissions();
const [hasAccess, setHasAccess] = useState<boolean | null>(null);
useEffect(() => {
// Check permissions
let permitted = true;
// Admin check
if (adminOnly && !isAdmin) {
permitted = false;
}
// Page access check
if (page && !hasPageAccess(page)) {
permitted = false;
}
// Single permission check
if (permission && !hasPermission(permission)) {
permitted = false;
}
// Any permissions check
if (anyPermissions && !hasAnyPermission(anyPermissions)) {
permitted = false;
}
// All permissions check
if (allPermissions && !hasAllPermissions(allPermissions)) {
permitted = false;
}
setHasAccess(permitted);
// Redirect if no permission
if (permitted === false) {
navigate(redirectTo);
}
}, [
permission,
anyPermissions,
allPermissions,
adminOnly,
page,
redirectTo,
hasPermission,
hasPageAccess,
hasAnyPermission,
hasAllPermissions,
isAdmin,
navigate
]);
return hasAccess;
}

80
inventory/src/hooks/usePermissions.ts
View File

@@ -1,80 +0,0 @@
import { useContext, useCallback } from "react";
import { AuthContext } from "@/contexts/AuthContext";
/**
* Hook for checking user permissions
* @returns Functions for checking permissions
*/
export function usePermissions() {
const { user } = useContext(AuthContext);
/**
* Check if the user has a specific permission
* @param permissionCode The permission code to check
* @returns Whether the user has the permission
*/
const hasPermission = useCallback((permissionCode: string): boolean => {
// If not authenticated or no permissions, return false
if (!user || !user.permissions) {
return false;
}
// Admin users have all permissions
if (user.is_admin) {
return true;
}
// Check specific permission
return user.permissions.includes(permissionCode);
}, [user]);
/**
* Check if the user has access to a specific page
* @param pageName The page name (e.g., 'products', 'settings')
* @returns Whether the user has access to the page
*/
const hasPageAccess = useCallback((pageName: string): boolean => {
return hasPermission(`access:${pageName.toLowerCase()}`);
}, [hasPermission]);
/**
* Check if the user has ANY of the specified permissions
* @param permissionCodes Array of permission codes to check
* @returns Whether the user has any of the permissions
*/
const hasAnyPermission = useCallback((permissionCodes: string[]): boolean => {
// If admin or no permissions to check, return true
if (!permissionCodes.length || (user && user.is_admin)) {
return true;
}
return permissionCodes.some(code => hasPermission(code));
}, [user, hasPermission]);
/**
* Check if the user has ALL of the specified permissions
* @param permissionCodes Array of permission codes to check
* @returns Whether the user has all the permissions
*/
const hasAllPermissions = useCallback((permissionCodes: string[]): boolean => {
// If no permissions to check, return true
if (!permissionCodes.length) {
return true;
}
// If admin, return true
if (user && user.is_admin) {
return true;
}
return permissionCodes.every(code => hasPermission(code));
}, [user, hasPermission]);
return {
hasPermission,
hasPageAccess,
hasAnyPermission,
hasAllPermissions,
isAdmin: user?.is_admin || false
};
}

58
inventory/src/pages/Login.tsx
View File

@@ -1,13 +1,12 @@
import { useState } from "react";
import { useState, useContext } from "react";
import { useNavigate, useSearchParams } from "react-router-dom";
import { Button } from "@/components/ui/button";
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { toast } from "sonner";
import config from "../config";
import { Loader2, Box } from "lucide-react";
import { motion } from "motion/react";
import { motion } from "framer-motion";
import { AuthContext } from "@/contexts/AuthContext";
export function Login() {
const [username, setUsername] = useState("");
@@ -15,59 +14,22 @@ export function Login() {
const [isLoading, setIsLoading] = useState(false);
const navigate = useNavigate();
const [searchParams] = useSearchParams();
const { login } = useContext(AuthContext);
const handleLogin = async (e: React.FormEvent) => {
e.preventDefault();
setIsLoading(true);
try {
const url = `${config.authUrl}/login`;
console.log("Making login request:", {
url,
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: { username, password },
config,
});
await login(username, password);
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ username, password }),
credentials: "include",
});
console.log("Login response status:", response.status);
if (!response.ok) {
const data = await response
.json()
.catch(() => ({ error: "Failed to parse error response" }));
console.error("Login failed:", data);
throw new Error(data.error || "Login failed");
}
const data = await response.json();
console.log("Login successful:", data);
localStorage.setItem("token", data.token);
sessionStorage.setItem("isLoggedIn", "true");
toast.success("Successfully logged in");
// Get the redirect URL from the URL parameters, defaulting to "/"
const redirectTo = searchParams.get("redirect") || "/"
// Navigate to the redirect URL after successful login
navigate(redirectTo)
// Login successful, redirect to the requested page or home
const redirectTo = searchParams.get("redirect") || "/";
navigate(redirectTo);
} catch (error) {
const message = error instanceof Error ? error.message : "Login failed";
toast.error(message);
console.error("Login error:", error);
toast.error(
error instanceof Error ? error.message : "An unexpected error occurred"
);
} finally {
setIsLoading(false);
}

43
inventory/src/pages/Settings.tsx
View File

@@ -5,25 +5,11 @@ import { PerformanceMetrics } from "@/components/settings/PerformanceMetrics";
import { CalculationSettings } from "@/components/settings/CalculationSettings";
import { TemplateManagement } from "@/components/settings/TemplateManagement";
import { UserManagement } from "@/components/settings/UserManagement";
import { motion } from 'motion/react';
import { PermissionGuard } from "@/components/common/PermissionGuard";
import { motion } from 'framer-motion';
import { Alert, AlertDescription } from "@/components/ui/alert";
import { usePagePermission } from "@/hooks/usePagePermission";
import { useEffect } from "react";
import { Protected } from "@/components/auth/Protected";
export function Settings() {
// Check if the user has permission to access the Settings page
// This will automatically redirect if permission is denied
const hasAccess = usePagePermission({
page: 'settings',
redirectTo: '/'
});
// Prevent flash of content before redirect
if (hasAccess === false) {
return null;
}
return (
<motion.div layout className="container mx-auto py-6">
<div className="mb-6">
@@ -37,20 +23,22 @@ export function Settings() {
<TabsTrigger value="performance-metrics">
Performance Metrics
</TabsTrigger>
<Protected permission="edit:system_settings">
<TabsTrigger value="calculation-settings">
Calculation Settings
</TabsTrigger>
</Protected>
<TabsTrigger value="templates">
Template Management
</TabsTrigger>
<PermissionGuard
permission="manage:users"
<Protected
permission="view:users"
fallback={null}
>
<TabsTrigger value="user-management">
User Management
</TabsTrigger>
</PermissionGuard>
</Protected>
</TabsList>
<TabsContent value="data-management">
@@ -66,7 +54,18 @@ export function Settings() {
</TabsContent>
<TabsContent value="calculation-settings">
<Protected
permission="edit:system_settings"
fallback={
<Alert>
<AlertDescription>
You don't have permission to access Calculation Settings.
</AlertDescription>
</Alert>
}
>
<CalculationSettings />
</Protected>
</TabsContent>
<TabsContent value="templates">
@@ -74,8 +73,8 @@ export function Settings() {
</TabsContent>
<TabsContent value="user-management">
<PermissionGuard
permission="manage:users"
<Protected
permission="view:users"
fallback={
<Alert>
<AlertDescription>
@@ -85,7 +84,7 @@ export function Settings() {
}
>
<UserManagement />
</PermissionGuard>
</Protected>
</TabsContent>
</Tabs>
</motion.div>