import React, { useState, useEffect } from "react" import { useFireproof } from "use-fireproof" export default function App() { const { useDocument, useLiveQuery, database } = useFireproof("access-control-system") const [currentView, setCurrentView] = useState("login") const [currentUser, setCurrentUser] = useState(null) const [error, setError] = useState("") const [success, setSuccess] = useState("") // Login form const { doc: loginData, merge: mergeLogin } = useDocument({ email: "", password: "" }) // Registration form const { doc: registerData, merge: mergeRegister } = useDocument({ fullName: "", email: "", organization: "", role: "user", password: "", confirmPassword: "" }) // Query all users const { docs: users } = useLiveQuery("type", { key: "user" }) // Role-based access control definitions const roles = { admin: { name: "Administrator", description: "Full system access with user management capabilities", permissions: ["view_all", "edit_all", "delete_all", "manage_users", "view_analytics", "export_data"], color: "#ef4444" }, manager: { name: "Security Manager", description: "Manage security posture and review incidents", permissions: ["view_all", "edit_security", "view_analytics", "export_data"], color: "#f59e0b" }, analyst: { name: "Security Analyst", description: "Monitor threats and document evidence", permissions: ["view_all", "edit_incidents", "view_analytics"], color: "#3b82f6" }, user: { name: "Standard User", description: "Basic access to personal security management", permissions: ["view_own", "edit_own"], color: "#10b981" }, viewer: { name: "Read-Only Viewer", description: "View-only access for auditing purposes", permissions: ["view_own"], color: "#64748b" } } // Check for existing session on mount useEffect(() => { const sessionData = localStorage.getItem("acs_session") if (sessionData) { try { const session = JSON.parse(sessionData) const user = users.find(u => u._id === session.userId) if (user && session.expires > Date.now()) { setCurrentUser(user) } else { localStorage.removeItem("acs_session") } } catch (e) { localStorage.removeItem("acs_session") } } }, [users]) const handleLogin = async (e) => { e.preventDefault() setError("") setSuccess("") if (!loginData.email || !loginData.password) { setError("Please enter both email and password") return } // Find user by email const user = users.find(u => u.email.toLowerCase() === loginData.email.toLowerCase()) if (!user) { setError("Invalid credentials. Please check your email and password.") return } if (user.accountStatus === "suspended") { setError("Your account has been suspended. Please contact an administrator.") return } if (user.accountStatus === "pending") { setError("Your account is pending approval. Please wait for administrator confirmation.") return } // In production, use proper password hashing (bcrypt, argon2) if (user.password !== loginData.password) { setError("Invalid credentials. Please check your email and password.") return } // Update last login await database.put({ ...user, lastLogin: Date.now() }) // Create session const session = { userId: user._id, email: user.email, role: user.role, expires: Date.now() + (24 * 60 * 60 * 1000) // 24 hours } localStorage.setItem("acs_session", JSON.stringify(session)) setCurrentUser(user) setSuccess("Login successful! Redirecting...") } const handleRegister = async (e) => { e.preventDefault() setError("") setSuccess("") // Validation if (!registerData.fullName || !registerData.email || !registerData.password) { setError("Please fill in all required fields") return } if (registerData.password.length < 8) { setError("Password must be at least 8 characters long") return } if (registerData.password !== registerData.confirmPassword) { setError("Passwords do not match") return } // Check if email already exists const existingUser = users.find(u => u.email.toLowerCase() === registerData.email.toLowerCase()) if (existingUser) { setError("An account with this email already exists") return } // Email validation const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/ if (!emailRegex.test(registerData.email)) { setError("Please enter a valid email address") return } // Create user account - new users need admin approval for elevated roles const accountStatus = (registerData.role === "admin" || registerData.role === "manager") ? "pending" : "active" const newUser = { _id: `user:${Date.now()}`, type: "user", fullName: registerData.fullName, email: registerData.email.toLowerCase(), organization: registerData.organization || "", role: registerData.role, password: registerData.password, // In production, hash this! createdAt: Date.now(), lastLogin: null, securityScore: 0, accountStatus: accountStatus } await database.put(newUser) if (accountStatus === "pending") { setSuccess("Account created! Awaiting administrator approval for elevated access.") } else { setSuccess("Account created successfully! Please log in.") } setCurrentView("login") mergeRegister({ fullName: "", email: "", organization: "", role: "user", password: "", confirmPassword: "" }) } const handleLogout = () => { localStorage.removeItem("acs_session") setCurrentUser(null) setSuccess("Logged out successfully") } const hasPermission = (permission) => { if (!currentUser) return false const userRole = roles[currentUser.role] return userRole && userRole.permissions.includes(permission) } const updateUserRole = async (userId, newRole, newStatus) => { const user = users.find(u => u._id === userId) if (user) { await database.put({ ...user, role: newRole, accountStatus: newStatus }) setSuccess(`User role updated to ${roles[newRole].name}`) } } const deleteUser = async (userId) => { if (confirm("Are you sure you want to delete this user?")) { await database.del(userId) setSuccess("User deleted successfully") } } // If user is logged in, show dashboard if (currentUser) { const userRole = roles[currentUser.role] return (

{/* Header */}

🔐

Access Control System

Enterprise Permission Management

{userRole.name.toUpperCase()}

{/* Success Message */} {success && (

✓ {success}

)} {/* Welcome Section */}

Welcome back, {currentUser.fullName}

Account: {currentUser.email} {currentUser.organization && ( Organization: {currentUser.organization} )}

{userRole.name.toUpperCase()} Member since {new Date(currentUser.createdAt).toLocaleDateString()} {currentUser.lastLogin && ( Last login: {new Date(currentUser.lastLogin).toLocaleDateString()} )}

👤

Security Score

{currentUser.securityScore}%

{/* Role Information */}

🔑 Your Access Level

{userRole.description}

{userRole.permissions.map(perm => (

✓ {perm.replace(/_/g, ' ').replace(/\b\w/g, l => l.toUpperCase())}

))}

{/* Quick Actions - Role-based */}

{hasPermission("view_all") && ( )} {hasPermission("view_all") && ( )} {(hasPermission("view_all") || hasPermission("edit_incidents")) && ( )} {hasPermission("view_analytics") && ( )}

{/* User Management - Admin Only */} {hasPermission("manage_users") && (

👥 User Management

{users.map(user => ( ))}

User	Email	Role	Status	Actions
{user.fullName} {user.organization && ( {user.organization} )}	{user.email}	{user._id === currentUser._id ? ( {roles[user.role].name} ) : ( )}	{user._id === currentUser._id ? ( ACTIVE ) : ( )}	{user._id !== currentUser._id && ( )}

)}

) } // Login/Register View return (

{/* Background Pattern */}

{/* Logo Header */}

🔐

Access Control System

Enterprise Permission Management Platform

{/* Main Card */}

{/* Tab Switcher */}

{/* Success/Error Messages */} {error && (

⚠️ {error}

)} {success && (

✓ {success}

)} {/* Login Form */} {currentView === "login" && (

EMAIL ADDRESS mergeLogin({ email: e.target.value })} placeholder="user@organization.com" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

PASSWORD mergeLogin({ password: e.target.value })} placeholder="Enter your password" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

)} {/* Register Form */} {currentView === "register" && (

FULL NAME * mergeRegister({ fullName: e.target.value })} placeholder="John Smith" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

EMAIL ADDRESS * mergeRegister({ email: e.target.value })} placeholder="john.smith@organization.com" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

ORGANIZATION (Optional) mergeRegister({ organization: e.target.value })} placeholder="Company or institution name" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" />

REQUESTED ROLE *

Admin and Manager roles require approval. Standard User and Viewer accounts are activated immediately.

PASSWORD * mergeRegister({ password: e.target.value })} placeholder="Minimum 8 characters" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

CONFIRM PASSWORD * mergeRegister({ confirmPassword: e.target.value })} placeholder="Re-enter your password" className="w-full p-3 border-4 border-[#0f172a] font-medium text-[#0f172a] focus:outline-none focus:border-[#3b82f6]" required />

By creating an account, you agree to our Terms of Service and Privacy Policy. Your data is encrypted and stored locally on your device.

)}

{/* Footer */}

Secure • Encrypted • Private

All data is stored locally and encrypted end-to-end

) }

Access Control System

Welcome back, {currentUser.fullName}

🔑 Your Access Level

Access Dashboard

Activity Monitor

Audit Logs

Analytics

👥 User Management

Access Control System