vperms-testing 1.0.0

package/frontend/src/pages/Users.jsx

@@ -0,0 +1,171 @@
+import { useState, useEffect } from 'react';
+import { useApi } from '../hooks/useApi';
+
+export default function Users() {
+    const api = useApi();
+    const [users, setUsers] = useState([]);
+    const [roles, setRoles] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [selectedUser, setSelectedUser] = useState(null);
+    const [assignRoleId, setAssignRoleId] = useState('');
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    const loadData = async () => {
+        try {
+            const [usersRes, rolesRes] = await Promise.all([
+                api.get('/users'),
+                api.get('/roles'),
+            ]);
+            setUsers(usersRes.users || []);
+            setRoles(rolesRes.roles || []);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const assignRole = async () => {
+        if (!selectedUser || !assignRoleId) return;
+        try {
+            await api.post(`/users/${selectedUser.id}/roles`, { roleId: assignRoleId });
+            setAssignRoleId('');
+            loadData();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const removeRole = async (userId, roleId) => {
+        try {
+            await api.delete(`/users/${userId}/roles/${roleId}`);
+            loadData();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    return (
+        <div>
+            <div className="page-header">
+                <div>
+                    <h1 className="page-title">Users</h1>
+                    <p className="page-subtitle">Manage users and their roles</p>
+                </div>
+            </div>
+
+            {error && <div className="message message-error">{error}</div>}
+
+            {loading ? (
+                <div className="loading"><div className="spinner"></div></div>
+            ) : (
+                <div className="grid grid-2">
+                    <div className="card">
+                        <div className="card-header">
+                            <h3 className="card-title">All Users</h3>
+                        </div>
+                        <div className="card-body">
+                            <div className="table-container">
+                                <table>
+                                    <thead>
+                                        <tr>
+                                            <th>Name</th>
+                                            <th>Email</th>
+                                            <th>Roles</th>
+                                            <th>Actions</th>
+                                        </tr>
+                                    </thead>
+                                    <tbody>
+                                        {users.map(user => (
+                                            <tr key={user.id}>
+                                                <td>{user.name || '-'}</td>
+                                                <td>{user.email}</td>
+                                                <td>
+                                                    {user.roles?.map(role => (
+                                                        <span key={role} className="badge badge-primary" style={{ marginRight: '0.25rem' }}>
+                                                            {role}
+                                                        </span>
+                                                    ))}
+                                                </td>
+                                                <td>
+                                                    <button
+                                                        className="btn btn-secondary btn-sm"
+                                                        onClick={() => setSelectedUser(user)}
+                                                    >
+                                                        Manage
+                                                    </button>
+                                                </td>
+                                            </tr>
+                                        ))}
+                                    </tbody>
+                                </table>
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="card">
+                        <div className="card-header">
+                            <h3 className="card-title">
+                                {selectedUser ? `Manage: ${selectedUser.name || selectedUser.email}` : 'Select a user'}
+                            </h3>
+                        </div>
+                        <div className="card-body">
+                            {selectedUser ? (
+                                <>
+                                    <div className="form-group">
+                                        <label className="form-label">Assign Role</label>
+                                        <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                            <select
+                                                className="form-input"
+                                                value={assignRoleId}
+                                                onChange={(e) => setAssignRoleId(e.target.value)}
+                                            >
+                                                <option value="">Select role...</option>
+                                                {roles.map(role => (
+                                                    <option key={role.id} value={role.id}>{role.name}</option>
+                                                ))}
+                                            </select>
+                                            <button className="btn btn-primary" onClick={assignRole}>Assign</button>
+                                        </div>
+                                    </div>
+
+                                    <div style={{ marginTop: '1.5rem' }}>
+                                        <label className="form-label">Current Roles</label>
+                                        {selectedUser.roles?.length > 0 ? (
+                                            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                                                {selectedUser.roles.map(roleName => {
+                                                    const role = roles.find(r => r.name === roleName);
+                                                    return role ? (
+                                                        <div key={role.id} className="badge badge-primary" style={{ display: 'flex', alignItems: 'center', gap: '0.5rem' }}>
+                                                            {roleName}
+                                                            <button
+                                                                onClick={() => removeRole(selectedUser.id, role.id)}
+                                                                style={{ background: 'none', border: 'none', color: 'inherit', cursor: 'pointer' }}
+                                                            >
+                                                                ✕
+                                                            </button>
+                                                        </div>
+                                                    ) : (
+                                                        <span key={roleName} className="badge badge-primary">{roleName}</span>
+                                                    );
+                                                })}
+                                            </div>
+                                        ) : (
+                                            <p style={{ color: 'var(--text-secondary)' }}>No roles assigned</p>
+                                        )}
+                                    </div>
+                                </>
+                            ) : (
+                                <p className="empty-state">Select a user from the list to manage their roles</p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/frontend/vite.config.js

@@ -0,0 +1,15 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+    plugins: [react()],
+    server: {
+        port: 5173,
+        proxy: {
+            '/api': {
+                target: 'http://localhost:3001',
+                changeOrigin: true,
+            },
+        },
+    },
+})

package/package.json

@@ -0,0 +1,25 @@
+{
+    "name": "vperms-testing",
+    "version": "1.0.0",
+    "description": "Test project for @faryzal2020/v-perms package",
+    "type": "module",
+    "scripts": {
+        "dev": "bun run --watch server/index.js",
+        "dev:frontend": "cd frontend && bun run dev",
+        "db:push": "bunx prisma db push",
+        "db:generate": "bunx prisma generate",
+        "db:studio": "bunx prisma studio",
+        "db:seed": "bun run server/seed.js"
+    },
+    "dependencies": {
+        "@prisma/client": "^5.22.0",
+        "hono": "^4.6.0",
+        "@hono/node-server": "^1.13.0",
+        "@faryzal2020/v-perms": "file:../v-perms",
+        "bcryptjs": "^2.4.3",
+        "jsonwebtoken": "^9.0.2"
+    },
+    "devDependencies": {
+        "prisma": "^5.22.0"
+    }
+}

package/prisma/schema.prisma

@@ -0,0 +1,104 @@
+generator client {
+  provider = "prisma-client-js"
+}
+
+datasource db {
+  provider = "postgresql"
+  url      = env("DATABASE_URL")
+}
+
+model User {
+  id        String   @id @default(cuid())
+  email     String   @unique
+  name      String?
+  password  String
+  createdAt DateTime @default(now())
+  updatedAt DateTime @updatedAt
+
+  userRoles       UserRole[]
+  userPermissions UserPermission[]
+
+  @@map("users")
+}
+
+model Role {
+  id          String   @id @default(cuid())
+  name        String   @unique
+  description String?
+  priority    Int      @default(0)
+  isDefault   Boolean  @default(false)
+  createdAt   DateTime @default(now())
+  updatedAt   DateTime @updatedAt
+
+  userRoles        UserRole[]
+  rolePermissions  RolePermission[]
+  inheritedRoles   RoleInheritance[] @relation("ParentRole")
+  inheritsFrom     RoleInheritance[] @relation("ChildRole")
+
+  @@map("roles")
+}
+
+model Permission {
+  id          String   @id @default(cuid())
+  key         String   @unique
+  description String?
+  category    String?
+  createdAt   DateTime @default(now())
+
+  rolePermissions RolePermission[]
+  userPermissions UserPermission[]
+
+  @@index([category])
+  @@map("permissions")
+}
+
+model UserRole {
+  userId     String
+  roleId     String
+  assignedAt DateTime @default(now())
+
+  user User @relation(fields: [userId], references: [id], onDelete: Cascade)
+  role Role @relation(fields: [roleId], references: [id], onDelete: Cascade)
+
+  @@id([userId, roleId])
+  @@map("user_roles")
+}
+
+model RolePermission {
+  roleId       String
+  permissionId String
+  granted      Boolean  @default(true)
+  assignedAt   DateTime @default(now())
+
+  role       Role       @relation(fields: [roleId], references: [id], onDelete: Cascade)
+  permission Permission @relation(fields: [permissionId], references: [id], onDelete: Cascade)
+
+  @@id([roleId, permissionId])
+  @@map("role_permissions")
+}
+
+model UserPermission {
+  userId       String
+  permissionId String
+  granted      Boolean  @default(true)
+  assignedAt   DateTime @default(now())
+
+  user       User       @relation(fields: [userId], references: [id], onDelete: Cascade)
+  permission Permission @relation(fields: [permissionId], references: [id], onDelete: Cascade)
+
+  @@id([userId, permissionId])
+  @@map("user_permissions")
+}
+
+model RoleInheritance {
+  roleId         String
+  inheritsFromId String
+  priority       Int      @default(0)
+  createdAt      DateTime @default(now())
+
+  role         Role @relation("ParentRole", fields: [roleId], references: [id], onDelete: Cascade)
+  inheritsFrom Role @relation("ChildRole", fields: [inheritsFromId], references: [id], onDelete: Cascade)
+
+  @@id([roleId, inheritsFromId])
+  @@map("role_inheritance")
+}

package/server/index.js

@@ -0,0 +1,57 @@
+import { Hono } from 'hono';
+import { cors } from 'hono/cors';
+import { serve } from '@hono/node-server';
+import { PrismaClient } from '@prisma/client';
+import { createPermissionSystem } from '@faryzal2020/v-perms';
+import authRoutes from './routes/auth.js';
+import userRoutes from './routes/users.js';
+import roleRoutes from './routes/roles.js';
+import permissionRoutes from './routes/permissions.js';
+
+// Initialize Prisma
+const prisma = new PrismaClient();
+
+// Initialize Permission System
+const perms = createPermissionSystem(prisma, {
+    debug: true,
+    enableCache: false, // No Redis for this demo
+});
+
+// Create Hono app
+const app = new Hono();
+
+// Middleware
+app.use('*', cors({
+    origin: 'http://localhost:5173',
+    credentials: true,
+}));
+
+// Make prisma and perms available in context
+app.use('*', async (c, next) => {
+    c.set('prisma', prisma);
+    c.set('perms', perms);
+    await next();
+});
+
+// Health check
+app.get('/', (c) => {
+    return c.json({ message: 'v-perms Test API', status: 'running' });
+});
+
+// Routes
+app.route('/api/auth', authRoutes);
+app.route('/api/users', userRoutes);
+app.route('/api/roles', roleRoutes);
+app.route('/api/permissions', permissionRoutes);
+
+// Start server
+const port = process.env.PORT || 3001;
+
+console.log(`🚀 Server starting on port ${port}`);
+
+serve({
+    fetch: app.fetch,
+    port: Number(port),
+});
+
+console.log(`✅ Server running at http://localhost:${port}`);

package/server/middleware/auth.js

@@ -0,0 +1,65 @@
+import jwt from 'jsonwebtoken';
+
+const JWT_SECRET = process.env.JWT_SECRET || 'super-secret-dev-key';
+
+/**
+ * Middleware to verify JWT token
+ */
+export async function authMiddleware(c, next) {
+    const authHeader = c.req.header('Authorization');
+
+    if (!authHeader || !authHeader.startsWith('Bearer ')) {
+        return c.json({ error: 'No token provided' }, 401);
+    }
+
+    const token = authHeader.split(' ')[1];
+
+    try {
+        const decoded = jwt.verify(token, JWT_SECRET);
+        c.set('user', decoded);
+        await next();
+    } catch (error) {
+        return c.json({ error: 'Invalid token' }, 401);
+    }
+}
+
+/**
+ * Middleware to check if user has permission
+ */
+export function requirePermission(permission) {
+    return async (c, next) => {
+        const user = c.get('user');
+        const perms = c.get('perms');
+
+        if (!user) {
+            return c.json({ error: 'Unauthorized' }, 401);
+        }
+
+        try {
+            const hasPermission = await perms.can(user.id, permission);
+
+            if (!hasPermission) {
+                return c.json({
+                    error: 'Forbidden',
+                    required: permission
+                }, 403);
+            }
+
+            await next();
+        } catch (error) {
+            console.error('Permission check error:', error);
+            return c.json({ error: 'Permission check failed' }, 500);
+        }
+    };
+}
+
+/**
+ * Generate JWT token
+ */
+export function generateToken(user) {
+    return jwt.sign(
+        { id: user.id, email: user.email },
+        JWT_SECRET,
+        { expiresIn: '24h' }
+    );
+}

package/server/routes/auth.js

@@ -0,0 +1,157 @@
+import { Hono } from 'hono';
+import bcrypt from 'bcryptjs';
+import { generateToken, authMiddleware } from '../middleware/auth.js';
+
+const router = new Hono();
+
+/**
+ * POST /api/auth/register
+ * Register a new user
+ */
+router.post('/register', async (c) => {
+    const prisma = c.get('prisma');
+    const perms = c.get('perms');
+
+    try {
+        const { email, password, name } = await c.req.json();
+
+        // Validate input
+        if (!email || !password) {
+            return c.json({ error: 'Email and password required' }, 400);
+        }
+
+        // Check if user exists
+        const existing = await prisma.user.findUnique({
+            where: { email },
+        });
+
+        if (existing) {
+            return c.json({ error: 'Email already registered' }, 400);
+        }
+
+        // Hash password
+        const hashedPassword = await bcrypt.hash(password, 10);
+
+        // Create user
+        const user = await prisma.user.create({
+            data: {
+                email,
+                password: hashedPassword,
+                name: name || null,
+            },
+        });
+
+        // Assign default role if exists
+        try {
+            const defaultRole = await prisma.role.findFirst({
+                where: { isDefault: true },
+            });
+
+            if (defaultRole) {
+                await perms.assignRole(defaultRole.id, user.id);
+            }
+        } catch (roleError) {
+            console.log('No default role to assign');
+        }
+
+        // Generate token
+        const token = generateToken(user);
+
+        return c.json({
+            message: 'Registration successful',
+            user: { id: user.id, email: user.email, name: user.name },
+            token,
+        });
+    } catch (error) {
+        console.error('Registration error:', error);
+        return c.json({ error: 'Registration failed' }, 500);
+    }
+});
+
+/**
+ * POST /api/auth/login
+ * Login user
+ */
+router.post('/login', async (c) => {
+    const prisma = c.get('prisma');
+
+    try {
+        const { email, password } = await c.req.json();
+
+        // Validate input
+        if (!email || !password) {
+            return c.json({ error: 'Email and password required' }, 400);
+        }
+
+        // Find user
+        const user = await prisma.user.findUnique({
+            where: { email },
+        });
+
+        if (!user) {
+            return c.json({ error: 'Invalid credentials' }, 401);
+        }
+
+        // Check password
+        const validPassword = await bcrypt.compare(password, user.password);
+
+        if (!validPassword) {
+            return c.json({ error: 'Invalid credentials' }, 401);
+        }
+
+        // Generate token
+        const token = generateToken(user);
+
+        return c.json({
+            message: 'Login successful',
+            user: { id: user.id, email: user.email, name: user.name },
+            token,
+        });
+    } catch (error) {
+        console.error('Login error:', error);
+        return c.json({ error: 'Login failed' }, 500);
+    }
+});
+
+/**
+ * GET /api/auth/me
+ * Get current user info with roles and permissions
+ */
+router.get('/me', authMiddleware, async (c) => {
+    const prisma = c.get('prisma');
+    const perms = c.get('perms');
+    const authUser = c.get('user');
+
+    try {
+        const user = await prisma.user.findUnique({
+            where: { id: authUser.id },
+            select: {
+                id: true,
+                email: true,
+                name: true,
+                createdAt: true,
+            },
+        });
+
+        if (!user) {
+            return c.json({ error: 'User not found' }, 404);
+        }
+
+        // Get user's roles
+        const roles = await perms.manager.getUserRoles(user.id);
+
+        // Get user's permissions
+        const permissions = await perms.manager.getUserPermissions(user.id);
+
+        return c.json({
+            user,
+            roles: roles.map(r => ({ id: r.id, name: r.name, priority: r.priority })),
+            permissions,
+        });
+    } catch (error) {
+        console.error('Get user error:', error);
+        return c.json({ error: 'Failed to get user' }, 500);
+    }
+});
+
+export default router;

package/server/routes/permissions.js

@@ -0,0 +1,64 @@
+import { Hono } from 'hono';
+import { authMiddleware, requirePermission } from '../middleware/auth.js';
+
+const router = new Hono();
+
+// All routes require authentication
+router.use('*', authMiddleware);
+
+/**
+ * GET /api/permissions
+ * List all permissions
+ */
+router.get('/', requirePermission('permissions.list'), async (c) => {
+    const perms = c.get('perms');
+
+    try {
+        const permissions = await perms.manager.listPermissions();
+        return c.json({ permissions });
+    } catch (error) {
+        console.error('List permissions error:', error);
+        return c.json({ error: 'Failed to list permissions' }, 500);
+    }
+});
+
+/**
+ * POST /api/permissions
+ * Create a new permission
+ */
+router.post('/', requirePermission('permissions.create'), async (c) => {
+    const perms = c.get('perms');
+
+    try {
+        const { key, description, category } = await c.req.json();
+
+        if (!key) {
+            return c.json({ error: 'Permission key required' }, 400);
+        }
+
+        const permission = await perms.createPermission(key, description, category);
+        return c.json({ message: 'Permission created', permission });
+    } catch (error) {
+        console.error('Create permission error:', error);
+        return c.json({ error: error.message || 'Failed to create permission' }, 500);
+    }
+});
+
+/**
+ * DELETE /api/permissions/:key
+ * Delete a permission
+ */
+router.delete('/:key', requirePermission('permissions.delete'), async (c) => {
+    const perms = c.get('perms');
+    const key = c.req.param('key');
+
+    try {
+        await perms.deletePermission(key);
+        return c.json({ message: 'Permission deleted' });
+    } catch (error) {
+        console.error('Delete permission error:', error);
+        return c.json({ error: error.message || 'Failed to delete permission' }, 500);
+    }
+});
+
+export default router;