@checkstack/auth-frontend 0.1.0 → 0.3.0

package/src/components/RoleDialog.tsx

@@ -19,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>;
 }
 
@@ -40,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);
 
@@ -55,49 +55,45 @@ 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 () => {
+  const handleSave = () => {
     setSaving(true);
-    try {
-      await onSave({
-        ...(isEditing && { id: role.id }),
-        name,
-        description: description || undefined,
-        permissions: [...selectedPermissions],
-      });
-      onOpenChange(false);
-    } catch (error) {
-      console.error("Failed to save role:", error);
-    } finally {
-      setSaving(false);
-    }
+    onSave({
+      ...(isEditing && { id: role.id }),
+      name,
+      description: description || undefined,
+      accessRules: [...selectedAccessRules],
+    });
+    // Dialog closing and saving state are managed by the parent via onDataChange callback
+    onOpenChange(false);
+    setSaving(false);
   };
 
   let buttonText = "Create";
@@ -114,8 +110,8 @@ export const RoleDialog: React.FC<RoleDialogProps> = ({
           <DialogTitle>{isEditing ? "Edit Role" : "Create Role"}</DialogTitle>
           <DialogDescription className="sr-only">
             {isEditing
-              ? "Modify the settings and permissions for this role"
-              : "Create a new role with specific permissions"}
+              ? "Modify the settings and access rules for this role"
+              : "Create a new role with specific access rules"}
           </DialogDescription>
         </DialogHeader>
 
@@ -141,23 +137,23 @@ 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.
-                  These cannot be modified.
+                  The administrator role has wildcard access to all access
+                  rules. These cannot be modified.
                 </AlertDescription>
               </Alert>
             )}
             {!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>
@@ -165,10 +161,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">
@@ -177,7 +173,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
@@ -187,15 +183,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}
@@ -239,7 +235,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}
@@ -247,9 +243,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

@@ -16,15 +16,14 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { Plus, Edit, Trash2 } from "lucide-react";
-import { useApi } from "@checkstack/frontend-api";
-import { rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } 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 +34,7 @@ export interface RolesTabProps {
 
 export const RolesTab: React.FC<RolesTabProps> = ({
   roles,
-  permissions,
+  accessRulesList,
   userRoleIds,
   canReadRoles,
   canCreateRoles,
@@ -43,14 +42,51 @@ export const RolesTab: React.FC<RolesTabProps> = ({
   canDeleteRoles,
   onDataChange,
 }) => {
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const toast = useToast();
 
   const [roleToDelete, setRoleToDelete] = useState<string>();
   const [roleDialogOpen, setRoleDialogOpen] = useState(false);
   const [editingRole, setEditingRole] = useState<Role | undefined>();
 
+  // Mutations
+  const createRoleMutation = authClient.createRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role created successfully");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to create role"
+      );
+    },
+  });
+
+  const updateRoleMutation = authClient.updateRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role updated successfully");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update role"
+      );
+    },
+  });
+
+  const deleteRoleMutation = authClient.deleteRole.useMutation({
+    onSuccess: () => {
+      toast.success("Role deleted successfully");
+      setRoleToDelete(undefined);
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to delete role"
+      );
+    },
+  });
+
   const handleCreateRole = () => {
     setEditingRole(undefined);
     setRoleDialogOpen(true);
@@ -65,46 +101,23 @@ export const RolesTab: React.FC<RolesTabProps> = ({
     id?: string;
     name: string;
     description?: string;
-    permissions: string[];
+    accessRules: string[];
   }) => {
-    try {
-      if (params.id) {
-        await authClient.updateRole({
-          id: params.id,
-          name: params.name,
-          description: params.description,
-          permissions: params.permissions,
-        });
-        toast.success("Role updated successfully");
-      } else {
-        await authClient.createRole({
-          name: params.name,
-          description: params.description,
-          permissions: params.permissions,
-        });
-        toast.success("Role created successfully");
-      }
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to save role"
-      );
-      throw error;
-    }
+    await (params.id ? updateRoleMutation.mutateAsync({
+        id: params.id,
+        name: params.name,
+        description: params.description,
+        accessRules: params.accessRules,
+      }) : createRoleMutation.mutateAsync({
+        name: params.name,
+        description: params.description,
+        accessRules: params.accessRules,
+      }));
   };
 
-  const handleDeleteRole = async () => {
+  const handleDeleteRole = () => {
     if (!roleToDelete) return;
-    try {
-      await authClient.deleteRole(roleToDelete);
-      toast.success("Role deleted successfully");
-      setRoleToDelete(undefined);
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error ? error.message : "Failed to delete role"
-      );
-    }
+    deleteRoleMutation.mutate(roleToDelete);
   };
 
   return (
@@ -128,7 +141,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 +172,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 +205,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 +215,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

@@ -15,8 +15,7 @@ import {
   useToast,
 } from "@checkstack/ui";
 import { Shield, RefreshCw } from "lucide-react";
-import { useApi } from "@checkstack/frontend-api";
-import { rpcApiRef } from "@checkstack/frontend-api";
+import { usePluginClient } from "@checkstack/frontend-api";
 import { AuthApi } from "@checkstack/auth-common";
 import type { AuthStrategy } from "../api";
 import { AuthStrategyCard } from "./AuthStrategyCard";
@@ -34,8 +33,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
   canManageRegistration,
   onDataChange,
 }) => {
-  const rpcApi = useApi(rpcApiRef);
-  const authClient = rpcApi.forPlugin(AuthApi);
+  const authClient = usePluginClient(AuthApi);
   const toast = useToast();
 
   const [reloading, setReloading] = useState(false);
@@ -45,14 +43,9 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
   >({});
 
   // Registration state
-  const [registrationSchema, setRegistrationSchema] = useState<
-    Record<string, unknown> | undefined
-  >();
   const [registrationSettings, setRegistrationSettings] = useState<{
     allowRegistration: boolean;
   }>({ allowRegistration: true });
-  const [loadingRegistration, setLoadingRegistration] = useState(true);
-  const [savingRegistration, setSavingRegistration] = useState(false);
   const [registrationValid, setRegistrationValid] = useState(true);
 
   // Initialize strategy configs when strategies change
@@ -64,104 +57,101 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
     setStrategyConfigs(configs);
   }, [strategies]);
 
-  // Fetch registration data when we have permission
+  // Query: Registration schema (admin only)
+  const { data: registrationSchema, isLoading: schemaLoading } =
+    authClient.getRegistrationSchema.useQuery(
+      {},
+      { enabled: canManageRegistration }
+    );
+
+  // Query: Registration status (admin only)
+  const { data: registrationStatus, isLoading: statusLoading } =
+    authClient.getRegistrationStatus.useQuery(
+      {},
+      { enabled: canManageRegistration }
+    );
+
+  // Sync fetched settings to local state
   useEffect(() => {
-    if (!canManageRegistration) {
-      setLoadingRegistration(false);
-      return;
+    if (registrationStatus) {
+      setRegistrationSettings(registrationStatus);
     }
+  }, [registrationStatus]);
 
-    const fetchRegistrationData = async () => {
-      setLoadingRegistration(true);
-      try {
-        const [schema, status] = await Promise.all([
-          authClient.getRegistrationSchema(),
-          authClient.getRegistrationStatus(),
-        ]);
-        setRegistrationSchema(schema);
-        setRegistrationSettings(status);
-      } catch (error) {
-        console.error("Failed to fetch registration data:", error);
-      } finally {
-        setLoadingRegistration(false);
-      }
-    };
-    fetchRegistrationData();
-  }, [canManageRegistration, authClient]);
+  const loadingRegistration = schemaLoading || statusLoading;
+
+  // Mutations
+  const updateStrategyMutation = authClient.updateStrategy.useMutation({
+    onSuccess: () => {
+      toast.success("Strategy updated");
+      void onDataChange();
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to update strategy"
+      );
+    },
+  });
+
+  const setRegistrationMutation = authClient.setRegistrationStatus.useMutation({
+    onSuccess: () => {
+      toast.success("Registration settings saved");
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to save settings"
+      );
+    },
+  });
+
+  const reloadAuthMutation = authClient.reloadAuth.useMutation({
+    onSuccess: () => {
+      toast.success("Authentication system reloaded");
+      void onDataChange();
+      setReloading(false);
+    },
+    onError: (error) => {
+      toast.error(
+        error instanceof Error ? error.message : "Failed to reload auth"
+      );
+      setReloading(false);
+    },
+  });
 
   const handleToggleStrategy = async (strategyId: string, enabled: boolean) => {
-    try {
-      await authClient.updateStrategy({ id: strategyId, enabled });
-      await onDataChange();
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error ? error.message : "Failed to toggle strategy";
-      toast.error(message);
-    }
+    await updateStrategyMutation.mutateAsync({ id: strategyId, enabled });
   };
 
   const handleSaveStrategyConfig = async (
     strategyId: string,
     config: Record<string, unknown>
   ) => {
-    try {
-      const strategy = strategies.find((s) => s.id === strategyId);
-      if (!strategy) {
-        toast.error("Strategy not found");
-        return;
-      }
-      setStrategyConfigs({
-        ...strategyConfigs,
-        [strategyId]: config,
-      });
-      await authClient.updateStrategy({
-        id: strategyId,
-        enabled: strategy.enabled,
-        config,
-      });
-      toast.success(
-        "Configuration saved successfully! Click 'Reload Authentication' to apply changes."
-      );
-    } catch (error: unknown) {
-      const message =
-        error instanceof Error
-          ? error.message
-          : "Failed to save strategy configuration";
-      toast.error(message);
+    const strategy = strategies.find((s) => s.id === strategyId);
+    if (!strategy) {
+      toast.error("Strategy not found");
+      return;
     }
+    setStrategyConfigs({
+      ...strategyConfigs,
+      [strategyId]: config,
+    });
+    await updateStrategyMutation.mutateAsync({
+      id: strategyId,
+      enabled: strategy.enabled,
+      config,
+    });
+    toast.success(
+      "Configuration saved successfully! Click 'Reload Authentication' to apply changes."
+    );
   };
 
-  const handleSaveRegistration = async () => {
-    setSavingRegistration(true);
-    try {
-      await authClient.setRegistrationStatus(registrationSettings);
-      toast.success("Registration settings saved successfully");
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to save registration settings"
-      );
-    } finally {
-      setSavingRegistration(false);
-    }
+  const handleSaveRegistration = () => {
+    setRegistrationMutation.mutate(registrationSettings);
   };
 
-  const handleReloadAuth = async () => {
+  const handleReloadAuth = () => {
     setReloading(true);
-    try {
-      await authClient.reloadAuth();
-      toast.success("Authentication system reloaded successfully");
-      await onDataChange();
-    } catch (error: unknown) {
-      toast.error(
-        error instanceof Error
-          ? error.message
-          : "Failed to reload authentication"
-      );
-    } finally {
-      setReloading(false);
-    }
+    reloadAuthMutation.mutate({});
   };
 
   const enabledStrategies = strategies.filter((s) => s.enabled);
@@ -183,7 +173,7 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
             ) : registrationSchema ? (
               <div className="space-y-4">
                 <DynamicForm
-                  schema={registrationSchema}
+                  schema={registrationSchema as Record<string, unknown>}
                   value={registrationSettings}
                   onChange={(value) =>
                     setRegistrationSettings(
@@ -193,10 +183,14 @@ export const StrategiesTab: React.FC<StrategiesTabProps> = ({
                   onValidChange={setRegistrationValid}
                 />
                 <Button
-                  onClick={() => void handleSaveRegistration()}
-                  disabled={savingRegistration || !registrationValid}
+                  onClick={handleSaveRegistration}
+                  disabled={
+                    setRegistrationMutation.isPending || !registrationValid
+                  }
                 >
-                  {savingRegistration ? "Saving..." : "Save Settings"}
+                  {setRegistrationMutation.isPending
+                    ? "Saving..."
+                    : "Save Settings"}
                 </Button>
               </div>
             ) : (
@@ -206,7 +200,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 +262,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>