vperms-testing 1.0.0

package/frontend/src/pages/Login.jsx

@@ -0,0 +1,109 @@
+import { useState } from 'react';
+import { useAuth } from '../context/AuthContext';
+
+export default function Login() {
+    const { login } = useAuth();
+    const [isRegister, setIsRegister] = useState(false);
+    const [email, setEmail] = useState('');
+    const [password, setPassword] = useState('');
+    const [name, setName] = useState('');
+    const [error, setError] = useState('');
+    const [loading, setLoading] = useState(false);
+
+    const handleSubmit = async (e) => {
+        e.preventDefault();
+        setError('');
+        setLoading(true);
+
+        try {
+            const endpoint = isRegister ? '/api/auth/register' : '/api/auth/login';
+            const body = isRegister ? { email, password, name } : { email, password };
+
+            const response = await fetch(endpoint, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify(body),
+            });
+
+            const data = await response.json();
+
+            if (!response.ok) {
+                throw new Error(data.error || 'Authentication failed');
+            }
+
+            login(data.user, data.token);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    return (
+        <div className="auth-container">
+            <div className="auth-card">
+                <h1 className="auth-title">🔐 v-perms</h1>
+                <p className="auth-subtitle">
+                    {isRegister ? 'Create your account' : 'Sign in to your account'}
+                </p>
+
+                {error && <div className="message message-error">{error}</div>}
+
+                <form onSubmit={handleSubmit}>
+                    {isRegister && (
+                        <div className="form-group">
+                            <label className="form-label">Name</label>
+                            <input
+                                type="text"
+                                className="form-input"
+                                placeholder="Your name"
+                                value={name}
+                                onChange={(e) => setName(e.target.value)}
+                            />
+                        </div>
+                    )}
+
+                    <div className="form-group">
+                        <label className="form-label">Email</label>
+                        <input
+                            type="email"
+                            className="form-input"
+                            placeholder="you@example.com"
+                            value={email}
+                            onChange={(e) => setEmail(e.target.value)}
+                            required
+                        />
+                    </div>
+
+                    <div className="form-group">
+                        <label className="form-label">Password</label>
+                        <input
+                            type="password"
+                            className="form-input"
+                            placeholder="••••••••"
+                            value={password}
+                            onChange={(e) => setPassword(e.target.value)}
+                            required
+                        />
+                    </div>
+
+                    <button type="submit" className="btn btn-primary" style={{ width: '100%' }} disabled={loading}>
+                        {loading ? 'Please wait...' : (isRegister ? 'Create Account' : 'Sign In')}
+                    </button>
+                </form>
+
+                <p className="auth-switch">
+                    {isRegister ? 'Already have an account? ' : "Don't have an account? "}
+                    <a href="#" onClick={(e) => { e.preventDefault(); setIsRegister(!isRegister); setError(''); }}>
+                        {isRegister ? 'Sign In' : 'Create one'}
+                    </a>
+                </p>
+
+                <div style={{ marginTop: '2rem', padding: '1rem', background: 'var(--bg-card)', borderRadius: '8px' }}>
+                    <p style={{ fontSize: '0.8rem', color: 'var(--text-secondary)', marginBottom: '0.5rem' }}>Test Accounts (password: password123)</p>
+                    <p style={{ fontSize: '0.8rem' }}>admin@example.com • mod@example.com • user@example.com</p>
+                </div>
+            </div>
+        </div>
+    );
+}

package/frontend/src/pages/Permissions.jsx

@@ -0,0 +1,150 @@
+import { useState, useEffect } from 'react';
+import { useApi } from '../hooks/useApi';
+
+export default function Permissions() {
+    const api = useApi();
+    const [permissions, setPermissions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [newPerm, setNewPerm] = useState({ key: '', description: '', category: '' });
+
+    useEffect(() => {
+        loadPermissions();
+    }, []);
+
+    const loadPermissions = async () => {
+        try {
+            const res = await api.get('/permissions');
+            setPermissions(res.permissions || []);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const createPermission = async (e) => {
+        e.preventDefault();
+        try {
+            await api.post('/permissions', newPerm);
+            setNewPerm({ key: '', description: '', category: '' });
+            loadPermissions();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const deletePermission = async (key) => {
+        if (!confirm(`Delete permission "${key}"?`)) return;
+        try {
+            await api.delete(`/permissions/${key}`);
+            loadPermissions();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    // Group by category
+    const grouped = permissions.reduce((acc, perm) => {
+        const cat = perm.category || 'Other';
+        if (!acc[cat]) acc[cat] = [];
+        acc[cat].push(perm);
+        return acc;
+    }, {});
+
+    return (
+        <div>
+            <div className="page-header">
+                <div>
+                    <h1 className="page-title">Permissions</h1>
+                    <p className="page-subtitle">Manage available permissions</p>
+                </div>
+            </div>
+
+            {error && <div className="message message-error">{error}</div>}
+
+            <div className="card" style={{ marginBottom: '1.5rem' }}>
+                <div className="card-header">
+                    <h3 className="card-title">Create Permission</h3>
+                </div>
+                <div className="card-body">
+                    <form onSubmit={createPermission} style={{ display: 'flex', gap: '1rem', flexWrap: 'wrap' }}>
+                        <div style={{ flex: '2', minWidth: '200px' }}>
+                            <label className="form-label">Key</label>
+                            <input
+                                type="text"
+                                className="form-input"
+                                placeholder="e.g. posts.create"
+                                value={newPerm.key}
+                                onChange={(e) => setNewPerm({ ...newPerm, key: e.target.value })}
+                                required
+                            />
+                        </div>
+                        <div style={{ flex: '2', minWidth: '200px' }}>
+                            <label className="form-label">Description</label>
+                            <input
+                                type="text"
+                                className="form-input"
+                                placeholder="Optional description"
+                                value={newPerm.description}
+                                onChange={(e) => setNewPerm({ ...newPerm, description: e.target.value })}
+                            />
+                        </div>
+                        <div style={{ flex: '1', minWidth: '150px' }}>
+                            <label className="form-label">Category</label>
+                            <input
+                                type="text"
+                                className="form-input"
+                                placeholder="e.g. posts"
+                                value={newPerm.category}
+                                onChange={(e) => setNewPerm({ ...newPerm, category: e.target.value })}
+                            />
+                        </div>
+                        <div style={{ display: 'flex', alignItems: 'flex-end' }}>
+                            <button type="submit" className="btn btn-primary">Create</button>
+                        </div>
+                    </form>
+                </div>
+            </div>
+
+            {loading ? (
+                <div className="loading"><div className="spinner"></div></div>
+            ) : (
+                Object.entries(grouped).map(([category, perms]) => (
+                    <div key={category} className="card" style={{ marginBottom: '1rem' }}>
+                        <div className="card-header">
+                            <h3 className="card-title">{category}</h3>
+                            <span className="badge badge-primary">{perms.length} permissions</span>
+                        </div>
+                        <div className="card-body">
+                            <div className="permission-grid">
+                                {perms.map(perm => (
+                                    <div key={perm.id} className="permission-item">
+                                        <div>
+                                            <div className="permission-key">{perm.key}</div>
+                                            <div className="permission-desc">{perm.description || 'No description'}</div>
+                                        </div>
+                                        <button
+                                            className="btn btn-danger btn-sm"
+                                            onClick={() => deletePermission(perm.key)}
+                                        >
+                                            ✕
+                                        </button>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+                ))
+            )}
+
+            {!loading && permissions.length === 0 && (
+                <div className="card">
+                    <div className="card-body">
+                        <p className="empty-state">No permissions yet. Create one above!</p>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}

package/frontend/src/pages/Roles.jsx

@@ -0,0 +1,263 @@
+import { useState, useEffect } from 'react';
+import { useApi } from '../hooks/useApi';
+
+export default function Roles() {
+    const api = useApi();
+    const [roles, setRoles] = useState([]);
+    const [permissions, setPermissions] = useState([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState('');
+    const [selectedRole, setSelectedRole] = useState(null);
+    const [roleDetails, setRoleDetails] = useState(null);
+
+    // New role form
+    const [newRole, setNewRole] = useState({ name: '', description: '', priority: 0 });
+    const [newPermKey, setNewPermKey] = useState('');
+
+    useEffect(() => {
+        loadData();
+    }, []);
+
+    useEffect(() => {
+        if (selectedRole) {
+            loadRoleDetails(selectedRole.id);
+        }
+    }, [selectedRole]);
+
+    const loadData = async () => {
+        try {
+            const [rolesRes, permsRes] = await Promise.all([
+                api.get('/roles'),
+                api.get('/permissions'),
+            ]);
+            setRoles(rolesRes.roles || []);
+            setPermissions(permsRes.permissions || []);
+        } catch (err) {
+            setError(err.message);
+        } finally {
+            setLoading(false);
+        }
+    };
+
+    const loadRoleDetails = async (roleId) => {
+        try {
+            const details = await api.get(`/roles/${roleId}`);
+            setRoleDetails(details);
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const createRole = async (e) => {
+        e.preventDefault();
+        try {
+            await api.post('/roles', newRole);
+            setNewRole({ name: '', description: '', priority: 0 });
+            loadData();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const assignPermission = async () => {
+        if (!selectedRole || !newPermKey) return;
+        try {
+            await api.post(`/roles/${selectedRole.id}/permissions`, { permissionKey: newPermKey });
+            setNewPermKey('');
+            loadRoleDetails(selectedRole.id);
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const removePermission = async (permKey) => {
+        if (!selectedRole) return;
+        try {
+            await api.delete(`/roles/${selectedRole.id}/permissions/${permKey}`);
+            loadRoleDetails(selectedRole.id);
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    const deleteRole = async (roleId) => {
+        if (!confirm('Are you sure you want to delete this role?')) return;
+        try {
+            await api.delete(`/roles/${roleId}`);
+            setSelectedRole(null);
+            setRoleDetails(null);
+            loadData();
+        } catch (err) {
+            setError(err.message);
+        }
+    };
+
+    return (
+        <div>
+            <div className="page-header">
+                <div>
+                    <h1 className="page-title">Roles</h1>
+                    <p className="page-subtitle">Manage roles and their permissions</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>
+                        <div className="card" style={{ marginBottom: '1.5rem' }}>
+                            <div className="card-header">
+                                <h3 className="card-title">Create Role</h3>
+                            </div>
+                            <div className="card-body">
+                                <form onSubmit={createRole}>
+                                    <div className="form-group">
+                                        <label className="form-label">Name</label>
+                                        <input
+                                            type="text"
+                                            className="form-input"
+                                            placeholder="e.g. editor"
+                                            value={newRole.name}
+                                            onChange={(e) => setNewRole({ ...newRole, name: e.target.value })}
+                                            required
+                                        />
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">Description</label>
+                                        <input
+                                            type="text"
+                                            className="form-input"
+                                            placeholder="Optional description"
+                                            value={newRole.description}
+                                            onChange={(e) => setNewRole({ ...newRole, description: e.target.value })}
+                                        />
+                                    </div>
+                                    <div className="form-group">
+                                        <label className="form-label">Priority</label>
+                                        <input
+                                            type="number"
+                                            className="form-input"
+                                            value={newRole.priority}
+                                            onChange={(e) => setNewRole({ ...newRole, priority: parseInt(e.target.value) || 0 })}
+                                        />
+                                    </div>
+                                    <button type="submit" className="btn btn-primary">Create Role</button>
+                                </form>
+                            </div>
+                        </div>
+
+                        <div className="card">
+                            <div className="card-header">
+                                <h3 className="card-title">All Roles</h3>
+                            </div>
+                            <div className="card-body">
+                                {roles.map(role => (
+                                    <div
+                                        key={role.id}
+                                        onClick={() => setSelectedRole(role)}
+                                        style={{
+                                            padding: '1rem',
+                                            marginBottom: '0.5rem',
+                                            background: selectedRole?.id === role.id ? 'var(--accent)' : 'var(--bg-card)',
+                                            borderRadius: '8px',
+                                            cursor: 'pointer',
+                                            display: 'flex',
+                                            justifyContent: 'space-between',
+                                            alignItems: 'center',
+                                        }}
+                                    >
+                                        <div>
+                                            <strong>{role.name}</strong>
+                                            <span className="badge badge-primary" style={{ marginLeft: '0.5rem' }}>
+                                                Priority: {role.priority}
+                                            </span>
+                                            {role.isDefault && <span className="badge badge-success" style={{ marginLeft: '0.25rem' }}>Default</span>}
+                                        </div>
+                                    </div>
+                                ))}
+                            </div>
+                        </div>
+                    </div>
+
+                    <div className="card">
+                        <div className="card-header">
+                            <h3 className="card-title">
+                                {selectedRole ? `Role: ${selectedRole.name}` : 'Select a role'}
+                            </h3>
+                            {selectedRole && (
+                                <button className="btn btn-danger btn-sm" onClick={() => deleteRole(selectedRole.id)}>
+                                    Delete
+                                </button>
+                            )}
+                        </div>
+                        <div className="card-body">
+                            {selectedRole && roleDetails ? (
+                                <>
+                                    <div className="form-group">
+                                        <label className="form-label">Assign Permission</label>
+                                        <div style={{ display: 'flex', gap: '0.5rem' }}>
+                                            <select
+                                                className="form-input"
+                                                value={newPermKey}
+                                                onChange={(e) => setNewPermKey(e.target.value)}
+                                            >
+                                                <option value="">Select permission...</option>
+                                                <option value="*">* (All permissions)</option>
+                                                {permissions.map(perm => (
+                                                    <option key={perm.id} value={perm.key}>{perm.key}</option>
+                                                ))}
+                                            </select>
+                                            <button className="btn btn-primary" onClick={assignPermission}>Assign</button>
+                                        </div>
+                                    </div>
+
+                                    <div style={{ marginTop: '1.5rem' }}>
+                                        <label className="form-label">Current Permissions</label>
+                                        {roleDetails.permissions?.length > 0 ? (
+                                            <div className="permission-grid">
+                                                {roleDetails.permissions.map(perm => (
+                                                    <div key={perm.id} className="permission-item">
+                                                        <div>
+                                                            <div className="permission-key">{perm.key}</div>
+                                                            <span className={`badge ${perm.granted ? 'badge-success' : 'badge-danger'}`}>
+                                                                {perm.granted ? 'Granted' : 'Denied'}
+                                                            </span>
+                                                        </div>
+                                                        <button
+                                                            className="btn btn-danger btn-sm"
+                                                            onClick={() => removePermission(perm.key)}
+                                                        >
+                                                            ✕
+                                                        </button>
+                                                    </div>
+                                                ))}
+                                            </div>
+                                        ) : (
+                                            <p style={{ color: 'var(--text-secondary)' }}>No permissions assigned</p>
+                                        )}
+                                    </div>
+
+                                    {roleDetails.inheritsFrom?.length > 0 && (
+                                        <div style={{ marginTop: '1.5rem' }}>
+                                            <label className="form-label">Inherits From</label>
+                                            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap' }}>
+                                                {roleDetails.inheritsFrom.map(r => (
+                                                    <span key={r.id} className="badge badge-primary">{r.name}</span>
+                                                ))}
+                                            </div>
+                                        </div>
+                                    )}
+                                </>
+                            ) : (
+                                <p className="empty-state">Select a role from the list</p>
+                            )}
+                        </div>
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+}