@checkstack/auth-frontend 0.0.4 → 0.2.0

package/src/components/RoleDialog.tsx

@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import {
   Dialog,
   DialogContent,
+  DialogDescription,
   DialogHeader,
   DialogTitle,
   DialogFooter,
@@ -18,20 +19,20 @@ import {
   AlertDescription,
 } from "@checkstack/ui";
 import { Check } from "lucide-react";
-import type { Role, Permission } from "../api";
+import type { Role, AccessRuleEntry } from "../api";
 
 interface RoleDialogProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   role?: Role;
-  permissions: Permission[];
-  /** Whether current user has this role (prevents permission elevation) */
+  accessRulesList: AccessRuleEntry[];
+  /** Whether current user has this role (prevents access elevation) */
   isUserRole?: boolean;
   onSave: (params: {
     id?: string;
     name: string;
     description?: string;
-    permissions: string[];
+    accessRules: string[];
   }) => Promise<void>;
 }
 
@@ -39,14 +40,14 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
   open,
   onOpenChange,
   role,
-  permissions,
+  accessRulesList,
   isUserRole = false,
   onSave,
 }) => {
   const [name, setName] = useState(role?.name || "");
   const [description, setDescription] = useState(role?.description || "");
-  const [selectedPermissions, setSelectedPermissions] = useState<Set<string>>(
-    new Set(role?.permissions || [])
+  const [selectedAccessRules, setSelectedAccessRules] = useState<Set<string>>(
+    new Set(role?.accessRules || [])
   );
   const [saving, setSaving] = useState(false);
 
@@ -54,32 +55,32 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
   React.useEffect(() => {
     setName(role?.name || "");
     setDescription(role?.description || "");
-    setSelectedPermissions(new Set(role?.permissions || []));
+    setSelectedAccessRules(new Set(role?.accessRules || []));
   }, [role]);
 
   const isEditing = !!role;
   const isAdminRole = role?.id === "admin";
-  // Disable permissions for admin (wildcard) or user's own roles (prevent elevation)
-  const permissionsDisabled = isAdminRole || isUserRole;
+  // Disable access rules for admin (wildcard) or user's own roles (prevent elevation)
+  const accessRulesDisabled = isAdminRole || isUserRole;
 
-  // Group permissions by plugin
-  const permissionsByPlugin: Record<string, Permission[]> = {};
-  for (const perm of permissions) {
+  // Group access rules by plugin
+  const accessRulesByPlugin: Record<string, AccessRuleEntry[]> = {};
+  for (const perm of accessRulesList) {
     const [plugin] = perm.id.split(".");
-    if (!permissionsByPlugin[plugin]) {
-      permissionsByPlugin[plugin] = [];
+    if (!accessRulesByPlugin[plugin]) {
+      accessRulesByPlugin[plugin] = [];
     }
-    permissionsByPlugin[plugin].push(perm);
+    accessRulesByPlugin[plugin].push(perm);
   }
 
-  const handleTogglePermission = (permissionId: string) => {
-    const newSelected = new Set(selectedPermissions);
-    if (newSelected.has(permissionId)) {
-      newSelected.delete(permissionId);
+  const handleToggleAccessRule = (accessRuleId: string) => {
+    const newSelected = new Set(selectedAccessRules);
+    if (newSelected.has(accessRuleId)) {
+      newSelected.delete(accessRuleId);
     } else {
-      newSelected.add(permissionId);
+      newSelected.add(accessRuleId);
     }
-    setSelectedPermissions(newSelected);
+    setSelectedAccessRules(newSelected);
   };
 
   const handleSave = async () => {
@@ -89,7 +90,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
         ...(isEditing && { id: role.id }),
         name,
         description: description || undefined,
-        permissions: [...selectedPermissions],
+        accessRules: [...selectedAccessRules],
       });
       onOpenChange(false);
     } catch (error) {
@@ -111,6 +112,11 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
       <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
         <DialogHeader>
           <DialogTitle>{isEditing ? "Edit Role" : "Create Role"}</DialogTitle>
+          <DialogDescription className="sr-only">
+            {isEditing
+              ? "Modify the settings and access rules for this role"
+              : "Create a new role with specific access rules"}
+          </DialogDescription>
         </DialogHeader>
 
         <div className="space-y-4">
@@ -135,15 +141,15 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
           </div>
 
           <div>
-            <Label className="text-base">Permissions</Label>
+            <Label className="text-base">Access Rules</Label>
             <p className="text-sm text-muted-foreground mt-1 mb-3">
-              Select permissions to grant to this role. Permissions are
+              Select access rules to grant to this role. Access rules are
               organized by plugin.
             </p>
             {isAdminRole && (
               <Alert variant="info" className="mb-3">
                 <AlertDescription>
-                  The administrator role has wildcard access to all permissions.
+                  The administrator role has wildcard access to all access rules.
                   These cannot be modified.
                 </AlertDescription>
               </Alert>
@@ -151,7 +157,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
             {!isAdminRole && isUserRole && (
               <Alert variant="info" className="mb-3">
                 <AlertDescription>
-                  You cannot modify permissions for a role you currently have.
+                  You cannot modify access rules for a role you currently have.
                   This prevents accidental self-lockout from the system.
                 </AlertDescription>
               </Alert>
@@ -159,10 +165,10 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
             <div className="border rounded-lg">
               <Accordion
                 type="multiple"
-                defaultValue={Object.keys(permissionsByPlugin)}
+                defaultValue={Object.keys(accessRulesByPlugin)}
                 className="w-full"
               >
-                {Object.entries(permissionsByPlugin).map(([plugin, perms]) => (
+                {Object.entries(accessRulesByPlugin).map(([plugin, perms]) => (
                   <AccordionItem key={plugin} value={plugin}>
                     <AccordionTrigger className="px-4 hover:no-underline">
                       <div className="flex items-center justify-between flex-1 pr-2">
@@ -171,7 +177,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                         </span>
                         <span className="text-xs text-muted-foreground">
                           {
-                            perms.filter((p) => selectedPermissions.has(p.id))
+                            perms.filter((p) => selectedAccessRules.has(p.id))
                               .length
                           }{" "}
                           / {perms.length} selected
@@ -181,15 +187,15 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                     <AccordionContent className="px-4">
                       <div
                         className={`space-y-${
-                          permissionsDisabled ? "2" : "3"
+                          accessRulesDisabled ? "2" : "3"
                         } pt-2`}
                       >
                         {perms.map((perm) => {
                           const isAssigned =
-                            isAdminRole || selectedPermissions.has(perm.id);
+                            isAdminRole || selectedAccessRules.has(perm.id);
 
-                          // Use view-style design when permissions are disabled
-                          if (permissionsDisabled) {
+                          // Use view-style design when access rules are disabled
+                          if (accessRulesDisabled) {
                             return (
                               <div
                                 key={perm.id}
@@ -233,7 +239,7 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                             );
                           }
 
-                          // Use editable checkbox design when permissions are editable
+                          // Use editable checkbox design when access rules are editable
                           return (
                             <div
                               key={perm.id}
@@ -241,9 +247,9 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
                             >
                               <Checkbox
                                 id={`perm-${perm.id}`}
-                                checked={selectedPermissions.has(perm.id)}
+                                checked={selectedAccessRules.has(perm.id)}
                                 onCheckedChange={() =>
-                                  handleTogglePermission(perm.id)
+                                  handleToggleAccessRule(perm.id)
                                 }
                                 className="mt-0.5"
                               />

package/src/components/RolesTab.tsx

@@ -19,12 +19,12 @@ import { Plus, Edit, Trash2 } from "lucide-react";
 import { useApi } from "@checkstack/frontend-api";
 import { rpcApiRef } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
-import type { Role, Permission } from "../api";
+import type { Role, AccessRuleEntry } from "../api";
 import { RoleDialog } from "./RoleDialog";
 
 export interface RolesTabProps {
   roles: Role[];
-  permissions: Permission[];
+  accessRulesList: AccessRuleEntry[];
   userRoleIds: string[];
   canReadRoles: boolean;
   canCreateRoles: boolean;
@@ -35,7 +35,7 @@ export interface RolesTabProps {
 
 export const RolesTab: React.FC<RolesTabProps> = ({
   roles,
-  permissions,
+  accessRulesList,
   userRoleIds,
   canReadRoles,
   canCreateRoles,
@@ -65,7 +65,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     id?: string;
     name: string;
     description?: string;
-    permissions: string[];
+    accessRules: string[];
   }) => {
     try {
       if (params.id) {
@@ -73,14 +73,14 @@ export const RolesTab: React.FC<RolesTabProps> = ({
           id: params.id,
           name: params.name,
           description: params.description,
-          permissions: params.permissions,
+          accessRules: params.accessRules,
         });
         toast.success("Role updated successfully");
       } else {
         await authClient.createRole({
           name: params.name,
           description: params.description,
-          permissions: params.permissions,
+          accessRules: params.accessRules,
         });
         toast.success("Role created successfully");
       }
@@ -128,7 +128,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
                 <TableHeader>
                   <TableRow>
                     <TableHead>Role</TableHead>
-                    <TableHead>Permissions</TableHead>
+                    <TableHead>Access Rules</TableHead>
                     <TableHead className="text-right">Actions</TableHead>
                   </TableRow>
                 </TableHeader>
@@ -159,7 +159,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
                         </TableCell>
                         <TableCell>
                           <span className="text-sm text-muted-foreground">
-                            {role.permissions?.length || 0} permissions
+                            {role.accessRules?.length || 0} access rules
                           </span>
                         </TableCell>
                         <TableCell className="text-right">
@@ -192,7 +192,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
             )
           ) : (
             <p className="text-muted-foreground">
-              You don't have permission to view roles.
+              You don't have access to view roles.
             </p>
           )}
         </CardContent>
@@ -202,7 +202,7 @@ export const RolesTab: React.FC<RolesTabProps> = ({
         open={roleDialogOpen}
         onOpenChange={setRoleDialogOpen}
         role={editingRole}
-        permissions={permissions}
+        accessRulesList={accessRulesList}
         isUserRole={editingRole ? userRoleIds.includes(editingRole.id) : false}
         onSave={handleSaveRole}
       />

package/src/components/StrategiesTab.tsx

@@ -64,7 +64,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
     setStrategyConfigs(configs);
   }, [strategies]);
 
-  // Fetch registration data when we have permission
+  // Fetch registration data when we have access
   useEffect(() => {
     if (!canManageRegistration) {
       setLoadingRegistration(false);
@@ -206,7 +206,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
             )
           ) : (
             <p className="text-sm text-muted-foreground">
-              You don't have permission to manage registration settings.
+              You don't have access to manage registration settings.
             </p>
           )}
         </CardContent>
@@ -268,7 +268,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
 
       {!canManageStrategies && (
         <p className="text-xs text-muted-foreground mt-4">
-          You don't have permission to manage strategies.
+          You don't have access to manage strategies.
         </p>
       )}
     </div>